LØST:litt hjelp med å lage en ramme i div/css

[ThorB]

har denne layouten over en ramme:

http://home.no.net/thor918/layout/div-ramme/litenramme.jpg

problemet er at jeg ikke får til å reprodusere bildet over i div tags og css.

i bildet over har jeg scrolling så rammens høyde er statisk, men kunne også ha tenkt meg en ramme som utvider seg i høyden automatisk etter teksten. hele rammediv taggen skal posisjoneres på en spesiell plass,

 

 

her er noe jeg rablet ned for å teste. jeg er virkelig LOST

<div class="litenRamme"> 

<div class="corner_topleft" /><!--<div class="corner_topright" />-->

<div class="innhold">

testyhgg hg jhg ghgjhg

</div>

<div class="corner_bottomleft" /><!--<div class="corner_bottomright" />-->

</div>

 

.litenRamme{

 

border:2px solid #008579;

margin-bottom:2em;

/* width:250px;*/

position:absolute;

left:40px;

}

 

.litenRamme .corner_topleft{

/*display:inline;*/

width:22px;

height:21px;

background:transparent url(../bilder/forsiden/forsteside_08copy.gif) no-repeat scroll left top;

left:-2px;

/*padding:1px 4px 15px 5px;*/

/*padding:22px 0px 0px 22px;*/

position:relative;

top:-22px;

}

 

.litenRamme .corner_topright{

/*display:inline;*/

width:32px;

height:21px;

background:transparent url(../bilder/forsiden/forsteside_24copy.gif) no-repeat scroll right top;

left:237px;

/*padding:1px 4px 15px 5px;*/

/*padding:22px 0px 0px 22px;*/

position:relative;

top:2px;

}

 

.litenRamme .corner_bottomleft{

/*display:inline;*/

width:22px;

height:21px;

background:transparent url(../bilder/forsiden/forsteside_13copy.gif) no-repeat scroll left bottom;

left:-2px;

/*padding:1px 4px 15px 5px;*/

/*padding:22px 0px 0px 22px;*/

position:relative;

top:2px;

}

 

.litenRamme .corner_bottomright{

/*display:inline;*/

width:32px;

height:21px;

background:transparent url(../bilder/forsiden/forsteside_24copy.gif) no-repeat scroll right bottom;

left:237px;

/*padding:1px 4px 15px 5px;*/

/*padding:22px 0px 0px 22px;*/

position:relative;

top:2px;

}

Endret 31. mai 2008 av ThorB

[OlafG]

Du kan slice opp bildet ditt i tre deler, og lage en div for hver av de.

Satt sammen litt kvikt, men mener det skal virke. Har gjort lignende selv.

 

<div id="rammetopp">
</div>
<div class="innhold">
<p>INNHOLD</p>
</div>
<div id="rammebunn">
</div>

[size=5]
[font="Lucida Console"]CSS[/font]
[/size]
div#rammetopp {
background: url(path/img.png) no-repeat;
height: erstattetmedhøydenpåbildet px;
width: erstattmedbreddenpåbildet px;
}

.innhold {
background: #COLOR url(path/img.gif) repeat-y;
background-position: left;
}

div#rammebunn {
background: url(path/img.png) no-repeat;
height: erstattetmedhøydenpåbildet px;
width: erstattmedbreddenpåbildet px;
}

[ThorB]

Du kan slice opp bildet ditt i tre deler, og lage en div for hver av de.

Satt sammen litt kvikt, men mener det skal virke. Har gjort lignende selv.

 

<div id="rammetopp">
</div>
<div class="innhold">
<p>INNHOLD</p>
</div>
<div id="rammebunn">
</div>

[size=5]
[font="Lucida Console"]CSS[/font]
[/size]
div#rammetopp {
background: url(path/img.png) no-repeat;
height: erstattetmedhøydenpåbildet px;
width: erstattmedbreddenpåbildet px;
}

.innhold {
background: #COLOR url(path/img.gif) repeat-y;
background-position: left;
}

div#rammebunn {
background: url(path/img.png) no-repeat;
height: erstattetmedhøydenpåbildet px;
width: erstattmedbreddenpåbildet px;
}

aha.tenkte noe sånt ja. ska teste i morgen.

i utgangspunktet prøvde jeg å bygge opp rammen med 4 hjørner(i tilfelle jeg skal ha det til senere tid), og da blir den midterste delen litt vanskeligere, ikke sant? men akkurat denne gangen trur jeg det du skrev kan funke bra takk skal du ha

[ThorB]

hei igjen og takk for sist. testa ut kode nå og ja det fungerer utmerket.

ser ut som jeg må konvertere tabelllayouten som står igjen på samme måte..

 

en ting jeg lurer litt på.

la oss si jeg har en stor ramme med firehjørner, og jeg vil posisjonere den mindre rammen(den rammen du kodet over, med bare to hjørner) over den store rammen..

problemet er at den store er midtsentrert, så x og y for liten ramme kan endre seg ettersom hvor stor skjerm brukeren har. har du en enkel løsning på dette også?

Endret 24. mai 2008 av ThorB

[ThorB]

svarer litt på mitt eget spørsmål

http://www.barelyfitz.com/screencast/html-...ss/positioning/

4. position:relative + position:absolute

 

ser ut som forklarer akkurat det jeg var ute etter