Lage et block-element i forhold til skjerm-resize

[KFKF]

Det har blitt mange spørsmål i det siste, men dere skal vite at jeg har googlet som en villmann de siste timene. Jeg setter stor pris på all hjelp.

Med ferdigkodet hjemmeside, var det først i går jeg ble klar over skjerm-oppløsningsproblematikken. Siden var kodet til 1440x900 og det falt meg ikke inn at det kunne være et problem. Litt av et sjokk! Nå har jeg hvertfall begynt å gjøre om på parent-divene, benytte meg av prosenter i stedet for pixler i forhold til posisjonering. Jeg har to spørsmål her:

#1 - Hvordan, jeg antar at det er mulig, forteller jeg elementene mine når de skal stoppe å bevege seg. Dette er hovedsaklig et problem om jeg hiver i browservinduet, jeg kan trekke så mye at alle elementene havner ovenpå hverandre. Her skulle jeg likt å sagt stopp før innholds-diven beveger seg over navigasjonsbaren.

#2 - Jeg skulle likt å gitt bildene mine margins i prosent. De er nå i pixler, men om jeg ønsker at tumbnailgalleriet mitt skal fylle mye av skjermens bredde, uansett oppløsning må tenkte jeg at prosent-marginer ville være løsningen. Om jeg gjør følgende:

#galleri img{
width: 100px;
margin-left: 15%;
margin-right: 15%;
}

Får jeg ingen marginer overhode.

*Edit

Om det er behov for det kan jeg gjøre siden midlertidig aktiv.

 

[Thomas Pedersen]

1. Bruk av min-width og max-width forhindrer dette.

2. Det er ikke noen god ide og blande prosenter og pixler når det kommer til width, padding og margins.

setter du bilde margins i prosent, blir det i prosent av den div'en bildet er inni. I ditt tilfelle 15% av bredden til #galleri. Dette forutsetter at #galleri har en bredde.

Det kan gjerne være bedre å sette bredden til bildene i prosent.
f.eks.

#galleri img{width:20%;} for dermed å få plass til 5 bilder på hver linje som skaleres ved endring av størrelse.

Men trenger du litt plass rundt hvert bilde, kan det være lurt å putte hvert bilde i en egen div som har en prosent vidde og display:inline-block; også ha bildet inni den, med evt margin/padding for å få litt plass rundt.

eksempel:

<div id="galleri">
<div class="bilde">
<img src="">
</div>
<div class="bilde">
<img src="">
</div>
<div class="bilde">
<img src="">
</div>
</div>

#galleri .bilde{width:20%; display:inline-block;}
#galleri .bilde img{margin:10px; width:100px;}

 

[KFKF]

Foreløpig består galleriet mitt av tre div-er, med seks bilder i hver. Altså 18 bilder fordelt på tre vertikale rekker. Bildene mine har nemlig ulik høyde, men jeg ønsker at de aligner til en topplinje. Jeg støter på problemer når de høye tumbnailsa "dytter" bildene nedenfor, om du henger med...

Tilbake til min-width. Jeg opplever fortsatt at #galleri velter over navbaren på venstre side om jeg resizer browservinduet. Det jeg ønsker å oppnå er rett og slett at #galleri stopper å bevege seg rett før det treffer navbaren.

#galleri {
min-width: 800px;
height: 600px;
position: absolute;
left: 25%;
top:99px;
z-index: 2;
}

Takk for svar, nextri

 

[KFKF]

Løste problemet med å sette opp en parent og tilegne den min- og max-width som jeg så lot innholdet forholde seg til.