December 26, 200718 yr I have a div with an image and next to that a div with text. In the text field is another div for a "read more" link . The problem is that i want the link to be automatically on the bottem of the div. Now it appears just after the text. body, html { margin:0; padding:0; background:#094e77; color:#000000; } body { min-width:963px; background-color: #094e77; background-image: url(images/bg.png); background-repeat: repeat-x; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 0.74em } a:link, a:visited {color:#094e77; text-decoration:none;} a:hover {color: #cc3333; text-decoration:underline;} /*Read More Link Styles*/ a.lees, a.lees:visited, a.lees:hover { margin-top: 10px; display: block; float: right; line-height: 15px; background: url(images/lees.png) no-repeat left center; text-indent: 20px; } #wrap { margin:0 auto; width:963px; } #header { background: url(images/top.png); height: 50px; } #logo { background-image: url(images/bgmain.png); background-repeat: repeat-y; margin:auto; padding-left: 40px; padding-top: 7px; } #contentwrap { background-image: url(images/bgmain.png); width:963px; overflow: hidden; padding-top: 20px; } #main { float:left; width:550px; padding-left: 55px; line-height:155%; } #maindienst { float:left; padding-left: 55px; line-height:155%; } #maindienst h1 { color:#0d527a; text-align: left; text-decoration:none; font: 1.5em/1em Arial, Helvetica, sans-serif; font-weight: 500; border-bottom:1px solid #ccc; padding:0; margin:0 0 15px 0; } #maindienst h2 { color:#F2850C; text-decoration:none; font: 1.4em/1em Arial, Helvetica, sans-serif; font-weight:600; padding:0; margin:10px 0px 0px 0px; line-height:10%; } #sidebar { float:right; width:280px; padding-right: 50px; } #sidebar ul { margin-bottom:0; } #sidebar h3, #sidebar p { padding:0 10px 0 0; } #footer { background: url(images/end.png) top left no-repeat; clear:both; height: 172px; padding-left: 50px; } #footer p { padding: 120px 0 0 10px; margin: 0; text-align: center; color:#FFFFFF; font-size:90%; } #nav { background-image: url(images/bgmain.png); background-repeat: repeat-y; margin:auto; } .coldienst1, .coldienst3, .coldienst4 { float: left; width: 200px; margin:0px 0px 0px 0px; } .coldienst2 { float: left; width: 220px; margin:0px 30px 0px 0px; } div.spacer { clear: both; height: 20px; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>test</title> <link href="master.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrap"> <div id="header"> </div> <div id="logo"> <img src="images/logo.png"> </div> <div id="nav"> <ul class="glossymenu"> <li><a href="index.html"><b>Home</b></a></li> <li class="current"><a href="diensten.html"><b>Diensten</b></a></li> <li><a href="referenties.html"><b>Referenties</b></a></li> <li><a href="contact.html"><b>Contact</b></a></li> </ul> </div> <div id="contentwrap"> <div id="maindienst"> <h1>Diensten</h1> <div class="coldienst1"> <h2>Webdesign</h2><p><img src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst2"> <h2> </h2> <p>Via een website kunt u op een effectieve manier informatie verschaffen aan een zo groot mogelijke doelgroep.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="coldienst3"> <h2>CMS</h2> <p><img src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst4"> <h2> </h2><p>Met een content management system (CMS) kan u zelf uw website onderhouden zonder technische kennis.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="spacer"><!-- No Content --></div> <div class="coldienst1"> <h2>Nieuwsbrieven</h2> <p><img src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst2"> <h2> </h2> <p>Online module voor het creëren, verzenden en meten van e-mail nieuwsbrieven naar al uw klanten.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="coldienst3"> <h2>Webshops</h2> <p><img src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst4"> <h2> </h2> <p>Een module waarmee u zelf uw webwinkel kunt opzetten, bijwerken en promoten. Uw producten en uw bestellingen kunt u makkelijk zelf beheren.<br> <a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="spacer"><!-- No Content --></div> <div class="coldienst1"> <h2>Domeinregistratie</h2> <p><img src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst2"> <h2> </h2> <p>Domeinregistraties tegen scherpe prijzen voor zowel bedrijven als particulieren.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="coldienst3"> <h2>Hosting</h2> <p><img src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst4"> <h2> </h2> <p>Kwalitatieve webhosting met support tegen een uiterst betaalbare prijs.<br> <a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="spacer"><!-- No Content --></div> <div class="coldienst1"> <h2>Zoekmachines</h2> <p><img name="" src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst2"> <h2> </h2> <p>Dankzij zoekmachine optimalisatie (SEO) wordt uw gehele website opgenomen in de zoekmachines. Zo wordt uw website makkelijk gevonden in zoekmachines als Google.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="coldienst3"> <h2>Website onderhoud</h2> <p><img name="" src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst4"> <h2> </h2> <p>Problemen om uw site up-to-date te houden? Een slecht onderhouden site kost u bezoekers. Wij verzorgen onderhoud en updates, zowel op afroep als op contractbasis.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="spacer"><!-- No Content --></div> <div class="coldienst1"> <h2>Grafisch ontwerp</h2> <p><img name="" src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst2"> <h2> </h2> <p>Vormgeving & creatieve communicatie<br> voor frisse en eigentijdse reclame. Van logo tot visitekaartje en huisstijl, van folder tot campagne.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="coldienst3"> <h2>Uitbesteding</h2> <p><img name="" src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst4"> <h2> </h2> <p>Webdesign en andere grafische opdrachten kunnen uitbesteed worden aan ons.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> </div> </div> <div id="footer"> <p><span class="sub">Copyright © RedRice 2007. Alle rechten voorbehouden</span></p> </div> </div> </body> </html>
December 26, 200718 yr (maybe) you might be able to use absolute positioning? I think that if you set the position of the "outer" div to absolute (with no top/left/bottom/right) and then set the position of the inner (align bottom please) div to absolute, with the "bottom" to "0px"; cant quite figure out which bit you want to change, but I hope you understand me.
December 26, 200718 yr Set the div containing the text and the Read More link to position: relative; Then set the Read More link to position: absolute; bottom: 0.5em; left: 1em;
December 26, 200718 yr Author Set the div containing the text and the Read More link to position: relative;Then set the Read More link to position: absolute; bottom: 0.5em; left: 1em; Thank you for your suggestion. I tried it out but the text jumps to the left and stays up. You can see it on the testpage now.
December 26, 200718 yr .coldienst2 { position: relative; float: left; width: 225px; margin:0px 40px 0px 0px; height: 170px; } .coldienst2 a { position: absolute; bottom: 0; } I've done two things here; 1. I added a height to the element containing the 'Lees meer' links. Otherwise the element would only be the height of the text content. 2. I added position absolute to the links inside .coldienst2 and placed it at the bottom. btw, in your HTML I see stuff like: <div class="spacer"><!-- No Content --></div> Here you should use margin in the CSS instead of adding extra empty elements. Also, you got some H2 elements with a non-breakable open space I couldn't work out the meaning of. <h2> </h2> Not good semantic markup. I can't give any advice of what to do instead as I don't understand your intention with it.
December 26, 200718 yr Author .coldienst2 { position: relative; float: left; width: 225px; margin:0px 40px 0px 0px; height: 170px; } .coldienst2 a { position: absolute; bottom: 0; } I've done two things here; 1. I added a height to the element containing the 'Lees meer' links. Otherwise the element would only be the height of the text content. 2. I added position absolute to the links inside .coldienst2 and placed it at the bottom. btw, in your HTML I see stuff like: <div class="spacer"><!-- No Content --></div> Here you should use margin in the CSS instead of adding extra empty elements. Also, you got some H2 elements with a non-breakable open space I couldn't work out the meaning of. <h2> </h2> Not good semantic markup. I can't give any advice of what to do instead as I don't understand your intention with it. Thanks for the help, i have uploaded the update. As you can see the links still dont align well with the bottom of the image. I think I messed up my code, the idea was to create a 5 row and 4 column table, but without the use of tabel. It sounds basic but i got myself confused in my code. When i remove the spacer div my whole layout gets messed up, the h2 tag is not necessary, this one i will remove. Maybe its better to use a table here? (although my first idea was to recreate my site without tables at all...)
December 27, 200718 yr Adjust the height .coldienst2 to make it fit. No, table layout would not be better. Table layout is never a good choice. When you say your layout got messed up when you removed the spacer. What do you mean? Can you describe it please?
December 27, 200718 yr Author Adjust the height .coldienst2 to make it fit. No, table layout would not be better. Table layout is never a good choice. When you say your layout got messed up when you removed the spacer. What do you mean? Can you describe it please? Thanks for you efforts. Heres the update of the code i changed, as you suggested: I have added the position and bottom to the link. THis makes the link go to the bottom indeed, but they jump to the left and the right - only in IE - as you can see on the testpage now. a.lees, a.lees:visited, a.lees:hover { margin-top: 10px; display: block; float: right; line-height: 15px; background: url(images/lees.png) no-repeat left center; text-indent: 20px; position: absolute; bottom: 0; }
December 27, 200718 yr Ah, right! I was using Firefox to view it. It'll need som tinkering to work out what IE is doing here. I was just on my way out right now. I'll have a look at it later. Unless someone else here pops their head in.
December 28, 200718 yr Author Ah, right! I was using Firefox to view it. It'll need som tinkering to work out what IE is doing here. I was just on my way out right now. I'll have a look at it later. Unless someone else here pops their head in. Ok thanks, am looking forward to the sollution of this puzzle.
Create an account or sign in to comment