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:
CSS: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>
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; }
- Vaste locatie "Meer informatie" button.
-
13-10-2010, 15:59 #1
- Berichten
- 140
- Lid sinds
- 14 Jaar
Vaste locatie "Meer informatie" button.
-
In de schijnwerper
LEASEVERGELIJKEN.NL -> Mooie EMD website met bezoekers en inkomsten! DA54 PA41Website te koopDé complete, ontzorgende Managed VPS v.a. €59,99 per maandHostingTe koop domeinnaam: Vakantieparken EuropaDomein te koopMomentsleutel info - Veel content - Affiliate - Bieden vanaf slechts 19 euro!Website te koop
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic