Forum webmasterów
http://webinside.pl/forum/

Elementy na stronie - przemieszczające się elementy?
http://webinside.pl/forum/viewtopic.php?f=19&t=15525
Strona 1 z 1

Autor:  Arturze [ N lip 20, 2008 2:44 pm ]
Tytuł:  Elementy na stronie - przemieszczające się elementy?

Witam! Mam dość nietypowy problem, ale tak mnie to "męczy", że muszę to rozgryść, dlatego proszę o pomoc.

Mój problem polega na tym, że elementy na stronce poruszają się wraz ze zmianą rozmiaru okna przeglądarki.

Po zastosowaniu "margin: 0 auto;" wszystko jest ładnie wyśrodkowane, ale gdy zmniejszę okno przeglądarki elementy również się przesuwają. Wygląda to tak:

http://img230.imageshack.us/my.php?image=problemcj1.jpg

Na obrazku:
1. Wszystko jest w porządku.
2. Po zmniejszeniu o połowę elementy przemieściły się. Jak widzimy menu zostało na swoim miejscu.
3. Po kolejnym zmniejszeniu już wszystko się poprzestawiało oprócz menu.

Kod:
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl" dir="ltr">
   <head>
   
      <meta http-equiv="content-type" content="text/html;charset=ISO-8859-2" />
      <meta name="description" content="opis" />
      <meta name="keywords" content="slowa,kluczowe" />
      <meta name="language" content="pl" />

      <title>Nazwa</title>             
         <style type="text/css">

html, body
{
background: #E7D9D8 url(tlo.jpg);
background-repeat: no-repeat;
background-position:top center;
margin:0 auto;
padding: 0;
text-align: center;
}


div#dojazd
  {
  background-color:Blue;
  width:763px;
  height:293px;
  position:relative;
    top:430px;
     margin:0 auto;
  }

div#mapa
    {
     background-color:Yellow;
     position:relative;
     top:400px;
     margin:0 auto;
    width:350px;
     height:340px;
    }
   
    div#menu
{
position: relative;
top:-505px;
margin: 0 auto;
display: block;
width:1000px;
height:auto;
  }

a
{
white-space: nowrap;
color:White;                                                                                                                                 
text-decoration:none;
padding:25px;
font-size: 18pt;
}

    div#adres
   {
   border-bottom:solid 1px navy;
   border-top:solid 1px navy;
   position:relative;
   top:-460px;
    width:350px;
    height: auto;
     margin: 0 auto;
      }
   

   
   
   div#www
{
margin:0 auto;
padding:0;
text-align:center;
position:relative;
overflow: auto;
height:1250px;
overflow: auto;
display: block;
}


</style>


</head>
  <body>

<div id="www">

<div id="mapa"></div>
<div id="dojazd"></div>

<div id="menu">
<a href="">Menu I</a>
<a href="">Menu II</a>
<a href="">Menu III</a>
<a href="">Menu IV</a>
</div>

<div id="adres">
<p>tekstekstteksttekstteksttekstteksttekstteksttekstteksttekstt<br />eksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttek<br />sttekstteksttekstteksttekstteksttekstteksttekstt<br />eksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttek</p>
</div>


</div>

</body>
</html>


Proszę o pomoc, pozdrawiam.

Autor:  gorylek [ N lip 20, 2008 4:28 pm ]
Tytuł:  Re: Elementy na stronie - przemieszczające się elementy?

Nie używaj relatywnego pozycjonowania elementów w na stronie. Właśnie to powoduje błąd. Poczytaj troszkę o pozycjonowaniu relatywnym (relative) i absolutnym (absolute) w kursie lub manualu CSS.

Pozdrawiam

Strona 1 z 1 Strefa czasowa: UTC + 1
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/
Not able to open ./cache/data_global.php