Destruktor
Grünschnabel
Ich habe versucht mein "Header"-Menü ohne Tabellen, dafür mit DIV und CSS zu erstellen.
Mit Firefox und Opera sieht es soweit auch ordentlich aus, lediglich mit dem Internet Explorer ist es etwas zerschossen.
Beispielseite: http://v3.wsv-verden-jugend.de
Hier der Code:
Header Menü
und der Teil aus der CSS Datei:
Am Anfang war der obere Streifen auch zu schmal. Nachdem ich dann die Höhe in der CSS Datei entfernt habe und dafür eine leere Grafik in der der gleichen Höhe in der html Datei eingefügt habe, war die Breite passend! Leider geht das mit dem "Titel-Div" nicht, da dort auch ein Link mitdrin ist und wenn ich davor eine Grafik setze paßt es noch weniger als jetzt..
Mit Firefox und Opera sieht es soweit auch ordentlich aus, lediglich mit dem Internet Explorer ist es etwas zerschossen.
Beispielseite: http://v3.wsv-verden-jugend.de
Hier der Code:
Header Menü
Code:
<div id="header_rand_links"></div>
<div id="header_rand_rechts"></div>
<div class="header_mitte">
<div id="header_rand_oben"><img src="/grafiken/blank.gif" height="5" width="200" alt=""></div>
<div id="header_titel"><a href="/index.html" title="Startseite [ALT + h]" accesskey="h" tabindex="1">Jugendseite des Wassersportverein Verden e.V.</a></div>
<div id="header_untertitel">Informationen über Kanu Kajak paddeln</div>
<div class="header_linkleiste">
<a class="header_link" href="/aktuelles.html" title="Aktuelles [ALT + a]" accesskey="a">Aktuelles</a>
<a class="header_link" href="/information_ueber_den_wsv_verden.html" title="Informationen [ALT + i]" accesskey="i">Informationen</a>
<a class="header_link" href="/forum/" title="Forum [ALT + f]" accesskey="f">Forum</a>
<a class="header_link" href="/fotoalbum/" title="Fotoalbum [ALT + p]" accesskey="p">Fotoalbum</a>
<a class="header_link" href="/kontakt.html" title="Kontakt [ALT + k]" accesskey="k">Kontakt</a>
</div>
</div>und der Teil aus der CSS Datei:
Code:
/* Header Style */
#header_rand_links {
background-image: url(/grafiken/header/rand_links.gif);
background-repeat: no-repeat;
height: 90px;
width: 30px;
float:left;
}
#header_rand_rechts {
background-image: url(grafiken/header/rand_rechts.gif);
background-repeat: no-repeat;
height: 90px;
width: 30px;
float: right;
}
.header_mitte{
margin: 0px 30px 0px 30px;
}
#header_rand_oben{
background-image: url(grafiken/header/streifen_oben.gif);
}
#test_titel{
background-image: url(grafiken/header/title.gif);
height: 40px;
}
#header_titel, #header_titel a:link, #header_titel a:visited, #header_titel a:hover, #header_titel a:active, #header_titel a:focus {
font-family: "Times New Roman", Times, serif;
text-align: center;
font-weight:bold;
white-space: nowrap;
vertical-align: middle;
display:block;
background-repeat:repeat-x;
color: #000066;
text-decoration: none;
font-size: 150%;
line-height: 40px;
background-image: url(grafiken/header/title.gif);
height: 40px;
}
#header_untertitel, #header_untertitel a:link, #header_untertitel a:visited, #header_untertitel a:hover, #header_untertitel a:active, #header_untertitel a:focus {
font-family: "Times New Roman", Times, serif;
text-align: center;
font-weight:bold;
white-space: nowrap;
vertical-align: middle;
display:block;
background-repeat:repeat-x;
color: #000066;
text-decoration: none;
font-size: 88%;
line-height:15px;
background-image: url(grafiken/header/subtitle.gif);
height: 15px;
}
.header_linkleiste a:link, .header_linkleiste a:visited, .header_linkleiste a:hover, .header_linkleiste a:focus, .header_linkleiste a:active {
display:block;
text-align: center;
text-decoration: none;
font-size: 125%;
line-height: 30px;
height: 30px;
border-top-width: 60px;
border-right-width: 30px;
border-left-width: 30px;
width: 20%;
}
.header_linkleiste, .header_linkleiste a:link {
color: #000066;
background-image: url(grafiken/header/unten.gif);
}
.header_linkleiste a:visited {
color:#00CCFF;
background-image: url(grafiken/header/unten.gif);
}
.header_linkleiste a:hover, .header_linkleiste a:focus, .header_linkleiste a:active{
color:#0066FF;
background-image: url(grafiken/header/unten_hover.gif);
}
a.header_link:link, a.header_link:visited, a.header_link:hover, .header_link a:focus, .header_link a:active {
float: left;
width: 20%;
}Am Anfang war der obere Streifen auch zu schmal. Nachdem ich dann die Höhe in der CSS Datei entfernt habe und dafür eine leere Grafik in der der gleichen Höhe in der html Datei eingefügt habe, war die Breite passend! Leider geht das mit dem "Titel-Div" nicht, da dort auch ein Link mitdrin ist und wenn ich davor eine Grafik setze paßt es noch weniger als jetzt..
