07.07.2007
2008-05-25, 21:21:05
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!
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!