Forum PHP.pl > Problem z marginesem górnym

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Problem z marginesem górnym

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

Jarod

15.03.2006, 01:04:23

Witam!

Robiąc menu natrafiłem na pewien problem. Próbowałem zrozumieć dlaczego tak się dzieje, testowałem kod i nadal nie potrafię znaleźć błędu. Kod okroiłem do minimum i zauważyłem coś takiego.

Normalny wygląd strony - tu jest wszystko ok KLIK

Chciałbym napis "Tu występuje problem(...)" na czerwonym tle obniżyć od góry o 10 pikseli. I gdy dla bloku ustawie margines dolny i górny na 50px

.nav {
margin: 50px auto;
padding: 0px;
background-color: red;
width: 96%;
}

1. pod Firefoxem i Operą zamiast dodać górny margines 50px obniża kontener o 50px --> ZOBACZ SAM

2. Pod IE jest ok --> SPRAWDŹ

Natomiast jeśli przed blokiem .nav dodam znacznik <br /> to pod każdą przeglądarką jest jest ok.

Kod XHTML

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
 
   <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
      <meta http-equiv="Content-language" content="pl" />
      <meta name="Pragma" content="no-cache" />
      <meta name="Cache-Control" content="no-store, no-cache, must-revalidate" />	  
	  <link rel="stylesheet" href="../css/glowny.css" type="text/css" />
   </head>
 
   <body>
 
 
      <!-- Głowny blok na tło -->
      <div id="glowny">
 
         <div class="spacer"></div>
 
         <!-- Główny kontener szablonu -->
         <div id="kontener">
 
             <div class="nav">
                 Tu występuje problem. Działa tylko margines dolny i boczne a górny wszystko przesuwa !
             </div>             
 
             <div class="menuglowne">
               <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt </p>
               <p>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci </p>
               <p>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum </p>
               <p>iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat </p>
               <p>nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril</p>
               <p>delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend </p>
               <p>option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent </p>
               <p>claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes </p>
               <p>demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus </p>
               <p>dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, </p>
               <p>quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta </p>
               <p>decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes </p>
               <p>in futurum.</p>
             </div>
 
 
         </div>
         <div class="spacer"></div>
 
	  </div>
 
   </body>
</html>
[HTML] pobierz, plaintext

Kod CSS

Kod

/* STYL GŁÓWNY */

/*  Szablon strony */

body {
      margin: 0;
   padding: 0;
}

div#glowny {
            margin: 0px auto;
            padding: 0px;
            width: 760px !important;
            width: 764px;
      background-image: url(../layout/tlo.gif);
      background-repeat: repeat-y;
}

#kontener {
           margin: 0px auto;
           padding: 0px;
           width: 650px;
           background-color: green;
     border 0;
}

.nav {
    margin: 50px auto;
    padding: 0px;
             background-color: red;
             width: 96%;
}

.menuglowne {
    margin: 0px auto;
    padding: 10px 0;
             width: 96%;
}

.spacer {
         clear: both;
         height: 15px;
}

/* Elementy strony */

p {
    margin: 0px;
    padding: 0px;
    text-align: center;
    background-color: yellow;
}

Gdzie popełniam błąd?

acztery

15.03.2006, 01:49:39

nie wiem ale jezeli gorny to coś z top moze

padding-top:10px albo margin-top: 10px

Jarod

15.03.2006, 09:59:00

Cytat(acztery @ 2006-03-15 00:49:39)

nie wiem ale jezeli gorny to coś z top moze

padding-top:10px albo margin-top: 10px

Próbowałem - nie pomaga :/

revyag

15.03.2006, 10:05:43

Robisz tak:
- dodajesz dodatkową warstwę
- dajesz jej padding-top:50px
- w tą warstwę wsadzasz .nav

Kod

#inner {
    width:100%;
    padding-top:50px;
}
.nav {
   margin: 50px auto;
   margin-top:0;
   background-color: red;
   width: 96%;
}

[HTML] pobierz, plaintext 
<div id="inner">
            <div class="nav">
                Tu występuje problem. Działa tylko margines dolny i boczne a górny wszystko przesuwa !
            </div>
        </div>
[HTML] pobierz, plaintext

Jeszcze takie małe uwagi:
- na początku arkusza możesz dać:

Kod

* {
margin:0;
padding:0;
}

wyzerujesz te wartości dla wszystkich elementów w dokumencie i nie musisz wtedy przy każdym ich osobno zerować.
- nie musisz pisać px kiedy wartością jest zero -> margin: 0 auto;

Jarod

15.03.2006, 11:42:25

Sprawdze i dam znać czy zadziałało. Wiesz dlaczego tak się dzieje?

Zajec

15.03.2006, 20:07:33

Cytat(J4r0d @ 2006-03-15 11:42:25)

Sprawdze i dam znać czy zadziałało. Wiesz dlaczego tak się dzieje?

Dawno temu zauważyłem to zachowanie i zgłosiłem jako bug. Okazało się, że przeglądarki powinny właśnie w pewnych sytuacjach przekazywać margines rodzicowi. Nie zrozumiałem i nie potrafię wytłumaczyć kiedy i dlaczego tak się dzieje. Wiem tylko, że jest to zgodne ze standardami.

Jarod

15.03.2006, 22:28:32

Cytat(revyag @ 2006-03-15 09:05:43)

Robisz tak:
- dodajesz dodatkową warstwę
- dajesz jej padding-top:50px
- w tą warstwę wsadzasz .nav

Kod

#inner {
    width:100%;
    padding-top:50px;
}
.nav {
   margin: 50px auto;
   margin-top:0;
   background-color: red;
   width: 96%;
}

[HTML] pobierz, plaintext 
<div id="inner">
            <div class="nav">
                Tu występuje problem. Działa tylko margines dolny i boczne a górny wszystko przesuwa !
            </div>
        </div>
[HTML] pobierz, plaintext

Niestety to nie działa. Jest tak jak wcześniej :/

revyag

16.03.2006, 10:02:22

Na pewno wstawiłeś to tak jak mówiłem ?
screen z firefoxa:

Jarod

31.05.2007, 16:18:09

Cytat(revyag @ 2006-03-16 09:02:22)

Na pewno wstawiłeś to tak jak mówiłem ?
screen z firefoxa:

Tak - dokładnie tak jak mówiłeś. Nad tym napisem "Tu występuje problem (...)" jest jeszcze nagłówek I to ten nagłówek jest obniżany tak jak pokazałeś na screenie a nie ten napis.. :| Kombinowałem na wszystkie sposoby. Nie wiem co jest grane...

Pozwoliłem sobie odświeżyć temat bo na trafiłem ponownie na ten problem.

@revyag: zamiast:

[HTML] pobierz, plaintext 
#inner {
   width:100%;
   padding-top:50px;
}
[HTML] pobierz, plaintext

powinno być:

[HTML] pobierz, plaintext 
#inner {
padding-top:1px;
}
[HTML] pobierz, plaintext

@Zajec: nadal nie posiadasz informacji kiedy ten margines jest przekazywany rodzicowi?

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.