Table durch DIVs ersetzen. Untereinander?

Telmata

Hi,
sufu, selfhtml und google haben mir nicht geholfen.

ich hätte gern oben wie 2spalten. soweit kein Problem
jetzt will ich aber unter die erste noch ein div hinmachen und das geht irgendwie nicht so richtig^^
es zeigt es mir unter der zweiten spalte an.
so siehts aus:

hier der jetzige code (zumindest das wichtige)

Code

<body text="#00FFFF" link="#FF0000" vlink="#990000">
<div id="logo">test</div><div id="menue">test</div>
<div id="fuell">test test test test test test test test test test test test test test test test</div>
</body>

und CSS (auch nur das entsprechende)

Code

#fuell		{
		background-image: url(grafiken/blitz.png);
		position: relative;
		padding: 0em;
		height: 50px;
		width: 950px;
		left: 5px;
		top: 0px;
		}
#logo		{
		float: left;
		position: relative;
		padding: 0em;
		height: 150px;
		width: 150px;
		left: 5px;
		top: 5px;
		}
#menue		{
		position: relative;
		padding: 0em;
		height: auto;
		width: 800px;
		left: 0px;
		top: 5px;
		}

Alles anzeigen

hatte es auch schon per clear: left bzw. clear: right versucht (im css bei #fuell)

hoffe mir kann jemand helfen so das ich dann gemütlich weiter machen kann und sowas dann selber leicht löse =)

DrunkenDX

Code

#fuell      {
      background-image: url(grafiken/blitz.png);
      position: relative;
      padding: 0em;
      height: 50px;
      width: 950px;
      left: 5px;
      top: 0px;
	  float:left;
      }
#logo      {
      float: left;
      position: relative;
      padding: 0em;
      height: 150px;
      width: 150px;
      left: 5px;
      top: 5px;
      }
#menue      {
      position: relative;
      padding: 0em;
      height: auto;
      width: 800px;
      left: 0px;
      top: 5px;
      }
</style>

Alles anzeigen

float:left in dein #fuell style

meintest du das so?

Elvis

Erst mal solltest Du nur die erste linke Spalte floaten. Die zweite, also rechte, Spalte wird sich dann schon anpassen. Die zweite Zeile solltest Du durch ein

Code

clear: both;

erreichen.
Bis alles klappt solltest Du die Hintergründe und das

Code

position: relative;

entfernen.
Auch könnte es zum Problem werden, wenn die Container insgesamt zu breit sind.

Dominikgt

oder vllt position:absolute hinzufügen und die divs absolut positionieren

Telmata

Zitat von Dominikgt

oder vllt position:absolute hinzufügen und die divs absolut positionieren

daran habe ich auch schon gedacht.
aber kann es nicht zu problemen kommen wenn ich die seite zentriere? (hab ich eigentlich vor)

*edit*
ok funzt so alles!
vielen dank.

(hab nur clear: both; und das float: left; reingemacht und geht)

DrunkenDX

post mal den link zu deiner seite falss vorhanden...

sejuma

So?

Code

<style type="text/css">


body
{margin:0; padding:0; width:100%; height:100%;}


#fuell      { 
      background-color:magenta;); 
            margin:0 auto; 
      width: 970px; 
            } 
#spalte1      { 
      float: left; 
      height: 150px; 
      width: 150px; 
      margin: 5px;
      background-color:red;
      } 
#spalte2      { 
      float:left;
      width: 800px; 
      margin: 5px;
background-color: yellow;
      } 


#spalte3      {
clear:left; 
      float: left; 
      height: 150px; 
      width: 150px; 
      margin: 5px;
      background-color:red;
      } 


</style>


   <base target="hauptframe"> 
</head> 


<body> 


<div id="fuell">
<div id="spalte1">Spalte 1</div>
<div id="spalte2">Spalte 2</div>
<div id="spalte3">Spalte 3</div>
</div>


</body>
</html>

Alles anzeigen

Tags