CSS-Container 3Zeilen+3Spalten

Computer: Software & Programmierung HTML & CSS
#1

Hallo Zusammen,

ich versuche mich nun schon seit einiger Zeit an einem Seitenaufbau, welchen ich über einen div-container realisieren möchte.
Leider bekomme ich keine Browserkompartiblität hin.
Nach dem mittlerweile 4. Neu-Anfang habe ich mir nun gedacht, dass ich mir mal Hilfe hole.

Erstmal eine Beschreibung wie es aussehen soll (so weit wie möglich browserkompartibel):

  • Eigenschaften Grundgerüst:

  • Breite von 950px

  • 3 Zeilen (tabellarisch gesehen)

  • zentriert

  • Eigenschaften 1. Zeile:

  • top (grafik) höhe 120px

  • Eigenschaften 2. Zeile:

  • 3 Spaltig

    1. Spalte (links) 50px breit
    1. Spalte (mitte) 150px breit
    1. Spalte (rechts) 750px breit bestimmt durch dynamischen Inhalt die höhe der 2. Zeile

  • Eigenschaften 3. Zeile:

  • Seitenfuß 20px hoch

Nun einer meiner misslungenen Versuche (farben nur zu testzwecken, da diese später durch eingebundene seiten vorgegeben werden):

  
#container{width:950px;text-align:left;background-color:black;}  
  
#header{height:120px;background-color:blue;}  
  
#container2{width:950px;text-align:left;background-color:green;}  
#s1{float:left;width:50px;background-color:yellow;}  
#s2{margin-left:50px;width:150px;background-color:red;}  
#s3{margin-left:200px;background-color:aqua;}  
  
#footer{height:20px;background-color:blue;}  
  
#clear{clear:both;}

[HTML]

Dyn-Inhalt Zeile 1
Dyn-Inhalt Zeile 2
Dyn-Inhalt Zeile 3
Dyn-Inhalt Zeile 4
Dyn-Inhalt Zeile 5
Dyn-Inhalt Zeile …

[/HTML]

Kann mir jemand helfen?
Vielen Dank im voraus für Eure Bemühungen.

Gruß

#2

Guten Morgen!

ich versuche mich nun schon seit einiger Zeit an einem
Seitenaufbau, welchen ich über einen div-container realisieren
möchte.

Das ist gedanklich falsch. Den Seitenaufbau (Layout) macht man zwar mit CSS, aber eben nicht mit HTML. Man benutzt für das Layout nicht besondere HTML-Tags, sondern man baut auf dem HTML-Code auf. Denn mit HTML wird ja die Bedeutung des Inhalts definiert. Es hängt also vom Inhalt ab, welche Tags man verwendet und CSS kann natürlich nur auf diese Tags aufbauen.

  • Eigenschaften Grundgerüst:
  • Breite von 950px

Das ist sehr breit. Handys z.B. haben manchmal nur 200px Breite.

  • 3 Zeilen (tabellarisch gesehen)

Denke nicht in Tabellen. Das Layout hat nichts mit Tabellen zu tun. Leute, die früher Layout mit Tabellen gemacht haben, tun sich ungemein schwer, HTML und das Erstellen von Websites richtig zu lernen, weil sie sich nicht von den Tabellen lösen können.

  • zentriert

margin:0 auto;

  • Eigenschaften 1. Zeile:
  • top (grafik) höhe 120px

Denke nicht in Tabellen. Du hast hier einen Header, also eine Überschrift. Zeichne sie im HTML-Code richtig aus und überlege dann, welche CSS-Eigenschaften Du verwendest, um ihr Aussehen zu bestimmen.

  • Eigenschaften 2. Zeile:

Es gibt keine Zeilen. Wenn Du versuchst, Tabelleneigenschaften auf Nicht-Tabellen-Tags zu projizieren, wirst Du scheitern. Nur Tabellen funktionieren wie Tabellen.

  • 3 Spaltig

Gibts viele Beispiellayouts.
Zwei gefloatete Elemente mit fester Breite und eines dazwischen.

    1. Spalte (rechts) 750px breit bestimmt durch dynamischen
      Inhalt die höhe der 2. Zeile

Sowas geht nur in Tabellen. Vermutlich suchst Du „Faux Columns“.

Nun einer meiner misslungenen Versuche

Der HTML-Code ist der Sprache HTML nicht würdig.
Was aber auch logisch ist, weil Du keinen Inhalt hast. HTML ohne Inhalt ist sinnfrei.

Mein Tipp: Anfängern empfehle ich, zum Lernen immer mit dem Inhalt anzufangen. Dann den Inhalt semantisch sinnvoll mit HTML auszeichnen, dabei keinmal ans Layout denken. Danach erst Layout und Design mit CSS machen.
Nur so versteht man, insbesondere wenn man mal Tabellenlayout gemacht hat, wie HTML eigentlich wirklich funktioniert!

Kann mir jemand helfen?

Du kannst Dir selbst helfen, indem Du meine Tipps annimmst.

Auf dem HTML-Code ein Stylesheet aufzubauen ist insofern sinnlos, als dass viele der s hinterher wieder verschwinden und dann u.U. das Stylesheet wieder angepasst werden muss. So sollte man aber nicht arbeiten.

Fang vorne an, und nicht hinten!

Wenn Du noch Fragen hast - wovon ich ausgehe - dann frag. Oder guck Dir mal die Einführung an, die in FAQ:1161 verlinkt ist. Stichworte: „Semantik“ und „Trennung von Inhalt und Layout“.

Erst, wenn man HTML wirklich kann, macht das Erstellen von Stylesheets wirklich Sinn und treibt einen nicht in den Wahnsinn.

Liebe Grüße,
-Efchen