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?
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
revyag
post
Post #2





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

Posty w temacie
- J4r0d   Problem z marginesem górnym   15.03.2006, 01:04:23
- - acztery   nie wiem ale jezeli gorny to coś z top moze paddi...   15.03.2006, 01:49:39
- - J4r0d   Cytat(acztery @ 2006-03-15 00:49:39)nie wiem ...   15.03.2006, 09:59:00
- - revyag   Robisz tak: - dodajesz dodatkową warstwę - dajes...   15.03.2006, 10:05:43
- - J4r0d   Sprawdze i dam znać czy zadziałało. Wiesz dlaczego...   15.03.2006, 11:42:25
- - Zajec   Cytat(J4r0d @ 2006-03-15 11:42:25)Sprawdze i ...   15.03.2006, 20:07:33
- - J4r0d   Cytat(revyag @ 2006-03-15 09:05:43)Robisz tak...   15.03.2006, 22:28:32
- - revyag   Na pewno wstawiłeś to tak jak mówiłem ? screen z f...   16.03.2006, 10:02:22
- - J4r0d   Cytat(revyag @ 2006-03-16 09:02:22)Na pewno w...   31.05.2007, 16:18:09

« Następny starszy · CSS · Następny nowszy »
 

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

 

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

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

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