Hallo
eigentlich ist der Titel ein wenig übertrieben, denn es geht (für euch Profis) nur um eine Kleinigkeit...
Folgendes:
Ich hätte gerne eine vollkommend valide Navigation in CSS! Ich habe schon eine in Javascript, möchte aber gerne von Javascript weg.....
Ich habe bisher schon einiges versucht, klappt auch schon ganz gut, nur weit weg von valider Programmierung....
Ich habe seit langer Zeit eine Navigation, die der Adobe.com Navigation sehr ähnlich ist. Meine Navigation erzeugt nur horzonatle Subemenus. Davon möchte ich ebenfalls weg.
Was ich nun konkret möchte?
Ich möchte gerne von der Gestaltung die Navigation, die Adobe.com hat nur mit ein paar kleinen Veränderrungen.
Hier erstmal meine alte Navigation
Von der Anordnung (Logo oben links, oben rechts die Texte und die Flaggen) soll alles gleich bleiben!
So soll die Navigation aussehen!
So soll die Navigation werden, nur mit den paar Differenzen wie:
Breite soll 756 pix sein, Logo nicht Links daneben sondern oben drüber wie bei der alten Navigation, und rechts die beiden Flaggen und die Texte.
Die Bilder bei hover, die für die Submenus geladen werden sollen so übernommen werden. Das bedeutet die Bilder bei on hover sind ja rund bei der Adobe Navigation, so hätte ich das auch gerne...
das habe ich bereits erstellt, läuft aber nicht bei jedem Browser, also nicht valide, also schrott!
Code:
Das ist der Code zu dem, was ich bereits gemacht habe:
<HTML><HEAD><TITLE>Navigationsleiste</TITLE>
</HEAD>
<BODY>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
/* common styling */
.menu2
{
width:756px; font-family: verdana, arial, sans-serif; font-size:11px; background:url(navigat.gif); width:756px; height:35px;
}
.menu2 ul
{
padding:0;margin:0;list-style-type:none;
}
.menu2 ul li
{
float:left; position:relative;
}
.menu2 ul li.group
{
display:block; text-indent:10px; background:#666; color:#ff0; width:152px; padding:4px 0;
}
.menu2 ul li a, .menu2 ul li a:visited
{
float:left; display:block; text-decoration:none; color:#444; padding:0px 16px; line-height:25px; height:30px;
}
.menu2 ul li:hover
{
width:auto;
}
.menu2 ul li a:hover
{
background:#aaa url(sub2a.gif); color:#c00;
}
.menu2 ul li:hover a
{
background:#aaa url(sub2a.gif); color:#c00;
}
.menu2 ul li ul
{
display: none;
}
.menu2 table
{
margin:0; border-collapse:collapse; font-size:11px; position:absolute; top:0; left:0;
}
/* specific to non IE browsers */
.menu2 ul li:hover ul
{
display:block; position:absolute;top:29px; background:#aaa; margin-top:1px; left:0; width:152px;
}
.menu2 ul li:hover ul.scroller
{
height:138px; width:172px; overflow:auto;
}
.menu2 ul li:hover ul.endstop
{
left:-90px;
}
.menu2 ul li:hover ul li ul
{
display: none;
}
.menu2 ul li:hover ul li a
{
display:block; background:#aaa; color:#fff;height:auto;line-height:15px;padding:4px 16px; width:120px;
}
.menu2 ul li:hover ul li a.drop
{
background:#888;
}
.menu2 ul li:hover ul li a:hover
{
color:#ff0; background: #888;
}
.menu2 ul li:hover ul li a:hover.drop
{
background: #888; color:#ff0;
}
.menu2 ul li:hover ul li:hover ul
{
display:block; position:absolute; left:153px; top:-70px; color:#000; left:152px; height:138px; width:172px; overflow:auto; background:#888;
}
.menu2 ul li:hover ul li:hover ul li a
{
background:#888;
}
.menu2 ul li:hover ul li:hover ul li.group
{
width:152px; padding:5px 0;
}
.menu2 ul li:hover ul li:hover ul.left
{
left:-172px;
}
.menu2 ul li:hover ul li:hover ul li a:hover
{
background:#666; color:#0ff;
}
/* specific to IE5.5 and IE6 browsers */
.menu2 ul li a:hover ul
{
display:block;position:absolute;top:30px; t\op:29px; background:#aaa;left:0; marg\in-top:1px;
}
.menu2 ul li a:hover ul.scroller
{
height:138px; overflow:auto;
}
.menu2 ul li a:hover ul.endstop
{
left: -90px;
}
.menu2 ul li a:hover ul li a
{
display:block; color:#fff; height:1px; line-height:15px; padding:4px 16px; width:152px; w\idth:120px;
}
.menu2 ul li a:hover ul li a.drop
{
background:#888; padding-bottom:5px;
}
.menu2 ul li a:hover ul li a ul
{
visibility:hidden; position:absolute; height:0; width:0;
}
.menu2 ul li a:hover ul li a:hover
{
color:#ff0; background: #888;
}
.menu2 ul li a:hover ul li a:hover.drop
{
background: #888; color:#ff0;
}
.menu2 ul li a:hover ul li a:hover ul
{
visibility:visible; position:absolute; top:-69px; t\op:-70px; color:#000; left:152px; height:138px; width:170px; overflow:auto; background:#888;
}
.menu2 ul li a:hover ul li a:hover ul.left
{
left:-170px;
}
.menu2 ul li a:hover ul li a:hover ul li a:hover
{
background:#666; color:#0ff;
}
.left
{
clear:both;
}
</style>
</head>
<body>
<div class="menu2">
<ul>
<li><a class="menu2one" href="#nogo">Home</a></li>
</ul>
<ul>
<li><a class="menu2two" href="#nogo">Products
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#nogo">Mobiles</a></li>
<li><a href="#nogo">Photoframes</a></li>
<li><a href="#nogo">Tripods</a></li>
<li><a class="drop" href="#nogo">Cameras
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li class="group">Minolta</li>
<li><a href="#nogo">SLRs</a></li>
<li><a href="#nogo">Compact</a></li>
<li><a href="#nogo">Digital</a></li>
<li><a href="#nogo">Video</a></li>
<li class="group">Cannon</li>
<li><a href="#nogo">SLRs</a></li>
<li><a href="#nogo">Compact</a></li>
<li><a href="#nogo">Digital</a></li>
<li><a href="#nogo">Video</a></li>
<li class="group">Nikon</li>
<li><a href="#nogo">SLRs</a></li>
<li><a href="#nogo">Compact</a></li>
<li><a href="#nogo">Digital</a></li>
<li><a href="#nogo">Video</a></li>
<li class="group">Olympus</li>
<li><a href="#nogo">SLRs</a></li>
<li><a href="#nogo">Compact</a></li>
<li><a href="#nogo">Digital</a></li>
<li><a href="#nogo">Video</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#nogo">Memory cards</a></li>
<li><a href="#nogo">Camcorders</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="menu2three" href="#nogo">Services
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul class="scroller">
<li><a href="#nogo">Photography</a></li>
<li><a href="#nogo">Video editing</a></li>
<li><a href="#nogo">Web site Design</a></li>
<li><a href="#nogo">Reference guides</a></li>
<li><a href="#nogo">Photo-editing</a></li>
<li><a href="#nogo">Banner design</a></li>
<li><a href="#nogo">Web consultancy</a></li>
<li><a href="#nogo">Banner Exchange</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="menu2four" href="#nogo">Contact us</a></li>
<li><a class="menu2five" href="#nogo">Site map</a></li>
<li><a class="menu2six" href="#nogo">News
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul >
<li><a href="#nogo">Breaking</a></li>
<li><a href="#nogo">Latest</a></li>
<li><a href="#nogo">May 2006</a></li>
<li><a class="drop" href="#nogo">News archives
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul class="left">
<li class="group">2006</li>
<li><a href="#nogo">April</a></li>
<li><a href="#nogo">March</a></li>
<li><a href="#nogo">February</a></li>
<li><a href="#nogo">January</a></li>
<li class="group">2005</li>
<li><a href="#nogo">December</a></li>
<li><a href="#nogo">November</a></li>
<li><a href="#nogo">October</a></li>
<li><a href="#nogo">September</a></li>
<li><a href="#nogo">August</a></li>
<li><a href="#nogo">July</a></li>
<li><a href="#nogo">June</a></li>
<li><a href="#nogo">May</a></li>
<li><a href="#nogo">April</a></li>
<li><a href="#nogo">March</a></li>
<li><a href="#nogo">February</a></li>
<li><a href="#nogo">January</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
Es fehlt also lediglich noch die erstellung der Hintergrundbilder bei hover und die Validität des Codes, den ich einfach nicht hinbekomme...
Also nochmal kurz:
1. Hintergrundbilder bei Hover für Submenus integrieren
2. Code soll valide sein
3. Aufbau soll wie bei der alten Navigation sein (Logo links, Breite 756px, und Flaggen rechts)
4. Alles per CSS kein Javascript einsetzen
5. Navigation zentrieren, diese muss immer mittig sein
Wenn jemand Interesse hat ein wenig Geld zu verdienen und sich der Aufgabe gewachsen fühlt, dann schreibt hier bitte zurück oder pm..
Die Bilder für die Submenus bitte selber erstellen oder bescheid sagen, dann mache ich das noch schnell...
