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

[Matif]

Witam

Kolejny problem z Css ;P ale człowiek uczy się na błędach

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;

}

[krzysztof_kf]

gdzie masz zawartość dla <div id="lewa"> ?

[Matif]

Widocznie skasowałem ją jak próbowałem coś wykombinować żeby dobrze działało, i zamiast tego dałem tabelke...
A w ogóle da się zrobić to nie używając tabel ?

[krzysztof_kf]

lepiej w tabelach bo wtedy masz pewność poprawność wyświetlania poczekaj zobaczę co się da zrobić

Ten post edytował krzysztof_kf 30.12.2009, 23:43:07

[Matif]

ok dzięki! czekam z niecierpliwością!

[krzysztof_kf]

nabazgrałeś trochę poczekaj około 30 minut to ci zrobię

[Matif]

Dobra to mój 3 dzień nauki css więc nie ma co się dziwić
Może z twojej przeróbki się czegoś nauczę

Jakbyś mógł dać komentarze przy tych głownych rzeczach to będzie łatwiej zrozumieć

[krzysztof_kf]

dorzuć do styli css

Kod

}

#column {
width: 900px;
margin: 0 auto 0 auto;
}

#column-left {
width: 310px;
}

#column-center {
width: 590px;
}

a cała poprawiona treść

Kod

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


<!--menu-->
<div id="column">
<div id="column-left">
<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>
<div id="column-center">
<div id="tekst">
Tekst
</div>
</div>

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


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

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

już ci z prawej strony nie będzie na dól uciekać tekst tylko jest na samej górze pozdrawiam

i jak ?

[Matif]

Wszystko działa, tylko nie rozciąga głównego tła... (tego pod prawą tabelką...) znaczy rozciąga, ale jedynie pod tekstem... I jak dam mało tekstu, to pod nim, aż do stopki, nie ma tła...

[krzysztof_kf]

moment

[Matif]

ok. wrzuciłem na serwer jak to teraz wygląda...

[krzysztof_kf]

powiem tak za dużo nabazgrane ;/ w najgorszym wypadku dodaj do

Kod

#column {
height: 900px;

[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

[Matif]

emp w tym momencie jest on już na samych divach...

krzysztof_kf - przecież tak już jest

Spróbuję coś po modzić... :/

[krzysztof_kf]

powodzenia

[Matif]

No i nie mam żadnych pomysłów :/
Na FF wszystko jest dobrze, tylko to tło... :| A na explorerze, tło jest ale tekst wyświetla na dole :/

[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