zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.04.2015, 20:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2015
Beiträge: 11
JOBE00 befindet sich auf einem aufstrebenden Ast
Standard 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>
[css]
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]
Angehängte Grafiken
Dateityp: png So ist es richtig.png (19,9 KB, 5x aufgerufen)
Dateityp: png So falsch, nach dem Verändern der Fensterbreite.png (62,2 KB, 5x aufgerufen)

Geändert von JOBE00 (02.04.2015 um 09:40 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.04.2015, 21:36
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.04.2015, 09:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2015
Beiträge: 11
JOBE00 befindet sich auf einem aufstrebenden Ast
Standard

Jetzt noch der Code
Mit Zitat antworten
  #4 (permalink)  
Alt 02.04.2015, 09:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Das kommt von floaten. Du gibst eine feste Breite an, da ist es klar, dass es in die nächste Zeile umbricht, wenn die verfügbare Breite nicht mehr ausreicht.
Mit Zitat antworten
  #5 (permalink)  
Alt 02.04.2015, 10:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2015
Beiträge: 11
JOBE00 befindet sich auf einem aufstrebenden Ast
Standard

ul#navigation a, ul#navigation span {
float: left;

Also die Zeile löschen?
Mit Zitat antworten
  #6 (permalink)  
Alt 02.04.2015, 10:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Wenn du sie nicht nebeneinander haben willst, ja
Mit Zitat antworten
  #7 (permalink)  
Alt 02.04.2015, 10:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2015
Beiträge: 11
JOBE00 befindet sich auf einem aufstrebenden Ast
Standard

Nein, also das Problem ist, dass sie ja nebeneinander stehen bleiben soll, sobald ich die Fenstergröße verändere.
Mit Zitat antworten
  #8 (permalink)  
Alt 02.04.2015, 10:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 02.04.2015, 10:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2015
Beiträge: 11
JOBE00 befindet sich auf einem aufstrebenden Ast
Standard

Theoretisch müsste ich mit Prozentangaben arbeiten.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 02.04.2015, 10:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Das ist eine Möglichkeit, ja.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
ausrichten horizontal, css, html, navigation ausrichten

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:03 Uhr.