Hjelp til å justere opp innhold i små bokser (CSS+HTML)

[AnaXyd]

Heisann!

 

 

Driver å sliter litt med å sette opp innholdet i noen bokser, slik at alt er omtrent uavhengig av hverandre inni der.

La meg vise hvordan koden ser ut først, og illustrere litt:

 

HTML

Klikk for å se/fjerne innholdet nedenfor

<div id="product-3bx">
   	<div id="leftbox">
		<div id="overlay_les1">
   			<p class="style8">Rex-Rotary - SP1000</p>
			<p class="style9">En liten multifunksjonsmaskin med kopi, </p>
			<p class="style9">print og scanning </p>
			<p class="style9">som standard</p>
   			<p class="style10">Kr. 2.990,- inkl. mva</p>
			<div align="right"><p class="style17"><a href="#">Les mer »</a></p>
			</div>
	  </div>
	</div>

	<div id="middlebox">
		<div id="overlay_les2">
   			<p class="style11">Sony Ericsson K850i</p>
   			  <p class="style12">Den nye K850i har 5-megapixel kamera,</p>
			<p class="style12">3G, musikkspiller og</p>
			<p class="style12">videoinnspilling.</p>
			  <p class="style13">Kr. 4.990,- inkl. mva</p>
			<div align="right"><p class="style17"><a href="#">Les mer »</a></p>
			</div>
		</div>
	</div>

	<div id="rightbox">
		<div id="overlay_les3">
   			<p class="style14">Acer Bærbar</p>
			<p class="style15">Knallgod laptop med den nyeste Core 2 Duo</p>
			<p class="style15">prosessoren. nVidia GF8800GO,</p>
			<p class="style15">2G minne, trådløst lan og webcam.</p>
			<p class="style16">Kr. 15.990,- inkl. mva</p>
			<div align="right"><p class="style17"><a href="#">Les mer »</a></p>
			</div>
		</div>
	</div>
	   </div>

 

CSS

Klikk for å se/fjerne innholdet nedenfor

/*leftbox*/
.style8 {
font-size: 18pt;
font-family: Arial, Helvetica, sans-serif;
color: #ff7e00;
padding-left: 9px;
}

.style9 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding-left: 9px;
}

.style10 {
font-size: 11pt;
font-family: Arial, Helvetica, sans-serif;
color: #ff7e00;
padding-left: 9px;
/*padding-top: 58px;*/
}

/*midbox*/
.style11 {
font-size: 18pt;
font-family: Arial, Helvetica, sans-serif;
color: #ff7e00;
padding-left: 8px;
}

.style12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding-left: 8px;
}

.style13 {
font-size: 11pt;
font-family: Arial, Helvetica, sans-serif;
color: #ff7e00;
padding-left: 8px;
/*padding-top: 58px;*/
}

/*rightbox*/
.style14 {
font-size: 18pt;
font-family: Arial, Helvetica, sans-serif;
color: #ff7e00;
padding-left: 10px;
}

.style15 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding-left: 10px;
}

.style16 {
font-size: 11pt;
font-family: Arial, Helvetica, sans-serif;
color: #ff7e00;
padding-left: 10px;
/*padding-top: 58px;*/
}
.style17 {
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
color: #ffffff;
padding-left: 30px;
padding-right: 20px;
padding-top: 30px;
padding-bottom: 7px;
}



#product-3bx {
padding-top: 18px;
width: 900px;
height: 162px;
background:url(images/bg_forside_3bx.gif);
}

#product-3bx a {
text-decoration: none;
color: #ffffff;

}

#leftbox {
width: auto;/*282px;*/
height: 160px;
float: left;
padding-left: 25px;
}
#overlay_les1 {
background:url(images/overlay1.png);
width: 273px;
height: 160px;
}
#middlebox {
width: auto;/*272px;*/
height: 160px;
float: left;
background:url(images/mobil.gif) no-repeat right bottom;
padding-left: 14px;
}
#overlay_les2 {
background:url(images/overlay1.png);
width: 273px;
height: 160px;
}

#rightbox {
width: auto;/*289px;*/
height: 160px;
float: left;
padding-left: 15px;
}
#overlay_les3 {
background:url(images/overlay1.png);
width: 273px;
height: 160px;
}

 

Og det ser slik ut(og skal se slik ut):

 

 

Det funker slik som jeg har satt det opp i koden nå, men som dere ser, så er det ganske mange elementer som skal til, og jeg føler at jeg har tatt en veldig tungvin vei. Innholdet skal også kunne endres uten at jeg må justere på padding og alt det er på nytt igjen, og det skal også være ett bilde bak "Les mer" overlayen også.

 

Er det noen som kan hjelpe meg med dette? Jeg har prøvd masse med float og greier i flere timer nå, men klarer det ikke...

 

Setter pris på hjelp!

[mikk-]

Hva med noe sånt?

 

<div class="boks">

<h4>Produktnavn</h4>

<p><img src="mobilbilde.jpg">Tekst om produktet her.</p>

<span class="pris">4024,-</span>

<span class="lesmer">Les mer &raquo</span>

</div>

 

.boks {

width: 200px;

height: 150px;

padding: 20px;

background: url("images/bildeavboksen.png") 0 0 no-repeat;

}

h4 {

color: #f00; /*fargen din*/

(...)

}

.lesmer {

display: block;

position: absolute; /* Lesmer tas "ut av" siden, og flyttes rundt med left/top relativt til blokka .boks */

left: 20px;

top: 15px;

background: url("images/lesmerbakgrunn.png") 0 0 no-repeat; /* halvgjennomsiktig PNG, virker som det er det du bruker fra før også */

height: 14px;

widht: 30px;

padding: 10px;

}

p img {

float: right;

}

.pris {

color: #f00;

(...)

}

[AnaXyd]

Ah takk! Dette hjelper godt på vei! Blir det bugga om jeg bruker float nå? For jeg må få de tre til å stille seg opp etterhverandre, og ikke underhverandre som det blir nå.

 

Fikk det til med float og litt padding justeringer..

 

Men denne .lesmer graia.. Den holder seg ikke innenfor .boks, og er plassert nesten øverst på siden. Og det er kun 1stk av dem... Hva er feilen?

 

Kan dette ha noe med:

 

position: absolute; /* Lesmer tas "ut av" siden, og flyttes rundt med left/top relativt til blokka .boks */

 

.. å gjøre?

Endret 6. desember 2007 av AnaXyd

[mikk-]

Jepp, det har nok med position:absolute å gjøre. Greia er at elementet flyttes ut av sidens normale flyt, for å kunne plasseres hvor som helst. Jeg trodde ikke elementet skulle flyttes til toppen, men jeg kan ha tatt feil, for jeg bruker vanligvis ikke så mye absolutt posisjonering. Du kan prøve å bruke margin-top og margin-left i stedet for top og left, mulig det fungerer bedre.

[AnaXyd]

Ser ut som den flyter ut selv når jeg bruker margin-left/top. Du hadde tenkt at det skulle holde seg som en layer over alt det andre i .boks?