nicht angemeldet
Navigationsleiste anpassen
0 0 
MudGuard
Navigationsleiste anpassen
Hallo,
ich versuche seit einigen Tagen mir eine neue Navigationsleiste per CCS zu basteln.
Nur habe ich dabei einige Probleme bei denen Ihr mir evt. weiterhelfen könnt:
1. Wie die Größe der Button bestimmt wird habe ich herrausgefunden nun bin ich auf der Suche wo ich bestimmen kann wie groß die Box ist wo die Buttons drin sind.
2. Die numerische ANgabe "em" bezieht sich ja auf das elternelement (z.B. bei width: 47.1em) aber welches ist das Elternelement?
3. Bei Body... font:nomal steht 100.01% - 100.01% von was?
Hoffe ich hab die fragen so gesellt das ihr wißt was ich meine.
Gruß Tobi
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test für unveu.de</title>
<style type="text/css">
body, p a {
Frage 3 --> font: normal 100.01% Helvetica, Arial, sans-serif; /* Schriftgröße Buttonrahmen verändert sich auch!!! */
color: #000000; /* Schriftfarbe der HP */
background-color: #ffffe0; /* Hintergrundfarbe der HP */
}
div#Rahmen {
Frange 2--> width: 47.1em;
padding: 0.8em; /* Abstand der Button zum Rand */
border: 1px solid black; /* Rahmen un alle Buttons */
background-color: silver; /* Hintergrundfarbe um die Buttons */
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: -0.4em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /*? Breite den in li enthaltenen Elementen zuweisen */
padding: 5px 23px; /* Button Höhe Breite */
text-decoration: none; /* Link nicht unterstrichen */
font-weight: bold; /* Schrift: fett */
border: 1px solid black; /* Buttonrahmenbreite */
border-left-color: white; border-top-color: white; /* Buttonumrandung lins und oben */
color: maroon; /* Hintergrundfarbe vom Aktuellen Button */
background-color: #ccc; /* Hintergrundfarbe der Buttons */
}
* 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 {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
</style>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "silver";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
</head>
<body>
<h1 id="Beispiel">Dynamisch Navigationsleisten auch im IE einblenden</h1>
<div id="Rahmen"><ul id="Navigation">
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a>
<ul>
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite x2</a>
<ul>
<li><a href="#Beispiel">Seite x2a</a></li>
<li><a href="#Beispiel">Seite x2b</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a href="#Beispiel">Seite 4</a>
<ul>
<li><a href="#Beispiel">Seite 4a</a></li>
<li><a href="#Beispiel">Seite 4</a></li>
<li><a href="#Beispiel">Seite 4c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 5</a></li>
</ul><div></div></div>
</body>
</html>
-
hi,
nun bin ich auf der Suche wo ich bestimmen kann wie groß die Box ist wo die Buttons drin sind.
Mit den üblichen CSS-Angaben wie zB. width, padding oder margin. Du könntest zB. die Weite der Box _gar nicht_ definieren und die Buttons mit einem auto-margin in der Box zentrieren, dann ist die Box genau so breit, wie sie sein muß für die Buttons.
Die numerische ANgabe "em" bezieht sich ja auf das elternelement ... aber welches ist das Elternelement?
Das Elternelement ist immer das in der Seitenstruktur nächsthöhere Element. Die "oberste Stelle" der Seitenhirarchie ist dabei immer der Body der Seite.
Bei Body... font:nomal steht 100.01% - 100.01% von was?
100.01% von der beim Browser des Users eingestellten Standard-Schriftgröße.
mfG
Professor Hase
-
Hi,
Das Elternelement ist immer das in der Seitenstruktur nächsthöhere Element. Die "oberste Stelle" der Seitenhirarchie ist dabei immer der Body der Seite.
Falsch. Auch body hat ein Elternelement.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-