Jak nie używać tabelek...? Problem z divami Opcje

[Matif]

Witam (IMG:style_emoticons/default/smile.gif)

Kolejny problem z Css ;P ale człowiek uczy się na błędach (IMG:style_emoticons/default/biggrin.gif)

Zrobiłem taką stronkę:

http://n-kasa.pl/matif/1/

Po lewej stronie są 3 ramki (menu, logowanie, statystyki) każda jest zrobiona z 3 części:

Menu
Część przedłużająca tabelkę
koniec tabelki.


Nie mogłem tego zrobić w divach, więc zrobiłem to w tabelce (chciałbym się nauczyć robić strony nie używając tabelek)...

Gdy to zrobiłem, wszytko ładnie pięknie wyglądało, tylko nie mogłem wpisać tekstu po prawej stronie... (wyświetlał się na dole).

Dla tego wziąłem to również w tabelkę, co utworzyło mi taki schemat:

Tabela główna:
-Tabela Lewa
-Tabela Prawa

I gdy piszę tekst w tabel prawej, wyśrodkowuje mi go... Gdy napiszę więcej tekstu, rozciąga się on w górę i w dół, a gdy tekst zajmuje więcej miejsca niż lewa tabelka, menu z lewej rozjeżdża się w dół, co daje fatalny wygląd...

I teraz moje pytanie...

Jak zrobić, aby wszystko działało bez tabelek, a jeśli już musi być z tabelkami, to w jaki sposób zrobić aby lewą stronę rozciągało tylko w dół, a tekst z prawej zaczynał się od góry...?


Zamieszczam tu mój kod:

Kod

<div id="body">
<div id="head"><img src="images/doladujsie_01.png"></div>
<div id="srodek">


<!--menu-->
<div id="lewa">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<table border="0" cellpadding="0" cellspacing="0"><tr><td>
<div id="menu"><img src="images/doladujsie_04.png"></div></td>
<tr><td>
<div id="menu1">
<div id="tekst">Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst

Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst

Tekst Tekst Tekst Tekst Tekst Tekst </div>
</div>
</td></tr>
<tr><td>
<div id="menu2"><img src="images/doladujsie_07.png"></div>
</td></tr>

<!--koniec menu-->
<!--logowanie-->

<tr><td>
<div id="menu"><img src="images/doladujsie_09.png"></div></td>
<tr><td>
<div id="menu1">
<div id="tekst">Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst

Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst

Tekst Tekst Tekst Tekst Tekst Tekst </div>
</div>
</td></tr>
<tr><td>
<div id="menu2"><img src="images/doladujsie_07.png"></div>
</td></tr>

<!--koniec logowanie-->
<!--statystyki-->

<tr><td>
<div id="menu"><img src="images/doladujsie_11.png"></div></td>
<tr><td>
<div id="menu1">
<div id="tekst">Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst

Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst

Tekst Tekst Tekst Tekst Tekst Tekst </div>
</div>
</td></tr>
<tr><td>
<div id="menu2"><img src="images/doladujsie_07.png"></div>
</td></tr></table>
</td><td width="590" >
<div id="tekst">
Tekst
</div>

</td></tr></table>


<!--koniec statystyki-->
</div>
</div>
<!--Koniec prawa-->

<div id="stopka"><img src="images/doladujsie_17.png"></div>
</div>

i css

Kod

#body {
background: url(images/doladujsie_15.png);
width: 900px;
margin-left: auto;
margin-right: auto;
}
#head {

width: 900px;
height: 257px;
}
#srodek {
background: url(images/doladujsie_15.png);
width: 900px;
}
#menu {
float: left;
padding-left: 30px;
}
#menu1 {
background-image: url(images/doladujsie_13.png);
float: left;
margin-left: 30px;
width: 247px;
}
#menu2 {
float: left;
padding-left: 30px;
}
#stopka {
width: 900px;
height: 64px;
}
#tekst {
padding-left: 30px;
}
#tekst2 {
margin-left: 350px;

}

[emp]

Masz dziurę w środku strony. Nie tak to chyba powinno wyglądać. Pod Firefox
Pod Explorerem 7 ci się całkiem rozjeżdża. Treść jest u dołu pod menu nad stopką.

Ten post edytował emp 31.12.2009, 00:49:50