Witam!
Moja strona: http://www.2shared.com/file/MumMAsyM/Strona_WWW.html (do otworzenia lokalnie)
Tym razem nie wiem dlaczego na element #NAV nachodzi #test. Dobrze widać to przy użyciu wtyczki FireBug w przeglądarce Firefox (zakładka Układ) lub w opcji “Zbadaj element” w Google Chrome (zakładka Metrics).
Mam nadzieję, że zrozumieliście problem i pomożecie go rozwiązać.
Pozdrawiam!
Mam identyczny problem z DIVami i pracuje nad rozwiązaniem. 
Mam DIV, potem
i znów DIV, ten drugi div pokazuje się na
równo z końcem pierwszego diva.
może wytłumacz co znaczy wg Ciebie “nachodzi”, sprawdzałem w FF i IE9 - wg mnie nic tutaj na siebie nie “nachodzi”.
Jeżeli chodzi ci o to że margines dolny z menu nie “odpycha się” od #test, wyobraź sobie że każdy div to jakby pudełko, właściwość padding to przestrzeń między ciałem w pudełku a jego ścianami, czyli jeśli masz pudełko o wysokości 65px (#navigation) - dodałeś w jego środku listę którą rozpychasz w dół i w górę po 30px, czyli mamy już 60px w środku, spójrz na swoje elementy listy, one napewno mają więcej niż 5 pozostałych px.
Nie definiuj wysokości elementu nadrzędnego, usuń z #navigation, height: 65px;
…jeśli o to Ci chodziło
Tak ja bym to zrobił (jeśli o taki efekt ci chodziło).
#CONTENT {
margin: 0 auto;
width: 900px;
}
UL#NAV {
list-style-type: none;
display: block;
margin: 0 auto;
width: 740px;
padding: 15px 0;
}
UL#NAV LI {
display: inline;
}
UL#NAV LI A {
padding: 5px 20px;
margin: 0px 2px;
border: 1px solid #FC6A08;
background-color: #FCA908;
text-decoration: none;
text-align: center;
color: black;
}
UL#NAV LI A:hover {
background-color: #8a61c9;
}
#MAIN {
background-image : url('../pic/mainbg.png');
background-repeat : repeat;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
margin-top: 0px;
border-top-width: 2px;
border-top-color: black;
}
#NAVIGATION {
background-image: url('../pic/navigationbg.png');
background-repeat: repeat-x;
margin-top: 0px;
margin-bottom: 4px;
background-color: #ff9948;
border-bottom-width: thick;
border-bottom-color: green;
}
body {
background-image : url('../pic/bodybg.png');
background-repeat : repeat;
}
p
{
font-family: Verdana;
}
#test
{
border: 1px solid black;
}Dzięki, wszystko działa jak należy.
Możesz mi wytłumaczyć Spidy dlaczego dałeś display: block dla Ul#NAV?
W jaki sposób mogę zmniejszyć odstęp od obramowania wokół linków w menu? Chodzi mi o to, aby nie było aż takich dużych przerw po prawej i po lewej stronie w każdej ramce od napisu (np. Strona główna). Gdy ustawiam, np., padding-left: 4px i padding-right: 4px, to wszystko się psuje. Mam nadzieję, że rozumiesz o co chodzi.
Zastanawiam się kiedy będę miał następny problem;)
Przepraszam, że tak późno ale wczoraj nie miałem czasu żeby wejść na forum.
Tak to powinno wyglądać:
UL#NAV, UL#NAV LI {
list-style: none;
display: block;
margin:0; padding: 0;}
UL#NAV
{margin: 0 auto; padding: 15px 0 0 0; width: 740px;}
UL#NAV LI {
float: left;
padding: 0 1px;
}
UL#NAV LI A {
display: block;
padding: 5px 20px;
margin: 0px 0px;
border: 1px solid #FC6A08;
background-color: #FCA908;
text-decoration: none;
text-align: center;
color: black;
}
wczoraj było późno i byłem już zmęczony więc nie widziałem, że było źle. A display: block hmm, m.in. po to żeby mieć wiekszą kontrolę na wysokością i szerokością.
PS. Do bloku nawigacji dodaj jeszcze min-height: 65px;. Nie wiem dlaczego ale tak musi być…