login  Naam:   Wachtwoord: 
Registreer je!
 Forum

tekst naast het plaatje (Opgelost)

Offline BaddyZ - 07/05/2010 11:56 (laatste wijziging 07/05/2010 11:58)
Avatar van BaddyZNieuw lid Hallo,

Zou iemand me een handje mee kunnen helpen en me kunnen vertellen hoe ik dit krijg?:
http://img38.imageshack.us/img38/3193/helpn.jpg

Het idee bij nummer 1 is dus tekst rechts van het plaatje(bij mij komt de tekst nu rechts onder het plaatje, en ik weet niet of het in 1 div kan of het per se in meerdere divs moet)

en bij 2 ongeveer het zelfde maar dan ook nog eens tekst eronder(moet dit met 2 divs??)

- ps: k ben een echte css noob ;p -

4 antwoorden

Gesponsorde links
Offline vinTage - 07/05/2010 12:13 (laatste wijziging 07/05/2010 12:14)
Avatar van vinTage Nieuw lid voorbeeld 1 doe je makkelijkst met 2 divs left floaten

voorbeeld 2, daarvoor kan je eens zoeken op hspace en vspace
Bedankt door: BaddyZ
Offline WouterJ - 07/05/2010 12:14
Avatar van WouterJ HTML gevorderde Idee1:
Maak een div aan met het plaatje en de tekst(in een paragraaf):
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="plaatje">
  2. <img src="/plaatje.png">
  3. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in eros elit, a luctus augue. Ut euismod elit ac nisi sodales tempor. Nulla non est turpis. Sed viverra rhoncus mollis. Maecenas lobortis turpis non lacus imperdiet porttitor. </p>
  4. </div>

Dan geef je in CSS de img en p float: left mee:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #plaatje img {float: left;}
  2. #plaatje p {float: left;}

En de tekst staat goed.

Idee2
Maak weer een plaatje en 2 teksten in 2 paragraven en geef die een class mee:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="plaatje">
  2. <img src="/plaatje.png">
  3. <p class="naast">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in eros elit, a luctus augue. Ut euismod elit ac nisi sodales tempor. Nulla non est turpis. Sed viverra rhoncus mollis. Maecenas lobortis turpis non lacus imperdiet porttitor. </p>
  4. <p class="onder">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in eros elit, a luctus augue. Ut euismod elit ac nisi sodales tempor. Nulla non est turpis. Sed viverra rhoncus mollis. Maecenas lobortis turpis non lacus imperdiet porttitor. </p>
  5. </div>

En nu zet je in CSS de img en p.naast float: left en de andere paragraaf niet:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #plaatje img {float:left;}
  2. #plaatje p.naast (float:left;}

Volgens mij werkt dit.

Succes! 
Bedankt door: BaddyZ
Offline Martijn - 07/05/2010 12:24
Avatar van Martijn Crew PHP hoezo zo ingewikkeld

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="Zodat je vier van de vakjes naast elkaar kan zetten">
  2.     <img style="float:left;" />
  3.     tekst tekst tekst tekst
  4. </div>


There. Uiteraard om t netjes te maken de style ergens defineren in je css, maar you get the point
Bedankt door: BaddyZ
Offline BaddyZ - 07/05/2010 12:37
Avatar van BaddyZ Nieuw lid alle drie juiste oplossing en alle 3 thx:)
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.184s