|
|||
Horizontale Leiste mit Css und xhtml formatieren
hallo,
brauche dirgend euere hilfe! Sitze nun seit 5 h an dieser scheiß navileiste und komme nicht weiter! Möchte alle auf einer Ebene bzw horizontalien Navileiste habe doch funktioniert es nicht! Könnt ihr mir Bitte so schnell wie möglich tipps geben ode sagen was ich falsch gemacht habe Html-code <ul id="menu"> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="navi"> <dt class="one"><a href="#">Unternehmen</a></dt> <dd class="last"><a href="#" title="Firmenvorstellung">Firmenvorstellung</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="navi"> <dt class="two"><a href="#">Aufgabenbereich</a></dt> <dd><a href="#" title="Grabsteine"> Grabsteine </a></dd> <dd><a href="#" title="Treppen">Treppen</a></dd> <dd class="last"><a href="#" title="bodenbelege">Bodenbelege</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="navi"> <dt class="three"> <div align="center"><a href="#" class="Stil1">Material</a></div> </dt> <dd><a href="#" title="Marmor">Marmor</a></dd> <dd class="last"><a href="#" title="Schriften">Treppen</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="navi"> <dt class="four"><a href="#">Zubehör</a></dt> <dd><a href="#" title="Grabsteine">Grabsteine</a></dd> <dd><a href="#" title="Treppen">Treppen</a></dd> <dd class="last"><a href="#" title="bodenbelege">Bodenbelege</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="navi"> <dt class="five"><a href="Anfahrt">Anfahrt</a></dt> <dd><a href="#" title="Werkstatt">Werkstatt</a></dd> <dd class="last"><a href=".#" title="Ausstellungsraum">Ausstellungsraum</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="navi"> <dt class="six"><a href="Kontakt">Kontakt</a></dt> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> CSS -Formatierungen /* CSS Document */ *{padding:0; margin:0;} html{ height:100%; } body { background-color: #E3E3E3; text-align:center; font-weight: bolder; font-family: Verdana, Arial, Helvetica, sans-serif; display: inline; } #wrapper { width:720px; color:#100764; background-color: #B6C3DB; margin-left: auto; margin-right: auto; margin-top: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } #kopfbereich{ color: #003399; background-color: #100764; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: xx-large; background-image: url(file:///C|/Dokumente und Einstellungen/Administrator/Desktop/alle ordner für die prüfungen/webentwicklungstudium/steffi,nelly ich webentwicklung/Studienarbeit/Bilder/verlauf_engel.gif); background-repeat:no-repeat; background-position: left top; margin-top: 0px; margin-right: 0; margin-bottom: -10px; margin-left: 0; padding: 2px 2px 2px 2px; } h1 { font-sizex-large; color:#E3E3E3; padding-top:10px; margin-top: 1px; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-bottom: 10px; } h2 { margin: 1px 0 0 0; font-size-large; color:#E3E3E3; padding-bottom:10px; padding-left:0px; } h3 { margin: 0px 0 0 0; font-size:large; color:#E3E3E3; padding-bottom:10px; padding-left:0px; font-style: normal; font-weight: 100; left: auto; top: auto; right: auto; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; height: auto; width: auto; } #menu {list-style-type:none; margin:40px auto 100px auto; padding:0; width:608px;} #menu li { float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:20; display: block; } #menu li dl { position:absolute; top:-29px; left:-56px; padding-bottom:0; height: 24px; background-color: #100764; } #menu li a, #menu li a:visited {text-decoration:none; display: block; } #menu li dd {display:none;} #menu li a:hover {border:0;} #menu li:hover dd, #menu li a:hover dd {display:block;} #menu li:hover dl, #menu li a:hover dl { padding: 0px; display: block; } #menu table { padding:0; margin:0px; font-size:16px;} #menu dl { width: 135px; margin: 0; padding: 0; left: auto; right: auto; bottom: 0px; visibility: inherit; display: block; } #menu dt { margin:0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; color: #e3e3e3; background-color: #100764; height: 30px; width: 127px; left: auto; right: auto; display: block; position: relative; } #menu dd { margin:0; padding:0; color: #e3e3e3; font-size: 10px; text-align:right; background-color: #100764; position: relative; height: auto; width: auto; } #menu dt a, #menu dt a:visited { display:block; font-size: 12px; color: #e3e3e3; text-align:center; background-color: #100764; border-top-color: #100764; border-right-color: #100764; border-bottom-color: #100764; border-left-color: #100764; height: auto; width: 125px; padding: 0.5em; } #menu li:hover dt a, #menu a:hover dt a { color:#100674; background-color: #e3e3e3; border-top-width: 0; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #100764; border-right-color: #100764; border-bottom-color: #100764; border-left-color: #100764; width: 125px; } #menu dd a, #menu dd a:visited { color:#e3e3e3; text-decoration:none; display:block; text-align:center; background-color: #100764; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #100764; border-left-color: #100764; width: 125px; padding-top: 0.25em; padding-right: 0; padding-bottom: 0.25em; padding-left: 0; } #menu dd a:hover { color:#100764; background-color: #e3e3e3; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #100764; border-left-color: #100764; } #textbereich{ padding-top: 20px; padding-bottom: 20px; padding-left: 100px; padding-right: 100px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #e3e3e3; } .p{ float:none; padding-right:150px; padding-left:300px} .bildlinks { float:left; border:6px solid #e3e3e3; margin-right: 10px; margin-bottom: 10px; } .bildrechts { float:right; border:6px solid #e3e3e3; margin-right: 10px; margin-bottom: 10px; } #fussbereich{ padding-top: 10px; padding-bottom:10px; border-top: 1px solid #100764; margin-top: 20px; color:#e3e3e3; background-color:#100764; } /* ==================================== Kontaktformular ================================ */ form { padding-left: 20px; background-color:#eee; width: 300px; border: 1px solid #8c8c8c; } label {display: block;} #adresse {border: 1px solid #8c8c8c; margin-bottom: 1em; width: 200px;} #absender, textarea { width: 200px; border: 1px solid #8c8c8c; margin-bottom: 1em;} textarea { height: 10em;} |
Sponsored Links |
|
||||
gibts dazu auch ne Online-Version?
Und eine Skizze was du genau willst, wäre auch nett.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Neue Website mit XHTML und CSS | Boof | (X)HTML | 2 | 06.01.2010 15:31 |
Gutes XHTML und CSS Unterrichtsmaterial zum Download? | sfpoldi | CSS | 2 | 10.12.2009 16:51 |
Content mit CSS formatieren | willi1 | CSS | 3 | 20.12.2006 14:41 |
Umsetzung des Table Tages in CSS bzw. XHTML 1.0 | joescrib | CSS | 4 | 09.08.2006 11:34 |
Weitere Turorials CSS XHTML | raf | Ressourcen | 0 | 30.05.2004 16:42 |