Ergebnis 1 bis 3 von 3

Thema: navigation zentrieren

  1. #1
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard navigation zentrieren

    ich hab nen kleines problem.. ich hab ne navi über ne liste erstellt, jedoch bekomme ich des ganze net mit "margin: 0 auto;" zentriert...
    den code der kompletten seite hab ich mal unten gepostet.. des weiteren verschluckt der ie mir auch immer die unteren border bei den links in dieser liste- auch da find ich net den zuständigen wert.
    ich mach jetzt mal das, was jeder entwickler tut, wenn er zu lange auf den monitor starrt... ne kleine pause (hab ja noch kisten vom umzug auszupacken^^)

    ich hoffe es findet sich jemand, der mir aus dem code-dschungel raushelfen kann
    (@sejuma: ich glaube du kennst da wen der mir den weg weist )

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="en" lang="en">
    <head>
      <title></title>
    
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
    <style type="text/css">
    <!--
      .body&#123;
      height&#58;100%;
      width&#58;98%;
      background&#58;#000000;
      color&#58;#33cc00;
      &#125;
      
      #header&#123;
       height&#58;120px;
       width&#58;960px;
       background&#58; url&#40;''&#41; no-repeat;
       margin&#58; 0 auto;
      &#125;
    
      #navi&#123;
       width&#58;960px;
       height&#58;45px;
       background&#58;lightgrey;
       text-align&#58; center;
       margin&#58; 0 auto;
      
    
      
      &#125;
      
      #navi ul&#123;
       list-style-image&#58;none;
       margin&#58;0 auto;
     
      &#125;
      
      #navi ul li&#123;
       display&#58;inline;
       float&#58;left;
       margin&#58; 0 auto;
       padding&#58;10px 5px 2px 20px;
    
      &#125;
    
      #navi ul li a&#58;hover&#123;
        color&#58;#fFDF6F; 
        text-decoration&#58;none;
        border&#58;#3DD36A 1px inset;
    
      &#125;
    
      #navi ul li a&#123;
        color&#58;#3DD36A;
        text-decoration&#58;none;
        border&#58;#3DD36A 1px outset;
        padding&#58;3px 8px;
        font-family&#58;arial;
        font-size&#58;12px;
        font-weight&#58;bold;
      &#125;
    
      #navi ul li a&#58;active&#123;
        color&#58;#FFFFFF;
        text-decoration&#58;none;
        
      &#125;
      
      #all&#123;
      width&#58;960px;
      background&#58;#000000;
      margin&#58;0 auto;
      display&#58;block;
     
      &#125;
      
      #wrapper_oben&#123;
      background&#58; #000000;
      width&#58;930px;
      height&#58;180px;
      float&#58;left;
      margin&#58;0 auto;
      &#125;
        
      #wrapper_mitte&#123;
       background&#58; #000000;
       width&#58;930px;
       height&#58;180px;
       float&#58;left;
       margin&#58;0 auto;
     
      &#125;
        
      #wrapper_unten&#123;
       background&#58; #000000;
       width&#58;930px;
       height&#58;180px;
       float&#58;left;
       margin&#58; 0 auto;
      &#125;
      
    
      
      #footer&#123;
      width&#58; 100%;
      background&#58;#000000;
      display&#58;block;
      clear&#58;both;
      margin&#58;0 auto;
      text-align&#58;center;
      &#125;
      
      a&#123;
        color&#58;#3DD36A;
        text-decoration&#58;none;
    	
      &#125;
      a&#58;hover&#123;
        color&#58;#fFDF6F; 
    	text-decoration&#58;none;
    	
      &#125;
      
      a&#58;active&#123;
        color&#58;#FFFFFF;
        text-decoration&#58;none;
    	
      &#125;
      
      .clearing&#123;
      clear&#58;both;
      &#125;
      
      .centering&#123;
      margin&#58; 0 auto;
      background&#58; #fff000;
      &#125;
    
    
    
    -->
    </style>
    </head>
    <body class="body">
    <div id="header"></div>
    <div id="navi">
    <ul>[*]Link[*]Link[*]Link[*]Link[*]Link[*]Link[/list]
    <br class="clearing" />
    </div>
    
    <div id="all">
    <div id="wrapper_oben">
    
    </div>
    
    <div id="wrapper_mitte">
    </div>
    
    <div id="wrapper_unten">
    </div>
    
    <div id="footer">
    </div>
    
    </div>
    </body>
    </html>
    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 !!!!!
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  2. #2
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,

    wenn ich das richtíg sehe soll es eine horizontale Navigation werden.

    Da gibt es ja zwei Möglichkeiten:
    #navi ul li bekommt display:inline;
    oder
    #navi li bekommt float:left;

    Du vermischt das. Zuerst bittest du li ein inline-Element zu werden und dann durch float ein Blockelement.

    Ich denke du musst dich für eins von beiden entscheiden.

    display:inline für li ist einfacher zu realisieren, da reicht dann neben display:inline; für li text-align:center; für ul aus um die Navi zu zentrieren.

    Die anklickbare Fläche wird vergrößert indem a z.B. padding bekommt.

    Dem IE sollte man per CC noch Layout für #navi ul li a geben:
    #navi ul li a { height:1px; }

    Die Variante mit float ist etwas umständlicher aber da hast du mehr Möglichkeiten über die Darstellung, weil du es dann nur mit Blockelementen zu tun hast.

    Ach ja, ich täte für #navi keine Höhe vergeben.
    Es hat ja schon durch width Layout für den IE bekommen.

    koslowski

  3. #3
    Forum Guru
    Themenstarter
    Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    danke, werds gleich mal testen!
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. HP zentrieren
    Von Gast im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 30.09.2006, 00:54
  2. div zentrieren
    Von skaal im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 20.08.2006, 18:04
  3. zentrieren mit <div>
    Von michelon139 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 12.04.2006, 22:39
  4. zentrieren!
    Von <Vincent> im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 13.07.2005, 20:14
  5. Menue-Navigation zentrieren
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 29.09.2004, 18:45

Stichworte

Berechtigungen

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