Forum PHP.pl > [CSS/HTML] Błąd odczytu marginesu ?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS/HTML] Błąd odczytu marginesu ?

Forum PHP.pl > Forum > Po stronie przeglądarki

psych0

3.05.2009, 01:22:58

Witam, mam problem, gdyż gdy chcę zrobić poziome przyciski za pomocą <ul> i <li> oraz główną treść strony (pod tym menu), posiadają one różne szerokości. Oba powinny mieć marginesy po 3% z lewej i prawej strony, jednak przy menu zrobionym za pomocą listy nie odczytuje szerokości prawego marginesu (zobaczyłem to dzięki dodatkowi Firebug). Jak zrobić, aby miały one taką samą szerokość, nie chcę określać marginesów przy każdym id lub klasie, ma to robić #wrap .

Kod

/*kolor #777 jest wyswietlany gdy nie ma stopki/loga*/
body {
     font-size: 62.5%;
     font-variant: normal;
     font-family: 'Times New Roman', Verdana, Arial, sans-serif;
}
#headline {
     font-size: 1.4em;
     float: left;
     width: 100%;
     margin: 0;
     margin-bottom: .5%;
     padding: 0;
     list-style: none;
     color: #690;
     background: #ddd;
}
#reg {
     float: right;
     width: 10%;
     margin: 0;
     padding: 8px 14px;
}
#find {
     float: left;
     width: 10%;
     margin: 0 50px 0 1em;
     padding: 8px 30px;
     background: url(images/find.gif) no-repeat 0 50%;
}
#wrap {
     font-size: 1.6em;
     width: 94%;
     margin-right: 3%;
     margin-left: 3%;
     background: #fff;
}
#header {
     width: 100%;
}
#logo {
     width: 100%;
     margin: 0;
     padding: 0;
     list-style: none;
}
.llogo {
     float: left;
     height: 200px;
     width: 5%;
     background: #777 url(images/head_left.gif) no-repeat top left;
}
.clogo {
     float: left;
     width: 90%;
     height: 200px;
     background: #777 url(images/head_bg.gif) repeat-x top left;
}
.rlogo {
     float: right;
     height: 200px;
     width: 5%;
     background: #777 url(images/head_right.gif) no-repeat top right;
}
#nav {
     float: left;
     width: 70%;
     margin: 0;
     padding: 2px 0 0 46px;
     list-style: none;
     background: #ffe;
}
#nav li {
     float: left;
     margin: 0 1px 0 0;
     padding: 0;
     font-family: 'Lucida Grande', sans-serif;
     font-size: 80%;
}
#nav a {
     float: left;
     display: block;
     margin: 0;
     padding: 4px 8px;
     color: #333;
     text-decoration: none;
     border: 1px solid #9B8748;
     border-bottom: none;
     background: #F9E9A9;
}
#nav a:hover, body#home #t-home a {
     color: #333;
     padding-bottom: 5px;
     border-color: #727377;
     background: #fff;
}
#content {
     float: left;
     width: 67%;
     margin: 0;
     margin-right: 2%;
     background: #eee;
}

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=utf-8" />
         <meta http-equiv="Content-Language" content="pl" />
         <title>..</title>
         <link rel="Stylesheet" type="text/css" href="_style.css" />
     </head>
     <body id="home">
         <ul id="headline">
             <li id="reg">Zarejestruj się</li>
             <li id="find">Szukaj</li>
         </ul>
         <div id="wrap">
             <div id="header">
                 <ul id="logo">
                     <li class="llogo"></li>
                     <li class="clogo"></li>
                     <li class="rlogo"></li>
                 </ul>
             </div>
             <ul id="nav">
                 <li id="t-home"><a href="index.php">Home</a></li>
             </ul>
             <div id="content">
             ęóąśłżźćń ĘÓĄŚŁŻŹĆŃ
             </div>
         </div>
     </body>

</html>

Takie kolory są po to, żeby zobaczyć te szerokości.

Zajec

13.05.2009, 21:40:24

Nakręciłeś, że nie da Ci się pomóc. Jakie dwa elementy mają mieć te marginesy? li? div? a? Które dokładnie, bo li masz sporo.

Na razie przypisałeś margin-left i margin-right równe 3% tylko na #wrap. A przecież #wrap to tylko jeden div. Może chodziło Ci o

Kod

#wrap #header {}
#wrap #nav {}

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.