Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] Div w divie
Forum PHP.pl > Forum > Przedszkole
r_mag13
7.03.2009, 01:46:52
Jest pewna rzecz która zawsze mnie zastanawiała w divach.
Dlaczego jak włożę diva(nazwijmy go div1) w diva(div2), nadam im obramowanie, a następnie wypełnię jakąś treścią diva2, to div1 jest taki wąziutki na górze strony, a div2 wyłazi poza div1? Nie mogę tego pojąć. Przecież jak coś jest w czymś, to to coś też powinno się rozszerzyć.

Byłbym wdzięczny za radę jak tego uniknąć, lub link do jakiegoś artykułu który porusza ten problem.
wookieb
7.03.2009, 05:56:40
A jak wlozysz foliowe torbe do szuflady to czy przyjmuje jej rozmiary? Nie...
Tak sie nie dzieje i tyle i nie ma na to kursu bo wystarczy logiczne myslenie. Poprostu. Nie ma w divie 1 tresc ktora by ro rozpychala (badz innych ustawien) to sie nie powieksza.

Poza tym o divach masz dobry kurs http://kurs.browsehappy.pl
r_mag13
7.03.2009, 09:18:10
Wcale nie jestem pewny czy to dobry przykład smile.gif Może jeżeli przyjmiemy ze szuflada się rozciąga, w zależności od zawartości, to jeżeli wpakujemy tam reklamówkę z ziemniakami, to ta reklamówka nie wyjdzie poza szufladę prawda? Jeżeli wpakujemy tam drugą reklamówkę z ziemniakami to szuflada się rozciągnie i dalej żadna z reklamówek nie wyjdzie poza szufladę... A divy wcale tak nie działają...
Zwłaszcza, że jeżeli napisze jedną literkę pod divem2, to div1 magicznie rozciąga się na diva 2 i na tą literke... czyli jak napisze literke to on diva2 wewnątrz traktuje jako treść, ale jeżeli literki zabraknie to to już nie jest treść...

Cytat
Nie ma w divie 1 treść która by ro rozpychała (bądź innych ustawień) to się nie powiększa.

Jak to nie ma treśi która by go rozpychała? A div2 z tekstem?
erix
7.03.2009, 11:49:18
Pokaż CSS.
r_mag13
7.03.2009, 12:13:30
Kod
body {
         color: black;
         margin: 0;
         padding: 0;
         font-family: 'Arial';
     }
    
     #main {
        
         width: 800px;
         margin: auto;
         padding: 0;
         border-style: solid;
         border-width: 1px;
         border-color: red;
     }
    
     #naglowek {
         height: 150px;
         padding: 0;
         margin:0;
         border-style: solid;
         border-width: 1px;
     }
    
     #tresc {
         border-style: solid;
         border-width: 1px;
         border-color: gold;
         padding: 0;
         margin:0;
     }
    
     #menu {
         border-style: solid;
         border-width: 1px;
         float: left;
         width: 130px;
         padding: 0;
         margin:0;
     }
    
     #tekst {
         border-style: solid;
         border-width: 1px;
         width: 650px;
         float:right;
     }
    
     #stopka {
         font-size: 8pt;
         text-align: center;
         padding: 0;
         margin:0;
         width: 800px;
         background-color: olive;
         float: left;
     }


Przy takim css strona wygląda tak:


Jej kod wygląda tak:
[HTML] pobierz, plaintext 
  1. <body>
  2.     <div id="main"> <!-- czerwone obramowanie (według mnie powinno obejmować całą strone) -->
  3.         <div id="naglowek">
  4.             Tytuł
  5.         </div>
  6.         <div id="tresc"> <!-- złote obramowanie (według mnie powinno obejmować 2 poniższe divy) -->
  7.             <div id="menu">
  8.                 <ul>
  9.                     <li>LINK</li>
  10.                     <li>LINK</li>
  11.                     <li>LINK</li>
  12.                 </ul>
  13.             </div>
  14.             <div id="tekst">
  15.                 TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
  16.                 TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
  17.                 TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
  18.                 TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
  19.                 TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
  20.                 TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
  21.             </div>
  22.         </div>
  23.         <div id="stopka">
  24.             Copyright &copy; 2009 by r_mag13
  25.         </div>
  26.     </div>
  27. </body>
[HTML] pobierz, plaintext
erix
7.03.2009, 12:15:19
Wg Ciebie powinno, ale:
Kod
#tekst {
         border-style: solid;
         border-width: 1px;
         width: 650px;
         float:right; /*exclamation.gif!!!!!!!!!*/
     }
    
     #stopka {
         font-size: 8pt;
         text-align: center;
         padding: 0;
         margin:0;
         width: 800px;
         background-color: olive;
         float: left; /*exclamation.gif!!!!!!!!!!!*/
     }

poczytaj, co trzeba zrobić z rodzicem, aby obiekty z opływaniem nie wylewały się z rodzica.
wookieb
7.03.2009, 12:19:00
Cytat
A div2 z tekstem?

Jezu a jak napisales?
Cytat
Dlaczego jak włożę diva(nazwijmy go div1) w diva(div2), nadam im obramowanie, a następnie wypełnię jakąś treścią diva2,

Czyli
Kod
<div> (div2)
<div>(div1)
</div>
dfsgsdfgasdgr
</div>


I linku to kolega nie przeczytal.
Tuż po zamkniecie diva #tekst daj
Kod
<div style="clear: both;"></div>
r_mag13
7.03.2009, 13:45:15
No tak faktycznie namieszałem z tymi numerami. Sory mój błąd. A linka powolutku analizuje. Jak skończę i dalej nie będzie działało to się odezwę, narazie dzięki.

Cytat
Tuż po zamkniecie diva #tekst daj
Kod
<div style="clear: both;"></div>


No tak tylko że z tego co wiem to dosyć nieeleganckie rozwiązanie...
wookieb
7.03.2009, 15:04:41
Cytat(r_mag13 @ 7.03.2009, 13:45:15 ) *
No tak tylko że z tego co wiem to dosyć nieeleganckie rozwiązanie...

Kto ci tak powiedział?
erix
7.03.2009, 16:13:46
Bo jest nieeleganckie, gdyż dodajesz tag, który nie ma żadnego semantycznego znaczenia. Idealne byłoby tu dodanie odpowiedniego elementu :after po kontenerze (w IE też jest to do zrobienia), ale IMHO w tej konkretnej sytuacji wystarczyłoby dodanie overflow: hidden dla rodzica.
r_mag13
7.03.2009, 16:48:42
Udało się. Wydaje mi się że przekombinowałem z ilością div-ów w kodzie oraz za bardzo namieszałem w CSS. Dałem po prostu jeden div, a w nim 4 inne odpowiadające za nagłówek, treść itd... i działa jak chciałem smile.gif Dzięki za pomoc
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.