Probleme mit css aufteilung

eclere

Hallo,

ich versuche über css eine ganz normals layout hinzubekomen:

header: höhe 60px
_________________________________
links:160px|inhalt:variabel|rechts:160px
_________________________________
footer

leider gelingt mir das nicht. auf der suche im internet habe ich verdammt viele beispiele gefunden...aber keins funktioniert richtig. irgendwo sind immer kleine fehler drin. hauptsächlich das die rechte spalte den inhalt oder den footer bei verkleinerung überschreibt. oder auch das der text aus dem inhalt nicht korrekt abgeschnitten wird. desweiteren werden oftmals elemente wie wild untereinander verschachtelt.

das von mir gewünschte layout ist doch nichts außergeöhnliches und es muss doch eine einfache lösung dafür geben?!

ich hoffe jemand hat einen tipp für mich.

gruß thorsten

topfblume

moin ...

Zitat von eclere

ch versuche über css eine ganz normals layout hinzubekomen:

Welches natürlich in Verbindung mit html verwirklicht werden soll !?!

Einfache Variante wäre eine Tabelle zu nutzen, was bei einigen ale nicht "die reine Lehre" verschrien ist.
Semantisch attraktiver wäre ein Lösungsweg ohne Tabelle, was aber ein wenig mehr Kenntnisse in css erfordert.

Lies Dir zum Beispiel mal den Artikel "CSS-basierte Layouts" auf den selfhtml Seiten durch.
Beachte das die Browser Deine Bemühungen gerne unterschiedlich darstellen möchten. Also überprüfe in mehreren Browsern und nutze gegebenfalls Browserhacks.

gruß

eclere

hallo topfblume,

ich habs fast geschafft, vielleicht weißt du ja wo das problem liegt.

HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testseite</title>


<style type="text/css">
  body{
    color: black;
    margin: 0; 
	padding: 5px;
    min-width: 400px
  }

  div#header{
  	height:60px;
	margin-bottom: 10px;
	border: 1px solid blue;
  }

  div#content_container
  {
  	width:100%;
  }


  div#left {
    float: left; 
	width: 160px;
    margin: 0; 
	padding: 0;
    border: 1px solid blue;
  }


  div#right {
    float: right; 
	width: 160px;
    border: 1px solid blue;
  }


  div#content {
    margin: 0 170px 0 170px;
    border: 1px solid blue;
  }

  div#footer{
  	position:static;
  	width:100%;
  	height: 20px;
	border: 1px solid blue;
	margin-top:10px;
  }



</style>
</head>


<body>
<div id="header">Header</div>


<div id="content_container">


	<div id="left">Links
Links</div>


	<div id="right">Rechts
Rechts</div>


	<div id="content">Inhalt</div>


</div>


<div id="footer">Footer</div>
</body>
</html>

Alles anzeigen

im IE stimmt es, aber im firefox nicht. bei anderen browsern wärs mir ziemlich egal

hast du einen tipp?

gruß thorsten

eclere

ich habe es hinbekommen.

wenns einen interessiert:

#content_container kann weg.

im bereich #footer muss noch folgendes dazu:

Code

clear:both;
/*
margin-top:10px;
*/

so sieht es im IE und Firefox gleich aus.

ACHTUNG: bei anderen browsern weiß ich es nicht!!!

gruß thorsten

Tags