|
|||
Problem mit Navigation
Guten Abend Community,
ich habe angefangen eine Website zu schrieben, klappt auch soweit alles, jedoch ist mir nach dem Verändern des Fensterverhältnisses aufgefallen, dass die Navigation wie verrückt spielt. Sobald ich das Browserfenster verkleinere stehen auf einmal die Punkt der Navigation untereinander. Zum Besseren Verständnis füge ich einige Bilder an. Vielleicht kann mir einer helfen. Ziel soll es sein, dass die Sparten der Navigation beim Verkleinern und Vergrößern des Fensters immer inline bleiben. Falls wer den Code braucht, bitte fragen. Code:
<nav> <ul id="navigation"> <li><a href="index.htm"><div class="home">Home</div></a></li> <li><a href="about.htm"><div class="about">Über uns</div></a></li> <li><a href="concept.htm"><div class="concept">Konzept</div></a></li> <li><a href="ohours.htm"><div class="ohours">Öffnungszeiten</div></a></li> <li><a href="contact.htm"><div class="contact">Kontakt</div></a></li> <li><a href="drive.htm"><div class="drive">Anfahrt</div></a></li> <li><a href="sitenotice.htm"><div class="impressum">Impressum</div></a><div></div></li> </nav> ul#navigation { font-family: Helvetica, Arial, sans-serif; font-size: 11pt; text-align: center; background-color: #04B404; margin-top: -69px; margin-left: 150px; margin-right: 150px; //*border-left: 5px solid #04B404;*// } .home { margin-top: 20%; } .about { margin-top: 20%; } .concept { margin-top: 20%; } .ohours { margin-top: 20%; margin-left: -6.5px; } .contact { margin-top: 20%; } .drive { margin-top: 20%; } .impressum { margin-top: 20%; } ul#navigation li { list-style: none; display: inline; } ul#navigation a, ul#navigation span { float: left; width: 6.6em; height: 3.9em; margin: 0.4em; padding: 0.2em 1em; text-decoration: none; font-weight: bold; /*border: 1px solid black;*/ /*border-left-color: white;*/ /*border-top-color: white;*/ color: white; font-family: sans-serif; background-color: #04B404; display: inline; } ul#navigation a:hover, ul#navigation span { /*border-color: white;*/ /*border-top-color: black;*/ /*border-left-color: black;*/ color: #04B404; background-color: white; } ul#navigation div*{ clear: left; } [/css] Geändert von JOBE00 (02.04.2015 um 09:40 Uhr) |
Sponsored Links |
|
||||
Wir brauchen immer den Code
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Sponsored Links |
|
|||
Wie ich vorhin schon sagen wollte, du hast einen Denkfehler: Du gibst eine fixe Breite an. Ein Beispiel mit einfachen Zahlen: Wenn du sagen wir 5 Navigationspunkte hast und jedem 50px Breite zuweist (insgesamt 5* 50 = 250px), was soll passieren, wenn du nur noch 200px Breite hast? Dann ist kein Platz mehr und sie werden untereinander dargestellt.
Also definiere erst einmal, was du genau haben willst. |
Stichwörter |
ausrichten horizontal, css, html, navigation ausrichten |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit sticky navigation | ha-bauer | Javascript & Ajax | 6 | 22.04.2013 20:05 |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Dropdown Navigation Problem in Opera | xuxu | CSS | 1 | 28.01.2011 17:45 |
Ul mit Sub-Ul Navigation macht Darstellungsprobleme im Opera | eRoZion | CSS | 17 | 16.09.2005 10:30 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 19:18 |