login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Floating image paragraaf text eronder (Opgelost)

Offline sanderrebry - 07/11/2013 14:18
Avatar van sanderrebryLid Ik heb een div die left wordt gefloat, in die div is er een image en tekst die ernaast komt, dit lukt perfect maar bij de layout van smartphone en tablet wil ik graag de image en de tekst eronder. Hoe kan ik dit precies doen?

Ik heb dit stukje code:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <p><a href="[wblink105]"><img width="150" height="150" alt="" class="image" src="http://studiowebvision.be/demuynck/media/Producten/foto express.jpg" /></a><span style="font-size: 11px">Ongeveer <strong>100 verschillende formaten</strong> zijn beschikbaar: van 6x6cm t.e.m uitvergrotingen van 127x250cm!<br />
  2. U kan randen toevoegen of correcties toepassen, zoals zwart-wit, sepia, automatische kleuren en rode ogen verwijderen...</span></p>
  3. <p><a class="button" href="[wblink105]">Bestel online</a></p>


De css:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .blokken
  2. {
  3.  
  4. background:#f7f7f7 url(images/background.jpg) repeat-x;
  5.    -webkit-border-radius:5px;
  6.    -moz-border-radius:5px;
  7.    -webkit-box-shadow:0 0 3px 3px rgba(204, 204, 204, 0.3);
  8.    -moz-box-shadow:0 0 3px 3px rgba(204, 204, 204, 0.3);
  9.    box-shadow:0 0 3px 3px rgba(204, 204, 204, 0.3);
  10.    border-radius:5px;
  11.    border:1px solid #FFFFFF;
  12.    margin:10px;
  13.    width: 45%;
  14.    float:left;
  15.    padding:10px;
  16. height:auto;
  17.    }
  18. .blokken .image
  19. {
  20. margin-right: 25px;
  21. margin-top:2px;
  22. margin-left:2px;
  23. float:left;
  24. }


De responsive css (table, smartphone)
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .responsive-phone .blokken
  2. {
  3.    width: 95% !important;
  4.  
  5.    -webkit-box-sizing: border-box;
  6.    -moz-box-sizing: border-box;
  7.    box-sizing: border-box;
  8.   float:none;
  9. }
  10. .responsive-tablet .blokken
  11. {
  12.    width: 95% !important;
  13.    -webkit-box-sizing: border-box;
  14.    -moz-box-sizing: border-box;
  15.    box-sizing: border-box;
  16.   float:none;
  17. }
  18. .responsive-phone .blokken .image
  19. {
  20. clear:both;
  21. border:solid thin black;
  22. }
  23. .responsive-tablet .blokken .image
  24. {
  25. clear:both;
  26. border:solid thin black;
  27. }
  28. .responsive-phone .blokken p
  29. {
  30. clear:left;
  31. border:solid thin black;
  32. }
  33. .responsive-tablet .blokken p
  34. {
  35. clear:left;
  36. border:solid thin black;
  37. }

6 antwoorden

Gesponsorde links
Offline Thomas - 07/11/2013 14:47
Avatar van Thomas Moderator Ik ben geen held in CSS, maar misschien kun je van je hyperlink (om je afbeelding) of (van de) afbeelding (zelf) een block-level element maken, eventueel met een clear? Dit zou er (theoretisch ) voor moeten zorgen dat de tekst naar de volgende regel wordt geduwd?
Offline keesgerbers - 07/11/2013 15:05 (laatste wijziging 07/11/2013 15:11)
Avatar van keesgerbers Lid Via media types? http://www.w3schools.com/css/css_mediatypes.asp

dan kun je een aparte stylesheet of gedeelte per device groep maken en dus bij de mobiele groep de float weglaten zodat de code automatisch eronder valt

edit:
je zou het dan ook op breedte kunnen doen:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. @media (min-width:500px){.blokken{ float:left}}
  2. @media (max-width:499px){.blokken{ float:none}}

bovenstaande code is voorbeeld, zal niet meteen naar behoren functioneren, geeft je een idee
Offline sanderrebry - 07/11/2013 15:24
Avatar van sanderrebry Lid Beste keesgerbers,

