Tabelle verrutscht - Website in phpbb.
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
code
datei
design
erkennen
formatierung
forum
gedanke
grundstruktur
lauf
liegen
machen
navigation
ordnung
schlauch
stimmen
tabelle
tag
url
versuchen
-
Hallo ihr Lieben,
bereits seit 2 Tagen versuche ich meine Website in mein Forum zu integrieren, sodass es aussieht als wäre das Forum in die Website integriert.
Die Navigation funktioniert über Photoshop Slices und hat zudem einen Mouseovereffekt.
An sich funktioniert alles einwandfrei (habe mein Design in die overall_header Datei eingefügt), jedoch verrutscht mir meine Tabelle.
Ich musste von meiner "Haupt-index" Datei lediglich die Links zu den Bildern der Tabelle ändern (vom Pfad zu einem richtigem Link) und natürlich den Link, da PHP in dem Fall nicht möglich wäre.
Die Tabelle selbst ist über eine eigene "id" definiert, daher kann mir eigentlich keine Formatierung des Stylesheets da was zerstören.
Jedoch stehe ich mittlerweile nach etlichen Versuchen es richtig zu rücken auf dem Schlauch.
Das Forum wird in einer "div" angezeigt, die Navigation befindet sich in einer anderen.
Hat jemand Ideen, woran das liegen könnte?
Hier ein Screenshot mit dem Handy, sieht am PC genauso aus:
http://i57.tinypic.com/2nktg8x.png -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Was das Forum angeht ist alles noch eine Totalbaustelle - damit habe ich mich erst kurz beschäftigt, also nicht wundern, dass es so aussieht.
http://battlebeast.lima-city.de/content/Forum/
Hier mal das, was an Code wichtig sein sollte:
div{ font-family: Arial; font-Size: 10pt; Color: #FFFFFF; line-height:150%; }
<div style="border: 4px solid #000000; position: absolute; left: 50px; width: 200px; top: 300px; min-height: 600px; background-color: #282e34; font-family: Tahoma;"> <!-- ImageReady Slices (Navigation.psd) --> <table id="Tabelle_01" width="200" height="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"> <img src="http://stay-black.tk/Bilder/Navigation_01.gif" width="200" height="36" alt=""></td> </tr> <tr> <td rowspan="7"> <img src="http://stay-black.tk/Bilder/Navigation_02.gif" width="27" height="564" alt=""></td> <td> <a href="?show2=content/news/index.php&show=navigate/news/navi.php"> <img src="http://stay-black.tk/Bilder/Navigation_03.jpg" width="147" height="75" border="0" alt="News" onmouseover= "src='http://stay-black.tk/Bilder/news.jpg'" onmouseout="src='http://stay-black.tk/Bilder/Navigation_03.jpg'" /></a></td> <td rowspan="7"> <img src="http://stay-black.tk/Bilder/Navigation_04.gif" width="26" height="564" alt=""></td> </tr> <tr> <td> <a href="?show2=content/about/index.php&show=navigate/about/navi.php"> <img src="http://stay-black.tk/Bilder/Navigation_05.gif" width="147" height="67" border="0" alt="About" onmouseover= "src='http://stay-black.tk/Bilder/about.gif'" onmouseout="src='http://stay-black.tk/Bilder/Navigation_05.gif'"/></a></td> </tr> <tr> <td> <a href="http://stay-black.tk/content/forum/"> <img src="http://stay-black.tk/Bilder/Navigation_06.gif" width="147" height="61" border="0" alt="Forum" onmouseover= "src='http://stay-black.tk/Bilder/forum.gif'" onmouseout="src='http://stay-black.tk/Bilder/Navigation_06.gif'" /></a></td> </tr> <tr> <td> <a href="?show2=content/joinus/index.php&show=navigate/joinus/navi.php"> <img src="http://stay-black.tk/Bilder/Navigation_07.gif" width="147" height="71" border="0" alt="Join" onmouseover= "src='http://stay-black.tk/Bilder/join us.gif'" onmouseout="src='http://stay-black.tk/Bilder/Navigation_07.gif'" /></a></td> </tr> <tr> <td> <img src="http://stay-black.tk/Bilder/Navigation_08.gif" width="147" height="204" alt=""></td> </tr> <tr> <td> <a href="?show2=content/contact/weare/index.php&show=navigate/contact/navi.php"> <img src="http://stay-black.tk/Bilder/Navigation_09.gif" width="147" height="59" border="0" alt="contact" onmouseover= "src='http://stay-black.tk/Bilder/contact.jpg'" onmouseout="src='http://stay-black.tk/Bilder/Navigation_09.gif'" /></a></td> </tr> <tr> <td> <img src="http://stay-black.tk/Bilder/Navigation_10.gif" width="147" height="27" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </div>
Die Links sind momentan noch nicht ganz wieder angepasst, aber das ist an sich ja sekundär. Und ich bin momentan dabei alles in eine css Datei zu packen. Am Anfang habe ich es immer lieber so zur Übersicht.
-
Gerade mal ein bisschen herum gespielt.
Mach mal die Höhe der beiden Bilder links und rechts von 564 auf 600.
(Navigation_02 und Navigation_04)
Dann sieht es zumindest schonmal normal aus. Keine Ahnung ob das so schon richtig ist. =)
Beitrag zuletzt geändert: 12.2.2014 12:32:27 von kyoshin -
Habe ich eben mal gemacht. Damit sieht es schon etwas besser aus, aber immer noch nicht wirklich. Zudem fehlt der weiße Rahmen rechts. Es scheint somit auch etwas nach dort verschoben zu sein.
-
Irgendwie stimmen deine Bildmaße mit den Styleangaben nicht überein. Es kann dann ja nur verrutschen und verschieben, bzw. einiges an Bild dann unter etwas anderes rutschen.
-
Es ist nur komisch, dass es auf der anderen Seite problemlos funktioniert.
Der Code wird ja automatisch von Photoshop generiert.
Nungut, im Zweifelsfall muss ich mir das eben nochmal selbst zusammenbasteln. -
Kann es sein das sich in Photoshop Slices überschneiden?
Glaube ich hatte mal nen ähnliches Problem vor Jahren damit.
Slices dürfen nur aneinander liegen und sich nicht überschneiden da die Bemaßung der Elemente dann fehlerhaft ausgespuckt wird. -
Nein, dies ist nicht der Fall.
Und ich benutze eben genau den gleichen Code für meine normale Hauptseite, nur dass ich in einem div eben den header von phpbb einfüge und in den <head> Bereich die Dateien die dorthin gehören (so wie meine style Dateien auch).
Oder muss ich alles in den <div> packen, wo das Forum hinsoll und den Code nicht "zerlegen"? -
battlebeast schrieb:
...(habe mein Design in die overall_header Datei eingefügt),
Das kann nicht stimmen, da wesentliche Teile der Templatestruktur in overall_footer. anscheinend fehlen.
Die Tabelle selbst ist über eine eigene "id" definiert, daher kann mir eigentlich keine Formatierung des Stylesheets da was zerstören.
Darauf solltest Du dich nicht verlassen. Das CSS von phpBB-Templates ist recht komplex.. Da kann es durchaus zu Quereinflüssen kommen.
Jedoch stehe ich mittlerweile nach etlichen Versuchen es richtig zu rücken auf dem Schlauch.
Hat jemand Ideen, woran das liegen könnte?
Da hast Du wohl im Laufe deiner Versuche einiges zerlegt und verbastelt.
Bevor man sich hier Gedanken um Formatierung macht, sollte als Erstes unbedingt die Grundstruktur des Dokumentes in Ordnung gebracht werden.
Im Quelltext der Seite wird in Zeile 261 ein zweites Body-Tag geöffnet, In 352 ff werden Body und Html-Tag geschlossen und der folgende Code steht außerhalb der Dokumentenstruktur.
So kann das nicht zuverlässig und sauber dargestellt werden.
Beitrag zuletzt geändert: 12.2.2014 15:09:43 von fatfreddy -
Hab nochmal herum gespielt. :D
Setze mal das Padding aus allen TD-tags auf 0.
Dann rückgängig machen was ich oben geschrieben habe und dann passt alles. =)
Beitrag zuletzt geändert: 12.2.2014 15:19:34 von kyoshin -
fatfreddy
Das kann nicht stimmen, da wesentliche Teile der Templatestruktur in overall_footer. anscheinend fehlen.
Diese hatte ich erstmal entfernt um am Ende zu schauen, wie ich den Teil einbinden werde.
Darauf solltest Du dich nicht verlassen. Das CSS von phpBB-Templates ist recht komplex.. Da kann es durchaus zu Quereinflüssen kommen.
Davon gehe ich mittlerweile aus. Wenn ich eine ähnliche Codierung bei prosilver anwende, verrutscht nichts mehr.
Da hast Du wohl im Laufe deiner Versuche einiges zerlegt und verbastelt.
Bevor man sich hier Gedanken um Formatierung macht, sollte als Erstes unbedingt die Grundstruktur des Dokumentes in Ordnung gebracht werden.
Im Quelltext der Seite wird in Zeile 261 ein zweites Body-Tag geöffnet, In 352 ff werden Body und Html-Tag geschlossen und der folgende Code steht außerhalb der Dokumentenstruktur.
So kann das nicht zuverlässig und sauber dargestellt werden.
Da hast du wohl recht: ich habe es allerdings bereits auch "ordentlich" gehabt und kam - egal wie und wo ich den tabellarischen Teil platzierte zum gleichen Ergebnis. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
