Problem z divami Opcje

[tom3k3]

Hmm... zmieniłem tabelke na divy i niby jest dobrze ale sami popatrzcie.
Mam szablon: www.tom.dlk.pl/index.html
Newsbox jest ok, logo i submenu też. Ale dlaczego te menu(strona główna, oferta, forum) jest pod newsboxem, anie pod tym submenu(zolty kwadrat obok logo)?

style.css

Kod

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#main {
border:0px;
width:799px;
height:900px;
}

div#logo {
width:609px;
height:150px;
float:left;
}

div#submenu {
width:188px;
height:150px;
float:left;
padding-left:2px;
}

div#belka_duza {
width:609px;
height:30px;
float:left;
padding-top:2px;
}

div#belka_mala {
width:188px;
height:30px;
float:left;
padding-top:2px;
padding-left:2px;
}

div#news {
width:609px;
height:auto;
border:1px solid #cccccc;
float:left;
background-color:#fcfcfc;
}

div#menu {
width:188px;
height:auto;
border:1px solid #cccccc;
float:left;
padding-left:2px;
background-color:#fcfcfc;
}

div#menu_linki {
font:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
text-align:left;
float:inherit;
text-decoration:none;
margin-left:5px;
}

div#footer {
width:799px;
height:45px;
float:left;
}

p {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
text-align:justify;
text-decoration:none;
margin-left:2px;
margin-right:2px;
margin-bottom:2px;
margin-top:2px;
padding-top: 2px;
}

inde.html

Kod

<div align="center">
  <div id="main">
    <div>
      <div id="logo"><img src="cb/logo.jpg" alt="dlk.pl - zaspokój swoje potrzeby" title="dlk.pl - zaspokój swoje potrzeby" border="0"></div>
      <div id="submenu"><img src="cb/submenu.jpg" alt="submenu, logowanie, pomoc techniczna" title="subemnu" border="0"></div>
    </div>
    <div>
      <div id="belka_duza"><img src="cb/belka.jpg" alt="news, treść" title="news, aktualności" border="0"></div>
      <div id="belka_mala"><img src="cb/belka_mini.jpg" alt="menu" title="menu" border="0"></div>
      <div id="news">
        <p>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. 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. 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. 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. 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>
    <div>
      <div id="menu">
      <div id="menu_linki">Strona główna</div>
      <div id="menu_linki">Forum dyskusyjne</div>
      <div id="menu_linki">Oferta</div>
      <div id="menu_linki">Porównanie pakietów</div>
      <div id="menu_linki">Kontakt</div>
      <div id="menu_linki">Logowanie</div>
      <div id="menu_linki">Polecamy</div>
      </div>
      <div id="belka_mala"><img src="cb/belka_mini.jpg" alt="menu" title="menu" border="0"></div>
      <div id="menu">
      <div id="menu_linki">Strona główna</div>
      <div id="menu_linki">Forum dyskusyjne</div>
      <div id="menu_linki">Oferta</div>
      <div id="menu_linki">Porównanie pakietów</div>
      <div id="menu_linki">Kontakt</div>
      <div id="menu_linki">Logowanie</div>
      <div id="menu_linki">Polecamy</div>
    </div>
    <div>
    <div id="footer">Tu będzie stopka nr1. php, mysql ,perl, direct admin.</div>  
    </div>
    <div>
    <div id="footer">Tu będzie stopka nr1. php, mysql ,perl, direct admin.</div>  
    </div>
    
  </div>
</div>
</div>

Co jest źle?

[uli]

[HTML] pobierz, plaintext 
<p>Lorem ips...</p>
      </div>
    </div>
    <div>
[HTML] pobierz, plaintext 

Wywal jedno </div> i dodaj je po menu.

[tom3k3]

Działa, jednak mam kolejny problem :/
http://www.tom.dlk.pl/index.html
Krzaki zaznaczyłem na shocie:
http://tom.dlk.pl/img/dlk.PNG
Podejrzewam, że newsbox wystaje poza żółtą belkę ponieważ dałem border 1. Co zrobić aby belka i newsbox miały takie same wymiary? teoretycznie mają ale praktycznie nie

Czemu box menu jest bardziej wsuniety do srodka niz belka? Powinny byc rowno.

I czemu jedna belka menu jest krotsza od drugiej? Obydiwe odwoluja sie do jednego id wiec co jest grane? :|

[gszesiek]

dowiedz się kiedy stosuje się "id" a kiedy "class"

[jarrod]

Dość dużo siedzę nad CSS-ami w pracy bo muszę i powiem Ci jedno. Jeśli divy się przesówają to zmieniaj szerokości divów naokoło (które trzymają tego diva) zwłaszcza gdy wszystko jest na float-ach.
Jak już się nauczysz że dając float: jakikolwiek; to musisz podać dokładną szerokość i czasami wyskokość elementu aby to wszystko było tak jak chcesz.

Posiedź, "poruszaj" trochę tymi divami aż załapiesz jak to działa bo tego Ci nikt nie wytłumaczy.

[tom3k3]

W css'ie podałem szerokość każdego diva

[gszesiek]

zmniejsz sobie szerokość news - powinno pomóc

Jeśli divy się przesuwają to zmieniaj szerokości divów naokoło

Ten post edytował gszesiek 26.10.2006, 20:28:25

[tom3k3]

Pobawiłem się marginesami i paddingiem i chyba mi wyszło...
Efekt: http://www.tom.dlk.pl/index.html
Dobrze jest?

[gszesiek]

Dobrze jest?

- (równo się wyświetla?) tak (Firefox 1.5)

Dobrze jest?

- (validator) - nie

[jarrod]

IE 7 2px różnicy na prawie każdym bloku w stosunku do nagłówka...

[tom3k3]

Na validator nie patrz bo jeszcze nie skończyłem. Hmm nie mam IE 7 jarrod jak to naprawić?