CSS Layout

[privacy]

Guten Abend zusammen!

Wie bekomme ich folgendes Layout mit CSS hin? Die einzelnen Farben stellen die Bereiche dar, die ich oben benötige. Das komplette soll zentriert im Browser liegen. Ich kämpfe nun schon seit Stunden mit dem Layout und bin zu blöd das ganze umzusetzen. Ich möchte keine Tabellen verwenden und kein align=center.

Vielleicht weiss ja von euch jemand Rat.

mfg Denis

 

[Batti]

Hi,

Ich hatte mal ein bissel Langeweile und hab das mal zusammengebaut

Ich hoffe das entspricht deinen Wünschen. Die Breiten- und Höhenangaben sind aber statisch in Pixel.

html
{
	min-height: 100.1%;
	color: White;
}

body
{
	padding: 0;
	margin: 0;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: .7em;
	text-align: center;
}

#page
{
	float: center;  
	text-align: left;
	width: 750px;
	margin: 0 auto;
}

#header
{
	background-color: #D8A6A5;
	height: 50px;
	width: 750px;
	float: left;
}

#left_middle
{
	background-color: #530709;
	height: 100px;
	width: 100px;
	float: left;
}

#upper_middle
{
	background-color: #1350E9;
	height: 50px;
	width: 650px;
	float: left;
}

#lower_middle
{
	background-color: #13E81C;
	height: 50px;
	width: 650px;
	float: left;
}

#content
{
	background-color: #FE0000;
	width: 750px;
	height: 400px;
	float: left;
}

#footer
{
	clear: both;
}

Oder hab ich dich falsch verstanden und es geht nur um das zentrierte?
Das ist bei mir alles im Div "Page" realisiert, der alle anderen Divs umschließt.

 

[privacy]

vielen Dank schonmal ich schau es mir gleich mal genau an und vergleich es mit dem was ich hatte Irgendwann werde ich CSS auch noch in meinen Kopf bekommen. *grml*

 

[KonKorT]

min-height

interpretiert der Internet-Explorer nicht

 

[Batti]

huch stimmt, muß natürlich dann height sein

naja, ich nutze halt lieber Firefox

MfG

 

[privacy]

http://www..../info/test/index.php

Warum um alles in der Welt klebt der Text bei padding:30px am oberen DIV?

Links/rechts/unten passt der Abstand. Nur nach oben stimmt er nicht. Kann mir jemand helfen ?

Außerdem würde ich gerne das ganze zentriert haben, aber das ich das einfach in CSS hinbekomme glaube ich schon nicht mehr

Das http://www.thenoodleincident.com/tutorials/box_lesson/basic_centered.html

habe ich gefunden Und align="center" wäre das was ich bisher gemacht habe ...

mfg Denis

Edit:

Und gleich noch eine Frage. Wie bekomme ich so schnell wie mit Tabellen ein schönes Form hin. Mit Tabellen habe ich immer schön die Werte ausgerichtet. Mit CSS müsste ich tausend Boxen bauen, die dann auch noch tun was sie gerade wollen. Ahhhh bin gerade kurz davor, das Form wieder in eine Tabelle zu klatschen, egal was der Validator sagt Bitte helft mir.

http://barrierefrei.e-workers.de/workshops/formulare/notable_form.html

Das Form habe ich nun auch noch gefunden. Naja super, das Form ist nun ohne Tabellen und was hab ich davon. Der Quelltext schrumpft minimal und das CSS Sheet bläht sich auf das hundertfache auf

 

[Mr. Snoot]

Zentrieren könntest du es mittels CSS so:

{
	position:relative;
	text-align:center;
	margin:0px auto;
}

Wegen dem Formular würde ich wohl schon ne Tabelle benutzen, da, wie du auch schon festgestellt hast, man hier mit CSS eigentlich keine Vorteile mehr bei der Anordnung hat.

Für sowas ist imo CSS auch gar nicht gedacht.

edit: Beispiel für ein Formular bei SelfHTML:

<form action="input_text_tabelle.htm">
  <table border="0" cellpadding="0" cellspacing="4">
    <tr>
      <td align="right">Vorname:</td>
      <td><input name="vorname" type="text" size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td align="right">Zuname:</td>
      <td><input name="zuname" type="text" size="30" maxlength="40"></td>
    </tr>
  </table>
</form>

 

[KonKorT]

http://www.*.de/info/test/index.php

