CSS-plassering av et bilde med perfekt presisjon!

[Rupal]

Har jo mast litt angående CSS i en annen tråd tidligere her.

Fikset div-tagger brukbart til slutt.

 

Denne gangen er problemstillingen hvordan man plasserer et bilde med pikselpresisjon.

Jeg vil ha et bilde plassert et sted i forhold til siden. Den skal ikke bevege seg når noen gjør nettleservinduet mindre eller større.Den skal stå bom fast!

 

Prøvde meg med relative og absolute, men det virker ikke helt som det skal. Er det noen som kan vise med kode(dersom det ikke er for mye) hvordan man kan få til dette?

[834HF42F242]

Noe som dette? Vil ikke anbefale deg å gjøre det uansett. Så lenge elementet bildet er innenfor eller utenfor sitter fast mot venstre topp-hjørne, flytter det seg ikke.

 

<img src="./bilde.png" class="posisjon-bilde" alt="bilde">

<style>
.posisjon-bilde {
   position: absolute;
   margin: 0px 0px 0px 0px;
}
</style>

Bytt ut 0px med ønsket verdi. Rekkefølge: Venstre, Topp, Høyre, Bunn

Endret 23. juni 2006 av neitakk

[BeFs]

position: absolute;
left: 151px;
top: 211px;

 

Absolute bestemmer om diven skal være på absolut samme plassen.

Left bestemmer hvor mange pixler fra venstre, og top bestemmer hvor mange pixler fra toppen.

NB! Ikke begynn å rot med right og bottom, bruk bare left og top.

[834HF42F242]

I mitt tilfelle var det selvsagt meningen at right og bottom skulle stå som 0

 

Det går også an å skrive det slik:

 

position: absolute 30px 30px 0px 0px;

[Rupal]

I mitt tilfelle var det selvsagt meningen at right og bottom skulle stå som 0

 

Det går også an å skrive det slik:

 

position: absolute 30px 30px 0px 0px;

6365284[/snapback]

 

Hm, jeg vet ikke hva som er problemet men når jeg prøver denne koden så får jeg bare bilde til å stå helt øverst, midt på siden. Midt på siden skyldes kanskje at jeg har dette i

style.css:

body {
 font:80% "Book Antiqua", Century, Verdana;
 background-color:#b49055;
 margin: 0 auto;
 text-align: center; 
 padding-top:5px;
 width: 800px;
 
}

[Rupal]

position: absolute;
left: 151px;
top: 211px;

 

Absolute bestemmer om diven skal være på absolut samme plassen.

Left bestemmer hvor mange pixler fra venstre, og top bestemmer hvor mange pixler fra toppen.

NB! Ikke begynn å rot med right og bottom, bruk bare left og top.

6365278[/snapback]

 

 

Sånn hadde jeg før, men dette gir meg det problemet jeg beskrev;det flytter på seg når jeg gjør vinduet større/mindre... Hvor er det jeg skal plassere denne koden? Kanskje det har noe å si..?

[834HF42F242]

bort med text-align: center. Svært fy

Med mindre du bruker en bakgrunn som låser seg til statisk bredde, kan du gjøre slik for å sentrere siden uten å måtte sentrere elementer:

 

body {
font: 80% Verdana, Arial, Helvetica, sans-serif;;
margin: 120px;5px;120px;0px;
background: #B49055

Endret 23. juni 2006 av neitakk

[Rupal]

Hehe.. Det visste jeg ikke, lette fram et eller annet sted på forumet åssen man skulle midtstille. Men koden du ga føkker opp bittelitt siden i forhold til før, så jeg lar det ligge, iallefall foreløpig... Jeg får vel prøve igjen imorra:) Takk for hjelpel hittil

Endret 23. juni 2006 av LBoN

[834HF42F242]

Dette er selvsagt saker du må planlegge fra starten av. Når jeg designer sider, setter jeg alltid opp css-koder for standard html-elementer først, og posisjonerer et grunnskall. Så gyver jeg løs på spesiell formatering av div-elementer, og tilpasser dem grunnskallet. Det er også mulig å gi standard html-elementer nye formateringer under gitte div-elementer.

 

Her kan du se et par eksempler på hvordan jeg gjør det:

 

http://www.musikksmaken.com/css/design/standard-markup.css

http://www.musikksmaken.com/css/design/artikler.css

 

Alle css-skjemaene legger jeg inn i en slik samlekontainer:

 

http://www.musikksmaken.com/css/design/stiler.css

 

Resultatet med svært enkle css-koder blir dette:

 

http://www.musikksmaken.com

 

Men husk at det er best å finne frem til et eget system å gjøre det på. Å sette seg inn i andres tankeganger for design og layout-strategier, kan gjøre det hele mye vanskeligere. Alt i alt er det masser av programmering, prøving og feiling over lenger tid som skal til for å beherske det.

 

http://www.htmldog.com er et godt hjelpemiddel, om du ikke allerede har vært der.

[rønning]

Hvis du bruker det som er beskrevet over her med position: absolute; riktig skal ikke bilde flytte seg selv om man endrer størrelsen på vinduet..

 

neitakk: bare litt pirking, rekkefølgen er top, right, bottom, left

Endret 23. juni 2006 av rønning