Layout in CSS erstellen

lookme · 16.03.2010

Hallo zusammen,
ich möchte folgendes Layout in CSS erstellen, und würde mich über Tipps von Euch sehr freuen.

http://luenersv.bplaced.net/bilder/HP_LSV_Turnen_NEU.jpg

Ich befasse mich neu mit CSS und möchte es sehr gerne lernen.

Gruß Frank - lookme

qwertzuio · 16.03.2010

AW: Layout in CSS erstellen

hi frank,

muss dir leider sagen, dass auf fragen dieser form häufig recht grantig geantwortet wird... das problem ist, dass du keine spezielle frage hast sondern man den eindruck gewinnen kann auf die art "sagt mir mal wie ich das machen muss". das sorgt häufig für missstimmung und deshalb der gute rat: erkundige dich und wenn du konkrete fragen hast - und dann merkt man, dass du dich damit auseinander gesetzt hast und nicht weiterkommst - dann wird dir auch gerne geholfen. hoffe, du hast das richtig verstanden.

eine quelle für die ganz grundsätzliche strukturierung ist unter anderem hier gegeben:
Grundlagen für Spaltenlayout mit CSS – SELFHTML aktuell Weblog

mit einer guten referenz/nachschlagewerk kommst du dann auch weiter wenns an die inhalte geht:
http://de.selfhtml.org/

Metal_Head · 16.03.2010

AW: Layout in CSS erstellen

Ich habe mir CSS auch durch "leraning by doing" beigebracht.
Diese zwei Seiten haben mir geholfen:
de.selfhtml.org und intensivstation.ch

Ausserdem empfehle ich dir das Buch Little Boxes.

Zu deinem Entwurf: Ich denke mal, du wirst das am einfachsten mit
div-boxen lösen können und deine, in PS gesliceten Grafiken in den div's als
background-image einfügen. Vergibst noch die height und width und es sollte grob passen.

Genaueres findest du wie gesagt vorallem bei selfhtml.

Hoffe, ich konnte dir ein bisschen Helfen, damit dir der Einstieg nicht zu schwer fällt.

lookme · 16.03.2010

AW: Layout in CSS erstellen

Hallo,

danke für die schnellen Antworten.
Ich habe ja auch schon mal gebastelt, aber ich habe das problem, das bei mir der "footer" immer oben im Bild hängen bleibt.

Hier der CSS Code:

@charset "utf-8";
body {
background-repeat:repeat;
background:url(../image/background.png);
margin:0px auto;
color:#000;
}

#alles {
position:relative;
width:990px;
margin:0 auto;
}

#alles #menu_oben {
position:absolute;
top:0;
width:990px;
height:33px;
margin-top:10px;
background-image: url(../image/HP_LSV_Turnen_01.png);
}

#alles #header {
position:absolute;
top:43px;
width:990px;
height:203px;
background-image: url(../image/HP_LSV_Turnen_02.png);
background-repeat: no-repeat;
}

#alles #rootline {
position:absolute;
top:246px;
width:990px;
height:29px;
background-image: url(../image/HP_LSV_Turnen_03.png);
}

#alles #menu {
position:absolute;
top:275px;
width:985px;
height:32px;
background-image: url(../image/HP_LSV_Turnen_04.png);
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
padding-left: 5px;
}

#alles #left_column {
position:absolute;
top:307px;
left:0;
width:167px;
min-height:280px;
background:url(../image/HP_LSV_Turnen_05.png);
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
background-repeat: repeat;
}

#alles #column {
position:absolute;
top:307px;
width:626px;
min-height:280px;
padding:0 0 0 10px;
background-color: #FFF;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
left: 177px;
}

#alles #right_column {
position:absolute;
top:307px;
width:167px;
min-height:280px;
background-color: #CCC;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
left: 813px;
}
#alles #footer {
position:absolute;
background-image: url(../image/HP_LSV_Turnen_07.png);
width:990px;
height:29px;
clear:both;
bottom:0;
}

Habe ich da vielleicht irgendwo einen Fehler eingebaut??

DieWaldfeee · 16.03.2010

AW: Layout in CSS erstellen

html? gibt auch irgendwo

lookme · 16.03.2010

AW: Layout in CSS erstellen

UPS, vergessen

Hier kommt der HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lüner Sportverein Turnen v on 1862 e.V.</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="alles">
<div id="menu_oben">###MENU_TOP###</div>
<div id="header"></div>
<div id="rootline"></div>
<div id="menu">###MENU###</div>
<div id="left_column">###LEFT###</div>
<div id="column">###COLUMN### </div>
<div id="right_column">###RIGHT###</div>
<div id="footer">FOOTER TEST</div>
</div>
</body>
</html>

daddaa · 16.03.2010

AW: Layout in CSS erstellen

Als kleine Anmerkung: Du brauchst bei der ganzen Geschichte eigentlich nur EIN Hintergrundbild, und zwar das vom header. Der Rest lässt sich z.b. über Border, etwa bei der Navi oder Footer oder der Sidebar regeln.

€€€€€€€
Und warum sind sogut wie alle Elemente absolut positioniert? Da ist es kein Wunder, dass der Footer oben klebt, weil er sich überhaupt nicht drum schert, was vor ihm an Elementen ist

€€€€€€€€€€
Du solltest dich für solche Layoutsachen mal mit der float-Theorie auseinandersetzten. Ein Beispiellayout mit Erklärung findest du hier: http://www.css4you.de/wslayout1/ex0009.html