Warum um alles in der Welt klebt der Text bei padding:30px am oberen DIV?

Links/rechts/unten passt der Abstand. Nur nach oben stimmt er nicht. Kann mir jemand helfen ?

Ja, dann gib dann mach einfach zusätzlich noch

padding-top: 20px;

Einfach eine kleinere Zahl, bis es wieder gut aussieht

Kleiner Tipp am Rande: Stell mal die Breite von 1024 auf 980, so muss man als 1024x768 Internetuser, nicht horizontal scrollen

 

[privacy]

kannst wieder öffnen hab nur ein bisl gebastelt

Hab das Form nun mit Labels und ein bisl CSS gebaut und sieht doch ganz hübsch aus. Nun würde mich wirklich noch interessieren wie ich dieses Div in der Mitte namens "inhalt" zentriert und mit 10px Abstand vom Header Bereich dargestellt bekomme. Alle meine Versuche sind bisher fehlgeschlagen

 

[Batti]

Hi,

und diese Variante funktioniert nicht?

#content .inhalt
{
  text-align: center;
  margin-top: 10px;
}

MfG

 

[privacy]

naja es centert nun. Nur wie bekomme ich dann den Text trotzdem linksbündig. Ich möchte ja nur den Bereich in die Mitte bewegen.
Die 10px Padding funktonieren trotzdem nicht.

 

[Batti]

Du sagst padding, das margin-top hat auch nicht gegriffen?

 

[privacy]

nope ich hab erstmal deinen Sheet reinkopiert. Hat aber nur zur Folge gehabt, dass das ganze zentriert war. Aber margin ist ignoriert worden.

www....de/info/test

www....de/info/test/index.css

Das ist die aktuelle Version :/

Ich würde halt gerne den Inhalt DIV zentriert haben und den Inhalt was Text angeht trotzdem linksbündig.

 

[Batti]

Ich habs mir mal angeschaut. Hier der relevante Teil:

inhalt
{
	clear: both;
	width: 150px;
	margin: 0 auto;
	padding: 10px 0px 0px 0px;
}


#upper_footer
{
	width:1024px;
	height:12px;
	background-color:#7a3403;
}

Hab das "clear" nach oben gezogen und ihm dann ein padding gesetzt. Ob dieses zentrierte dir so passt weiß ich nicht. Hab einfach eine feste Breite vergeben und dann margin auf auto gesetzt.

 

[privacy]

Vielen Dank nun funktioniert es
Hast du mir eine Seite wo speziell floats und das clearen erklärt wird. Ich komm da immer noch nicht ganz zurecht.
Hab auch noch eine Frage zu meinem Sheet. Warum bekomme ich im Browser eine Scrollleiste rechts obwohl nichtmal 70% des Bereichs bedeckt sind.

 

[PuppetMaster]

Zu float:

http://www.css-technik.de/css-examples/219_9/
http://www.kaipahl.de/brain/web_cssfloat.html

Wegen dem Scrollbalken solltest du die Eigenschaft min-height: 100.1%; entfernen.

 

[Batti]

das mit der Leiste ist ganz einfach:

html
{
    min-height: 100.1%;
}

Ich verwende das immer, um dieses Bildwackeln zu vermeiden, fall die Seite mal länger wird. FF hat ja die Angewohnheit, die Leiste auszublenden. Aber das ist natürlich Geschmackssache

Ansonsten finde ich die Seite css4you.de zum Beispiel ganz nützlich.

edit: war ich wohl zu langsam

 

[privacy]

Nu hab ich noch eine kleine Frage (ich hoffe ich nerve euch nicht )

Nun habe ich für die Klasse inhalt ein Padding von 10px. Ich würde aber gerne um inhalt eine Border haben. Das ganze hat dann zur Folge, dass ich wieder oben klebe mit dem Rahmen. Was ja auch richtig ist. Nun habe ich mir gedachte "ok machst du den Innenabstand von "content" auf 10px. " Naja das ganze will aber mal wieder nur rechts/links/unten. Oben klebe ich wieder

Vielen Dank für die Links oben.

 

[Batti]

so sollte es fruchten

#content
{
	clear:both;
	padding:10px;
}

#content .inhalt
{
	width: 500px;
	margin: 0 auto;
	padding: 10px;
	border: 1px solid #7a3403;
}

 

[privacy]

Vielen DANK Nun funktioniert es so wie ich es mir vorgestellt habe. Na dann bastel ich mal weiter.