Hi,
Ik zit met een probleem waar ik niet uit kom. Kan iemand mij helpen met het volgende..
- Ik heb een afbeelding, een losse div en een <p>.
- De afbeelding komt links boven, de div moet op een vaste positie komen aan de rechterkant
- de <p> tekst moet rondom (en niet halverwege afbreken met php woorden tellen of iets) de afbeelding en de div lopen zonder dat die wordt afgesloten.
Als code gebruik ik:
Zie foto voor hoe het nu is, hoe is dit op te lossen ?Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style> #div{ width: 650px; height: 1000px; padding: 0; margin: 0; background-color:#CCCCCC; } .artikelfoto{ padding: 0; margin: 10px; float: left; } #divrechts{ padding: 0; margin: 10px; position:absolute; top: 350px; left: 500px; width: 120px; height: 300px; background-color:#FF0000; } p{ padding: 0; margin: 0; padding-top: 15px; } </style> </head> <body> <div id="div"> <img src="e8e467103432d8aac835c252a9eec30f.jpg" class="artikelfoto" /> <div id="divrechts">Hoi divrechts</div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius vulputate iaculis. In tempor dignissim ultricies. Sed rutrum rhoncus lectus at semper. Curabitur eu dictum nunc. Donec eu velit eget magna luctus condimentum at tristique tellus. Etiam ante mi, mattis eu dapibus nec, interdum non mauris. In eu nisl in metus posuere facilisis eu ac ligula.<br /> <br /> Praesent at libero quis neque pulvinar mollis sed sed ligula. Vestibulum quis quam quis tortor commodo ullamcorper. Sed lacus eros, molestie non porta ut, luctus sed leo. Sed sed metus ante. Integer a massmassa nec nibh luctus luctus. Ut fermentum orci metus, eu pulvinar mauris. Nunc a leo neque, eleifend malesuada dolor. In vitae justo urna, quis luctus dolor. Praesent tincidunt est sit amet mauris suscipit posuere. Etiam blandit sagittis purus, non posuere ante hendrerit eu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus ma nec nibh luctus luctus. Ut fermentum orci metus, eu pulvinar mauris. Nunc a leo neque, eleifend malesuada dolor. In vitae justo urna, quis luctus dolor. Praesent tincidunt est sit amet mauris suscipit posuere. Etiam blandit sagittis purus, non posuere ante hendrerit eu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br /> <br /> Integer molestie adipiscing neque et imperdiet. Curabitur erat magna, convallis vitae venenatis sit amet, fermentum et purus. Etiam consequat, tellus sit amet tincidunt ullamcorper, nunc mauris euismod lectus, at commodo libero arcu eget felis. Phasellus volutpat cursus semper. Sed non turpis lacinia lectus tempor dapibus faucibus eget tellus. Quisque risus leo, hendrerit sed dapibus non, ultricies a nibh. Proin ante diam, tincidunt a iaculis quis, commodo non enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper libero eget metus iaculis accumsan fermentum vitae massa. Morbi facilisis, tortor vel vehicula blandit, erat neque iaculis tortor, in tempor lectus enim et orci. Integer ut dolor dolor. Proin erat nulla, imperdiet vel adipiscing sed, lobortis vitae tortor. Curabitur in tellus ante, sit amet tincidunt orci. Nunc cursus nunc sed lectus posuere lobortis. Mauris semper felis sed sem viverra quis scelerisque elit vestibulum.<br /> <br /> Aliquam aliquet commodo lacus, quis interdum elit congue eget. Maecenas consectetur tristique justo, sollicitudin fringilla nisi consequat sed. Etiam quis dolor orci, vitae vehicula tortor. Praesent vel mi felis, id ultricies mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus vel risus sed justo imperdiet sagittis eleifend eu arcu. Nulla commodo, justo vel commodo faucibus, est neque cursus ante, eget volutpat nunc augue ut felis. In a leo ac libero sagittis blandit. <br /><br /> Duis imperdiet est ac turpis viverra pharetra. Vivamus urna purus, porta in suscipit ut, tristique eu orci. Integer nec sollicitudin elit. Duis non nisl vel enim accumsan commodo sit amet eget nisl. Mauris dictum tincidunt odio vitae ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque euismod facilisis lacus quis pretium. Nam venenatis orci non risus faucibus a fringilla neque euismod. Morbi nec eros at diam dictum varius. Sed elementum quam sit amet purus blandit viverra. Phasellus vulputate dictum laoreet. </p> </div> </body> </html>
Alvast bedankt
Wesley
- HTML DIV Positie
-
09-02-2012, 11:34 #1
- Berichten
- 92
- Lid sinds
- 18 Jaar
HTML DIV Positie
-
09-02-2012, 12:14 #2
- Berichten
- 131
- Lid sinds
- 13 Jaar
Re: HTML DIV Positie
Wat gebeurt er als je position:absolute; van div rechts wegdoet? Normaal gezien verandert het dan wel
-
09-02-2012, 13:06 #3
- Berichten
- 92
- Lid sinds
- 18 Jaar
-
09-02-2012, 13:07 #4Leadweb Webdesign
- Berichten
- 115
- Lid sinds
- 13 Jaar
Re: HTML DIV Positie
Uhm, waarom pak je niet 2 divs met float left, de linker gebruik je voor de content de rechter voor de advertentie.
-
09-02-2012, 13:12 #5
- Berichten
- 92
- Lid sinds
- 18 Jaar
Re: HTML DIV Positie
Dan krijg je dit (zie bijlage) hoe krijg ik dan die rechter div naar beneden en dat de tekst die in die P staat boven het rechter blok doorloopt en zodra het naar links kan het doorloopt naar links...
-
09-02-2012, 13:20 #6Leadweb Webdesign
- Berichten
- 115
- Lid sinds
- 13 Jaar
Re: HTML DIV Positie
Persoonlijk zou ik het rode blok naast de grijze hangen ipv erin, dan geef je hem gewoon een vaste breedte met auto hoogte, en kun je hem middels een margin omlaag zetten.
-
09-02-2012, 13:24 #7
- Berichten
- 92
- Lid sinds
- 18 Jaar
-
09-02-2012, 13:28 #8Leadweb Webdesign
- Berichten
- 115
- Lid sinds
- 13 Jaar
Re: HTML DIV Positie
Je moet het ongeveer zo hebben:
<body>
<div id="wrapper">
<div id="content_left">Hier komt dus je bericht met grijze achtergrond</div>
<div id="content_right">Hier komt je advertentie met rode achtergrond</div>
</div>
</body>
-
09-02-2012, 13:33 #9
- Berichten
- 92
- Lid sinds
- 18 Jaar
-
09-02-2012, 13:36 #10Leadweb Webdesign
- Berichten
- 115
- Lid sinds
- 13 Jaar
Re: HTML DIV Positie
#content_left
{
width: 500px;
height auto;
float: left;
background-color: blue;
}
#content_right
{
width: 150px;
height: auto;
float: left;
background-color: red;
}
-
09-02-2012, 13:36 #11
- Berichten
- 92
- Lid sinds
- 18 Jaar
-
09-02-2012, 13:41 #12
- Berichten
- 156
- Lid sinds
- 14 Jaar
Re: HTML DIV Positie
OK, ik weet de oplossing. Het is wel een beetje vals spelen, maar het werkt wel.
Door de width op 0 te zetten, beďnvloed je de tekst niet, maar door de height schuif je de div wel omlaag.
CSS:
Code:#divrechts{ padding: 0; clear:both; width: 120px; height: 300px; background-color:#FF0000; float:right; } .pushdown{float:right; width:0; height:150px;}
Code:<div id="div"> <img src="e8e467103432d8aac835c252a9eec30f.jpg" class="artikelfoto" /> <div class="pushdown"></div> <div id="divrechts">Hoi divrechts</div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius vulputate iaculis. In tempor dignissim ultricies. Sed rutrum rhoncus lectus at semper. Curabitur eu dictum nunc. Donec eu velit eget magna luctus condimentum at tristique tellus. Etiam ante mi, mattis eu dapibus nec, interdum non mauris. In eu nisl in metus posuere facilisis eu ac ligula.<br /> <br /> Praesent at libero quis neque pulvinar mollis sed sed ligula. Vestibulum quis quam quis tortor commodo ullamcorper. Sed lacus eros, molestie non porta ut, luctus sed leo. Sed sed metus ante. Integer a massmassa nec nibh luctus luctus. Ut fermentum orci metus, eu pulvinar mauris. Nunc a leo neque, eleifend malesuada dolor. In vitae justo urna, quis luctus dolor. Praesent tincidunt est sit amet mauris suscipit posuere. Etiam blandit sagittis purus, non posuere ante hendrerit eu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus ma nec nibh luctus luctus. Ut fermentum orci metus, eu pulvinar mauris. Nunc a leo neque, eleifend malesuada dolor. In vitae justo urna, quis luctus dolor. Praesent tincidunt est sit amet mauris suscipit posuere. Etiam blandit sagittis purus, non posuere ante hendrerit eu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br /> <br /> Integer molestie adipiscing neque et imperdiet. Curabitur erat magna, convallis vitae venenatis sit amet, fermentum et purus. Etiam consequat, tellus sit amet tincidunt ullamcorper, nunc mauris euismod lectus, at commodo libero arcu eget felis. Phasellus volutpat cursus semper. Sed non turpis lacinia lectus tempor dapibus faucibus eget tellus. Quisque risus leo, hendrerit sed dapibus non, ultricies a nibh. Proin ante diam, tincidunt a iaculis quis, commodo non enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper libero eget metus iaculis accumsan fermentum vitae massa. Morbi facilisis, tortor vel vehicula blandit, erat neque iaculis tortor, in tempor lectus enim et orci. Integer ut dolor dolor. Proin erat nulla, imperdiet vel adipiscing sed, lobortis vitae tortor. Curabitur in tellus ante, sit amet tincidunt orci. Nunc cursus nunc sed lectus posuere lobortis. Mauris semper felis sed sem viverra quis scelerisque elit vestibulum.<br /> <br /> Aliquam aliquet commodo lacus, quis interdum elit congue eget. Maecenas consectetur tristique justo, sollicitudin fringilla nisi consequat sed. Etiam quis dolor orci, vitae vehicula tortor. Praesent vel mi felis, id ultricies mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus vel risus sed justo imperdiet sagittis eleifend eu arcu. Nulla commodo, justo vel commodo faucibus, est neque cursus ante, eget volutpat nunc augue ut felis. In a leo ac libero sagittis blandit. <br /><br /> Duis imperdiet est ac turpis viverra pharetra. Vivamus urna purus, porta in suscipit ut, tristique eu orci. Integer nec sollicitudin elit. Duis non nisl vel enim accumsan commodo sit amet eget nisl. Mauris dictum tincidunt odio vitae ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque euismod facilisis lacus quis pretium. Nam venenatis orci non risus faucibus a fringilla neque euismod. Morbi nec eros at diam dictum varius. Sed elementum quam sit amet purus blandit viverra. Phasellus vulputate dictum laoreet. </p> </div>
-
09-02-2012, 13:47 #13
- Berichten
- 92
- Lid sinds
- 18 Jaar
-
09-02-2012, 14:23 #14
- Berichten
- 156
- Lid sinds
- 14 Jaar
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