wyśrodkowanie

marimarek · Post autor: **marimarek** » ndz maja 27, 2007 7:27 pm

Nie wiem, czy w dobrym temacie to umieściłem, bo problem mam ze stylami. Pewnie dla Was banalny, otóż zrobiłem stronke na divach, bo musze, a zawsze robiłem na tabelach i teraz nie wiem jak całe główne okno wyśrodkować. Bo jak wyśrodkuje to dzieje mi się coś takiego, że wszytkie elmenty owszem są wyśrodkowane, ale jeden pod drugim, a niektóe mają być obok siebie. Siedze nad tym ładne pare godzin i nie umiem sobie z tym poradzić, proszę o szybką pomoc.

egzemplarz · Post autor: **egzemplarz** » ndz maja 27, 2007 8:39 pm

Jak podasz tu kod, to bardzo chętnie pomożemy

.

marimarek · Post autor: **marimarek** » ndz maja 27, 2007 9:10 pm

Tak wygląda kod:

Kod: Zaznacz cały

<HTML>
<HEAD>
<TITLE>lay3p</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
<STYLE TYPE="text/css">
<!--

#index-01 {
	position:absolute;
   margin: 0 auto;
	width:698px;
	height:190px;
	background-image: url('images/index_01.gif');
}


#index-02 {
	position:absolute;
	left:0px;
	top:190px;
	width:364px;
	height:35px;
	background-image: url('images/index_02.gif');
}

#index-03 {
	position:absolute;
	left:364px;
	top:190px;
	width:334px;
	height:8px;
	background-image: url('images/index_03.gif');
}

#index-04 {
	position:absolute;
	left:364px;
	top:198px;
	width:74px;
	height:18px;
	background-image: url('images/index_04.gif');
}

#index-05 {
	position:absolute;
	left:438px;
	top:198px;
	width:48px;
	height:18px;
	background-image: url('images/index_05.gif');
}

#index-06 {
	position:absolute;
	left:486px;
	top:198px;
	width:74px;
	height:18px;
	background-image: url('images/index_06.gif');
}

#index-07 {
	position:absolute;
	left:560px;
	top:198px;
	width:28px;
	height:18px;
	background-image: url('images/index_07.gif');
}

#index-08 {
	position:absolute;
	left:588px;
	top:198px;
	width:74px;
	height:18px;
	background-image: url('images/index_08.gif');
}

#index-09 {
	position:absolute;
	left:662px;
	top:198px;
	width:36px;
	height:18px;
	background-image: url('images/index_09.gif');
}

#index-10 {
	position:absolute;
	left:364px;
	top:216px;
	width:334px;
	height:9px;
	background-image: url('images/index_10.gif');
}

#index-11 {
	position:absolute;
	left:0px;
	top:225px;
	width:698px;
	height:12px;
	background-image: url('images/index_11.gif');
}

#index-12 {
	position:absolute;
	left:0px;
	top:237px;
	width:188px;
	height:447px;
	background-image: url('images/index_12.gif');
}

#index-13 {
	position:absolute;
	left:188px;
	top:237px;
	width:484px;
	height:447px;
	background-image: url('images/index_13.gif');
}

#index-14 {
	position:absolute;
	left:672px;
	top:237px;
	width:26px;
	height:447px;
	background-image: url('images/index_14.gif');
}

#index-15 {
	position:absolute;
	left:0px;
	top:684px;
	width:698px;
	height:41px;
	background-image: url('images/index_15.gif');
}

-->
</STYLE>
</HEAD>
<BODY STYLE="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

<DIV ID="index-01">
</DIV>
<DIV ID="index-02">
</DIV>
<DIV ID="index-03">
</DIV>
<DIV ID="index-04">
</DIV>
<DIV ID="index-05">
</DIV>
<DIV ID="index-06">
</DIV>
<DIV ID="index-07">
</DIV>
<DIV ID="index-08">
<?$date = date("G:i:s");
echo'<center><b>'.$date.'</b></center>'?>
</DIV>
<DIV ID="index-09">
</DIV>
<DIV ID="index-10">
</DIV>
<DIV ID="index-11">
</DIV>
<DIV ID="index-12">
</DIV>
<DIV ID="index-13">
</DIV>
<DIV ID="index-14">
</DIV>
<DIV ID="index-15">
</DIV>
</BODY>
</HTML>

