Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z divami
Forum PHP.pl > Forum > Przedszkole
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
  1. <p>Lorem ips...</p>
  2. </div>
  3. </div>
  4. <div>


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 tongue.gif

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 smile.gif
gszesiek
zmniejsz sobie szerokość news - powinno pomóc smile.gif
Cytat
Jeśli divy się przesuwają to zmieniaj szerokości divów naokoło
tom3k3
Pobawiłem się marginesami i paddingiem i chyba mi wyszło...
Efekt: http://www.tom.dlk.pl/index.html
Dobrze jest?
gszesiek
Cytat
Dobrze jest?
- (równo się wyświetla?) tak (Firefox 1.5)
Cytat
Dobrze jest?
- (validator) - nie smile.gif
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ć?
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.