Forum PHP.pl > [HTML][CSS] Kilka problemów z divami

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Kilka problemów z divami

Turson

26.07.2011, 17:44:27

Kod html

[HTML] pobierz, plaintext 
<body>
<a href="index.php"><img src="logo.png"/></a>
<div class="linia"></div>
<div class="menu">
<div class="mlewo"><a href="#">link1</a> | <a href="#">link2</a> | <a href="#">link3</a></div>
<div class="mprawo"><a href="#">zaloguj</a> | <a href="#">zarejestruj</a></div>
</div>
<div class="linia"></div>
<div class="fotocnt">
<div class="fototitle">tytul</div>
<center><a href="#"><img src="test.jpg"></a></center>
<div class="opis">Ocena
</div></div>
[HTML] pobierz, plaintext

Więc to niby wyglądać ma tak (od góry): logo -> linia -> menu -> linia -> box
Problem jest taki, że wygląda tak teraz: logo -> linia -> menu -> linia przecina menu -> box wjeżdża na menu

css

[CSS] pobierz, plaintext 
.linia{
background:url(linia.png) repeat-x;
width:100%;
height:11px;
}
.menu{
width:800px;
margin:0 auto;
font-size:16px;color:#8f8f8f;
}
.menu a{
font-family:Verdana;
color:#e2e2e2;
text-decoration:none;}
.menu a:hover{
color:white;
text-decoration:none;}
.mlewo{
float:left;}
.mprawo{
float:right;}
.fotocnt{
margin-top:100px;
width:800px;
margin:0px auto;
background-color:black;
border:1px solid #1b1b1b;}
.fototitle{
font-size:22px;
color:#8a8a8a;margin:8px 0px 8px 25px;}
[CSS] pobierz, plaintext

I po prostu nie wiem, co nie tak a nerwów mi nie starcza bo niby błahostka

Damonsson

26.07.2011, 23:49:49

Przeczytaj jakiś kurs html/css, wtedy napisz to poprawnie tak jak powinno być i wróć z błędami jakie wtedy się pojawią, bo z tego to nawet Salomon...

Żeby chyba wyglądało jak chcesz, zmień na:

[CSS] pobierz, plaintext 
.linia {
    background:url(linia.png) repeat-x;
    width:100%;
    height:11px;
    clear: both;
}
[CSS] pobierz, plaintext

worek

27.07.2011, 03:11:59

na start proponuję restart stylów domyślnych przeglądarki a potem bawienie się wizualizacją, tu masz dobry skrypcik do reseta. Wrzucasz go przed dołączanym arkuszem stylów właściwych np:
<link rel.....stylesheeet....=plik z resetem>

CODE

html, body, div, form, label{margin: 0;padding: 0;}img{border: 0;}

a potem już twój arkusz stylów właściwy

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.