I wszytko było by dobrze tylko, że ja chce, żeby wszytko było na środku, mogę odjąć od 1024 pikseli szerokość strony i podzielić na dwa i wtedy w każdym stylu przy left dodać to co mi wyjdzie, ale wtedy strona będzie działać dobrze tylko przy rodzielczości 1024 na coś tam. A ja chcę, aby działałą dobrze na każdej rozdz.

marimarek · Post autor: **marimarek** » pn maja 28, 2007 9:40 am

Zmieniłem trochę kod i na firefoxie wszytko jest oki, a tu po chwili radości patrze na IE i jest źle. Czy ktoś może mi szybko pomóc jak to zoptymalizować, żeby na IE też dobrze działało??
Teraz kod wygląda tak:

Kod: Zaznacz cały

<HTML>
<HEAD>
<TITLE>lay3p</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
<STYLE TYPE="text/css">
<!--

#index-01 {
	position:static;
   margin: 0 auto;
	width:698px;
	height:190px;
	background-image: url('images/index_01.gif');
}


#index-02 {
	position:relative;
	margin: 0 auto;
	left:-167px;
	width:364px;
	height:35px;
	background-image: url('images/index_02.gif');
}

#index-03 {
	position:relative;
	margin: -35 auto;
	left:182px;
	width:334px;
	height:8px;
	background-image: url('images/index_03.gif');
}

#index-04 {
	position:relative;
	margin: 35 auto;
	left:52px;
	width:74px;
	height:18px;
	background-image: url('images/index_04.gif');
}

#index-05 {
	position:relative;
	margin: -53 auto;
	left:113px;
	width:48px;
	height:18px;
	background-image: url('images/index_05.gif');
}

#index-06 {
	position:relative;
	margin: 35 auto;
	left:174px;
	width:74px;
	height:18px;
	background-image: url('images/index_06.gif');
}

#index-07 {
	position:relative;
	margin: -53 auto;
	left:225px;
	width:28px;
	height:18px;
	background-image: url('images/index_07.gif');
}

#index-08 {
	position:relative;
	margin: 35 auto;
	left:276px;
	width:74px;
	height:18px;
	background-image: url('images/index_08.gif');
}

#index-09 {
	position:relative;
	margin: -53 auto;
	left:331px;
	width:36px;
	height:18px;
	background-image: url('images/index_09.gif');
}

#index-10 {
	position:relative;
	margin: 53 auto;
	left:182px;
	width:334px;
	height:9px;
	background-image: url('images/index_10.gif');
}

#index-11 {
	position:relative;
	margin: -53 auto;
	width:698px;
	height:12px;
	background-image: url('images/index_11.gif');
	
}

#index-12 {
	position:relative;
	margin: 53 auto;
	left:-255;
	width:188px;
	height:447px;
	background-image: url('images/index_12.gif');
	
}

#index-13 {
	position:relative;
	margin: -500 auto;
	left:81;
	width:484px;
	height:447px;
	background-image: url('images/index_13.gif');
	
}

#index-14 {
	position:relative;
	margin: 53 auto;
	left: 336;
	width:26px;
	height:447px;
	background-image: url('images/index_14.gif');
}

#index-15 {
	position:relative;
	margin: -53 auto;
	width:698px;
	height:41px;
	background-image: url('images/index_15.gif');
}

-->
</STYLE>
</HEAD>
<BODY STYLE="background-color:#FFFFFF; margin-top: 20px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; text-align:center;">

