CSS Grundlegende Fragen zum CSS Layout

[NaTaS77]

hallo

als wie gesagt habe ich paar grundlegende fragen zum mein css layouts.
mein ergebniss soll folgendermassen aussehen:

die gesamte seite also div "" doc soll mittig ausgerichtet werden.

#doc {
	margin-left: auto;
	margin-right: auto;
	
}

in den div tag content solles sich die beiden divs : "content_mitte" und "news" sollen sich wie im bild verhalten.

ich habe bis jetzt folgende struktur.

<div id = "doc">
    <div id = "header"></div>
     <div id = "content">
          <div id = "contetn:mitte"></div>
          <div id = "news"></div>
          </div><--- end from "content"
      <div id = "footer"></div>
<--- end from "doc"--></div>

ich hoffe ihr könnt mir helfen so das wir gemeinsam zum ein ergebniss kommen können.

Danke Gruß

 

[Mr. Snoot]

Zum Zentrieren musst du soweit ich recht informiert bin folgendes machen:

body
{
  text-align:center;  /* Zentrierung im Internet Explorer */
}

div#doc
{
  text-align:left;   /* Seiteninhalt wieder links ausrichten */
  margin:0 auto;  /* standardkonforme horizontale Zentrierung */
}

Nicht wundern wegen dem text-align, das muss so sein.


Ansonsten brauchst du dieses content-div wohl nicht, einfach alles in das doc-div packen.

Schau dir mal hier das zweispaltige Layout und davon v.a. das letzte Beispiel vor dem Dreisspaltigen Layout an, das kommt schon in etwa hin: http://de.selfhtml.org/css/layouts/mehrspaltige.htm#zweispaltig (bzw. http://de.selfhtml.org/css/layouts/anzeige/2spaltig_breite.htm)


Beim dreispaltigen Layout gibt's auch ne Kopf- und Fußzeile, die du problemlos auf dein Beispiel übertragen können solltest.



edit: wie ich sehe ist der Code auch 1:1 die Zentrierung von SelfHTML

 

[NaTaS77]

danke
wieso ist der contetn div überflüssig?

also men problem grade ist das ich erstens den footer nicht unten halten kann.und den news tikker neben conten_mitte halten kann. und absolute positionierungen. wollte ich halt vermeidern.

mein ziel ist es die gestaltung mit margin und pading werten zu realisieren.


Gruß

 

[Mr. Snoot]

Naja, weil alles zusammen in doc steckt, und dadurch auch zentriert wird. Das die beiden mittleren divs nebeneinanderstehen, erledigst du mit float, die Fußzeile hat die Eigenschaft clear: both, womit diese dann wieder darunter platziert wird und nicht neben den beiden anderen.

Kannst dir von den Mehrspaltigen Layouts mit Kopf- und Fußzeile noch mal das zweite Beispiel anschauen.

Dort hat das div #Inhalt im Moment margin-oben den Wert 0 (margin: 0 0 1em 220px), das kannst du ja einfach erhöhen.

Vom Grundprinzip ist das aber das, was du willst - musst halt mal alles Unnötige rauswerfen (Farben + Hintergrundbilder) und bspw. überall Rahmenlinien anzeigen lassen. Dann solltest du genau sehen, was wo sitzt und wie beeinflusst wird.

 

[PuppetMaster]

Der Internet-Explorer-Workaround ist nur notwendig für IE 5.5 und älter. Mit dem lässt sich aber selbst microsoft.com nicht mehr richtig anzeigen.
Für IE 6 und neuer ist er, valider Doctype vorausgesetzt, nicht mehr nötig.

 

[NaTaS77]

ich danke dir sehr Mr. Snoot

CSS wird für mich immer mehr zu einer wichtigsten Sachen was Web-Design angeht.
ich bin PHP-Programierer und hab ehrlich gesagt CSS immer überflogen. bis heute

Gruß