Antworten auf deine Fragen:
Neues Thema erstellen

Layout in CSS erstellen

lookme

lookme

Noch nicht viel geschrieben

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

Bitte kostenlos registrieren, damit du die Links siehst.


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

Gruß Frank - lookme :)
 

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:
Bitte kostenlos registrieren, damit du die Links siehst.


mit einer guten referenz/nachschlagewerk kommst du dann auch weiter wenns an die inhalte geht:
Bitte kostenlos registrieren, damit du die Links siehst.
 
Zuletzt bearbeitet von einem Moderator:
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.
 
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;
}
Zum Vergrößern anklicken....
Habe ich da vielleicht irgendwo einen Fehler eingebaut??
 
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>
Zum Vergrößern anklicken....
 
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:
Bitte kostenlos registrieren, damit du die Links siehst.
 
Zuletzt bearbeitet:
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
 
Zuletzt bearbeitet:
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.
 
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 :-)
 
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 :-)
 
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.
 
AW: Layout in CSS erstellen

Kuckst Du hier:

Bitte kostenlos registrieren, damit du die Links siehst.
- alles free und gut. Dokumentation usw.....
 
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 ?
 
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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 354 (Mitglieder: 2, Gäste: 352)

Statistik des Forums

Themen
118.965
Beiträge
1.540.137
Mitglieder
68.145
Neuestes Mitglied
filmzeugs
Oben