Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: (DIV, CSS) Menu się nie rozciąga do tresci.
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
gandziorz
22.01.2012, 22:24:00
Witam,
Mam taki mały problem z divami.

Mam 3 divy.

[HTML] pobierz, plaintext 
  1. <div class="site">
  2. <div class="menu">Tutaj moje menu</div>
  3. <div class="srodek">Tutaj moj srodek a w nim tresc</div>
  4. </div>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. .site {
  2. 	margin:auto;
  3. 	width: 807px;
  4. 	height: auto;
  5. 	overflow:auto;
  6. }
  7. .menu {
  8. background-color: #F0F0F0;
  9. float: left;
  10. width: 208px;
  11. height: auto;
  12. }
  13.  
  14. .srodek {
  15. background-color: #FFFFFF;
  16. float: right;
  17. width: 599px;
  18. height: auto;
  19. }
  20.  
[HTML] pobierz, plaintext


Teraz jak napiszę i wstawię dużo elementu do diva "srodek" to rodzic "site" rowniez sie "wydluzy" ale menu ani nie drgnie.
Rozchodzi mi się o to by menu i srodek tak samo się rozciagalo.

Nie mam pomysłu jak to rozwiązać.
ShadowD
23.01.2012, 01:05:13
Sensownego rozwiązanie po prostu nie ma, przykro mi to pisząc - sporo osób ma ten problem i postów na tym forum też już kilka było, proponuję poszukać lub pomyśleć o js.
prowseed
23.01.2012, 02:08:08
To przez float'y. I rozwiazan tego problemu jest multum, nawet w samym html/css, bez angazowania js.

Daj to gdzies online to sprobuje to naprawic.
gandziorz
23.01.2012, 20:01:09
Zastosowałem takie rozwiązanie że dodałem do stylu .menu i .srodek 
[HTML] pobierz, plaintext 
  1. padding-bottom:10000px;
  2. margin-bottom:-10000px;
[HTML] pobierz, plaintext


I? Działa smile.gif
Może to nie najlepsze rozwiązanie ale działa na pewno smile.gif

Kolejny mały kłopot, dlaczego dynamiczne menu nie jest na wierzchu tylko wchodzi pod inne divy?
Adres do problemu http://opel24.info/
ShadowD
23.01.2012, 23:23:33
To co w kodzie dalej jest zawsze nad tym co jest wcześniej - jeśli oba elementy mają position:x relatife lub absolute wystarczy dodać im z-index, elemend który ma być nad powinien mieć większą wartość od pozostałych.

Tak Twoje rozwiązanie na pewno nie jest eleganckie, byleś się nie spotkał z przeglądarką która zechce zrozumieć to inaczej, zmniejsz te marginsesy choć na tyle by były "normalne" lub adekwatne do zawartości (jeśli strona zajmuje ~1000px wysokości daj 2000px). haha.gif
gandziorz
24.01.2012, 21:07:44
Cytat(ShadowD @ 23.01.2012, 23:23:33 ) *
To co w kodzie dalej jest zawsze nad tym co jest wcześniej - jeśli oba elementy mają position:x relatife lub absolute wystarczy dodać im z-index, elemend który ma być nad powinien mieć większą wartość od pozostałych.

Tak Twoje rozwiązanie na pewno nie jest eleganckie, byleś się nie spotkał z przeglądarką która zechce zrozumieć to inaczej, zmniejsz te marginsesy choć na tyle by były "normalne" lub adekwatne do zawartości (jeśli strona zajmuje ~1000px wysokości daj 2000px). haha.gif

Dzięki dzięki kolego. Już poprawione i chula.
Nigdy nie przywiązywałem dużej uwagi do css teraz uczę się je "opanowywać".
prowseed
24.01.2012, 22:03:03
Cytat
Nigdy nie przywiązywałem dużej uwagi do css teraz uczę się je "opanowywać".

To na pewno nie powinienes tego robic w taki sposob.
Cytat(gandziorz @ 23.01.2012, 20:01:09 ) *
[HTML] pobierz, plaintext 
  1. padding-bottom:10000px;
  2. margin-bottom:-10000px;
[HTML] pobierz, plaintext


Zrob sobie cos takiego i psrawdz czy dziala

[HTML] pobierz, plaintext 
  1. <div class="site">
  2. <div class="menu">Tutaj moje menu</div>
  3. <div class="srodek">Tutaj moj srodek a w nim tresc</div>
  4. <div style="clear:both;margin:0;"></div>
  5. </div>
[HTML] pobierz, plaintext
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.