[CSS][HTML] wysokość kolumny - diva na 100% (w odniesieniu do wysokości strony) Opcje

[czychacz]

mam problem z dwoma divami - menu lewostronnym i panelem użytkownika. w tej chwili wygląda to tak:

chciałbym, aby lewy i prawy div był rozciągnięty w pionie na wysokość diva środkowego - zawartości strony.
próbowałem: height:100%; i bottom:0; ale nic nie dało.

[Lars_18]

A w html i body też masz height: 100%? Możesz to zrobić za pomocą display: table-cell; i display: table-row;

Ten post edytował Lars_18 24.06.2010, 11:40:01

[czychacz]

nie, wysokość body zależy od wysokości diva - kontenera, a wysokość tego kontenera zależy od wysokości nagłówka z tytułem strony i wysokości poniższej zawartości

[cros]

A w html i body też masz height: 100%? Możesz to zrobić za pomocą display: table-cell; i display: table-row;

Tak tylko ze table-row, table-cell nie obsluguje IE7.
Jesli cos to albo js, albo <table>.
Do tego jednak najlepsze sa tabele, co by sie o nich nie mowilo, ale w niektorych wypadkach sa poprostu niezastapione i kropka, chyba ze lubisz zasypywac strone dziesiatkami skryptow, do efektu, ktorym mozna latwo i szybko osiagnac tabelka.

Ten post edytował cros 24.06.2010, 11:47:22

[czychacz]

tabele odpadają. potrzebuję zrobić stronę opartą o divy. łatwiej jest wtedy dostosować cssa do niej.

[cros]

tabele odpadają. potrzebuję zrobić stronę opartą o divy. łatwiej jest wtedy dostosować cssa do niej.

No jak uwazasz, to pozostaje ci oskryptowanie (tylko ze ktos moze miec wyl. js - rzadkosc ale zawsze ryzyko jest), albo display: table, ale jak juz pisalem ie7 i nizej tego nie obsluguja.

PS. Nie twierdzilem, ze masz caly szablon opierac na tabelkach, bo to jest zle, ale pewne elementy mozna zrobic na tabelce.

Wbrew pozorom ie7 (i nizsze) jeszcze zyje i spora libcza uzytkownikow internetu z niej korzysta, wiec osobiscie majac do wyboru rezygnacje z ie7 i zastosowanie table-row, a zrobienie strony hybrydy div + tabele i zachowanie kompatybilnosci z ie, wybieram to drugie.
Przeciez mozesz zrobic komentarze warunkowe i jesli ie <= 7 wtedy dopiero stosujesz tabele, a jak nie to display:table....

Ten post edytował cros 24.06.2010, 12:05:09

[czychacz]

zmiana display na table-row lub table-cell nic nie pomaga... jakieś inne pomysły bez użycia tabel??

[Kuzry]

Pokaż kod... :]

[sunpietro]

tu masz rozwiązanie: równa wysokość kolumn CSS
wybierz to, które Ci bardziej pasuje

[cros]

No jak uwazasz, to pozostaje ci oskryptowanie (tylko ze ktos moze miec wyl. js - rzadkosc ale zawsze ryzyko jest), albo display: table, ale jak juz pisalem ie7 i nizej tego nie obsluguja.

PS. Nie twierdzilem, ze masz caly szablon opierac na tabelkach, bo to jest zle, ale pewne elementy mozna zrobic na tabelce.

Wbrew pozorom ie7 (i nizsze) jeszcze zyje i spora libcza uzytkownikow internetu z niej korzysta, wiec osobiscie majac do wyboru rezygnacje z ie7 i zastosowanie table-row, a zrobienie strony hybrydy div + tabele i zachowanie kompatybilnosci z ie, wybieram to drugie.
Przeciez mozesz zrobic komentarze warunkowe i jesli ie <= 7 wtedy dopiero stosujesz tabele, a jak nie to display:table....

No przeciez pisalem JS - nic wiecej nie wymyslisz.

Poza tym poczytaj jak sie buduje pseudo tabele na divach.
Podobnie zreszta jak na <table>
Czyli:

[HTML] pobierz, plaintext 
<div class="table">
 <div class="tr">
  <div class="td"></div>
  <div class="td"></div>
 </div>
</div>
[HTML] pobierz, plaintext 

i css

[CSS] pobierz, plaintext 
.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
[CSS] pobierz, plaintext 

PS. Jak ktos ci cos radzi to nie sluchasz, a zeby samemu cos pomyslec to nic.
Poczytaj pierw jakies kursy css.

[czychacz]

kod w htmlu:

