Posisjonering Vha CSS

[Mbards]

Jeg har et Hoved div, som er sentrert på siden.

 

Jeg har noen bilder som jeg gjerne vil posisjonere på sine eksakte plasser inne i hoved diven.

Har brukt float left, og float right, og det fungerer jo hvis det skal være helt inne ved sidene, men hvis jeg skal posisjonere et bilde f.eks midt i skjermbildet, hva gjør jeg da.

 

Har prøvd med position absolute, men da blir posisjonen i forhold til Skjermbildet ( og ikke i forhold til hoved-divet)

Prøvde også position-relative med dårlig resultat.

Skulle gjerne hatt litt råd her.

 

Hoved-divet har fast bredde på 1000px, skjermen min har bredde 1920 px, men jeg vil jo gjerne at dette skal vises likt, uansett, sålenge den skjermen det vises på er mer enn 1000px bred.

 

Takknemlig for hjelp.

[Richard87]

bruk position: absolute, og så bruker du en eller flere av top, bottom, left og right får og posisjonere bilde, har brukt det selv på hjemmelaget border, så vet at det virker;)

 

f.eks border_bottom_center:

   .border_bottom_center {
       position: absolute;
       background-image: url(bottom-center.png);
       
       height: 39px;
       bottom: 0px;
       left: 5px;
       right: 15px;

[eigan]

Hva med

margin: 0 auto;

[Ståle]

Hvis du bruker absolutt posisjonering vil disse elementene bli posisjonert iforhold til skjermen og ikke parent elementet.

[Krankemot]

Hvis elementene du skal flytte på er inni en hoved div, bør du vel bruke

 

position: relative;

 

Istedenfor absolute? Rett meg hvis jeg tar feil, for da har jeg gjordt feil

[Runar]

Prøv å sett position: relative på hovedelementet, og position: absolute sammen med top/left/bottom/right på bildene.

[Mbards]

Prøv å sett position: relative på hovedelementet, og position: absolute sammen med top/left/bottom/right på bildene.

8262208[/snapback]

 

Uff nei det funker ikke uansett, blir bare rot av dette, får sove litt, og prøve på nytt i morgen. Takker så mye for tilbakemelding.

[Mbards]

Hvis elementene du skal flytte på er inni en hoved div, bør du vel bruke

 

position: relative;

 

Istedenfor absolute?  Rett meg hvis jeg tar feil, for da har jeg gjordt feil

8261609[/snapback]

 

Hei og takk for tilbakemelding, jeg klarer ikke å få dette til å funke, får sove litt og prøve igjen i morgen. Takker så mye for tilbakemelding.

[Runar]

Hvordan kan du si at det ikke fungerer, når du ikke en gang har prøvd?

 

Jeg bruker den metoden selv, og den fungerer utmerket.

[jaco]

Skal vi se her, om du har en wrapper som er midtstilt med fast bredde på feks 600px, også skal du ha en div i wrapper som er feks 200, også i den diven skal du kjøre et bilde midtstilt.

 

Om jeg er inne på noe helt annet må du si ifra, men om du skal fikse det jeg er inne på gjør du slik:

 

<div style="width: 200px; height:auto; margin:0px auto;">
url til elementet som skal midtstilles.
</div>

Endret 28. mars 2007 av jaco

[JBlack]

position: absolute; posisjonerer i forhold til siste element som ikke har position: static;

 

Så følg gjerne tipset til vedkommende som foreslo å sette position: relative; i hovedelementet.

 

Ellers så er text-align: center; en mulighet.

En siste mulighet er å floate og benytte seg av margin for posisjonering.

[RulleRimfrost]

Du har tre div's :

#left{
   width:145px;
   float:left
}
#mid{
   margin:0 150px
}
#right{
   width:145;
   float:right
}

Side-divene vil da "flyte" opp i #mid's marginer. Bare pass på å sett globale marginer til 0 i body.

[Runar]

Hva er det du snakker om, RulleRimfrost? Koden din vil da bare legge left ved siden av right.

[RulleRimfrost]

Det er korrekt Runar. Langt til venstre for #right. I mellom disse får #mid plass siden marginene er bredere enn left og right

 

I html-oppsettet tror jeg det blir noe slikt :

<div id="left">

<div id="right">

<div id="mid">

 

... og nei, det scorer ikke høyt på accessability.

Endret 29. mars 2007 av RulleRimfrost