CSS Mein Layout in CSS - Absegnen

Sumit · 19. Dezember 2008

Tag allezusammen

Nachdem mir vor kurzen (auch hier) nahegelegt wurde, mein mit Tabellen sturkturiertes Design mit divs und CSS zu gestalten, habe ich mich die lezten Tage zum ersten mal eingehender damit befasst. Mittlerweile habe ich mein Layout auch soweit, dass es (fast) so aussieht, wies aussehen soll.
Ich bitte euch nun, mal drüber zu schauen und evtl verbesserungsvorschläge zu geben.

z.B. ob ein "Effekt" auch einfacher zu bewerkstelligen wäre, als ich das hier tue
oder ob ich zusätzliche angaben machen sollte um Browserkompatibilität zu gewährleisten

Anguggn: http://www.sumit-online.de/sumit/v10/
Mit einem Klick auf "Impressum" könnt ihr das Layout mit Inhalt der länger ist als die äußeren Container, sehen.

CSS

Code:

<style type="text/css">

/* STRUKTUR */

html {  }

body {
    color: black; 
	background-color: white;
    font-size: 12px;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; 
	padding: 1em 0;
    text-align: center;
	background: #D1CC8C;
}


div#gesamt { 
		width: 950px;
		text-align: left;
		margin: 0 auto;
		padding: 0 0 0 0;
		background-image: url(style/footer_bg.jpg);
}


div#head { 
		text-align: center;
		width: 950px;
		height: 215px;
		padding: 0 0;
		margin: 0 auto 0;
		background: #ffffff;
}


div#links { 
		width: 159px;
		float: left;
		padding: 0 0;
		margin: 0 0 0 0;
}


div#mitte {
		width: 603px;
		float: left;
		padding: 0 0;
		margin: 0 0 0 0;
		background: #ffffff;
}


div#rechts { 
		width: 188px;
		float: right;
		padding: 0 0;
		margin: 0 0 0 0;
		background: #ffffff;
}


div#footer { 
		width: 950px;
		float: center;
		text-align: center;
		padding: 30 0 15px;
		margin: 0 auto 0;
		background-image:url(style/footer_bg.jpg);
		background-repeat: repeat-y;

}


div#clear { clear:  both; }





/* DESIGN BILDER */


.borderleft {
		width: 159px;
		min-width: 159px;
		height: 412px;
		float: top left;
		background-image:url(style/border_left.jpg);
		background-repeat: no-repeat;
}


.midtop {
		width: 603px;
		min-width: 603px;
		height: 94px;
		float: top left;
		background-image:url(style/mid_bg.jpg);
		background-repeat: no-repeat;
}


.borderright {
		width: 188px;
		min-width: 188px;
		height: 412px;
		float: top left;
		background-image:url(style/border_right.jpg);
		background-repeat: no-repeat;
}




</style>

HTML

Code:

<body>
<div id="gesamt">
	<div id="head"><img src="style/head.jpg"></div>
	<div id="links">
		<div class="borderleft"></div>
	</div>
	<div id="mitte">
		<div class="midtop"></div>
		<div>
			INHALT (PHP INCLUDE)
		</div>
	</div>
	<div id="rechts">
		<div class="borderright"></div>
	</div>
	<div id="clear"></div>
</div>
<div id="footer">
Sumit-Online.de &copy; 2003-2009 <B>Sumit Kumar</B> <br>Realisiert von <a href="http://www.sumit-online.de"><B>Sumit-Online.de</B></a> | <a href="http://www.sumit-online.de/sumit/v10/?page_id=9">Impressum</a> | <a href="http://sumit-online.de/sumit/v10/wp-login.php" target="_blank">Administration</a>
</div>
</body>

Danke im voraus

Sumit

PS.: Ich weiß, das Layout funktioniert nicht im IE. Habs bisher nur in FF und Iron angeschaut. Hab über viele probleme im IE gelesen und damit wollte ich mich erst später beschäftigen

Mr. Snoot · 19. Dezember 2008

Also im IE6 und 7 siehts bei mir eigentlich korrekt aus (zumindest so, wie auch in FF oder Opera).

Und sowas würde ich übrigens weglassen Optimiert für Mozilla Firefox . Das zeugt nicht von gutem Webdesign, denn es sollte doch in jedem Browser gleich aussehen (unabh. davon ob's das jetzt tut oder nicht). Man erstellt doch nicht eine Seite nur für eine Personengruppe, oder weil man den Browser selbst so toll findet.

Ack der III · 19. Dezember 2008

Wenn bei Padding oder Margin alle vier Seiten die gleiche Größe haben sollen, dann braucht man nur einmal padding: 0; oder margin: 0; schreiben und nicht margin: 0 0 0 0;
Außerdem gibt es bei "float" kein Wert "top".

Sumit · 19. Dezember 2008

beide richtig.

Das Browseroptimieren stimmt natürlich. -entfernt-
Ich werde es bei gelegenheit auch noch im IE und Opera anguggn.

Suche

CSS Mein Layout in CSS - Absegnen

Sumit

Lt. Junior Grade

Mr. Snoot

Gast

Ack der III

Ensign

Sumit

Lt. Junior Grade

Ähnliche Themen