• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2 Spaltige Liste

J

jappi00

Mitglied
Hallo ich schon wieder,
ich habe heute versucht eine 2 Spaltige Liste zu erstellen.
Es hat bloß ein Problem gegeben. Ein Teil der Liste schiebt sich weiter nach unten.
Es tut mir leid, da ich weiß das es zu diesem Thema schon etwas gibt, ich konnte es bloß nicht finden...:(:(
Ein Dank an alle die sich trotzdem die Zeit nehmen um mir zu helfen. :)
http://www.apartmentoesterling.de/Austattung.html
Css:
Code: 
/*Listen*/
.Liste{
    text-align: left;
    float: left;
    table-layout: fixed;
}
.Liste li{
    margin-left: 20px;
}
.spalte_2 {
    width: 50%;
}
L. G.
Jappi00
 
Werbung:
Du hast die Listen im HTML-Code falsch aufgebaut. Durch diesen fehlerhaften HTML-Code stellt der Browser es quasi so dar wie er es will.

Falsch:
HTML: 
<ul class="Liste spalte_2">
                    <h2>K&uuml;che/Wirtschaft</h2>
                        <li>Einbauk&uuml;che</li>
                        <li>Fr&uuml;st&uuml;cksplatz</li>
                        <li>Waschmaschine und Trockner</li>
                </ul>

Richtig:
HTML: 
<ul class="Liste spalte_2">
                   <li><h2>K&uuml;che/Wirtschaft</h2></li>
                        <li>Einbauk&uuml;che</li>
                        <li>Fr&uuml;st&uuml;cksplatz</li>
                        <li>Waschmaschine und Trockner</li>
                </ul>

Wenn Du das an allen Stellen korrigierst und dann noch prüfst, dass der HTML-Code valide ist, dann sollte es passen. Wenn nicht, melde dich nochmal.

http://validator.w3.org/check?verbose=1&uri=http://www.apartmentoesterling.de/Austattung.html
 
Hallo,
danke für deine schnelle Hilfe!
Leider hat sich nichts verändert.
Was bedeutet valide? Ich habe aber dennoch (glaube ich) denn Code größten teils valide gemacht.
Muss ich die Seite auch auf UTF-8 stellen? Und ist sie nun Valide?
Nochmals vielen Dank,
Jappi00
 
Werbung:
Bei der Gestaltung hast Du noch das Problem, dass die 2. Liste kürzer ist als die 1. wodurch die 3. Liste automatisch sich darunter positioniert. Um das zu beheben hast Du mehrere Möglichkeiten:

a) Verwende statt gefloateten Listen "display: flex". Schau dich nach diesem Suchbegriff um um Beispiele zu finden.
b) Ergänze bei jedem 3. <ul> noch ein clear: both, wodurch das floating beendet und jede 3. Liste auf eine neue Zeile kommen sollte. Hilfreich hierfür sollte nth-child() sein.
 
Vielleicht ist ein verschachtelte Liste zweckmäßiger.
Code: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Verschachtelte Liste</title>
<style>

section {
 width:65%;
 padding:20px;
 border:1px solid #000;
 float:left;
}

ul {
 float:left;
 list-style-type:none;
}

ul li {
 float:left;
 width:50%;
}

li ul li {
 float:none;
 width:100%;
 list-style-type:circle;
}

ul li.rechts {
clear:left;
}

</style>
</head>
<body>
<section>
      <ul>
  <li><h2>Wohnzimmer</h2>
  <ul>
  <li>Digital-TV</li>
  <li>Stereoanlage mit Radio, CD und USB</li>
  <li>Sessel und Sofa</li>
  <li>Essbereich</li>
  </ul>
  </li>
   
  <li><h2>Schlafzimmer</h2>
  <ul>
  <li>Schlafzimmer mit Doppelbett (1,80 m) und Kleiderschrank</li>
  <li>Zusätzliche Decken und Kopfkissen auf Wunsch</li>
  </ul>
  </li>
   
  <li class="rechts"><h2>Küche/Wirtschaft</h2>
  <ul>
  <li>Einbauk&uuml;che</li>
  <li>Fr&uuml;st&uuml;cksplatz</li>
  <li>Waschmaschine und Trockner</li>
  </ul>
  </li>
   
  <li><h2>Arbeitszimmer</h2>
  <ul>
  <li>Arbeitsplatz</li>
  <li>Schrank Bett</li>
  </ul>
  </li>
  </ul>
</section>
</body>
</html>
 
Vielen Vielen Vielen Dank euch!
Ich habe es mit B) versucht
Hat damit geklappt, aber wodrin liegen denn die Vorteile der einzelnen Möglichkeiten?
 
Werbung:
Ich werde sie mal durchprobieren Danke,
Mit ist nähmlich aufgefallen das B) nicht sonderlich responsive ist... Vieleicht funktioniert es mit den anderen ja besser...
L.G.
Jappi00
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben