zweispaltig und centriert

[Rolf]

Hallo,

seit einigen Stunden trainiere ich schon, aber ich packs net ... :-(
Die Boxen sollen in zwei Spalten und centriert auf der Seite angeordnet sein.
Außen kommt später noch was anderes hin, aber das ist nicht mehr mein Bier.
Bin für jede zielführende Idee dankbar ...

m.b.G. Rolf

[Kalle_B]

Hallo, Rolf,

dein <dt> ist position:absolute und rückt damit den Cursor beim Seitenaufbau nicht weiter. Das heißt, das nächste Element beginnt dort, wo auch <dt> anfing.

Genau das tut <dd>, du rückst es nur 11px vom linken Rand weg. Da steht es nun und überlappt das vorangegangene Element.

Entweder, du lässt <dt> floaten (left) oder du gibst <dd> einen größeren Abstand vom linken Rand.

LG Kalle

[Rolf]

Hallo Kalle,

die Elemente <dt> und <dd> stecken innerhalb der <li>-Box und diese Boxen
stehen untereinander, soweit ist das ja okay.

Nun soll nach der Häfte, hier 6 Boxen, eine neue Spalte anfangen. Also die
zweiten 6 Boxen sollen da rein. Das pack ich nicht ... :-(

Na-ja, vielleicht geht sowas wirklich nicht ohne HTML-Tabellen?

m.b.G. Rolf

[Steel]

Hi!

Nun soll nach der Häfte, hier 6 Boxen, eine neue Spalte anfangen. Also die
zweiten 6 Boxen sollen da rein. Das pack ich nicht ... :-(

Na-ja, vielleicht geht sowas wirklich nicht ohne HTML-Tabellen?

Noe. Fuer sowas nimmt man einen Container fuer die Spalten. Und als solches hat sich ein Div meist gut bewaehrt. Wenn Du also je 6 Boxen in ein Div einfuegst, solltest Du ein brauchbares Grundmodell haben.

Genau Dafuer sind Containerelemente naemlich da: Andere Elemente zu gruppieren. Streng katholische Semantikfetischischten koennten natuerlich damit kommen, dass deine Boxen auch nur eine Liste von Boxen sind...

[Rolf]

Hallo Steel,

Noe. Fuer sowas nimmt man einen Container fuer die Spalten. Und als
solches hat sich ein Div meist gut bewaehrt. Wenn Du also je 6 Boxen
in ein Div einfuegst, solltest Du ein brauchbares Grundmodell haben.

okay,
das mit den <div>-Container war einfach, nur plaziert bekomme ich sie nicht.
Hättest Du da bitte noch einen Tip für mich ...

m.b.G. Rolf

[Rolf]

Hallo,

Noe. Fuer sowas nimmt man einen Container fuer die Spalten.
Wenn Du also je 6 Boxen in ein Div einfuegst,
solltest Du ein brauchbares Grundmodell haben.
okay,
das mit den <div>-Container war einfach, nur plaziert bekomme ich sie nicht.
Hättest Du da bitte noch einen Tip für mich ...

schade, dass Du keine Zeit hast,
dann muss ich es eben solange mit einer HTML-Tabelle lösen.

m.b.G. Rolf

[Steel]

Hi,

Manchmal muss ich wirklich konzentriert arbeiten bei meinem Job und hab keine Zeit mich im Forum rumzutreiben. ;) Und dann geh ich schlafen. Da bin ich auch nur selten im Forum.

dann muss ich es eben solange mit einer HTML-Tabelle lösen.

Du hast bei den Boxen doch auch geschafft, 2 Elemente nebeneinander zu platzieren. Du suchst ein ganz gewöhnliches mehrspaltiges und zentriertes Layout. Durch das Zentrieren macht ein Div um die Spalten Sinn, das dann zentriert wird. Float wäre das Stichwort für die Spaltendivs.

[Rolf]

Hallo Steel,

Manchmal muss ich wirklich konzentriert arbeiten bei meinem Job ... f.f.
Und dann geh ich schlafen ... f.f.

immer diese faulen Ausreden, ich hätte da mehr Phantasie erwartet ... ;-)

Doch nun mal im Ernst:
Erkläre mir bitte, warum gestandene Designer immer diese sch**ss Listen
verwenden und unsereiner versucht den Quatsch nachzumachen ts ts ts ...
Habe die Seite noch einmal ganz neu aufgebaut und nun ist es
so wie ich es wollte und geht ohne Switch und Hacks im FF und IE.

Aber alleine die Art, wie man mit CSS etwas centriert macht mich echt
fertig. Wer entwickelt so einen Schachfug?
Unser Prof würde im Grab als Turbine laufen, wenn er das erfahren hätte!

Nochmals vielen Dank

m.b.G. Rolf

[Steel]

Hi!

Erkläre mir bitte, warum gestandene Designer immer diese sch**ss Listen
verwenden und unsereiner versucht den Quatsch nachzumachen ts ts ts ...

Weil Listen oder aehnliches durchaus Sinn machen bei dem Inhalt neben den Bildern.

Habe die Seite noch einmal ganz neu aufgebaut und nun ist es
so wie ich es wollte und geht ohne Switch und Hacks im FF und IE.

Das ist aber nur der grosszuegigen Auslegung der Browser zu verdanken! Dein HTML duerfte nicht besonders valide sein, da Du IDs, die nur 1x pro dokument vorkommen duerfen, mehrfach benutzt. Nimm Klassen oder eine Kaskade.

Aber alleine die Art, wie man mit CSS etwas centriert macht mich echt
fertig. Wer entwickelt so einen Schachfug?
Unser Prof würde im Grab als Turbine laufen, wenn er das erfahren hätte!

Wie Du Code schreibst? ;) Ich find wirklich nicht, dass ein simples, zentriertes zweispaltiges Design nur mit Schwachfug zu realisieren ist. Aber immerhin hast Du es hinbekommen.

Mein Konstrukt haette z.b. so ausgesehen (Ohne Border kein Boxmodellbug des IE):

<div id='wrap'>  
  <div>  
   Spalte1  
  </div>  
  <div>  
    Spalte2  
  </div>  
</div>

#wrap  
{  
  width:600px;  
  position:relative;  
  margin:auto;  
}  
/* Kaskade:*/  
#wrap div  
{  
 width:300px;  
 float:left  
}

Wenn man nunr nicht ganz soviel Wert auf 100%ige Zentrierung legt macht man das wrapdiv etwas groesser um dem IE Boxmodellbug genug Ausbreitungsraum zu lassen. Dann braucht man auch keine Hacks oder aehnliches.

[Rolf]

Hai Steel,

wie kommst Du darauf dass der Validator meine Datei nicht mag, er liebt sie!
Okay, habe '#' durch '.' und 'id' durch 'class' ersetzt. Das sind Peanuts,
und liegt nur daran, dass ich unseren CSS-Fritzen zu ernst nehme ... ;-)

Regeln und Prinzipien sind wie Dienstboten, wenn sie sich wichtig machen,
sollte man sie entlassen. Und wenn die Form den Inhalt dominiert macht der
Verstand Jahresurlaub ... ;-)

m.b.G. Rolf