[CSS] Layout in CSS, bin am verzweifeln

[byte_head]

Hi,

ich war mit SelfHTML immer sehr happy.
Aber seit gestern beschäftige ich mich mit Layouts mit CSS
(die mir hier anstatt Tabellenform empfohlen wurden)

Nun ist die Erklärung mit den 2Boxen am Anfang denkbar einfach,
danach geht es aber gleich mit einem komplexen 2Spalten Modell weiter,
wo allein das Stylesheet eine DinA4 Seite einnimmt. -.-

Nach dem Motto:

1. Fahrstunde Dreirad
2. Fahrstunde Porsche

Ich komme einfach nicht weiter, bin verwirrter als vorher.
Nun habe ich mir ein Stylesheet heruntergeladen und es versucht mir zu erklären,
das hat auch ganz gut geklappt.

Aber wie ich dann den Inhalt einfügen soll, ist mir schleierhaft.

Da gab es <div> <ul> lauter verschiedene Dinge.

Hier erstmal das Stylesheet von:

http://css.fractatulum.net/sample/layout_zum_mitnehmen.htm

body{margin:0;padding:0;background:white;color:black;font:14px verdana, sans-serif}

#top{margin:0 0 20px 0;padding:0;border-bottom:2px dotted black;}
#top h1{margin:0;padding:10px;font:bold 20px verdana, sans-serif;}

#menu{margin:30px 0 0 0;padding:0;list-style:none;float:left;width:20%;}
#menu li{margin:0 0 0 5px;padding:3px 3px 3px 0;width:90%;border-bottom:1px dotted black;}
#menu a{
margin:0;
padding:0 0 0 5px;
font:bold 13px verdana, sana-serif;
background:transparent;
color:black;
text-decoration:none;
border-left:5px solid white;}
#menu a:hover{border-left:5px solid black;}

#textlinks{float:left;width:40%;margin:0;padding:0;}
#textrechts{float:left;width:38%;margin:0;padding:0;}
#textlinks p, #textrechts p{padding:0 15px 0 15px;margin:20px 0 20px 0;}
#textlinks h2, #textrechts h2{font:bold 18px verdana, sans-serif;padding:0 15px 0 15px;}
#textlinks h3, #textrechts h3{font:bold 16px verdana, sans-serif;padding:0 15px 0 15px;}

#foot{margin:0;padding:0;clear:left;border-top:2px dotted black;}
#foot p{margin:0;padding:5px;font:bold 11px verdana, sans-serif;}
#foot .left{float:left;width:40%;border-right:2px dotted black;}
#foot .right{margin-left:41%;}
#foot .bottom{clear:both;text-align:right;border-top:2px dotted black;}

das ganze habe ich oben eingebunden:

<link rel="stylesheet" media="screen" href="main.css" />

Aber wie fange ich nun im Body an?
Ich bin am Verzweifeln.
Ich habe keine Ahnung wie ich anfangen soll.
Durch x Beispiele mit unterschiedlichen Möglichkeiten.

Danke schonmal, byte

 

[SirTwist]

erstmal solltest du dir im klaren sein, welches Seitenlayout du überhaupt haben willst.

Wenn du das schon hast, dann empfehle ich dir, dass du bei jeder id eines div Tags einen Rahmen einbaust. So siehst du sofort, ob die Größe des Div-Elements passt.

Ansonsten wäre da noch zu empfehlen: http://jendryschik.de/wsdev/einfuehrung/

 

[Zweipunktnull]

also ich würde mir zuallererste mal keine fertigen stylesheets irgendwo herunter laden und die dann irgendwie einzubauen versuchen, sondern zuerst einmal selbst kleinere stylesheets erstellen und mich dann langsam hocharbeiten...

außerdem wird bei einem layout doch mehr als nur n stylesheet mitgeliefert... da liegt doch 100pro noch n html template bei. weil man will ja schließlich nicht erraten, wie die divs verschaltet sind. deswegen versteh ich dein problem nicht.

 

[byte_head]

Hi,

sry hab vergessen die html-Page anzuhängen.
Werde mir den Link oben mal anschauen,
aber mit hat das Layout halt so schön gefallen.

MfG, byte

 

[HighTec]

Am besten suchst du dir ausm internet ein tutorial zu css und probierst die einzelnden befehle durch bis du alles verstanden hast ( Auf jeden Fall hab ich das so gemacht und bin gut zurecht gekommen)

Hier ein gutes Tutorial:

Klick

 

[Tankred]

Wenn du das schon hast, dann empfehle ich dir, dass du bei jeder id eines div Tags einen Rahmen einbaust. So siehst du sofort, ob die Größe des Div-Elements passt.

Prima Tipp, dass kann auch ich Dir nur empfehlen! Ich habe anfangs auch um jedes Objekt einen Rahmen zeichnen lassen, damit ich sehe, was für Auswirkungen Änderungen am Stylesheet haben.

Ansonsten: stell Dir das Anfangs wie ein Word-Dokument mit Dokumentenvorlage vor. Wenn Du willst, dass die Elemente auf einer HTML-Seite nach Deinen Vorstellungen gestaltet werden, dann bietet Dir CSS die Möglichkeit, dies zu tun.

Also angenommen, Du hast verschiedene Überschriften, Textpassagen usw., dann kannst Du im Stylesheet angeben, wie diese auszusehen haben. Das macht man mit:

name { option:wert; }

Also wenn Du zum Beispiel festlegen willst, dass die Überschrift h1 16 Pixel groß sein soll, dann gibst Du folgendes an:

h1 { font-size:16px; }

Dann kannst Du noch Schriftfarbe, Hintergrundfarbe, Schriftschnitt u.v.m. angeben. Spiele einfach ein wenig mit den Werten, bis Du ein Gefühl dafür bekommst. Übrigens fand ich am Anfang einen Editor hilfreich, der CSS-Code vorschlägt bzw. vervollständigt. Denn anfangs hat man ja das Vokabular noch nicht so im Kopf. GoLive! und Dreamweaver machen das zum Beispiel.

 

[HighTec]

Ja das wäre natürlich auch eine Lösung... Es ist ja schliesslich erstmal wichtig das ganze zu ver´stehen. Wenn man es nicht versteht kann mann es gleich vergessen

 

[Crizzo]

Lies dir mal das hier alles durch: http://www.css4you.de/wscss/index.html
Die acht Links, dass ist absolutes Basiswissen, ohne das kannst du nichts machen!