<DIV ID="index-01">
</DIV>
<DIV ID="index-02">
</DIV>
<DIV ID="index-03">
</DIV>
<DIV ID="index-04">
</DIV>
<DIV ID="index-05">
</DIV>
<DIV ID="index-06">
</DIV>
<DIV ID="index-07">
</DIV>
<DIV ID="index-08">
<?$date = date("G:i:s");
echo'<center><b>'.$date.'</b></center>'?>
</DIV>
<DIV ID="index-09">
</DIV>
<DIV ID="index-10">
</DIV>
<DIV ID="index-11">
</DIV>
<DIV ID="index-12">
</DIV>
<DIV ID="index-13">
</DIV>
<DIV ID="index-14">
</DIV>
<DIV ID="index-15">
</DIV>
</BODY>
</HTML>

marimarek · Post autor: **marimarek** » pn maja 28, 2007 9:55 pm

Nikt nie potrafi mi pomóc, czy potrzebne są Wam jeszcze jakieś informacje.
Naprawdę czas mnie goni, więc jak ktoś by szybko dał radę mi pomóc to z góry bardzo dziękuję.

Voltron · Post autor: **Voltron** » pt cze 15, 2007 10:12 am

Jezeli uzywasz polecenia "psition" to w fire foxie, ie, i operze elementy opatrzone ta komeda beda sie rozjezdzaly. Aby niektore divy byly obok siebie trzeba uzyc prostego polecenia "float" dla diva majacego byc po lewej stronie trzeba zastosowac: float: left; a dla diva majacego byc po prawej stronie float: right; analogicznie dla diva znajdujacego sie po srodku float: center; dla przykladu umieszcze kod:

HTML -
____________________
[xml]<center>
<div id="1">
a
</div>
<div id="2">
b
</div>
<div id="3">
c
</div>
<div id="4">
d
</div>
<div id="5">
e
</div>
<div id="6">
f
</div>
<div id="7">
g
</div>

</center>[/xml]
____________________

CSS -

Kod: Zaznacz cały

#1
{
    width: 30px;
    height: 30px;
    margin-top: 50px;
}
#2
{
    width: 30px;
    height: 30px;
    margin-top: 10px;
    float: left;
}
#3
{
    width: 30px;
    height: 30px;
    margin-top: 10px;
    float: right;
}
#4
{
    width: 30px;
    height: 30px;
    margin-top: 10px;
    float: left;
}
#5
{
    width: 30px;
    height: 30px;
    margin-top: 10px;
    float: center;
}
#6
{
    width: 30px;
    height: 30px;
    margin-top: 10px;
    float: right;
}
#7
{
    width: 30px;
    height: 30px;
    margin-top: 10px;
}

______________________

- pierwszy div jest ustawiony domyslnie od lewej tylko jak widac z gornym marginesem.
- drugi div jest ustawiony po lewej stronie z marginesem gornym - pod divem 1
- trzeci div jest umieszczony rownolegle obok diva nr.2 po stronie prawej.
- czwarty div jest pod spodem diva nr.3 po lewj stronie.
- piaty div jest miedzy divem 4 a 6 rownolegle.
- szosty div jest ustawiony rownolegle z divem 4 i 5 lecz po prawej stronie
- siodmy div zmow jest pod spodem divow 4,5,6 ....

pozycje divow ustawiac najlepiej marginesami - gorny, dolny, prawy, lewy. Nie stosowac polecenia POSITION bo divy w przegladarkach totalnie sie rozjada trzeba wtedy pisac osobny kod dla osobnych przegladarek co jest czasochlonne. TYM BARDZIEJ NIE STOSOWAC POSITION: ABSOLUTE; sam tak kiedys robilem strone a potem musialem zmieniac caly kod.. ustawiac margiesami jezeli juz...
Mam nadzieje ze cos pomoglem...
pozdrawiam:
Voltron...

Marek_bf · Post autor: **Marek_bf** » pt cze 15, 2007 10:53 am

Voltron używaj BBCode do wstawiania kodu. (poprawione)
Od kiedy float posiada wartość center, bo nijak w specyfikacji nie mogę tego odkryć?

wyśrodkowanie

wyśrodkowanie

Re: wyśrodkowanie

Re: wyśrodkowanie

Re: wyśrodkowanie

Re: wyśrodkowanie

Re: wyśrodkowanie

Re: wyśrodkowanie