hubspe · 16.03.2010

AW: Layout in CSS erstellen

Metal_Head schrieb:
Ausserdem empfehle ich dir das Buch Little Boxes.

das braucht man sich nicht mal mehr zu kaufen, wenn man nicht will.
Das gibts seit kurzem auch zum online-lernen.

Metal_Head · 16.03.2010

AW: Layout in CSS erstellen

hubspe schrieb:
das braucht man sich nicht mal mehr zu kaufen, wenn man nicht will.
Das gibts seit kurzem auch zum online-lernen.

Mist, hatte ich total vergessen... :uhm:
Hab nämlich mir das buch gekauft, weil ich gerne was gedrucktes zum schnell nachschlagen habe

DieWaldfeee · 16.03.2010

AW: Layout in CSS erstellen

Code:

#alles {
width:990px;
margin:auto;
}


#menu_oben {
width:990px;
height:33px;
margin-top:10px;
background: blue url(../image/HP_LSV_Turnen_01.png);
}


#header {
width:990px;
height:203px;
background: green url(../image/HP_LSV_Turnen_02.png) no-repeat;
}

#rootline {
width:990px;
height:29px;
background: grey url(../image/HP_LSV_Turnen_03.png);
}

#menu {
width:985px;
height:32px;
background: pink url(../image/HP_LSV_Turnen_04.png);
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
padding-left: 5px;
}

#left_column {
float:left;
width:167px;
min-height:280px;
background: yellow url(../image/HP_LSV_Turnen_05.png);
padding:5px;
}

#column {
float:left;
width:626px;
background: black;
padding:5px;
}

#right_column {
float:right;
width:167px;
background-color: #CCC;
padding: 5px;
}

#footer {
background: red url(../image/HP_LSV_Turnen_07.png);
width:990px;
height:29px;
clear:both;
}

mal notdürftig

Bobbes · 16.03.2010

AW: Layout in CSS erstellen

hier ich hab dir mal was angefertigt hoffe es hilft dir

lookme · 16.03.2010

AW: Layout in CSS erstellen

Dann werde ich mich mal mit dem float ausseinandersetzten, und schaue mal was dabei rauskommt.

Danke für die Tipps, werde alle hier auf dem laufenden halten.

Über weitere Tipps zu meinem Layout freue ich mich.

Samuelll · 16.03.2010

AW: Layout in CSS erstellen

partieller Offtopic :

Kann es sein, dass diese Olympia-Sport-Symbole" aus Deinem Header rechtlich geschützt sind ?

Ich meine mal so etwas gelesen zu haben, als ich diese selbst für eine Vereinspage nutzen wollte.

Aus diesem Grunde stell ich das einfach mal in den Raum und warte auf Resonanz und ggf. Schelte

DieWaldfeee · 16.03.2010

AW: Layout in CSS erstellen

@ samuell das sind piktogramme, da gibt es sets wie sand am meer!

Samuelll · 16.03.2010

AW: Layout in CSS erstellen

Hab mal eines zu diesem thema gesucht, dass war dann geschützt.

Freie die sich für einen Sportverein eignen hab ich damals nicht gefunden. Aber, nach deiner Auskunft sollte ich mich wohl nochmal auf die Suche begeben und schauen ob ich sowas nicht doch noch finden

AlexanderBo · 16.03.2010

AW: Layout in CSS erstellen

ich finds ja wirklich absolut oki dat hier "geholfen" wird...
abba...
hier stürmen leute rein die (um es gelinde zu sagen)
weder html noch css verstehen und wie in diesem fall wohl meinen
"lieber verein... ich mach euch das für euch schon"
LEARNING by DOING is angesagt!
dazu gehören ne menge tuts+ co (die es zu lesen+ verstehen gilt)
(die wenn man wenixtens a bissl was weiss bekannt sein sollten!)
insofern hat "qwertzuio" (oben) schon sehr recht;-)
und mal ganz allgemein gesagt (vllt etwas offtopic hier in diesem thread)
hier suchen leute hilfe die keine ahnung haben -
die dann fürn "appel und nen ei" homepages a la´"hammer" verkaufen...
meine gute erziehung lässt härtere worte leider nicht zu ;-)
s.c.r.

neapolis · 16.03.2010

AW: Layout in CSS erstellen

Kuckst Du hier:

WWW.yaml.de - alles free und gut. Dokumentation usw.....

neapolis · 17.03.2010

AW: Layout in CSS erstellen

Er schreibt doch, dass er keine Ahnung hat - so, was ist Dein Problem, wenn er sich helfen lässt und wenn es hier Menschen gibt, die ihm Tips geben? Auch Zwerge haben klein angefangen.
Dieses Forum ist doch nicht exclusiv für die Überprofis. Oder ?

der-Webdesigner · 17.03.2010

AW: Layout in CSS erstellen

Öhm, das war jetzt eine nachträgliche Antwort auf die Aussage von Alexander oder auf meinen Beitrag von gestern, der scheinbar gelöscht wurde?

Lg,
Manuel

lookme · 17.03.2010

AW: Layout in CSS erstellen

Bobbes schrieb:
hier ich hab dir mal was angefertigt hoffe es hilft dir

@ Bobbes:

Ich danke Dir, werde ich mir mal an meinem nächsten freien Tag ansehen.