Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Problem z marginesem górnym
Jarod
post
Post #1





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----

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


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 8)
acztery
post
Post #2





Grupa: Zarejestrowani
Postów: 945
Pomógł: 7
Dołączył: 15.03.2005
Skąd: katowice

Ostrzeżenie: (0%)
-----

nie wiem ale jezeli gorny to coś z top moze

padding-top:10px albo margin-top: 10px
Go to the top of the page
+Quote Post
Jarod
post
Post #3





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----

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 :/


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
revyag
post
Post #4





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

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 
  1. <div id="inner">
  2.             <div class="nav">
  3.                 Tu występuje problem. Działa tylko margines dolny i boczne a górny wszystko przesuwa !
  4.             </div>
  5.         </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;


--------------------
-------------

------
Go to the top of the page
+Quote Post
Jarod
post
Post #5





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----

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


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
Zajec
post
Post #6





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Jarod
post
Post #7





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----

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 
  1. <div id="inner">
  2.             <div class="nav">
  3.                 Tu występuje problem. Działa tylko margines dolny i boczne a górny wszystko przesuwa !
  4.             </div>
  5.         </div>
[HTML] pobierz, plaintext

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


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
revyag
post
Post #8





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

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


--------------------
-------------

------
Go to the top of the page
+Quote Post
Jarod
post
Post #9





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

Ostrzeżenie: (0%)
-----

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 
  1. #inner {
  2.    width:100%;
  3.    padding-top:50px;
  4. }
[HTML] pobierz, plaintext

powinno być:
[HTML] pobierz, plaintext 
  1. #inner {
  2. padding-top:1px;
  3. }
[HTML] pobierz, plaintext


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

Ten post edytował Jarod 31.05.2007, 16:18:48


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 14:32
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn