CSS 4 mal 2 LIs/DIVs nebeneinander und untereinander

Mr. Snoot · 1. Juli 2011

Hio,

ich verzweifel mal wieder an floats & Co.

Ich möchte 8 Listenelemente (oder divs) nebeneinander und untereinander anordnen, quasi so:

Das klappt - aber nur solange ich keine fixen Breitenangaben angebe. Sobald ich eine width vorgebe, stehen alle Elemente untereinander.

Code:

<style type="text/css">

    div.links { float:left; }

  </style>
</head>

<body>

  <div class="links">1</div>
  <div>2</div>
  <div class="links">3</div>
  <div>4</div>
  <div class="links">5</div>
  <div>6</div>
  <div class="links">7</div>
  <div>8</div>

</body>

Any ideas? Danke.

Fipsi16 · 1. Juli 2011

Ich würde es ca so machen:

HTML:

<style type="text/css">
    #column-left{ float:left; }
</style>
</head>

<body>

  <div id="column-left">
      <div>1</div>
      <div>3</div>
      <div>5</div>
      <div>7</div>
</div>

  <div id="column-right">
      <div>2</div>
      <div>4</div>
      <div>6</div>
      <div>8</div>
  </div>

</body>

nicht getestet!

NoXPhasma · 1. Juli 2011

Fipsi16 schrieb:

Ich würde es ca so machen:

HTML:

<style type="text/css">
    #column-left{ float:left; }
</style>
</head>

<body>

  <div id="column-left">
      <div>1</div>
      <div>3</div>
      <div>5</div>
      <div>7</div>
</div>

  <div id="column-right">
      <div>2</div>
      <div>4</div>
      <div>6</div>
      <div>8</div>
  </div>

</body>

nicht getestet!

Nicht ganz, so würde es funktionieren:

HTML:

<style type="text/css">
    .float { float:left }
    .cl { clear:left }
</style>
</head>

<body>

  <div class="float">
      <div>1</div>
      <div>3</div>
      <div>5</div>
      <div>7</div>
</div>

  <div class="float">
      <div>2</div>
      <div>4</div>
      <div>6</div>
      <div>8</div>
  </div>
<div class="cl"></div>

Das letzte div mit der class cl sorgt dafür das der restliche content von der float Angabe nicht betroffen ist.

Mr. Snoot · 1. Juli 2011

Danke, das läuft. Aber schön ist was anderes

IceMatrix · 1. Juli 2011

Das geht eigentlich ganz anders. Erstell ein <div> Element außenrum mit fester Breite (2x Spaltenbreite) und dann gib den einzelnen Elementen auch ne feste Breite und _allen_ float: left

51% · 1. Juli 2011

ich würde es so ohne float machen:
<dl>
<dt>1</dt><dd>2</dd>
<dt>3</dt><dd>4</dd>
...
</dl>

dd wird mittels css> dd>position:relative; top: -npx; left: npx; positioniert (da muss man sich etwas spielen, bis es in einer linie ist).

NullPointer · 1. Juli 2011

Ist zwar ein "böses" Wort, aber: wäre das nicht ein Fall für <table>?

51% · 1. Juli 2011

wieso "böse"? wenn man tabellenwerte hat, spricht nichts dagegen, diese in einer tabelle zu präsentieren.

Crizzo · 1. Juli 2011

Also die Beispiele von Fipsi16 und NoxPhasma ist wirklich eine fürchterliche Div-Suppe, bitte nicht machen.

Je nachdem was in die 8 Kasten soll, dann wäre NullPointers Vorschlag die vermutlich beste Variante. Ansonsten kommt man mit einer Definitionsliste, wenn 1 zu 2 in Bezug steht, besser weiter. Ansonsten ganz normale <ul> und <li>, dann links floaten lassen und durch die Breite dafür sorgen, dass immer nur 2 Kasten pro Zeile auf eine Höhe passen.

Gruß
Crizzo

Mr. Snoot · 1. Juli 2011

Ja, vielleicht - sind aber eigentlich keine Werte für ne Tabelle.

Muss ich mal überlegen; schöner wärs aber

Crizzo · 1. Juli 2011

Dann nimm die ul oder dl

Yuuri · 2. Juli 2011

Code:

div.links {
  float:left;
  [B]display: inline-block;[/B]
}

... dann klappts auch mit der fixen Breite.

Belee · 2. Juli 2011

Ich würde mir mal angewöhnen, das letze " ; " in einer Klasse oder ID wegzulassen.

Tabellen sind soviel ich weiß nicht verboten, auch sind die für manches Vorhanden Pflicht, wenn man z.B. nicht so ein Suppe wie da oben produzierne will, DIVs verschachtel, floaten usw. obwohl das richtige Werkzeug vor der Nase liegt? verstehe ich nicht, muss ich aber wohl auch nicht.

@Yuri
Damit haben aber alte Browser Ihre Probleme, mit einer normalen Tabelle aber nicht.

Yuuri · 2. Juli 2011

Belee schrieb:
Damit haben aber alte Browser Ihre Probleme, mit einer normalen Tabelle aber nicht.

Ich programmier zumindest für heute und morgen und nicht für gestrige Browser.

Es wird überall und immer geraten die neueste Version zu nutzen, egal ob es sich dabei nur um neue Features oder auch nur um Sicherheitslücken beim Update handelt. Aber nenn mir mal einen Browser (bis auf den altbackenen IE), welcher inline-block nicht unterstützt.

Mr. Snoot · 2. Juli 2011

Vielleicht sollte ich noch erwähnen, dass ich das ganze für eine mobile Seite für Handys brauche; also bitte keine Tricks, die nur Chrome 27 beherrscht

Hab mich jetzt erst mal mit der Tabellenvariante angefreundet.

IceMatrix · 2. Juli 2011

die mobilen browser sind noch die technisch besten. da is im normalfall kein ie6 dabei, und das ist schon ein großer gewinn für die menschheit!

Mr. Snoot · 6. Juli 2011

Belee schrieb:
Ich würde mir mal angewöhnen, das letze " ; " in einer Klasse oder ID wegzulassen.

Wieso eigentlich?

Crizzo · 6. Juli 2011

Bei sowas:

Code:

 div.links { float:left; }

Es nicht nötig, schadet aber auch nicht. Du brauchst aber kein ; wenn danach nur noch } kommt.

Mr. Snoot · 6. Juli 2011

Jo, aber es klang so, als ob das irgendwelche "Vorteile" hätte.

51% · 6. Juli 2011

weil man es nicht braucht. blöd nur, wenn man darunter einen selektor neu ans ende setzt und das fehlende semikolon vergessen hat. deshalb hintippen und gut isses.

CSS 4 mal 2 LIs/DIVs nebeneinander und untereinander

Mr. Snoot

Gast

Lt. Commander

Lieutenant

Mr. Snoot

Gast

Lt. Commander

Cadet 4th Year

Lt. Commander

Cadet 4th Year

Redakteur Pro

Mr. Snoot

Gast

Redakteur Pro

Fleet Admiral

Lt. Commander

Fleet Admiral

Mr. Snoot

Gast

Lt. Commander

Mr. Snoot

Gast

Redakteur Pro

Mr. Snoot

Gast

Cadet 4th Year

Ähnliche Themen