Busiga lager.. — webForum

aDayMedlem sedan juli 200391 inlägg

Trådstart15 sep. 2004 13:33#1

Jag håller på och exprimenterar lite med <div> istället för tabeller. Men jag har stött på ett litet problem..

Jag har två nästan identiska lager, men när man ändrar fönstrets storlek så flyter det ena medans det andra sitter kvar "där det ska".

#menue {
    position: relative;
              left:3px;
              top:15px;
    height: 60%;
    width: 130px;
    background-image: url(img/bg2.gif);
    padding: 7px;
}
#content{
    position: relative;
              left:150px;
              top:-500px;
    height: 75%;
    width: 440px;
    background-image: url(img/bg2.gif);
    padding: 7px;
}

det än "content" som flyter upp..
undrar också om det är korrekt att ange negativt tal, alltså t.ex. skriva -500?

jarvkloMedlem sedan juli 20013 378 inlägg

15 sep. 2004 13:47#2

Hmm...

position:relative positionerar alltså mot var det senaste som "ritades ut" hamnade på skärmen...
Jag antar att din kod ser ut såhär ungefär:

<div id="menue">Menue</div>
<div id="content">Content</div>

dvs att dessa ligger direkt efter varandra i koden ?
Är det så beror flytningen av #content på att du alltid "flyttar upp" den 500px relativt nederkanten på #menue, men att höjden på #menue är beroende av webbläsarens (eller omslutande div.s) höjd (du kör ju med height:60% på #menue)...

Så "höjdflytningen" beror på att du alltid flyttar content 500px upp, men att "referenspunkten" rör sig beroende på hur hög #menue blir (iom att den sitter i nederkant av #menue)...

-500px är OK i detta fall (eftersom du kör relativ positionering) - definitionen på "length" (som är värdetypen för height:) är: http://www.w3.org/TR/CSS21/syndata.html#value-def-length

Lösning då - Sätt antingen höjden på #menue till 500px eller experimentera med absolut poitionering istället (för då har de bägge div:arna samma referenspunkt - om din kod liknar den jag har i exemplet ovan )