24.06.2007, 16:31
|
||||
|
||||
Hilfe beim Layout erstellen
Hi,
Ich bin gerade dabei eine kleine Portfolioseite zu erstellen, und habe noch Probleme beim umsetzen in css. So sieht derzeit das Layout aus:  Erklärung: Rot: Das sollte der Content bereich sein, da kommt das Logo, der Text und die Navi rein. Blau: Der obere Teil des Layouts, hat nen kleinen Farbverlauf bis ca. zur Mitte. Grün: Genau wie Blau, auch ein Farbverlauf von unten nach oben. Die freiefläche in der Mitte ist weiß. Mein Problem besteht darin, das ich nicht weiß, wie ich das Layout so erstelle, das sich bei mehr Text, der Footer nach unten verschiebt. Ich hatte es schon probiert, das ich die blaue Fläche absolut positioniere und der Rest scheibt den Footer nach unten, nur dann weiß ich nicht, wie ich den Hintergrund wiederhole, so das bei mehr Text aufeinmal in der Mitte etwas fehlt. Wie würdet ihr das machen? Könnt ihr mir da irgendwie weiterhelfen?  Danke. Gruß kevin 
|
| Sponsored Links |
|
24.06.2007, 17:11
|
||||
|
||||
|
Rot einem alles umgebenden div zuweisen, und Blau dem innerhalb desselben befindlichen Content-div (mit background-position: bottom; ). Letzteres bildet auch den Seitenabschluß und muß daher auch den Footer enthalten. Ggf. wird min-height (bzw. height für IE < 7) nötig sein.
|
| Sponsored Links |
|
24.06.2007, 17:29
|
||||
|
||||
|
Danke für deine Antwort.
Nur ganz verstehe Ich das nicht, habe es mal so probiert:  Und hier der dazugehörige Code: Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Kevin´s Website - Kevin-K.com</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
color:#3a3a3a;
font-family:verdana;
font-size:10px;
background-color:#F1F1F1;
}
#main {
width:500px;
height:145px;
background-image:url('img/head.png');
background-position:top;
}
#content {
padding:30px;
}
#foot {
background-image:url('img/foot.png');
width:500px;
height:90px;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
Viel<br />Content<br />Viel<br />Content<br />Viel<br />Content<br />Viel<br />Content<br />Viel<br />Content<br />Viel<br />Content<br />
</div>
<div id="foot"></div>
</div>
</body>
</html>
Gruß kevin
|
|
24.06.2007, 18:17
|
||||
|
||||
|
Dann bekommt #main die vertikale Grafik (innen weiß, links & rechts Schatten). Falls #footer keine feste Höhe hat (was nicht sinnvoll wäre), muß er in #content, der dann den Seitenabschluß bekommt. Du kannst #footer zwar auch außerhalb stehenlassen, müßtest ihn dann allerdings per negativem margin nach oben schieben.
Die obere Grafik bekommt der Header und - falls dieser nicht hoch genug ist - auch die Navi. Wird der Header eine feste Höhe haben?
|
|
24.06.2007, 18:36
|
||||
|
||||
|
Moment, ich zeige dir wie es später aussehen wird:
 Ich schreibe also vom oberen Div ab runterwärts, so gibt es im eigentlichen Sinne kein header, und so kann ich auch nicht nur die grafik im header-div zuweisen, da ich ja vom header unterwärts in content schreibe.
|
|
24.06.2007, 18:50
|
||||
|
||||
|
Ah, habe es hinbekommen!
Ich weiß jetzt nicht genau ob du das auch so gemeint hattest, aber so sieht der Code aus: Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Kevin´s Website - Kevin-K.com</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
color:#3a3a3a;
font-family:verdana;
font-size:10px;
background-color:#F1F1F1;
}
#main {
width:500px;
min-height:145px;
background-image:url('img/bg.png');
}
#head {
background-position:top;
background-repeat:no-repeat;
background-image:url('img/head.png');
}
#content {
padding:30px;
min-height:60px;
}
#foot {
width:500px;
height:90px;
background-image:url('img/foot.png');
}
</style>
</head>
<body>
<div id="main">
<div id="head">
<div id="content">
XConetn<br />XConetn<br />XConetn<br />XConetn<br />XConetn<br />XConetn<br />XConetn<br />XConetn<br />XConetn<br />XConetn<br />XConetn<br />XConetn<br />XConetn<br />
</div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
 .Danke dir! Gruß Kevin Geändert von kevink (24.06.2007 um 18:54 Uhr)
|
|
24.06.2007, 19:04
|
||||
|
||||
|
"Kevin's Website" (siehe Apostrophitis - Wikipedia) ist ein klarer Header - eine h1 mit genau diesem Text (dieser wird per Image-Replacement ersetzt), oder ohne Text und dafür mit dem Logo.
Der Header kann eine feste Höhe bekommen und damit auch den oberen Teil der Grafik. #content (kann ggf. per negativem margin hochgeschoben werden) sollte den unteren Teil der Grafik bekommen, denn sonst wird #footer ja sehr hoch. Letzteren dann entweder in #content stellen oder per neg. margin hochschieben. Geändert von heiko_rs (24.06.2007 um 19:07 Uhr)
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Website erstellen - Layout Probleme | Jerry0022 | CSS | 3 | 14.06.2011 19:30 |
| Hilfe gesucht beim erstellen meiner Startseite..... | eBase2009 | CSS | 17 | 25.06.2009 23:07 |
| Layout mit div erstellen | stay_tuned | CSS | 5 | 25.04.2008 20:23 |
| Layout selbst coden - Hilfe ! | kgsbm | CSS | 3 | 25.03.2008 20:25 |
| Brauche Hilfe beim 2-Spaltigen Layout | Kaimane | CSS | 1 | 15.08.2007 01:10 |
.
Linear-Darstellung
