Ergebnis 1 bis 5 von 5

Thema: Navigationsleiste Breite korrekt anpassen - automatisch einstellen

  1. #1
    HTML Newbie
    Registriert seit
    06.06.2014
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Lächeln Navigationsleiste Breite korrekt anpassen - automatisch einstellen

    Hallo an alle,

    ich habe folgendes Problem bei meiner Navigationsleiste:

    Bei manchen Usern ist die Leiste zu schmal, d.h. der letzte Listenpunkt rutscht in die neue Zeile.

    zu schmal.jpg
    Bei anderen Usern ist diese zu groß, d.h. nach dem letzten Listenpunkt ist unschöner Freiraum.
    zu bret.jpg

    Hier der HTML Code meiner HTML Seite. (Die standardmäßigen <html> und <body> etc. wurden auf einer anderen Seite verknüpft, welche diese Seite aufruft...

    HTML-Code:
    <nav id="nav_eingeloggt">
        <ul>
            <li class="cat1">
                <a href="index.php?site=start">Startseite</a>
            </li>
    
            <li class="cat2">
                <a href="">Infos zum Tippen</a>
                <ul>
                    <li> <a href="index.php?site=anleitung">Anleitung zum Tippen </a></li>
                    <li> <a href="index.php?site=regeln" >Tippspiel-Regeln </a></li>
                </ul>
            </li>
    
            <li class="cat3">
                <a href="#">Das Tippspiel</a>
                <ul>
                    <li> <a href="index.php?site=tippspiel" >Meine Tipps </a></li>
                    <li> <a href="index.php?site=rangliste" >Rangliste ansehen </a></li>
                </ul>
            </li>
    
            <li class="cat4">
                <a href="">Rund um die WM</a>
                <ul>
                    <li> <a  href="index.php?site=wm_news">WM-News </a> </li>
                    <li> <a href="index.php?site=spielplan" >aktueller Spielplan</a></li>
                    <li> <a href="index.php?site=tabelle" >aktueller Tabellenstand</a></li>
                    <li> <a href="index.php?site=weltmeister" >bisherige Weltmeister</a></li>
                </ul>
            </li>
    
    
            <li class="cat5">
                <a href="mailto: xxxyyyzzz">Kontakt</a>
    
            </li>
    
            <li class="cat6">
                <a href="index.php?form=logout">Abmelden</a>
            </li>
    
        </ul>
    </nav>
    Hier der CSS Code, welcher die NAV betrifft:
    Code:
    /* CSS Document 8*/ body { font-family: "Times New Roman", Times, serif; font-size: 14px; line-height: 1.4; } #menu { margin-bottom: 20px; } #content { width: 1024px; margin-left: auto; margin-right: auto; } /* Navi 863 pix nav (5 Teile) oder 1095 pix bei (6 Teile) oder 1064 */ nav { width: 1020.6px; height: 50px; margin-left: auto; margin-right: auto; } #nav_ausgeloggt { width: 690.5px } nav ul { padding: 0px; margin: 0px; box-shadow: 2px 2px 2px #dfdfdf; -moz-box-shadow: 2px 2px 2px #dfdfdf; -webkit-box-shadow: 2px 2px 2px #dfdfdf; } nav ul:after { clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden; } nav ul, nav ul li { background-color: #FAFAFA; } nav ul li { list-style: none; float: left; border-right: 1px solid #dfdfdf; } nav ul li a { text-decoration: none; display: block; color: #333; padding: 14px 34px 14px 34px; font-size: 18px; -webkit-transition: background 0.3s ease-out 0s; -moz-transition: background 0.3s ease-out 0s; -o-transition: background 0.3s ease-out 0s; transition: background 0.3s ease-out 0s; } nav ul li.cat1:hover a { background-color: #E6DD00; } nav ul li.cat2:hover a { background-color: #8CB302; } nav ul li.cat3:hover a { background-color: #008C74; } nav ul li.cat4:hover a { background-color: #004C66; } nav ul li.cat5:hover a { background-color: rgb(0, 102, 255) /*#332B40; */ } nav ul li.cat6:hover a { background-color: #332B40; } nav ul li:hover > ul { visibility: visible; } nav ul li ul { display: inline; visibility: hidden; position: absolute; padding: 0px; z-index: 1; } nav ul li ul li { float: none; } nav ul li ul li a:hover { color: #333; } nav ul li:hover > a { color: #FAFAFA; } nav ul li ul li a { color: #FAFAFA; } nav ul li ul li a:hover { color: #333; background-color: #FAFAFA !important; }
    Ich bitte um Hilfe, da bei jedem die Breite anders ist.


    Bitte hilft mir

    Grüße

    MaxMan
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    573
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Navigationsleiste Breite korrekt anpassen - automatisch einstellen

    Hallo,

    du arbeitest viel mit festen Breitenangaben. Wenn das umgende Element eine festgelegte Breite hat und die eingeschlossenen Elemente insgesamt breiter sind als das umgebende Element erfolgt ein Zeilenumbruch. Bei dir könntest du zum Beispiel das padding für das a-Element links und / oder rechts verringern.

    Die Ursache ist, das die unterschiedlichen Browser und Betriebssysteme die Schriften leicht unterschiedlich interpretieren. Oder wenn die vorgegene Schrift auf dem Rechner des Users nicht vorhanden ist eine Ersatzschrift wählen.

    Wenn du das vermeiden willst solltest du ein flexibles Design, am besten verbunden mit einem Responsive Design, wählen. Google bietet da jede Menge Lösungen.

    Gruss

    MrMurphy
    Geändert von MrMurphy (06.06.2014 um 16:54 Uhr)

  3. #3
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Navigationsleiste Breite korrekt anpassen - automatisch einstellen

    Wobei Prozentangaben völlig ausreichen würden. Zumindestens solange bis Media-Queries greifen.

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    06.06.2014
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Navigationsleiste Breite korrekt anpassen - automatisch einstellen

    Hallo,

    danke für die beiden Antworten.
    Ich habe es mit folgender Lösung geschafft:

    Zentrierung der Menüleiste durch DIV Container
    Siehe hier: http://stackoverflow.com/questions/2...hout-the-width

    Und die Menü Listenelemente der Navigation hab ich so angepasst:
    nav ul li {
    list-style: none;
    float: left;
    border-right: 1px solid #dfdfdf;
    white-space: nowrap;
    }

    Danke an alle!

  5. #5
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Navigationsleiste Breite korrekt anpassen - automatisch einstellen

    Eigentlich hatte ich es so vestanden, dass sich die Menüleiste über die gesamte Breite erstrecken soll.
    Hier mal ein Beispiel:
    Code:
    <!doctype html>
    <html>
    <head>
    <title>Beispielseite</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
    * {
     margin:0;
     padding:0;
     list-style:none;
     border:none;
     box-sizing:border-box;
    }
    /* CSS Document  8*/
    body {
        font-family: "Times New Roman", Times, serif;
        font-size: 14px;
        line-height: 1.4;
    }
    
    nav , ul {
     float:left;
     width:100%;
     background:#eee;
     position:relative;
    }
    
    ul {
     border-bottom:1px solid #000;
    }
    nav:after {
     content:"";
     position:absolute;
     top:0;
     right:16.66666667%;
     bottom:0;
     width:1px;
     background:#000;
    }
    
    li {
     float:left;
     width:16.666666667%;
     position:relative;
    }
    
    
    a {
     display:block;
     padding:10px;
     text-decoration:none;
     text-align:center;
     font-weight:bold;
     color:#000;
     border:1px;
     border-style:none solid ;
     margin-right:-1px;
    }
    
    li ul {
     position:absolute;
     left:-99999em;
    }
    
    
    li ul li {
     float:none;
     width:100%;
    }
    
    li ul li a {
     text-align:left;
    }
    
    li:hover > ul {
     top:auto;
     left:0;
    }
    
    li:hover > ul  a {
     text-decoration:none;
    }
    
    
    ul ul li:hover a {
     background:#dea;
    }
    
    li:hover a {
     text-decoration:underline;
    }
    
    nav li:nth-child(1) a ,
    nav li:nth-child(5) a ,
    nav li:nth-child(6) a {
      border-style:solid none none none;
    }
    
    nav li:nth-child(2) a ,
    nav li:nth-child(3) a ,
    nav li:nth-child(4) a {
     border-style:solid solid none solid;
    }
    </style>
    </head>
    <body>
    <div id="content">
    <nav>
        <ul>
            <li><a href="index.php?site=start">Startseite</a></li>
            <li><a href="#">Infos zum Tippen</a>
                <ul>
                    <li> <a href="index.php?site=anleitung">Anleitung zum Tippen </a></li>
                    <li> <a href="index.php?site=regeln" >Tippspiel-Regeln </a></li>
                </ul>
            </li>
    
            <li><a href="#">Das Tippspiel</a>
                <ul>
                    <li> <a href="index.php?site=tippspiel" >Meine Tipps </a></li>
                    <li> <a href="index.php?site=rangliste" >Rangliste ansehen </a></li>
                </ul>
            </li>
    
            <li><a href="#">Rund um die WM</a>
                <ul>
                    <li> <a  href="index.php?site=wm_news">WM-News </a> </li>
                    <li> <a href="index.php?site=spielplan" >aktueller Spielplan</a></li>
                    <li> <a href="index.php?site=tabelle" >aktueller Tabellenstand</a></li>
                    <li> <a href="index.php?site=weltmeister" >bisherige Weltmeister</a></li>
                </ul>
            </li>
    
    
            <li><a href="mailto: xxxyyyzzz">Kontakt</a></li>
            <li><a href="index.php?form=logout">Abmelden</a></li>
        </ul>
    </nav>
    </div>
    
    </body>
    </html>

Ähnliche Themen

  1. Wordpress Kommentar-Feld (Disqus) Breite anpassen - Wie?
    Von pcklick im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 17.12.2012, 17:13
  2. td Breite automatisch
    Von FaFoo im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 01.04.2008, 17:37
  3. Headder breite anpassen...
    Von gelöschter User im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 07.01.2008, 15:48
  4. wie kann ich die breite der tabelle so einstellen, dass.....
    Von felixstoessel im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 09.12.2007, 12:41
  5. Breite und Höhe von Frames einstellen! Wie funktioniert's ??
    Von Agent.Hamster im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 10.04.2004, 23:59

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •