Centrowanie strony

Dla specjalistów Webmastering
#1

Witam.

Mam taki mały problem, który jednak skutecznie utrudnia mi dalszą prace nad stroną.

Na początku stworzyłem stronę z kodem wygenerowanym przez photoshopa, wszystko ładnie, pięknie ale gdy doszło do ,przesunięcia’’ całości na środek strony zaczęły się kombinacje w kodzie, które nie za bardzo przypadły mi do gustu. Wkrótce otrzymałem link do pewnego tutka (dzięki diegoo) (http://www.webinside.pl/webstandards/artykuly/205) po którym kod strony miał być łatwy do obróbki itp itd. Okey, przeczytałem go pierwszy raz, potem drugi, trzeci i tak dalej … w końcu zrezygnowałem. Tutek (jak dla mnie) jest napisany zbyt chaotycznie i raczej dla ludzi którzy lizneli z 15% css ( u mnie to +/- 5%)

I tu moja prośba, czy ktoś mógłby mi wytłumaczyć ten fragment :

div#top h1 {

font: italic 150%/80px Verdana, Arial, sans-serif;

color: #FFF;

margin: 0 40px;

}

div#tresc {

width: 400px;

float: right;

margin: 0;

}

div#tresc * {

margin: 10px 40px;

}

div#tresc p, div#menu p {

font: 80%/1.4 Verdana, Arial, sans-serif;

margin: 10px 40px;

}

Czy to jest coś związane z dziedziczeniem?

I jeszcze jedno autor poradnika budował swoją stronę z tylko jednym plikiem graficznym, reszta była ‘‘kolorami zamkniętymi w divach’’ co trzeba by było zrobić jakbym chciał wszędzie wpakować tam pliki graficzne?

Owszem, próbowałem to zrobić ale wyszło coś ala ‘kod z Ps’a’.

#2

Tutaj chodzi o to, że wszystkie akapity jakie są potomkami elementów tresc i menu będą miały określony krój czcionki. Tutaj Verdanę, ewentualnie Arial, ewentualnie inną bezszeryfową, o rozmiarze 80%.

div#tresc * oznacza wszystkie elementy jakie są potomkami elementu o identyfikatorze tresc.

Potomek to dziecko, wnuk, prawnuk i tak dalej, do tego się będzie zaliczać każdy element i kazdy podelement każdego elementu od elementu głównego.

Dziedziczenie to trochę inna rzecz, w dziedziczeniu chodzi o to, że dzieci przejmują właściwości po rodzicach.

#3
#4

O ile dobrze zrozumiałem…daj body szerokość oraz position: relative; bez parametrów (w stylach). Np:

body { width: 1000px; position: relative; }

Obecnie elementy są pozycjonowane względem okna przeglądarki i jak tabele wyśrodkowałeś to się sypnęło. Podanie do body to co napisałem spowoduje że elementy będą się pozycjonować względem body a nie okna przeglądarki.

#5

Zrobilem tak jak powiedziales i dalej to samo :

BODY{ 

background: #FFFFFF; 

text-align: center;

margin: 0;

padding: 0;

width: 668px; 

position: relative;

}

http://img510.imageshack.us/my.php?imag … tuunu1.png

#6

Dlaczego usunąłeś ten kod? przecież on jest potrzebny.

Wrzuć stronę na jakiś serwer i podaj linka.

#7

Podobny miałem roblem jak Twój,

w stylach dodaj nowego diva

#calosc.

potem, w body

lelum polelum

Zmien nazwy oczywiscie, i pamietaj! 100+800+100=1000

#8

@_puma_

Znajde jakiś serw i ci wyśle na pw.

@kacper88

Próbowalem tak już wcześniej - bez skutku … jedyny efekt to przesunięcie sie loga na środek.

Ps: O co ci chodzi z tym 100+800+100? -.^

#9

Model formatowania elementów:

to jest szerokość (width)

czyli:

marginesL+szerokość#Tabele_01+marginesP=szerokość#calosc

Musisz troche pokombinować z tym kodem. Czy robiłeś odcięcia w PS zgodnie ze wskazówkami?, tam jest tak łatwo wyjaśnione, polecam http://forum.dobreprogramy.pl/viewtopic.php?t=94955&postdays=0&postorder=asc&start=15

#10

Hmm pociąlem troche innaczej dalem by ID…

Ale przecież np moja strona (cala grafika z menu,tekstem,przyciskami itp) ma tam chyba 668 a reszta to przecież jest background: #FFFFFF… zawsze myślalem, że grafikę ze stroną sie tnie, pozycjonuje żeby byla na środku a te ,biale po bokach’’ wypelnia background.

#11

Polecam tą stronę koniecznie na pewno przyda Ci sie, po przeczytaniu zrozumiesz o co mi chodziło http://www.gajdaw.pl/html/gwz.htm

#12

Zmień na to :

* { margin: 0; padding: 0; }

BODY{ 

background: #FFFFFF; 

text-align: center;

margin: 0 auto;

width: 668px; 

position: relative;

}


#index-01 {

	position:absolute;

	left:0px;

	top:0px;

	width:668px;

	height:165px;

}

Pierwsza linijka kodu to zerowanie wszystkich margin/padding domyślnych przeglądarek (każda ma trochę inne, dlatego zaleca się je zerować).

Margin auto nic nie da jeśli element jest pozycjonowany.

Wywal tą tabelkę, jest zbyteczna do centrowania strony.

Na koniec rady :

  1. Dopisz doctype do kodu, bez tego przeglądarki będą wariować gdyż nie określiłeś jaką odmianą html/xhtml napisałeś stronę.

  2. Używaj kodowania iso a nie windows, dlatego że zamiast liter będą ‘krzaczki’ jeśli ktoś z oglądających nie używa windowsa.

#13

Zapoznaj się z tą stroną i zmień tytuł na konkretny, używając

funkcji icon_edit.gif