SOLVED: CSS Frage aufgrund eines nicht erwarteten Ergebnis

[07.07.2007]

Hallo Leute,

habe ein Problem mit CSS und komme momentan leider nicht selbst auf die Loesung. Vermutlich ist es was ganz simples:

Hier zunaechst mal die Testwebsite

http://berndjaeger.bentgine.net/test/

Das Problem ist das ein Menue nicht richtig dargestellt wird. Das Menue sollte aus folgenden Elementen bestehen

http://berndjaeger.bentgine.net/test/SitePanelMenuTop.gif

dazwischen viele von folgenden auf y wiederholt (steht in einem 24px hohen div indem auch ein menu link steht)
http://berndjaeger.bentgine.net/test/SitePanelMenuMiddle.gif

http://berndjaeger.bentgine.net/test/SitePanelMenuBottom.gif


Wenn man auf die Seite geht sieht man das es nicht richtig funktioniert. Ich weiss nicht warum.

Im folgenden HTML und CSS Ausschnitte

Das komplette CSS findet ihr hier http://berndjaeger.bentgine.net/test/style.css
Das HTML im Code der Seite.


Hier das HTML
<table class="Panels" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="SitePanelLeft"><div class="SitePanelMenu">
<div class="SitePanelMenuTop"/>
<div class="SitePanelMenuButton"> <a href="index.html">News</a> </div>
<div class="SitePanelMenuButton"> <a href="index.html">Test</a> </div>
<div class="SitePanelMenuButton"> <a href="index.html">Galerie</a> </div>
<div class="SitePanelMenuBottom"/>
</div>
<td>
<td class="MainBorder4"><img src="MainBorder4.gif" alt=""/> </td>
<td class="SitePanelMiddle" colspan="2"><div class="Logo"> <a href="/index.html"> <!--img class="Logo" src="/data/pictures/site_logo.jpg" alt="test"/--> </a> </div>
<div class="Content"> middle </div></td>
<td class="MainBorder6"><img src="MainBorder6.gif" alt=""/> </td>
<td class="SitePanelRight"><div class="SitePanelMenu">
<div class="SitePanelMenuTop"/>
<!--div class="SitePanelMenuButton"> <a href="index.html">News</a> </div>
<div class="SitePanelMenuButton"> <a href="index.html">Test</a> </div>
<div class="SitePanelMenuButton"> <a href="index.html">Galerie</a> </div-->
<div class="SitePanelMenuBottom"/>
</div></td>
</tr>
</tbody>
</table>

Hier das CSS
.SitePanelMenuTop {
background:#FFFFFF url(SitePanelMenuTop.gif) no-repeat scroll left top;
height:20px;
line-height:20px;
margin:0pt;
max-height:20px;
max-width:234px;
min-height:16px;
min-width:234px;
overflow:hidden;
padding:0pt;
white-space:nowrap;
width:234px;
}



.SitePanelMenuBottom {
background:#FFFFFF url(SitePanelMenuBottom.gif) no-repeat scroll left bottom;
height:20px;
line-height:20px;
margin:0pt;
max-height:20px;
max-width:234px;
min-height:20px;
min-width:234px;
overflow:hidden;
padding:0pt;
white-space:nowrap;
width:234px;
}

.SitePanelMenuButton {
background:#FF0000 url(SitePanelMenuMiddle.gif) repeat-y scroll 0%;
height:24px;
line-height:24px;
margin:0;
max-height:24px;
max-width:185px;
min-height:24px;
min-width:185px;
overflow:hidden;
padding:0px 28px 4px 21px;
white-space:nowrap;
width:185px;
font-size: 12px;
}

Vlt kann mir jemand helfen das das ganze korrekt dargestellt wird.

Danke!

[darph]

<div class="SitePanelMenuBottom"/>

Du kannst nicht jedes x-beliebige Element als inhaltsleer kennzeichnen.

<div class="SitePanelMenuBottom"></div>


Aber warum nestest du das in eine Tabelle? Das css-Float-Attribut ist das, was du suchst.

[07.07.2007]

<div class="SitePanelMenuBottom"/>

Du kannst nicht jedes x-beliebige Element als inhaltsleer kennzeichnen.

<div class="SitePanelMenuBottom"></div>


Aber warum nestest du das in eine Tabelle? Das css-Float-Attribut ist das, was du suchst.

Ok danke das mit dem float werde ich probieren.

Kannst du mir bitte den Unterschied zwischen /> und </div> erklaeren?
Ich dachte immer das es das gleiche ist.

[darph]

Ich bin mir nicht sicher, ob es nicht auch einfach an der Art liegt, wie es die Browser interpretieren. Könnte aber auch sein, daß es sich ähnlich verhält, wie mit Strings: Eine Variable kann null sein, dann ist ihr kein Wert zugeordnet. Sie hat zwar einen Namen, aber wenn man von ihr lesen will, ist nichts drin. Das ist explizit etwas anderes, als ein leerer String, also "". Der String ist dann durchaus da, er hat nur die Länge 0. Man kann ihn auslesen, man kann darauf suchen (findet halt nur nichts) und man kann ihm weitere Zeichen anhängen. "null", also nichts, kann man jedoch nichts anhängen, man kann es nicht durchsuchen. Sie verstehen? Ich denke mal, daß das hier ähnlich gelagert ist. Wissen thu ich es aber nicht.

[07.07.2007]

Ich bin mir nicht sicher, ob es nicht auch einfach an der Art liegt, wie es die Browser interpretieren. Könnte aber auch sein, daß es sich ähnlich verhält, wie mit Strings: Eine Variable kann null sein, dann ist ihr kein Wert zugeordnet. Sie hat zwar einen Namen, aber wenn man von ihr lesen will, ist nichts drin. Das ist explizit etwas anderes, als ein leerer String, also "". Der String ist dann durchaus da, er hat nur die Länge 0. Man kann ihn auslesen, man kann darauf suchen (findet halt nur nichts) und man kann ihm weitere Zeichen anhängen. "null", also nichts, kann man jedoch nichts anhängen, man kann es nicht durchsuchen. Sie verstehen? Ich denke mal, daß das hier ähnlich gelagert ist. Wissen thu ich es aber nicht.

Ja ich weiss was du meinst. Koennte wirklich so sein :)


Der Eingangslink zeigt nun das richtig Ergebnis.

Thread kann geschlossen werden. Danke!