DIV nachodzi na drugi DIV


(Marcinj10) #1

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!


(Mlody993) #2

Mam identyczny problem z DIVami i pracuje nad rozwiązaniem. :slight_smile: Mam DIV, potem

i znów DIV, ten drugi div pokazuje się na

równo z końcem pierwszego diva.


(pain3hp) #3

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


(Gabriellos94) #4

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;

}

(Marcinj10) #5

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;)


(Gabriellos94) #6

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ć...