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;

}

[icetique]

Najprostsza metoda to chyba taka:

Kod

<div class="main"> // i tutaj wysrodkowanie poprzez "margin: 0px auto;"
     <div class="header"></div> // tutaj gora
     <div class="middle"> // tutaj dodaj niebieskie tło
        <div class="menu"></div> // tutaj dodaj menu, w stylach dodaj "float: left;" okresl szerokosc etc.
        <div class="content"></div> // tutaj caly content strony też z "float: left;"
        <br class="clear" /> // wyczysc floaty poprzez "clear: both;"
     </div>
     <div class="footer"></div> // tutaj stopka
  </div>

Mogę się mylić co do poprawności <br>, wiele osób twierdzi, że to znacznik nowej linii i nie powinno się go używać przy tworzeniu lay-outu, ale nie mam czasu teraz sprawdzać czym można to zastąpić.

Ten post edytował icetique 31.12.2009, 12:34:00