CSS Fragen - komme nicht weiter

DerrickDeluXe · 07.07.2010

Hallo zusammen,

ich möchte eine Homepage in HTML und CSS gestalten, hier eine grobe Aufteilung:

Irgendwie bekomme ich aber das ganze nicht so hin, wie ich es möchte.

In CSS habe ich div Tags verwendet, hier der verwendete Code:

HTML:

PHP:

<!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">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
blablabla
</head>
<body>
<div id=“header“>
<img src="images/header/header.jpg" alt="header" width="783" height="116" align="left" />

<div id="headerpic">
<img src="images/header/logo.jpg" alt="logo" width="214" height="117" align="left" />
</div>
</div>
<div id=“topnavi“>
BLU BLI BLU BLU BLU BLI BLU
</div>

<div id=“content“><h1>Test Test</h1>
<p>Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat.</p>
<p> Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror. Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, venditque poema</p>
<p>Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.</p>
</div>
</body>
</html>

CSS:

PHP:

@charset "utf-8";
/* CSS Document */

div#container {
   margin: 0px;
  }

  #mitte {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 300px;
   height: 200px;
   margin-left: -150px; 
   margin-top: -100px; 
  }

   
div#topnavi {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 450px;
font: 600 1.8em Georgia, “Times New Roman”, serif;
background-color: #e1e1e1;
border: 1px solid #360;

}

div#header {
position: absolute;
top: 0;
left: 152px;
width: 997px;
height: 117px;
background-color: #ffc;
border-bottom: 3px double #666;
padding-left: .5em;
}

div#headerpic{
}


div#content {
position: absolute;
top: 133px;
left: 152px;
width: 700px;
background-color: #f1f1f1;
font-family: Georgia, serif;
padding: 1em;
}
h1 {
font: 600 2.2em Georgia, “Times New Roman”, serif;
color: #036;
text-align: right;
margin: 2em 1em 1em 0;
}
h2 {
	font: 600 1.8em Georgia, "Times New Roman", serif;
	color: #b20000;
	font-size: 1.8em;
}

Ziel ist es, die Seite für 1024 x 768 zu optimieren, und bei höheren Auflösungen die Seite mittig zu setzen.

Kann man im Code oben denn bereits Fehler sehen? Das ganze sieht nämlich nicht so aus, wie ich mir das vorstelle.

Achso, es wird Dreamweaver CS4 benutzt.

Ge0rgy · 07.07.2010

Also das erste was mich mal verwirrt sind die zwei verschiedenen Doctypes im html-Code... Oo
Soll das irgend einen tieferen Sinn haben? *noahnung*

Des weiteren, würde ich die Seite etwas anders aufbauen, damit du nicht so viele position:absolutes etc. brauchst, denn das wird mit dem "mittig machen" nachher schwierig.

grob ausm stehgreif in etwa so:

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">

<html>
<head>
<title>TEST</title>
<style type="text/css">
	#mainContainer {
		width:1024px;
		height:768px;
		margin: auto auto;
	}
	#headerArea {
		height:117px;
		background-color: #0000ff;
	}
	#userArea {
		height:651px;
		backround-color: #ee0000;
	}
	#topnavi {
		height:100px;
		background-color: #cccccc;
	}
	#content {
		background-color: #00ff00;
	}
	div.middle {
		height:651px;
	}
	div.menuPoints {
		float: left;
		width: 200px;
		height:651px;
		background-color:yellow;
	}
	div.news {
		float: right;
		width: 200px;
		height:651px;
		background-color:black;
		color:white;
	}
</style>
</head>
<body>
<div id="mainContainer">
	<div id="headerArea">Banner und logo hier hinein</div>
	<div id="userArea">
		<div class="menuPoints">MEnüpunkte</div>
		<div class="news">Neuigkeiten</div>
		<div class="middle">
			<div id="topnavi">
				BLU BLI BLU BLU BLU BLI BLU
			</div>
			<div id="content"><h1>Test Test</h1>
				<p>Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat.</p>
				<p> Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror. Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, venditque poema</p>
				<p>Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.</p>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Die Bunten farben dienen in erster Linie dazu die Container und ihre größen richtig zu sehen, kannst das natürlich umdefinieren wie du magst.

DerrickDeluXe · 07.07.2010

Hi,

ne, die Doctypes hab ich aus versehen irgendwie doppelt drin, hab ich wieder rausgenommen, danke.

Werd ich gleich testen und schonmal vielen Dank.

BoMbY · 08.07.2010

Da Du anscheinend ehh schon vernünftig anfängst, würde ich Dir noch den Doctype "XHTML 1.0 Strict" oder "XHTML 1.1" empfehlen. Und dann natürlich zur Sicherheit die Kompatibilität ab und an mal überprüfen.

CSS Fragen - komme nicht weiter

DerrickDeluXe

Grand Admiral Special

Ge0rgy

Grand Admiral Special

DerrickDeluXe

Grand Admiral Special

BoMbY

Grand Admiral Special

Ähnliche Themen