Pozycjonowanie - górny margines

Wszystko co dotyczy tworzenia i optymalizacji stron internetowych oraz programowania
PKP

Użytkownik
Posty: 78
Rejestracja: 13 gru 2009, 13:55

Pozycjonowanie - górny margines

Post18 lis 2012, 13:32

Tworzę stronę internetową i mam problem z pozycjonowaniem. Zamysł był taki, by u samej góry był ciemny nagłówek o wysokości 50 px, w którym byłoby umieszczone menu. Poniżej nagłówka zaczyna się sekcja srodek, w której na samej górze ma być umieszczona grafika o rozmiarach 1000 x 200 px. W tym celu zagnieździłem w srodku diva srodek_naglowek, któremu w CSS-ie nadałem wymiar 1000 x 200 px. Wyświetlany obrazek również jest przycięty do tego rozmiaru. Stronę tworzę w KEDzie i w podglądzie jest wszystko ok, jednak w FF 16.0.2 grafika jest przesunięta w dół. Zamieszczam linki i fragment kodu:

Kod: Zaznacz cały

<div id="srodek">
               <div id="srodek_naglowek">
                        <img src="grafika/scr1.jpg" />
               </div>               
</div>


Kod: Zaznacz cały

*
{
   margin: 0;
   padding: 0;
}

body
{
   color: #ffffff;
   font-family: Verdana, Arial;
   height: 1200px;
   margin: 0;
}

/* Sekcja odpowiedzialna za srodek */
#srodek
{
   background-color: #000000;
   background-image: url(grafika/tlo.png);
   height: 1110px;
   background-size: contain;
}

#srodek_naglowek
{
   margin: 0px auto;
   width: 1000px;
   /* background-color: #000000; */
   height: 200px;
}


Podgląd obrazka w KEDzie: Dostępne tylko dla zarejestrowanych użytkowników
Podgląd obrazka w FF: Dostępne tylko dla zarejestrowanych użytkowników
Podgląd samego diva (bez znacznika <img... />) w FF: Dostępne tylko dla zarejestrowanych użytkowników

Gdy zamiast obrazka wpiszę tekst, to okazuje się, że zaczyna się on gdzieś w środku Diva zamiast na jego lewym skraju.

PS. Czy można na to forum uploadować grafikę, by nie korzystać z serwera zewnętrznego?

Problem rozwiązany. Powodem tego zajścia było menu, które miało parametr:

Kod: Zaznacz cały

#menu_naglowek
{
   background-color: #3b3b3b;
   float: left;
   margin: 20px auto;
}

Danie margin: auto; usunęło problem, jednak menu nie jest umieszczone symetrycznie w pionie. Jest blisko górnej krawędzi. Ciężko wyczuć ile mogę sobie manipulować tym menu góra-dół, by na każdej przeglądarce wyświetlało się to dobrze, tzn. nie wchodziło na obrazek...

Ciekawe jest to, że napis nadal jest po środku zamiast po boku. Nadal coś jest źle.

Awatar użytkownika
Lena

Globalny Moderator
Posty: 4554
Rejestracja: 10 lut 2009, 19:42
Lokalizacja: Sz-n

Pozycjonowanie - górny margines

Post18 lis 2012, 18:21

różnica polega na różnej interpretacji CSS w IE i FF i innych przeglądarkach.

Możesz napisać CSS pod IE jako oddzielny styl

Kod: Zaznacz cały

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->


a dla pozostałych umieścić w innym pliku styl

Kod: Zaznacz cały

<!--[if !IE]><!-->
   <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->


Tu przedstawiono jeszcze inne przykłady:

Kod: Zaznacz cały

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Awatar użytkownika
rokko

Administrator
Posty: 4082
Rejestracja: 23 lis 2008, 22:14
Lokalizacja: Myszków
Kontaktowanie:

Pozycjonowanie - górny margines

Post22 lis 2012, 19:22

Brakuje u Ciebie jeszcze jednego kontenera diva, żeby można to było dobrze ulokować. Nagłówek dać nie w htmlu tylko w css jako background-image. Odstępy od topu możesz sobie zdefiniować poprzez margin-top:XXpx. Menu powinno być stworzone na listach, formatowanie via css. Do "układania" elementów zastosować float, jeśli strona ma stałą szerokość ustawić na sztywno bloki. Tak czy siak, aby dokładniej doradzić, trzeba mieć full kod i wszystko podpięte na lokalu, wtedy można podziałać.
Ps. Ked wykorzystuje silnik IE do renderowania, zainstaluj XAMPPa i testuj stronkę na nim pod FF. Aha i nie zapomnij zobaczyć jak stronka wygląda na Chrome, Safari etc.
Poradniki informatyczne »» Dostępne tylko dla zarejestrowanych użytkowników
Na stronie znajdziesz porady komputerowe a także informacje dotyczące technik promowania serwisów WWW, ciekawe narzędzia dla marketingowców. Zapraszam!

Promocja sklepów, Optymalizacja stron, Pozycjonowanie w Google »» kontakt<małpa>techformator.pl
W sprawach IT nie pomagam na PW



  • Reklama

Wróć do „Webmastering i programowanie”



Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 8 gości