[HTML] pobierz, plaintext 
<div id="page">
    <div id="header">Nagłówek strony</div>
    <div id="categories">
      <span class="catheader">Nagłówek kategorii</span><br>
      <ul>
        <li><a href=".">Link 1</a></li>
      </ul>
    </div>
    <div id="info">
      <span class="catheader">Info panel</span><br>
      Info panel
      <form action="." method="post">
        <p>Login:<br>
        <input type="text" name="username" class="resize"><br>
        Hasło:<br>
        <input type="password" name="password" class="resize"><br>
        <input type="submit" value="Zaloguj"></p>
      </form>
    </div>
    <div id="middle">
      <div id="content">
        a<br>
        a<br>
        a<br>
        a<br>
        a<br>
        a<br>
        a<br>
        a<br>
        a<br>
        a<br>
        a<br>
        a<br>
        a<br>
        a<br>
        a<br>
        a<br>
      </div>
      <div id="footer">Stopka strony</div>
    </div>
  </div>
[HTML] pobierz, plaintext 

kod css:

Kod

body{margin:0;background-color:rgb(223,223,231);font-size:12px;font-family:sans-serif;}
p{margin:0;padding:0;}
#page{width:960px;margin:0 auto;padding:0;}
#header{width:952px;background-color:rgb(63,63,95);color:rgb(223,223,231);text-align:center;text-transform:uppercase;font-size:300%;font-weight:bold;}
#categories{width:190px;background-color:rgb(63,63,95);color:rgb(223,223,231);float:left;overflow:hidden;clear:left;}
#info{width:160px;background-color:rgb(63,63,95);color:rgb(223,223,231);float:right;overflow:hidden;clear:right;}
#middle{width:594px;padding:0;background-color:rgb(231,231,239);color:rgb(63,63,95);float:left;overflow:hidden;clear:none;}
#footer{color:rgb(127,127,139);border-top:1px dashed rgb(191,191,199);clear:both;text-align:center;font-size:10px;}
div{padding:4px;}
#categories ul{margin:0;padding:0;width:182px;list-style-type:none;}
#categories li a{text-decoration:underline;color:rgb(215,215,223);display:block;width:182px;}
#categories li a:hover{text-decoration:none;}
input{border:1px solid rgb(63,63,95);color:rgb(63,63,95);background-color:rgb(223,223,231);font-size:90%;margin:1px;}
form{margin:0;}
#info input.resize{width:154px;}

//edit:
sunpietro: strona z linka się wczytuje, ale podstrony już nie:/
cros: jeśli chodzi o Twoje rozwiązanie z pseudotabelami - nie pasuje mi dlatego, że jak dla mojego prostego umysłu to to samo, co tabele, tylko użycie dodatkowo cssa

Ten post edytował czychacz 24.06.2010, 12:22:59

[cros]

//edit:
sunpietro: strona z linka się wczytuje, ale podstrony już nie:/
cros: jeśli chodzi o Twoje rozwiązanie z pseudotabelami - nie pasuje mi dlatego, że jak dla mojego prostego umysłu to to samo, co tabele, tylko użycie dodatkowo cssa

Przeciez to nie jest moj pomysl, tylko Lars_18, ktory przeciez sprawdzales (czyt. odpowiadal Tobie), ja ci tylko wytlumaczylem, jak prawidlowo sie tego uzywa.
Poza tym to nie jest to samo co tabele, to sa nadal divy, ktore imituja zachowanie tabel.
Jednak jakbym mial sie z tym bawic, to osobiscie wybral bym te 'normalne' tabel (<table>), z jednej prostej przyczyny - sa obsugiwane przez (chyba) wszystkie przegladarki, a te pseudo niestety nie....mowa tu o twoim przypadku.

PS. Cos mi sie wydaje, ze kolega poprostu naczytal sie zlych rzeczy o tabelach i teraz na sile proboje tego unikac.
W3C nie zabrania korzystania z tabel!!! Tylko trzeba to robic z rozsadkiem, a nie budowac caly layout na nich, a w twoim przypadku akurat uzycie tej jednej tabeli, nie zalicza sie do tego.

Ten post edytował cros 24.06.2010, 12:37:51

[Lars_18]

To nie jest to samo, tabelki są do danych tabelarycznych, a divów można użyć do "układania" elementów na stronie, więc jest bardziej semantyczne.
Inaczej tego nie osiągniesz, bo tylko tabelki zachowują się w sposób jaki chcesz osiągnąć. No chyba że użyjesz JavaScript.

Ten post edytował Lars_18 24.06.2010, 12:31:06