|
|||
CSS-Navigation
Hey,
gerade baue ich eine CSS-Navigation, aber meine Kenntnisse sind nach mehreren Jahren ziemlich eingerostet. Ich hab's immerhin geschafft, dass die "fertige" Navigation in etwa so aussieht, wie sie soll. Aber der Code dahinter ist eine echte Baustelle, lauter verschachtelte Listen und keine sauberen Definitionen. So sieht's aus: Und das ist der Code dahinter (bitte nicht erschrecken): HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>XYZ</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; background: #fff; } .nav { padding-left: 15%; padding-bottom: 10px; } .nav #rubrik { text-transform: uppercase; font-weight: bold; text-align: center; color: #303030; margin-left: 10px; padding-bottom: 5px; border-bottom: 2px solid #303030; } .nav ul { list-style: none; padding: 0; margin: 0; margin-top: 15px; } .nav li { font-family: Arial, sans-serif; font-size: 1.2em; line-height: 30px; height: 30px; border-bottom: 1px solid #888; } .nav a { text-decoration: none; padding-left: 10px; color: #303030; display: block; transition: .3s background-color; } .nav a:hover { background-color: #303030; color: #fff; } .nav a.active { background-color: #ccc; color: #444; cursor: default; } .nav #image { padding: 0px 20px 30px 10px; border-right: 1px solid #ccc; } @media screen and (min-width: 600px) { .nav li { width: 160px; border-bottom: none; height: 30px; line-height: 30px; font-size: 0.95em; } .nav li { display: inline-block; margin-right: -4px; } } --> </style> </head> <body> <header> <div style="position: absolute; width: 100%; margin-top: 9px; border: 10px solid #303030; z-index: -2"></div> <div style="position: absolute; margin-left: 14%; width: 930px; height: 150px; background-color: #fff; z-index: -1"></div> <div class="nav"> <ul> <li style="margin-right: 90px;"> <img src="logo.png" style="width: 200px; height: 100px;" id="image"> </li><li><span id="rubrik">Rubrik 1</span> <ul> <li><a class="active" href="#">Seite</a></li> <li><a href="#">Weitere Seite</a></li> <li><a href="#">Noch eine Seite</a></li> </ul> </li><li><span id="rubrik">Rubrik 2</span> <ul> <li><a href="#">Seite</a></li> <li><a href="#">Weitere Seite</a></li> <li><a href="#">Noch eine Seite</a></li> </ul> </li><li><span id="rubrik">Rubrik 3</span> <ul> <li><a href="#">Seite</a></li> <li><a href="#">Weitere Seite</a></li> <li><a href="#">Noch eine Seite</a></li> </ul> </li><li><span id="rubrik">Rubrik 4</span> <ul> <li><a href="#">Seite</a></li> <li><a href="#">Weitere Seite</a></li> <li><a href="#">Noch eine Seite</a></li> </ul> </li><li style="margin-right: 0px; width: 30px;"> </li><li><span id="rubrik"></span> <ul> <li style="width: 44px"><a href="#"search/">X</a></li> <li><a href="#">Extra 1</a></li> <li><a href="#">Extra 2</a></li> </ul> </li> </ul> </div> </header> </body> Vielen Dank für eure Hilfe! Sarah |
Sponsored Links |
|
|||
Hi,
Ich habe es mir mal angeschaut und einiges verändert. Edit fiddle - JSFiddle Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } html { } body { font: 100%/1.5 Arial, Helvetica, sans-serif; padding-top: 10px; margin: 0; } header { margin: 0 auto; max-width: 979px; } header:after { content: " "; clear: both; display: block; } header hr { background-color: #303030; color: #303030; border: #303030; height: 20px; position: absolute; margin: 0; top: 20px; left: 0; right: 0; z-index: -1; } header img { background-color: #fff; border: none; float: left; width: 170px; height: 101px; padding: 0px 20px 30px 10px; } nav { border-left: 1px solid #ccc; display: inline-block; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { display: inline-block; background: #fffaf0; color: #303030; line-height: 1.7; margin-left: -5px; padding-left: 5px; width: 153px; } nav ul li span { border-bottom: 2px solid #303030; font-weight: bold; font-size: 1.2em; margin-left: 10px; padding-bottom: 5px; text-transform: uppercase; } nav ul li.fa { background: none; padding: 0; } nav ul li span.unsichtbar { visibility: hidden; } nav ul li a { background-color: #fffaf0; color: #000; text-decoration: none; display: block; padding-left: 10px; } nav a:hover { background-color: #303030; color: #fff; } nav a.active { background-color: #ccc; color: #444; cursor: default; } nav ul li ul { margin-top: 10px; } nav ul ul li { } </style> </head> <body> <header> <hr> <img src="http://placehold.it/350x150/FF8000/FF8000.png" alt=""> <nav> <ul> <li><span>Rubrik 1</span> <ul> <li><a class="active" href="#">Seite</a></li> <li><a href="#">Weitere Seite</a></li> <li><a href="#">Noch eine Seite</a></li> </ul> </li> <li><span>Rubrik 2</span> <ul> <li><a href="#">Seite</a></li> <li><a href="#">Weitere Seite</a></li> <li><a href="#">Noch eine Seite</a></li> </ul> </li> <li><span>Rubrik 3</span> <ul> <li><a href="#">Seite</a></li> <li><a href="#">Weitere Seite</a></li> <li><a href="#">Noch eine Seite</a></li> </ul> </li> <li><span>Rubrik 4</span> <ul> <li><a href="#">Seite</a></li> <li><a href="#">Weitere Seite</a></li> <li><a href="#">Noch eine Seite</a></li> </ul> </li> <li class="fa"><span class="unsichtbar">xxx</span> <ul> <li><a href="#">X</a></li> <li><a href="#">Extra 1</a></li> <li><a href="#">Extra 2</a></li> </ul> </li> </ul> </nav> </header> </body> </html> MfG Roland |
Sponsored Links |
|
|||
Hallo K.Roland, vielen, vielen Dank fürs Überarbeiten! Ich hatte noch gar nicht wieder geschrieben, aber das hole ich jetzt nach: Das hat mir sehr weitergeholfen. Ich hab in den letzten Wochen mit deiner Version weiter gearbeitet. An drei Stellen komme ich nicht weiter (und hab bestimmt versehentlich auch nochmal etwas Wirrwarr hineingebastelt).
So sieht es zur Zeit aus: Und so soll es aussehen: (Schwarzes X = Bild)
Hast du eine Idee, wie ich diese Probleme lösen kann? Und das ist der komplette Code: HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> * { box-sizing: border-box; } body { padding: 5%; max-width: 1600px; margin: 0 auto; } body, td, input[type=text], textarea { font-family: Arial, sans-serif; font-size: 100%; line-height: 1.7em; } img { max-width: 100%; } form.search { float: right; margin: 0; /* width: 30%; */ width: 150px; height: 20px; } form.search input { font-size: 1.1em; margin: 20px 0px 0px 16px; padding: 0.1em 0.5em; border: 1px solid #ccc; width: 180px; } form.search button { display: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } html { } body { padding-top: 40px; margin: 0; } header { margin: 0 auto; max-width: 979px; } header:after { content: " "; clear: both; display: block; } header hr { background-color: #caa; color: #caa; border: #caa; height: 24px; position: absolute; margin: 0; top: 55px; left: 0; right: 0; z-index: -1; } header img { background-color: #fff; border: none; float: left; width: 170px; height: auto; padding: 2px 20px 30px 10px; } navigation { font-size: 0.9em; border-left: 1px solid #eee; display: inline-block; } navigation ul { list-style-type: none; margin: 0; padding: 0; } navigation ul li { display: inline-block; background: #fff; color: #caa; line-height: 1.7; margin-left: -5px; padding-left: 5px; width: 153px; } navigation ul li span { border-bottom: 2px solid #caa; font-weight: bold; font-size: 1.2em; margin-left: 10px; padding-bottom: 5px; text-transform: uppercase; } navigation ul li.fa { background: none; padding: 0; } navigation ul li span.unsichtbar { visibility: hidden; } navigation ul li a { color: #000; text-decoration: none; display: block; padding-left: 10px; border: none; width: 100%; } navigation a:hover { background-color: #caa; color: #fff; transition: .2s background-color; } navigation a.active { background-color: #ddd; color: #444; cursor: default; } navigation ul li ul { margin-top: 10px; } navigation ul ul li { } hr { background-color: #eee; color: #eee; border: #eee; height: 1px; } ul#international li { margin-left: -8px; padding-left: 0px; width: 90%; } ul#international a { padding: 0px; } ul#international img { padding: 0px; border: 1px solid #ccc; } navigation { padding-top: 1px; padding-left: 20px; } navigation ul li span { padding-bottom: 3px; } navigation ul li { padding-left: 20px; margin-left: -20px; } header { margin-left: 20px; max-width: none; } header img { background-color: #fff; border: none; float: left; width: 300px; height: auto; padding: 0px 4px 30px 0px; } #kategorie-1 { width: 9.5em; } #kategorie-2 { width: 9.1em; } #kategorie-3 { width: 10.9em; } #kategorie-4 { width: 12.7em; margin-right: 17px; } #extra { width: 4.2em; border-left: 1px solid #eee; border-right: 1px solid #eee; margin-right: 17px; } </style> </head> <body> <header> <hr> <a href="#"><img src="http://placehold.it/350x150/CCAAAA/CCAAAA.png"></a> <navigation> <ul> <li id='kategorie-1'><span>Rubrik 1</span> <ul> <li><a class="active" href="#">Seite</a></li> <li><a href="#">Weitere</a></li> <li><a href="#">Noch eine</a></li> </ul> </li> <li id='kategorie-2'><span>Rubrik 2</span> <ul> <li><a href="#">Seite</a></li> <li><a href="#">Weitere</a></li> <li><a href="#">Noch eine</a></li> </ul> </li> <li id='kategorie-3'><span>Rubrik 3</span> <ul> <li><a href="#">Seite</a></li> <li><a href="#">Weitere Seite</a></li> <li><a href="#">Noch eine Seite</a></li> </ul> </li> <li id='kategorie-4'><span>Rubrik 4</span> <ul> <li><a href="#">Seite</a></li> <li><a href="#">Weitere Seite</a></li> <li><a href="#">Noch eine Seite</a></li> </ul> </li> <!-- Zusatzspalte --> <li id="extra"><span></span> <ul id='international'> <li><a href='#'><img src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Flag_of_the_United_Kingdom.svg/300px-Flag_of_the_United_Kingdom.svg.png'></a></li> <li><a href='#'><img src='http://upload.wikimedia.org/wikipedia/en/thumb/c/c3/Flag_of_France.svg/300px-Flag_of_France.svg.png'></a></li> <li style=""></li> </ul> </li> <!-- // Zusatzspalte --> <li style='width: 1.35em;'><span></span> <ul> <li></li> <li> <form class='search' action='suche' method='get'> <input type='text' name='q' placeholder='Suche' value='' /> <button type='submit' name='submit'>Suchen</button> </form> </li> <li></li> </ul> </li> </ul> </navigation> </header> </body> </html> Sarah |
|
|||
|
|
|||
Zitat:
|
Stichwörter |
code, css, navigation, verschachtelte listen, wirrwarr |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit CSS Dropline menü | horst77 | CSS | 1 | 12.08.2009 12:49 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
CSS Navigation mit "umschlossener" Grafik | name | CSS | 6 | 24.09.2007 23:33 |
Problem mit ie6 und css navigation | Sinclair | CSS | 0 | 29.03.2007 17:00 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 19:18 |