Er zijn momenteel twee apparte css files, één voor tablet/smartphone en één standaard.
Daar heb ik al van alles geprobeerd met float:none; en clear:left en zo maar dit werkt niet...
Even een screenshot: http://studiowebvision.be/screenshot.png
Offline keesgerbers - 07/11/2013 15:29 (laatste wijziging 07/11/2013 15:31)
Avatar van keesgerbers Lid Dit werkte voor mij:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .blokken
  2. {
  3.  
  4. background:#f7f7f7 url(images/background.jpg) repeat-x;
  5. 	   -webkit-border-radius:5px;
  6. 	   -moz-border-radius:5px;
  7. 	   -webkit-box-shadow:0 0 3px 3px rgba(204, 204, 204, 0.3);
  8. 	   -moz-box-shadow:0 0 3px 3px rgba(204, 204, 204, 0.3);
  9. 	   box-shadow:0 0 3px 3px rgba(204, 204, 204, 0.3);
  10. 	   border-radius:5px;
  11. 	   border:1px solid #FFFFFF;
  12. 	   margin:10px;
  13. 	   width: 45%;
  14. 	   float:left;
  15. 	   padding:10px;
  16. 		height:auto;
  17.    }
  18.  
  19. @media screen {
  20. 	img
  21. 	{
  22. 		margin-right: 25px;
  23. 		margin-top:2px;
  24. 		margin-left:2px;
  25. 		float:left;
  26. 	}
  27.    }
  28.  
  29. @media handheld {
  30. 	img
  31. 	{
  32. 		margin-right: 25px;
  33. 		margin-top:2px;
  34. 		margin-left:2px;
  35. 		float:none;
  36. 		clear: both;
  37. 	}
  38.    }


waarbij ik je html ook heb aangepast naar:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="[wblink105]"><img width="150" height="150" alt="" class="image" src="http://studiowebvision.be/demuynck/media/Producten/foto express.jpg" /></a>
  2.  
  3. <p>
  4. <span style="font-size: 11px">Ongeveer <strong>100 verschillende formaten</strong> zijn beschikbaar: van 6x6cm t.e.m uitvergrotingen van 127x250cm!<br />
  5. U kan randen toevoegen of correcties toepassen, zoals zwart-wit, sepia, automatische kleuren en rode ogen verwijderen...</span>
  6. </p>
  7. <p><a class="button" href="[wblink105]">Bestel online</a>
  8. </p>
Offline sanderrebry - 07/11/2013 16:46 (laatste wijziging 07/11/2013 16:47)
Avatar van sanderrebry Lid Ja dat werkt alleen heel erg vervelend dat FCKeditor de <a> en <img> tag tussen paragraph gaat plaatsen 

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <p><a href="[wblink105]"><img width="150" height="150" src="http://studiowebvision.be/demuynck/media/Producten/foto express.jpg" alt="" /></a></p>
  2. <p>Ongeveer <strong>100 verschillende formaten</strong> zijn beschikbaar: van 6x6cm t.e.m uitvergrotingen van 127x250cm!<br />
  3. U kan randen toevoegen of correcties toepassen, zoals zwart-wit, sepia, automatische kleuren en rode ogen verwijderen...</p>
  4. <p><a href="[wblink105]" class="button">Bestel online</a></p>
Offline Thomas - 07/11/2013 17:57
Avatar van Thomas Moderator Zie mijn bovenstaande antwoord, werkt display: block niet?

Het onderstaande gesimplificeerde voorbeeld lijkt te doen wat jij wilt?

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  5. <title>Insert title here</title>
  6. <style type="text/css">
  7. <!--
  8. div.test { width: 500px; float: left; border: 1px solid #ff0000; }
  9. div.test p a { display: block; clear: both; } /* (un)comment deze regel voor het gewenste effect */
  10. //-->
  12. </head>
  13.  
  15. <div class="test">
  16. <p><a href="test.htm"><img src="test.gif" height="50" width="100" alt="test image" /></a>Dit is een test tekst Dit is een test tekst Dit is een test tekst Dit is een test tekst Dit is een test tekst </p>
  17. </div>
  18. </body>
  19. </html>
Bedankt door: sanderrebry
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.2s