Hallo,

Ik probeer het volgende voor elkaar te krijgen. De knop (zie bijlage) moet een vaste plek krijgen rechts onderin de div. De tekst mag het plaatje niet verplaatsen. Ik heb zelfs liever dat de tekst er simpelweg overheen gaat lopen.

De tekst krijgt per vakje een andere lengte, en moet makkelijk aan te passen zijn. Dus simpelweg <br /> of een vaste padding/margin aan de bovenkant is naar mijn idee geen optie.

Ook moet het plaatje en link worden, dus als achtergrond is volgens mij ook geen optie.

Website: http://no.nl/f2

XHTML:

Code:

<div class="column_left">
<div class="product_blok">
<h1>Gratis* iPhone 4</h1>
<div class="product_image"><img src="http://www.iphone4vodafone.nl/wp-content/uploads/2010/06/iphone-4.png" /></div>
<h2>De nieuwe iPhone van Apple met Retina display en FaceTime!</h2>
<p>Kosten abonnement (24 maanden):<br />
KPN bedrijfsbundel 50 + Pocket Internet<br />
500 minuten/sms €62,60 p/m eerste jaar -50% = €31,30 p/m.</p>
<div id="info"><img src="https://www.sitedeals.nl/images/info.png" alt="info" width="96" height="20" /></div>
</div>
</div>

CSS:

Code:

/* Hoofdopmaak */

#row_1 {
width: 920px;
height: 300px;
padding-top: 10px;
margin: auto;
}

#row_2 {
width: 920px;
height: 300px;
margin: auto;
}

#row_3 {
width: 920px;
height: 300px;
margin: auto;
}

#row_4 {
width: 920px;
height: 300px;
padding-bottom: 10px;
margin: auto;
}

.column_left {
float: left;
width: 280px;
height: 280px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
margin-right: 10px;
background-image: url(../images/productblok.png);
}

.column_middle {
float: left;
width: 280px;
height: 280px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
background-image: url(../images/productblok.png);
}

.column_right {
float: left;
width: 280px;
height: 280px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 20px;
background-image: url(../images/productblok.png);
}

/* Product-specifiek blok */

.product_blok {
position: relative;
width: 270px;
height: 270px;
margin: 5px;
background-color: #fafafa;
}

.product_image {
border: 3px solid #0C89E0;
float: left;
height: 100px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 5px;
overflow: hidden;
width: 100px;
}

.product_image > img {
margin-left: -100px;
margin-top: -100px;
padding: 6em 0 0 6em;
max-width: 150px;
}

.product_blok > h1 {
font-family: "Arial";
font-size: 18px;
color: black;
text-align: left;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
font-weight: 100;
}

.product_blok > h2 {
font-family: "Arial";
font-size: 12px;
text-align: left;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
}

.product_blok > p {
clear: both;
font-family: "Arial";
font-size: 12px;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
height: 100% auto;
}

#info {
clear: both;
float: right;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
}