[CSS] Tabellenähnliche Struktur mit CSS erzeugen

[bitfunker]

Hi, Folks!

Ich würde gerne eine Struktur wie die im Beispielbild erzeugen. Mit HTML-Tabellen ist das ja nun kein Thema, aber mit CSS hab ich das noch nicht hinbekommen.

Hab schon reichlich mit margin und padding rumgespielt, aber das Ergebnis war in allen Versuchen eher "unpässlich".

Daher: Kann mir mal jemand die Struktur einer einfachen "Tabelle" in CSS erklären/posten?

THX!

 

[Muuhmann]

mach ein grundgerüst, also ein <div>. das ist für den rahmen außen.
in diesem <div> machst du noch min. 3 weitere.
1. div: ist für oben. da kommt das bild mit der anweisung float: left; rein, die links schreibst du auhc dazu.. ggf. mit float: right in einem <span> (weiß nich genau ob das sein muss, probier es erstmal ohne aus.
2. div: wird der dicke rand links, mit float: left;
3. div: wird der inhalt mit float: right;
nach dem 3. div schreibst du ein <br style="clear:both" /> damit die float-eigenschaft aufgehoben wird..

hoffe die minimalistische erkläreung konnte dich weiter bringen..

 

[bitfunker]

Ist schonmal nicht übel (THX), aber wie bekomme ich das ganze Gerüst zentriert?

 

[Mr. Snoot]

Entweder so

<div align="center">..</div>

oder via CSS

position:relative;
width:0px;
margin:0 auto;

Ist aber beides nur horizontal, kA ob man auch vertikal zentrieren kann.

Siehe auch hier: https://www.computerbase.de/forum/t...ieren-von-bildern-innerhalb-einer-box.130702/

 

[Batti]

Hi,

meinst du das die Tabelle in der Mitter der Seite hängt? Dann würde ich um das Ganze einen <div> legen und dem dann

margin: 0 auto;

geben.

edit: da war wohl jemand schneller...

MfG

 

[Cobinja]

In der CSS-Datei setzt du ganz oben für das HTML-Tag "body" "margin:auto;"

body {
  margin: auto;
}

Dort kannst du auch eine background-color, font-family oder font-size setzen. Das gilt dann für alle Inhalte der Seite, ausser es wird explizit für irgendwas neu gesetzt.

edit: Schneller? Stimmt.

 

[MarcDK]

http://intensivstation.ch/templates/

=)

 

[Muuhmann]

mach es wie batti es vorgeschlagen hat..

 

[Zhan]

grundlagen zum thema tabellenlose layouts:


http://www.css4you.de/wslayout1/index.html


die seite ist aber auch generell ne super css referenz.

 

[Adagio]

Um ein Blockelement korrekt zu zentrieren, braucht es eine definierte Breite (auto oder 0px ist Quark) und margin: 0 auto; ... weiter nichts.

 

[Zhan]

Um ein Blockelement korrekt zu zentrieren, braucht es eine definierte Breite (auto oder 0px ist Quark) und margin: 0 auto; ... weiter nichts.

jein. kommt druff an, ob man seine seite kompatibel zum ie5/5.5 halten möchte, oder nicht

 

[Adagio]

Daher schreibe ich ja: um es korrekt zu zentrieren.

Der IE5.x und IE6 (im Quirksmodus) machen es halt nicht korrekt über text-align.

 

[Zhan]

spitzfindig aber korrekt ;-)