Ich nämlich nicht
Moin erstmal,
ich gestehe offen, dass ich keine Leuchte in der HP-Erstellung bin, aber zumindest normalerweise etwas hinkriege, was einigermaßen OK aussieht (wenn man mein hohes Alter bedenkt ). Wie auch immer, ich habe eine private HP gebastelt und mit dieser Seite Create horizontal css menu | CSS Menu Builder | Free online navigation generator ein Menu gebastelt. Sieht auf FF gut aus, auf Chrome auch, sogar auf dem Handy ist es OK, aber auf Explorer (den ich nie nutze) sieht das Menu ab Startseite total bescheuert aus (alles verschoben).
Hier die Codes:
Im Head
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
Im Body
<div id='cssmenu'>
<ul>
<li class='active '><a href='index.html'><span>Home</span></a></li>
<li><a href='preise.html'><span>Preise</span></a></li>
<li><a href='ueber.html'><span>Die Ferienwohnung</span></a></li>
<li><a href='kontakt.thml'><span>Kontakt</span></a></li>
</ul>
</div>
Stylesheet:
.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url("../images/topMenuImages.png") repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(20,19,19); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursorointer; background:url("../images/topMenuImages.png") 0px -30px no-repeat; outline:none;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url("../images/topMenuImages.png") 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(3,2,2);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url("../images/topMenuImages.png") 0px -90px no-repeat; color:rgb(8,7,7);}
.menu li a.active span, .menu li a.active:hover span{background:url("../images/topMenuImages.png") 100% -90px no-repeat;}
Da die Page noch nicht fertig ist, möchte ich sie hier noch nicht veröffentlichen, aber kann mir vielleicht so jemand sagen, wieso das so bescheuert aussieht? Ich würde mich ja ggf. an ein Computer-Forum wenden, aber ich weiß ja, dass hier ein paar Cracks unterwegs sind, die mich hoffentlich ob meiner Ignoranz nicht verlachen, sondern ggf. weiterhelfenn können....
Vielen Dank schonmal,
BBQQ
Moin erstmal,
ich gestehe offen, dass ich keine Leuchte in der HP-Erstellung bin, aber zumindest normalerweise etwas hinkriege, was einigermaßen OK aussieht (wenn man mein hohes Alter bedenkt ). Wie auch immer, ich habe eine private HP gebastelt und mit dieser Seite Create horizontal css menu | CSS Menu Builder | Free online navigation generator ein Menu gebastelt. Sieht auf FF gut aus, auf Chrome auch, sogar auf dem Handy ist es OK, aber auf Explorer (den ich nie nutze) sieht das Menu ab Startseite total bescheuert aus (alles verschoben).
Hier die Codes:
Im Head
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
Im Body
<div id='cssmenu'>
<ul>
<li class='active '><a href='index.html'><span>Home</span></a></li>
<li><a href='preise.html'><span>Preise</span></a></li>
<li><a href='ueber.html'><span>Die Ferienwohnung</span></a></li>
<li><a href='kontakt.thml'><span>Kontakt</span></a></li>
</ul>
</div>
Stylesheet:
.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url("../images/topMenuImages.png") repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(20,19,19); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursorointer; background:url("../images/topMenuImages.png") 0px -30px no-repeat; outline:none;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url("../images/topMenuImages.png") 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(3,2,2);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url("../images/topMenuImages.png") 0px -90px no-repeat; color:rgb(8,7,7);}
.menu li a.active span, .menu li a.active:hover span{background:url("../images/topMenuImages.png") 100% -90px no-repeat;}
Da die Page noch nicht fertig ist, möchte ich sie hier noch nicht veröffentlichen, aber kann mir vielleicht so jemand sagen, wieso das so bescheuert aussieht? Ich würde mich ja ggf. an ein Computer-Forum wenden, aber ich weiß ja, dass hier ein paar Cracks unterwegs sind, die mich hoffentlich ob meiner Ignoranz nicht verlachen, sondern ggf. weiterhelfenn können....
Vielen Dank schonmal,
BBQQ