nicht angemeldet
Horizontale Navgiation auffüllen
Hallo,
ich finde einfach keine Lösung für mein Problem:
Ich möchte eine typische Navigationsleiste mit CSS realisieren. Die Breite der einzelnen Reiter ist relativ (width: 6em). Bei wenigen Reitern bleibt also ein relativer Rest zum Seitenrand.
Diesen Rest zum Seitenrand möchte ich jedoch durch einen einzelnen Platzhalter, mit dem gelichen Design der übrigen Reiter, ersetzen.
Wie geht das?
---------------------------Nav-Seite---------------------------
<html>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="Rahmen">
<ul id="Navigation">
<li><a href="index.html">HOME</a></li>
<li><a href="index.html">LEISTUNGEN</a>
<ul>
<li><a href="index.html">LEISTUNGEN</a></li>
<li><a href="index.html">PARTNER</a></li>
</ul>
</li>
<li><a href="index.html">KONTAKT</a></li>
</ul>
</div>
<br class="clearfloat" />
</div>
</body>
</html>
---------------stylesheet-------------------------
/* Nav-Tabelle */
div#Rahmen {
display: block;
width:100%;
/* width: 1004px;*/
padding: 0px;
border: 0px solid #444444;
background-color: #69aae0;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0px; padding: 0px;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0px; padding: 0px;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul { /* Nav-Leiste Position hover */
margin: 0px; padding: 0px;
position: absolute;
top: 0px; right: 0px; /* Position der Unternavigation */
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom:0px;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: -1px;
}
ul#Navigation a, ul#Navigation span { /* Nav-Buttons */
display: block;
width: auto; /*6.4em; Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
margin-left: -1px;
text-decoration: none; /*font-weight: bold;*/
border: 1px solid #444444;
/*border-right: 1px solid #444444;
border-top: 1px solid #444444;
border-bottom: 1px solid #444444;*/
color: #FFFFFF;
background-color: #69aae0; /* Nav-Leiste Hintergrundfarbe */
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell { /* Nav-Leiste Textfarbe hover */
/* border-right: 1px solid #444444;
border-left: 1px solid #444444;
border-bottom: 1px solid #444444; */
border: 1px solid #444444;
margin-left: -1px;
color: #DDDDDD; background-color: #69aae0;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: #EE00EE; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: #00EEEE;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-
Wie geht das?
gib jedem reiter rechts ein hintergrundbild, welches die linke seite des folgenden reiters beinhaltet, füge dann als hintergrund des umliegenden elements die fehlende rechte abschlussgrafik ein
allerdings wird das dann bei farblichen änderungen der hintergrundgrafiken nicht ohne javascript möglich sein