Ergebnis 1 bis 5 von 5

Thema: Problem bei Zentrierung einer Liste (ul, li)

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

    Standard Problem bei Zentrierung einer Liste (ul, li)

    Hey ich hoffe ihr könnt mir helfen. Ich hab eine einfache Liste in einem Div, und diese soll zentriert im Div vorliegen, jedoch schaffe ich es nicht diese zu zentrieren. Vielleicht kann mir ja einer helfen (die Ränder sind nur zur Übersicht für mich).
    HTML-Code:
    <html>
    <header>
    <style type="text/css">
    #navigation {
        margin: 0 auto;
        height: 80px;
        border-style: solid;
        width: 800px
    }
        #navigation ul {
            padding: 0px;
            margin: 0px;
        }
        #navigation li {
            list-style: none;
            float: left;
            text-align: center;
            border-style: solid;
            width: 120px;
        }
    </style>
    </header>
    <body>
    <div id="navigation">
    <ul>
    <li>
    <p>Home</p>
    </li>
    <li>
    <p>Massage</p>
    </li>
    <li>
    <p>Bodywrapping</p>
    </li>
    <li>
    <p>Angebot</p>
    </li>
    <li>
    <p>Kontakt</p>
    </li>
    </ul>
    </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 !!!!!

  2. #2
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Problem bei Zentrierung einer Liste (ul, li)

    du musst das Ul-Element zentrieren mit margin:0 auto siehe hier
    Code:
    #navigation ul {
            padding: 0px;
            margin: 0px auto;
        }
    Die Li-Elemente kannst du ja nicht zentrieren, da sie ja gefloatet sind.

  3. #3
    HTML Newbie
    Themenstarter

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

    Standard AW: Problem bei Zentrierung einer Liste (ul, li)

    Danke sehr, aber würde die Liste gerne vertikal haben also alles nebeneinander. Ohne das Float ist alles untereinander

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Problem bei Zentrierung einer Liste (ul, li)

    Gib dem UL eine Breite, dann kannst du es zentrieren.

    Beipiel:
    Code:
    #navigation ul {
        padding: 0px;
        margin: 0px auto;
        width: 630px;
    }

  5. #5
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Problem bei Zentrierung einer Liste (ul, li)

    Wenn man ein wenig auf "modernere" browser setzt (in dem Fall diejenigen die "inline-block" kennen), dann braucht man keine Breite beim <ul>.

    HTML-Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
    
      <title></title>
      <style type="text/css">
        #navigation {
            margin: 0 auto;
            height: 80px;
            border-style: solid;
            width: 800px
        }
        #navigation ul {
            padding: 0px;
            text-align: center;
            
        }
        #navigation li {
            list-style: none;
            display: inline-block;
            text-align: center;
            border-style: solid;
            width: 120px;
        }
      </style>
    </head>
    
    <body>
      <div id="navigation">
        <ul>
          <li>
            <p>Home</p>
          </li>
    
          <li>
            <p>Massage</p>
          </li>
    
          <li>
            <p>Bodywrapping</p>
          </li>
    
          <li>
            <p>Angebot</p>
          </li>
    
          <li>
            <p>Kontakt</p>
          </li>
        </ul>
      </div>
    </body>
    </html>
    Ja ich habe mir erlaubt daraus valides HTML zu machen + tidy html drüber gejagt zur Formatierung.

Ähnliche Themen

  1. css Problem mit vertikale zentrierung
    Von css-chaos im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 01.02.2014, 14:46
  2. zentrierung problem bei IE7
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 01.10.2009, 16:27
  3. Zuweisen einer Liste aus Objekt einer neu erstellten Liste
    Von Rachgold im Forum Forum für alle anderen Programmiersprachen
    Antworten: 1
    Letzter Beitrag: 29.07.2007, 09:55
  4. Problem mit Zentrierung und Orientierung
    Von Sportfreund im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 03.10.2005, 16:08
  5. Problem mit Zentrierung im IE
    Von SniperSister im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 22.07.2005, 11:28

Stichworte

Berechtigungen

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