Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Divy
b4rt3kk
post 4.11.2010, 17:44:58
Post #1





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Witam, mam sobie taki przykładowy układ strony:

[HTML] pobierz, plaintext 
  1. <div id=kontener> // Kontener
  2.  
  3. <div id=menu>menu</div>
  4.  
  5. <div id=srodek>srodek</div>
  6.  
  7. </div>
[HTML] pobierz, plaintext


W jaki sposób opisać to w css, żeby kontener rozszerzał się wraz z rozszerzaniem divów wewnątrz niego? Daje height: auto, to jest na wysokość 1px, daje, height 100% to jest to wysokość na 100% body, a jak tekst jest dłuższy, to kotener i tak się nie poszerza. Proszę o pomoc. Znaczy wydłuża, a nie poszerza, ale wiadomo o co chodzi. smile.gif

Ten post edytował b4rt3kk 4.11.2010, 17:47:34


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
CuteOne
post 4.11.2010, 17:57:30
Post #2





Grupa: Zarejestrowani
Postów: 2 958
Pomógł: 574
Dołączył: 23.09.2008
Skąd: wiesz, że tu jestem?

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. #kontener{ width: 500px; background: blue}
  2.  
  3. #menu{ height: 150px; width: 500px;  background: red}
  4.  
  5. #srodek{ width: 500px; background: green }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
b4rt3kk
post 4.11.2010, 18:54:56
Post #3





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

U mnie wygląda to tak:

[HTML] pobierz, plaintext 
  1. #kontener {
  2. overflow: visible;
  3. width: 848px;
  4. background-color: black;
  5. border-left: 1px solid white;
  6. border-right: 1px solid white;
  7. border-bottom: 1px solid white;
  8. margin-bottom: 20px;
  9. }
  10.  
  11. #menu_lewe {
  12. float: left;
  13. width: 140px;
  14. text-align: left;
  15. }
  16.  
  17. #srodek {
  18. float: left;
  19. width: 568px;
  20. text-align: left; 
  21. }
  22.  
  23. #menu_prawe {
  24. float: right;
  25. width: 140px;
  26. text-align: left;
  27. }
[HTML] pobierz, plaintext


Pozbawienia kontenera atrybutu height daje tylko i wyłącznie to, że całkowicie zanika, tak w ogóle to ma on nadawać tylko i wyłącznie tło i ramkę. Więc to co napisałeś nic nie pomogło.


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
kapuch
post 4.11.2010, 19:09:05
Post #4





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

Ostrzeżenie: (0%)
-----

Taki "blad" powstaje gdy stosujemy floaty.
Aby temu zaradzic wystarczy na samym koncu div kontener, wstawic np takie cos:
[HTML] pobierz, plaintext 
  1. <div style="clear:both;"></div>
[HTML] pobierz, plaintext

Wtedy div kontener, bedzie automatycznie przybieral wysokosc divow, ktore sa wewnatrz kontenera.
Czyli tak:
[HTML] pobierz, plaintext 
  1. <div id=kontener> // Kontener
  2.  
  3. <div id=menu>menu</div>
  4.  
  5. <div id=srodek>srodek</div>
  6.  
  7. <div style="clear:both;"></div>
  8.  
  9. </div>
[HTML] pobierz, plaintext


Ten post edytował kapuch 4.11.2010, 19:11:41


--------------------
Nie chce "Pomógł", aktualna ilość (69) w pełni mnie satysfakcjonuje :)
Go to the top of the page
+Quote Post
b4rt3kk
post 4.11.2010, 19:28:55
Post #5





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Niestety, dalej nic, nie pomogło. ;/


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
cniak
post 4.11.2010, 19:56:57
Post #6





Grupa: Zarejestrowani
Postów: 169
Pomógł: 12
Dołączył: 16.09.2009

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1.       <div id=kontener> // Kontener
  2.  Kazdy div musi posiadac jakis tekst, mozesz wpisac sztuczna spacje, np.  & n b s p ; (usuń odstepy miedzy czerwonymi literami (& i ; tez!)
  3.       <div id=menu>menu
  4. <div class="clear"></div>
  5. </div>
  6.  
  7.       <div id=srodek>srodek
  8. <div class="clear"></div></div>
  9.  
  10.       <div class="clear"></div>
  11.       </div>
[HTML] pobierz, plaintext


css:
[HTML] pobierz, plaintext 
  1. .clear {
  2. content: ".";
  3. clear: both;
  4. }
[HTML] pobierz, plaintext


Ten post edytował cniak 4.11.2010, 19:59:24
Go to the top of the page
+Quote Post
kapuch
post 4.11.2010, 19:59:16
Post #7





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

Ostrzeżenie: (0%)
-----

Cytat(b4rt3kk @ 4.11.2010, 19:28:55 ) *
Niestety, dalej nic, nie pomogło. ;/

U mnie dziala - specjalnie wkleilem ten kod jeszcze raz i div kontener ma wysokosc rowna z divami wewnatrz, takze mozliwe ze nie uzywasz prawidlowego !DOCTYPE
Np. takiego.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html>
  3. <head>
  4. ...itd...
[HTML] pobierz, plaintext

nic innego do glowy mi nie przychodzi - u mnie jest dobrze, wiec jesli wszystko zrobiles prawidlowo, wedlug wskazowek, ktore ci podano, to u ciebie tez musi byc ok.
Zobacz z tym doctype...

BTW. Musisz powiekszyc nieco (5-10px) szerokosc kontenera, bo prawe menu sie nie miesci i zjezdza na dol.

Ten post edytował kapuch 4.11.2010, 20:01:16


--------------------
Nie chce "Pomógł", aktualna ilość (69) w pełni mnie satysfakcjonuje :)
Go to the top of the page
+Quote Post
b4rt3kk
post 5.11.2010, 08:15:56
Post #8





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Dziękuję problem rozwiązany, jednak przyczyną było nie wyczyszczenie położenia divów, a raczej brak pustego znaku w stopce, po tym juz dziala idealnie smile.gif


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 6.07.2025 - 21:17
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn