zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe beim Layout erstellen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.06.2007, 15:31
Benutzerbild von kevink
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2005
Beiträge: 25
kevink befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.06.2007, 16:11
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.06.2007, 16:29
Benutzerbild von kevink
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2005
Beiträge: 25
kevink befindet sich auf einem aufstrebenden Ast
Standard

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&acute;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>
Ansich geht das ganz gut, nur das Problem ist, das ich keine Möglichkeit finde, den Hintergrund, der sich wiederholt, einzufügen.

Gruß
kevin
Mit Zitat antworten
  #4 (permalink)  
Alt 24.06.2007, 16:51
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ist der denn nicht einfach nur weiß? Oder hat er zusätzlich einen Schatten links & rechts?
Mit Zitat antworten
  #5 (permalink)  
Alt 24.06.2007, 16:59
Benutzerbild von kevink
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2005
Beiträge: 25
kevink befindet sich auf einem aufstrebenden Ast
Standard

Ja, der hat noch diesen schatten rechts und links, sry, hab ich vergessen zu erwähnen.
Mit Zitat antworten
  #6 (permalink)  
Alt 24.06.2007, 17:17
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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?
Mit Zitat antworten
  #7 (permalink)  
Alt 24.06.2007, 17:36
Benutzerbild von kevink
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2005
Beiträge: 25
kevink befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 24.06.2007, 17:50
Benutzerbild von kevink
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2005
Beiträge: 25
kevink befindet sich auf einem aufstrebenden Ast
Standard

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&acute;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>
Jetzt kann ich eben von #content aus nicht in #foot schreiben, aber das passt auch soweit, da in #foot sowieso was drinstehen würde .

Danke dir!

Gruß
Kevin

Geändert von kevink (24.06.2007 um 17:54 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 24.06.2007, 18:04
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

"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 18:07 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.06.2007, 18:13
Benutzerbild von kevink
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2005
Beiträge: 25
kevink befindet sich auf einem aufstrebenden Ast
Standard

Oh, danke, nicht drauf geachtet.
So ganz komme ich nichtmehr mit was du meinst, aber es geht und ich bin zufrieden .
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Website erstellen - Layout Probleme Jerry0022 CSS 3 14.06.2011 18:30
Hilfe gesucht beim erstellen meiner Startseite..... eBase2009 CSS 17 25.06.2009 22:07
Layout mit div erstellen stay_tuned CSS 5 25.04.2008 19:23
Layout selbst coden - Hilfe ! kgsbm CSS 3 25.03.2008 19:25
Brauche Hilfe beim 2-Spaltigen Layout Kaimane CSS 1 15.08.2007 00:10


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:19 Uhr.