Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak nie używać tabelek...? Problem z divami
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Matif
30.12.2009, 22:30:00
Witam smile.gif

Kolejny problem z Css ;P ale człowiek uczy się na błędach 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;

}
krzysztof_kf
30.12.2009, 22:50:25
gdzie masz zawartość dla <div id="lewa"> ?
Matif
30.12.2009, 23:30:33
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
30.12.2009, 23:42:14
lepiej w tabelach bo wtedy masz pewność poprawność wyświetlania poczekaj zobaczę co się da zrobić smile.gif
Matif
30.12.2009, 23:54:05
ok dzięki! czekam z niecierpliwością! smile.gif
krzysztof_kf
31.12.2009, 00:06:54
nabazgrałeś trochę poczekaj około 30 minut to ci zrobię smile.gif
Matif
31.12.2009, 00:18:38
Dobra biggrin.gif to mój 3 dzień nauki css smile.gif więc nie ma co się dziwić biggrin.gif
Może z twojej przeróbki się czegoś nauczę winksmiley.jpg

Jakbyś mógł dać komentarze przy tych głownych rzeczach to będzie łatwiej zrozumieć smile.gif
krzysztof_kf
31.12.2009, 00:29:16
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 smile.gif

i jak ?
Matif
31.12.2009, 00:34:51
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
31.12.2009, 00:35:48
moment
Matif
31.12.2009, 00:38:00
ok. wrzuciłem na serwer jak to teraz wygląda...
krzysztof_kf
31.12.2009, 00:42:17
powiem tak za dużo nabazgrane ;/ w najgorszym wypadku dodaj do

Kod
#column {
height: 900px;
emp
31.12.2009, 00:43:44
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ą.
Matif
31.12.2009, 00:49:54
emp w tym momencie jest on już na samych divach... winksmiley.jpg

krzysztof_kf - przecież tak już jest smile.gif

Spróbuję coś po modzić... :/
krzysztof_kf
31.12.2009, 00:50:37
powodzenia
Matif
31.12.2009, 01:14:52
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
31.12.2009, 12:23:54
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ć.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.