Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Dostosowywanie wysokości do treści

Zaczynasz dopiero swoją przygodę z HTML'em? A może mimo swojego doświadczenia natknąłeś się na jakiś problem? Tutaj na pewno znajdziesz pomoc.

Dostosowywanie wysokości do treści

Post 18.11.2006, 20:58:37

Witam,
Jak wykonać, aby div#content dopasowywał swoją wysokość do zawartości ?
html
Kod: Zaznacz cały
<div id="glowny">
<div id="top">

</div>
<div id="co_gramy">
<p id="tytul_piosenki"><span>Gramy:</span> Pink Floyd- Another brick in the wall</p>
</div>
<ul id="menu">
  <li><a href="#" class="link_menu">...Home</a></li>
   <li><a href="#" class="link_menu">...Rower</a></li>
   <li><a href="#" class="link_menu">...Porady</a></li>
   <li><a href="#" class="link_menu">...Radio</a></li>
   <li><a href="#" class="link_menu">...About</a></li>
   <li id="ogladalnosc"><p id="ilosc_sluchaczy">Słuchaczy:</p><p id="liczba_sluchaczy">245/842</p></li>
   
</ul>
<div id="center">
<p class="main_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p class="main_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>

css
Kod: Zaznacz cały
body {
   text-align: center;
}
#glowny {
padding: 0 0 20px 0;
   margin: 0 auto;
   width: 640px;
   background-color: #efeade;
}
#top {
   background-image: url(top.png);
   width: 640px;
   height: 244px;
   margin: 0;
}
#co_gramy {
   margin: 5px 0 30px 10px;
   background-color: #e2dbcb;
   height: 20px;
   width: 498px;
   text-align: left;
}
#tytul_piosenki span {
   margin: 0 2px;
   color: #B22222;
   font-family: "Arial Narrow";
   font-size: 14px;
}
#tytul_piosenki {
   margin: 0;
   color: #494949;
   font-size: 12px;
}
#menu {
   margin: 0;
   padding: 0;
   list-style: none;
   float: left;
}
li {
   display: block;
   width: 114px;
   height: 24px;
   margin: 0px 0 9px 10px;
   text-align: left;
   background-color: #66c45f;
}
.link_menu:link, .link_menu:visited  {
   color: white;
   text-decoration: none;
   font-family: Arial;
   font-size: 14px;
   margin: auto 5px;
}
.link_menu:hover  {
   color: #b6dde3;
   text-decoration: none;
   font-family: Arial;
   font-size: 14px;
   margin: auto 5px;
}
#ogladalnosc {
   background-color: #b6dde3;
   width: 114px;
   height: 42px;
   margin: 20px 0 0 10px;
}
#ilosc_sluchaczy {
   text-align: center;
   margin: 3px 0;
   color: #B22222;
   font-family: "Arial Narrow";
   font-size: 14px;
}
#center {
   background-color: #f5f2ed;
   width: 500px;
   float: right;
   margin: 0 0 30px 10px;
}
#liczba_sluchaczy {
   color: #383838;
   font-family: "Arial Narrow";
   font-size: 15px;
   margin: 2px 0;
   text-align: center;
}
.main_text {
   color: #575757;
   font-family: Verdana;
   text-align: justify;
   font-size: 12px;
   margin: 13px 10px;
}

Dodam, że moim sposobem strona rozciąga się pod partackim IE, ale na FF i Operze już nie działa.
dziękuję za pomoc, pozdrawiam.
internet
Piotrek Płatek
Piotrek Płatek

Posty: 110
Dołączył(a): 30.04.2006
Lokalizacja: WWA

Post 18.11.2006, 22:44:33

po 1 nie ma takiego diva jak div#content, chyba chodziło Ci o div#center
po 2 ten główny div musi się dopasować
aby wyglądało to na FF jak pod IE (Tfu!) przed <div id="center"> wstaw cos takiego <div class="line"></div> w ten sposób oszukasz troszeczkę przeglądarke (ff wyświetla stronę dobrze to IE błędnie interpretuje w tym przypadku CSS) a dla głównego diva dodaj height: auto;

Kod: Zaznacz cały
.line {
   position: relative;
   width: 0px;
   height: 400px; /* to ma byc wysokosc minimalna */
   background-color: transparent;
   float: left;
}


Pozdrawiam!
Neoo
Sebastian

Posty: 24
Dołączył(a): 28.07.2005

Post 18.11.2006, 23:37:58

przepraszam, co za niedopatrzenie <oops> chodzi o diva#glowny
Piotrek Płatek
Piotrek Płatek

Posty: 110
Dołączył(a): 30.04.2006
Lokalizacja: WWA

Post 18.11.2006, 23:57:40

No to co napisałem powinno pomóc :)
Neoo
Sebastian

Posty: 24
Dołączył(a): 28.07.2005


Powrót do Początkujący webmaster


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 9 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50315 zarejestrowanych użytkowników.
Najnowszy użytkownik: EleanorRobbins


Nasi użytkownicy napisali:

  • 935444 wiadomości
  • w 246477 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)