Hi, ich habe folgendes Problem: Ich möchte eine headnavigation auf meiner Seite haben, dies allerdings OHNE Tabellen Layout hinbekommen.
Nun habe ich das mit den buttons und so schon alles hinekommen, mein einziges Problem ist jezt nur nohc wir ich ne hintergrundleiste hinter die buttons bekomme. Mein Code sieht wie folgt aus:
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
a#menu {display:block; text-algin:center; text-decoration:none; width:200px; padding-top:16.5px; padding-bottom:16.5px;
font-size:14px; font-family:Verdana, Arial, sans-serif; background-image:url(images/button_n.gif);}
a#menu:hover {background-image:url(images/button_hov.gif);}
a#menu:active {background-image:url(images/button_hov.gif);}
a#menu:visited {background-image:url(images/button_hov.gif);}
a#active {display:block; text-algin:center; text-decoration:none; width:200px; padding-top:16.5px; padding-bottom:16.5px;
font-size:14px; font-family:Verdana, Arial, sans-serif; background-image:url(images/button_after.gif);}
a#active:hover {background-image:url(images/button_after.gif);}
a#active:active {background-image:url(images/button_after.gif);}
a#active:visited {background-image:url(images/button_after.gif);}
A:link {
COLOR: #FFFFFF; TEXT-DECORATION: underline; FONT-STYLE: normal
}
A:visited {
COLOR: #FFFFFF; TEXT-DECORATION: underline; FONT-STYLE: normal
}
A:active {
COLOR: #FFFFFF; TEXT-DECORATION: underline; FONT-STYLE: normal
}
A:hover {
COLOR: #D00000; TEXT-DECORATION: underline; FONT-STYLE: normal
}
#header {
float:left;
width:100%;
line-height:normal;
}
#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
margin:0;
padding:0;
}
#header a {
display:block;
}
-->
</style>
</head>
<div id="header">
<ul>
[*][url='index.htm']<center>Home</center>[/url]
[*][url='extras/index.htm']<center>Extras</center>[/url]
[*][url='links/index.htm']<center>Links</center>[/url]
[/list]
</div>
</html>Nun möchte ich, dass in der oberen Leiste im Hintergrund noch eine Grafik namesn button_pl.gif auftaucht, die eine Leiste bildet und über die gesamte bildschrimbreite geht (width="100%"). Dazu habe ich mit bereits folgendes Totorial angesehn: http://www.thestyleworks.de/tut-art/listnav3.shtml
So ungefähr soll es dann mal aussehen. Aber eben nicht ganz genau so, denn wenn ich es mache, wie dort erklärt funktioniert es nicht richtig.
Ausserdem wäre es nett, wenn mir jemand sagen könnte, wie ich den buttontext horizontal und vertikal Zentriere. (mit text-algin:center; und text-valgin:middle; habe ichs schon versucht, jedoch funktionierte dies nicht sonderlich gut, und daher benutze ich momentan für die horizontale <center> und für die vertikale padding-top und padding-bottom statt height, was allerdings keine besonders elegante methode ist.)
Wäre echt supernett, wenn ihr mir helfen könntet. Danke schonmal im Voraus.