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
ReisVoordeel.nl - Perfect voor een affiliate website in reizen, vliegtickets enzDomein te koopVEILING: Snelgroeiend YouTube kanaal 21.000 subscribers 91 miljoen views!Website te koopGeoptimaliseerde WordPress Webhosting: Vanaf € 3,00 per maand!HostingNu 50% korting op duizenden linkopties | DR60+ DA50+ | Blogs & Links in alle nichesLinkpartners
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