[css] problem z rozmieszczeniem

[maciask01]

Witam

Otóż zrobiłem ostatnio stronę u siebie w domu, umieściłem go na serwer i problem polega na tym, że na panoramicznym monitorze wszystko się rozjeżdża.

Pomyślałem, że przyczyną może być to że w css podałem jednostki w 'px', lecz gdy zmieniłem na '%' problem nie zniknął

Wie ktoś czemu się tak dzieje?

link do strony: rogalewicz.home.pl
kod aktualnie wygląda tak:

#bg {

background-image: url("images/bg.jpg");
background-repeat: repeat-x;
background-color: #CECAC7;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-decoration:none;
}

#logo {
position:absolute;
top: 10px;
left: 32%;
}

#pskgr {
position:absolute;
top: 300px;
left: 32%;
}

#uslugi {
position:absolute;
font-family: arial;
font-size: 20px;
top: 305px;
left: 36%;
color: black;
}

#mix{
position:absolute;
font-family: arial;
font-size: 20px;
top: 305px;
left: 90%;
color: black;
}


#ofirmie {
position:absolute;
font-family: arial;
font-size: 20px;
top: 305px;
left: 43%;
color: black;
}

#mixokret {
text-decoration:none;
position:absolute;
font-family: arial;
font-size: 20px;
top: 305px;
left: 51%;
color: black;

}

#kontakt {
position:absolute;
font-family: arial;
font-size: 20px;
top: 305px;
left:60%;
color: black;
}


#elipsa {
position:absolute;
top: 350px;
left: 15%;
}

#mix {
position:absolute;
top: 600px;
left: 40%;
}


#a {
position:absolute;
font-family: arial;
text-align: justify;
font-size: 20px;
top: 375px;
left: 35%;
color: black;
float:left;
width: 33%;
}

#b {
position:absolute;
font-family: arial;
text-align: right;
font-size: 20px;
top: 375px;
left: 35%;
color: black;
float:left;
width: 33%;
}

z góry wielkie dzięki za pomoc, pozdrawiam.

[Kartofelek]

Hej. Cóż to za dziwna metoda tworzenia na divach?
Skoro twoja strona ma stałą szerokość, nie lepiej skorzystać z:
{width:XXXpx; margin:0 auto;}
a nie left:32% ???

A najlepiej obejmij wszystko jakims divem
z {width:XXXpx; margin:0 auto; position:relative} - to ci wyrowna strone do srodka. Pozostałe elementy takie jak np elipsa pozycjonuj do niego absoluteni

[kmd]

Określ szerokość (i wysokość) elementów na stronie przez width (i height) jak wspomniał Kartofelek.

[Pedro84]

O cholera. Kto Cię uczył pozycjonowania w CSS? Wszystko pozycjonowane absolutnie? Nie dziw się, że się rozwala wszystko.

[maciask01]

Ok. Dzięki za rade. Poprawiłem i wygląda to tak (na serwer nie wrzucałem jeszcze):

#bg {

background-image: url("images/bg.jpg");
background-repeat: repeat-x;
background-color: white;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-decoration: none;

}



#elipsa {
position:absolute;
margin-left: 10%;
margin-top: 25%;

}
#a {

font-family: arial;
margin-top: 20px;
text-align: justify;
font-size: 20px;
color: black;
float: right;
width: 80%;
}

#b {

font-family: arial;
text-align: right;
font-size: 20px;
color: black;
float:left;
width: 33%;
}

#szkielet {
width:580px;
margin:0 auto;
position:relative;
}

teraz mam jeszcze jeden problem. Czy można zrobić na relatywnych nachodzące na siebie divy ??
chodzi mi o text w menu
http://wgrajfoto.pl/pokaz/img0410/beznazwy258a.jpg
bo jak wezme na absolutne to znowu mi sie rozjedzie
z góry dzięki, pozdrawiam

[Pedro84]

Można.
Przykład:

Kod:

position:absolute; top:10px;

[maciask01]

Można.
Przykład:

Kod:

position:absolute; top:10px;

chowa sie za bitmape

[aleksanderek]

[Pedro84]

Można.
Przykład:

Kod:

position:absolute; top:10px;

chowa sie za bitmape

Jak Kolega powyżej Ci radził, z-index. A w ogóle to poczytaj.

Poza tym, jeśli element nie jest pozycjonowany absolutnie, możesz tak samo pozycjonować elementy ułożone relatywnie
[css]
position:relative;
top:10px;
[/css]