Forum PHP.pl > [html] Problem z głównym divem i tłem...

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [html] Problem z głównym divem i tłem...

krzywy36

14.12.2007, 17:43:32

Kurde... banalny problem a już się trochę z nim męczę... ;/
Mam głównego diva (container) z ustawioną szerokością na 770px,
w nim są 2 divy jeden z szerokością 200px,
a drugi z szerokością 550px, oba mają ustawione float: let,
więc zostaje jeszcze 20px wolnego po prawej,
teraz gdy ustawiam tło obrazkowe containera z pozycją po prawej stronie to mi się nic nie wyświetla...
z tego co wiem to wysokość containera powinna zależeć od zawartości... a moje 2 divy w jego środku są jakby
"warstwowo" nad nim... jakieś pomysły aby tło wyświetlało się normalnie tz. na całej wysokości...

PS: wieczorem wstawie kod... ;]

Lion_87

14.12.2007, 17:46:28

Wstaw kod a potem sie zobaczy:)

krzywy36

14.12.2007, 20:03:20

Dobra tutaj jest kod:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
        <title>Team</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
       <div id="menubar">
       tekst
                  <img src="firstpartoflogo.jpg" />
                    <div id="menu"></div>
               <img src="nextpartoflogo.jpg" />
               <div id="photo"></div>
               <img src="nextpartoflogo.jpg" />
               <div id="banners"></div>
               <img src="bottompartoflogo.jpg" />
          </div>
          <div id="rightdiv">
               <div id="logo">logo</div>
               <div id="quote">cytat</div>
               <div id="allcontent">
                    <div id="content">główna treść</div>
               </div>
          </div>
          <div id="footer"></div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

Tutaj css:

[HTML] pobierz, plaintext 
div#container
{
    width: 770px;
    margin: 0 auto;
    background-image: url(shadow.png);
    background-repeat: repeat-y;
    background-position: right;
}
 
div#menubar
{
    width: 200px;
    float: left;
    background-color: black;
}
 
div#rightdiv
{
    float: left;
    width: 550px;
    background-color: #ccc;
}
 
div#footer
{
    width: 750px;
    height: 20px;
    background-color: red;
    float: left;
}
[HTML] pobierz, plaintext

Powinno to wyglądać mniej więcej tak:
http://img216.imageshack.us/my.php?image=screenjd0.jpg

jak widać na IE działa ;/ a w firefoxie i operze nie wyświetla cienia po prawej...

bugme

14.12.2007, 20:03:27

To wstaw do tego głównego diva trzeci div i daj mu styl "clear: both;"

krzywy36

14.12.2007, 20:11:17

Ale wstawić go i w niego wsadnić pozostałe, czy wsadzić go takiego pustego??

Edit:
Wstawiłem go pustego i działa :] thx bugme...

A i jakbyś mógł mi wytłumaczyć co daje to (jak to działa) że wstawiłem ten div??

bugme

15.12.2007, 00:00:54

Nie widziałem wcześniej twojego przykładu. Wystarczy zaaplikować clear:both (zamiast float) do stopki bez tego dodatkowego div-a

A wytłumaczenie z przykładami jest tu http://dashdev.djupet.se/tutorials/float/c...tutorial_1.html

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.