Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Odstęp miedzy div-ami
Forum PHP.pl > Forum > Przedszkole
kamil_lk
Witam. Jak mam się pozbyć tego odstępu między logo a resztą strony?
Link

index.php
Kod
<!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" xml:lang="pl" lang="pl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Tytul dokumentu</title>
</head>
<body>
<div id="calosc">
    <div id="top">
        <div id="naglowek">
            <div id="logo"><a href="#"><img src="graf/logo1.jpg" width="327" height="139" /></a></div>
            <div id="logo2"></div>
        </div>
        
        <div id="cialo">
            <div id="menu_left">
            <h1>Menu 1</h1>
            <ul>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            </ul><br />
            
            <h1>Menu 1</h1>
            <ul>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            </ul><br />
            
            <h1>Menu 1</h1>
            <ul>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            </ul><br />          
            </div>

            <div id="tresc"></div>
            
            <div id="menu_right">
            <h1>Menu 1</h1>
            <ul>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            </ul><br />
            
            <h1>Menu 1</h1>
            <ul>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            </ul><br />
            
            <h1>Menu 1</h1>
            <ul>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            <li><a href="#">click here</a></li>
            </ul><br />
            </div>
        </div>
        
        <div id="stopka">Wszelkie prawa zastrzeżone przez <a href="#">www.webmasters.pl</a> | Design by <a href="http://www.lokerz.ugu.pl/stronka2/index.php">Kam90</a></div>
    </div>
</div>
</body>
</html>


style.css
Kod
HTML, BODY {
    background: url("graf/tlo.jpg");
    font-size: 14px;
    
}

#top {
    margin: 0 auto;
    width: 897px;
    
}

#naglowek {
    margin: 0;
    padding: 0;    
}

#logo {
    display: block;
    float: left;
}

#logo2 {
    background: url("graf/logo2.jpg");
    width: 570px;
    height: 139px;
    overflow: hidden;
}

#cialo {
    margin: 0;
    padding: 0;
    width: 897px;
    background: url("graf/tlo2.jpg");
    overflow: hidden;
}

#menu_left {
    padding-left: 2px;
    float: left;
    width: 209px;
}

#tresc {
    float: left;
    width: 475px;
}

#menu_right {
    padding-right: 2px;
    float: right;
    width: 209px;
}

#stopka {
    width: 897px;
    background: url("graf/stopka.jpg");
    text-align: center;
    font-size: 12px;
    color: #939074;
    margin: 0 auto;
    height: 19px;
    padding-top: 5px;
}


h1 {
    background: url("graf/button.jpg");
    padding-left: 30px;
    font-size: 16px;
    height: 26px;
}

ul li {
    list-style: none;    
}

a {
    color: #20776e;
    text-decoration: none;
}

img {
    border: 0;
}

230005
ID nagłówek ma wyglądać tak:

  1.  
  2. height:139px;
  3. margin:0;
  4. overflow:hidden;
  5. padding:0;
  6.  


Gdybyś spojrzał na to firebugiem, to zobaczyłbyś że lewa część nagłówka lekko wystaje poza ten div więc rozwiązanie albo takie jak podałem, albo dla wystającej części ustaw właściwy rozmiar.
croc
Spróbuj nadać obrazkowi logo styl vertical-align: bottom

P.S. Postaraj się ładniej opakować ten kod. Po co np. nadajesz kilku elementom ten sam width. Wrzuć je do jednego kontenera o takiej szerokości.
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.