Anfängerfrage Homepageerstellung - zentriert und dynamisch gestalten

Frankenheimer · 30.12.2012

Hallo Leute,

nachdem meine Homepage nun das zweite mal (Websitebaker) gehackt wurde und ich bedingt durch das CMS System auch über 8000 Files und mehr überhaupt keinen Überblick mehr darüber hatte wie meine Homepage eigentlich funktioniert um im Bedarfsfall auch reagieren zu können habe ich mich entschieden allen Krempel über Bord zu werfen und eine sehr schlicht gestaltete Visitenkartenhompage + evtl. ein nachträglich integriertes Photoalbum zu bauen.

Ich designe eigentlich so, dass die Seite mindestens 1024x768 braucht, sprich, der im weißen Rahmen hinterlegte Hintergrund soll im 1024er Bild zumindest horizontal bildfüllend sein. Ansonsten soll alles darüberhinaus so dynamisch sein, dass es stets zentriert gehalten ist. Ich habe, da ich praktisch gar keine Kenntnisse von HTML + PHP und co habe jetzt ganz lansam damit begonnen mich reinzuarbeiten. Habe früher immer mit Dreamweaver gearbeitet, aber auch da ist man später selbst nicht mehr Herr über den Quelltext.

Die Homepage basiert auf eine kostenlose Vorlage, die ich aber im grunde genommen nur als Ausgangspunkt nehmen will, ich möchte eigentlich später alles individuell machen, mir hat halt nur das sehr schlichte Design zugesagt....

genug der Worte, hier der Rohentwurf:

Der rosa Rahmen ist "outercontainer" und der hellgraue der "centercontainer"

Es scheint wohl so zu sein, dass sich das Ganze zumindest vertikal automatisch mittig anordnet. Horizontal aber eben nicht. Habe auch was von der "auto" Funktion gelesen, aber keinen Schimmer wie ich das hier einbringen soll. Ich hänge mal die Style CSS Datei an, vielleicht könntet ihr mir ja den Quellcode, so wie ihr ihn ändert würdet farblich markiert reinstellen, dann gucke ich mir das an und recherier mal still und heimlich für mich was ihr da genau geändert habt

PS: Wichtig ist mir, dass es W3org valide bleibt. Ich möchte sauber programmieren lernen.

DANKE!!

index.html

Code:

<!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" lang="en">

<head>

<meta http-equiv="Content-Language" content="en-gb" />

<title>Homepage Daniel</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<!-- style sheet links -->
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="menu.css" />

</head>

<body>
<div id="centrecontainer">

	<div id="outercontainer">
	
	<div id="header">
		<div id="navcontainer">
			<ul id="navlist">
				<li><a title="Kontakt" href="kontakt.html">Kontakt</a></li>
				<li><a title="link four" href="index.html">link four</a></li>
				<li><a title="link three" href="index.html">link three</a></li>
				<li><a title="Über" href="ueber.html">Über</a></li>
				<li><a title="Home" href="index.html">Home</a></li>
			</ul>
		</div>
	</div>

	<div id="container">
	
	<div id="containerleft">
		<h2>daniel</h2>
	</div>
		
		<div id="containerright">
			<h2>Herzlich Willkommen!</h2>
		
			<p>Hier steht einfach irgendein Text</p><br />
		  	<p>Und hier nochmal ein Text</p>

		</div>
		
	</div>
	
	<div id="footer">//deSIGN Daniel</div>
	
  </div>
	
</div>
</body>

</html>

Style.css

Code:

body
{
	padding: 0;
	margin: 0;
	background: #444444;
	color: #FFF;
	font-family: arial, verdana, helvetica, tahoma, sans-serif;
	font-size: 80%;
	line-height: 150%;
}

img
{
	border: 0;
}

a
{
	text-decoration: none;
	color: #FF80A8;
}

a:hover
{
	text-decoration: none;
	color: #FFF;
}

#centrecontainer
{
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	border: 2px solid #CCCCCC;
}

#outercontainer
{

	margin-left: -28%;
	position: absolute;
	top: -236px;
	left: 50%;
	border: 2px solid #FF80A8;
}

#header
{
	width: 1100px;
	height: 31px;
	letter-spacing: 1px;

}

#container    
{
	border: 20px solid #FFF;
	width: 1060px;
	height: 370px;

}

#containerleft
{
	float: left;
	width: 350px;
	height: 350px;
	background-image:url('home_img.jpg');
	border-right: 20px solid #FFF;
	padding: 10px;
}

#containerleft a
{
	text-decoration: none;
	color: #FFF;
}

#containerleft a:hover
{
	text-decoration: none;
	color: #FF80A8;
}

#containerleft h2
{
	margin: 0;
	padding: 0;
	font-family: helvetica, arial, verdana, tahoma, sans-serif;
	letter-spacing: -3px;
	font-size: 250%;
	text-align: right;
}

#containerright
{
	float: left;
	width: 650px;
	height: 350px;
	background: #660021;
	overflow: auto;
	padding: 10px;

}

#containerright h2
{
	margin: 0;
	padding: 0;
	font-family: helvetica, arial, verdana, tahoma, sans-serif;
	letter-spacing: -2px;
	font-size: 200%;
	border-bottom: 1px solid #FFF;
	padding-bottom: 5px;
	width: 75%;
}

#footer
{
	width: 1090px;
	text-align: right;
	padding: 5px 0px;
	color: #CCCCCC;
}

phönix · 04.01.2013

Code:

#centrecontainer
{
	[COLOR="#FF0000"]margin-left: auto;
        margin-right: auto;
	width: 1200px;   [/COLOR]           
	border: 2px solid #CCCCCC;
}

#outercontainer
{

	//Rest gelöscht :D
	border: 2px solid #FF80A8;
}

edit:

hier noch eine gute Seite zu PHP und MYSQL (CSS, Javascript und HTML sind auch dabei)
http://www.peterkropff.de/

Suche

Anfängerfrage Homepageerstellung - zentriert und dynamisch gestalten

Frankenheimer

╬Bruderschaft ALC╬

phönix

Enthusiast

Anfängerfrage Homepageerstellung - zentriert und dynamisch gestalten

Frankenheimer

&#9580;Bruderschaft ALC&#9580;

phönix

Enthusiast

╬Bruderschaft ALC╬