DopDown beachtet kein Hintergrund
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
baumstruktur
befinden
besonderheit
blocken
browser
button
code
computer
display
frage
http
index
lehrer
login
mitte
position
schachtel
sprechstunde
text
url
-
Guten Tag,
Alles funktioniert bis auf diesen abschnitt, dass er die hintergrund blau machen soll.
warum funktioniert das nicht?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <style><endnote><head> <style><endnote><head> <style><endnote><head> <style><endnote><head> <style><endnote><head> <style></style> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>t</title> </head> <body> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#nav li').hover( function () { //show its submenu $('ul', this).slideDown(100); }, function () { //hide its submenu $('ul', this).slideUp(100); } ); }); </script> <style type="text/css"> body {font-family:arial; font-size:11px;} #nav { margin:0; padding:0; list-style:none; } #nav li { float:left; display:block; width:100px; background:#ccc; position:relative; z-index:500; margin:0 1px; } /* this is the parent menu */ #nav li a { padding:8px 5px 0 5px; font-weight:700; height:23px; text-decoration:none; color:#fff; text-align:center; color:#333; } #nav li a:hover { color:#fff; } /* you can make a different style for default selected value */ #nav a.selected { color:#f00; } /* submenu, it's hidden by default */ #nav ul { position:absolute; left:0; display:none; margin:0 0 0 -1px; padding:0; list-style:none; } #nav ul li { width:100px; float:left; border-top:1px solid #fff; } /* display block will make the link fill the whole area of LI */ #nav ul a { display:block; height:15px; padding: 8px 5px; color:#666; } #nav ul a:hover { text-decoration:underline; } *html #nav ul { margin:0 0 0 -2px; } </style> <ul id="nav" style="background-color:blue; width:1000px;"> <li><a href="#" class="selected">Lehrkörper</a> <ul> <li><a href="#">Item 01</a></li> <li><a href="#" class="selected">Item 02</a></li> <li><a href="#">Item 03</a></li> </ul> </li> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Weil , abgesehen davon das der Code so einige Fehler beinhaltet, #nav unsichtbar ist und der indknoten <li> das attribut bekommen sollte.
fix:
#nav li {
float:left;
display:block;
width:100px;
background:blue;
position:relative;
z-index:500;
margin:0 1px;
}
Kleine verbesserungsvorschlge am rande:
entferne dies vollständig:
<style><endnote><head> <style><endnote><head> <style><endnote><head> <style><endnote><head> <style><endnote><head> <style></style>
packe alles in <script></script> und <style></style> zwischen
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>t</title>
und
</head>
(MIT <script></script> und <style></style> )
Beitrag zuletzt geändert: 23.10.2011 18:45:40 von simuliertes -
Was meinst Du mit Buttons? Die Links? Die Punkte neben den Links?
Zentriert reativ zu was?
Edit kleine Korrektur:
<ul>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#" class="selected">Lehrkörper </a>
<ul>
<li><a href="#">Sprechstunden</a></li>
<li><a href="#">Lehrer</a></li>
</ul>
</li>
<li><a href="#">Login</a></li>
</li>
</ul>
</ul>
<ul> <li><a href="#">Startseite</a></li> <li><a href="#" class="selected">Lehrkörper </a> <ul> <li><a href="#">Sprechstunden</a></li> <li><a href="#">Lehrer</a></li> </ul> </li> <li><a href="#">Login</a></li> </li> </ul>
Beitrag zuletzt geändert: 23.10.2011 21:30:42 von simuliertes -
computer-freak schrieb:
Hallo,
Also auf der mitte der seite also left:50% aber wie geht das ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> # menue_wrapper { margin:0; padding:0; } #menue { display: table; margin:0px auto; } </style> <!--[if lt IE 8]> <style type="text/css"> #menue_wrapper { text-align: center; } #menue_wrapper * { text-align: left; } #menue { zoom: 1; display: inline; } </style> <![endif]--> </head> <body> <div id="menue_wrapper"> <ul id="menue"> <li><a href="#">Startseite</a></li> <li><a href="#" class="selected">Lehrkörper </a> <ul> <li><a href="#">Sprechstunden</a></li> <li><a href="#">Lehrer</a></li> </ul> </li> <li><a href="#">Login</a></li> </li> </ul> </div> </body> </html>
Sieh dazu
http://www.lima-city.de/thread/website-mittig-ausrichten-bei-jedem-browser
und
http://haslayout.net/css-tuts/Horizontal-Centering -
Es funktioniert einfach nicht, auch wenn ich das float-left wegmache!
Mein CSS Code:
#nav li { display:block; width:100px; background:#ccc; position:relative; z-index:500; margin:0 1px; float:left; } /* this is the parent menu */ #nav li a { display:block; padding:8px 5px 0 5px; font-weight:700; height:23px; text-decoration:none; color:#fff; text-align:center; color:#333; }
Beitrag zuletzt geändert: 24.10.2011 17:15:36 von computer-freak -
computer-freak schrieb:
Es funktioniert einfach nicht, auch wenn ich das float-left wegmache!
Hast Du denn mal meinen geposteten Code in eine Datei kopiert und ausprobiert?
Entspricht das dem was Du erreichen willst? (Also das das ganze Menue Zentriert wird und nicht nur Sprechstunde & Lehrer)
Hast Du die von mir geposteten Links gelesen?
Vor allen diesen:
http://haslayout.net/css-tuts/Horizontal-Centering
Gib am besten mal den kompletten Code Deiner Seite raus (oder besser noch einen Link, falls vorhanden)
Nochmal etwas u verdeutlichung der Baumstruktur von css/html:
Wenn Du diesen code hast:
<ul id="nav"> <li><a href="#"><a>A</a></li> <li><a href="#"><a>B</a></li> </ul>
Du musst DIr das vorstellen wie einen Baum oder viele Schachteln in denen wieder kleinere Schachteln sind.
Bleiben wir bei Schachteln.
in #nav befinden sich 2 <li>-"Schachteln"
in jeder <li>-Schachtel befinden sich <a> Schachteln
usw..
willst Du alle <a>-tags von #nav Blau färben heisst es: #nav li a{backgrund-color: blue;}
(Browser Besonderheiten überspringe ich mal...)
margin:0px auto; zentriert eine Schachtel innerhalb einer übergeordneten Schachtel sofern diese Schachtel vom Typ
display: table; ist oder diese Schachtel eine Feste Länge hat (width: 100px zB)
Besipiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> /*nur zu deko-zwecke*/ .red {border: red 1px solid; margin: 10px;} .blue {border: blue 1px solid;margin: 10px;} /*der wichtige css-code*/ /*keine feste Länge */ #uebergeordnete_schachtel div{margin: 0px auto; display: table;} /* feste Länge*/ #uebergeordnete_schachtel2 div{margin: 0px auto; width: 300px;} </style> </head> <body> <div id="uebergeordnete_schachtel" class="red"> <div id="zentriere_mich" class="blue"> Blablup Blablup </div> </div> <div id="uebergeordnete_schachtel2" class="red"> <div id="zentriere_mich2" class="blue"> Blablup Blablup </div> </div> </body> </html>
Beitrag zuletzt geändert: 24.10.2011 19:39:15 von simuliertes -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
