Thread: HTML: Tekst Rond Afbeeldingen
-
03-06-2007, 18:19 #1Approved 9-lifer
- Registered
- 14/12/05
- Location
- Dilbeek
- Posts
- 10,473
- iTrader
- 20 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/40
HTML: Tekst Rond Afbeeldingen
Hey,
Ik probeer om rondom mijn afbeelding, tekst te laten komen, en niet dus dat je zo een 1 zinnetje er naast krijgt en dan de rest op de regels er onder.
Hoe doe ik dit?
Dit heb ik nu:
Dit is het resultaat.HTML 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> <link href="../css/nashuatec_frame.css" rel="stylesheet" type="text/css" /> <title>Nashuatec</title> </head> <body> <div class="kop">Milieu</div> <p><img src="../pic/mil/ourearthourtomorrow.jpg" alt="Foto Milieu" width="65" height="76" hspace="5" vspace="5" align="textop" />Binnen de kantoorautomatiseringssector geeft de NRG Groep via zijn merk Nashuatec al meer dan 20 jaar de toon aan wat betreft het streven naar producten en processen die een minimale impact op het milieu hebben en het promoten van partnerschappen met overheden, de industrie en milieuorganisaties. Wij werken volgens de filosofie “Onze Aarde, Onze Toekomst”. De onderliggende gedachte is simpel: wij delen de planeet, dus zijn wij ook medeverantwoordelijk voor de bescherming en het behoud ervan.</p> </body> </html>
Vroeger gebruikte ik dan altijd een table voor, maar volgens mij kan dat beter
Thx,
Bartno votes
-
-
03-06-2007, 18:25 #2Member
- Registered
- 18/07/02
- Location
- Tongeren
- Posts
- 1,316
- iTrader
- 16 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
Beter is
Code:<div class="post"> <h1>Mijn kop</h1> <p> <img src="bla.jpg" alt="bla foto" /> <!-- STYLE: Float: left of Float: right --> En dit is dan mijn tekst. </p> </div>_.-´[COR Team Member]`-._
http://www.hp.beno votes
-
03-06-2007, 18:42 #3Approved 9-lifer
- Registered
- 14/12/05
- Location
- Dilbeek
- Posts
- 10,473
- iTrader
- 20 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/40
no votes
-
03-06-2007, 18:44 #4Approved 9liver
- Registered
- 18/04/03
- Location
- Hasselt
- Posts
- 14,855
- iTrader
- 23 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 10/79
no votes
-
03-06-2007, 19:00 #5Member
- Registered
- 29/11/04
- Location
- My attic
- Posts
- 5,936
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 12/15
in uw css:
p img {float: left}no votes
-
03-06-2007, 19:16 #6Approved 9-lifer
- Registered
- 14/12/05
- Location
- Dilbeek
- Posts
- 10,473
- iTrader
- 20 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/40
no votes
-
03-06-2007, 23:58 #7
het is trouwens ook beter om uw img niet in uw p-tag te includen

en laat die div class="kop" ook vallen...
Er bestaan "kop" tags hé ... h1, h2, h3, h4, h5, .....no votes
-
04-06-2007, 00:28 #8Approved 9-lifer
- Registered
- 14/12/05
- Location
- Dilbeek
- Posts
- 10,473
- iTrader
- 20 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/40
kheb van de kop nu ook <h1> gemaakt, was kleine aanpassing in css maar gaat nog makelijk

Maar, als ik mijn img uit de p doen, dan staat mijn tekening er gewoon boven, hoe los ik dit dan op?
Thx!
Bart
Voor de geïnstresseerden:
Eindresultaat:
HTML 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> <link href="../css/nashuatec_frame.css" rel="stylesheet" type="text/css" /> <title>Nashuatec</title> </head> <body> <h1>Milieu</h1> <img src="../pic/mil/ourearthourtomorrow.jpg" alt="Foto Milieu" width="65" height="76"/><p>Binnen de kantoorautomatiseringssector geeft de NRG Groep via zijn merk Nashuatec al meer dan 20 jaar de toon aan wat betreft het streven naar producten en processen die een minimale impact op het milieu hebben en het promoten van partnerschappen met overheden, de industrie en milieuorganisaties. Wij werken volgens de filosofie “Onze Aarde, Onze Toekomst”. De onderliggende gedachte is simpel: wij delen de planeet, dus zijn wij ook medeverantwoordelijk voor de bescherming en het behoud ervan.</p> <h2>Onze milieuprincipes en ons milieubeleid</h2> <p>Een van de fundamentele bedrijfsprincipes van NRG is de erkenning dat milieubehoud tot de belangrijkste opdrachten van de mensheid behoort. Om die reden trachten wij milieuzorg te integreren als een belangrijk element in al onze bedrijfsactiviteiten. Wij aanvaarden dan ook graag onze verantwoordelijkheid voor milieubehoud en passen deze benadering overal in ons bedrijf toe.</p> <h2>Streven naar een groenere wereld</h2> <p>Het succes van een bedrijf wordt niet langer louter en alleen op basis van zijn balans gemeten, maar wordt ook bepaald door de wijze waarop het handelt en reageert op veranderingen in de wereld waarin het actief is.</p> <p>NRG is zich ervan bewust dat het als groot en gevestigd bedrijf een impact heeft op het milieu en streeft ernaar om die impact waar mogelijk tot een minimum te beperken. Wij willen dat toekomstige generaties van ons een schone, groene wereld erven. Daarom zetten wij ons actief in voor het milieu en promoten wij een milieuvriendelijke benadering in alles wat we doen.</p> <p>Vanaf de planning van onze aankopen, verpakkingen en logistiek tot de verkoop en dienstverlening aan onze klanten, integreren wij een duurzame omgang met het milieu in de actuele en toekomstige successen van de NRG Groep.</p> <h2>Onderscheidingen</h2> <p>Op basis van zijn betrokkenheid voor het milieu heeft het moederbedrijf van NRG de volgende prestigieuze onderscheidingen in de wacht gesleept:</p> <ul> <li>Juli 2005: "World's Highest Rating for Corporate Responsibility".</li> <li>Maart 2005: "AAA in TECO's Environmental Rating".</li> <li>Februari 2005: "World's Best Rating for Corporate Social Responsibility".</li> <li>Januari 2005: "Top 100 Most Sustainable Corporations in the World".</li> <li>Juli 2004: 11de plaats in de "Nikkei Business CSR Best 100 Company Ranking".</li> </ul> </body> </html>
no votes
-
04-06-2007, 00:53 #9
zeer simpel,
ipv p img { float : left } te gebruiken enkel img { float : left } zodat uw p rond uw image kan gaan "floaten".
Als je van plan bent om meerdere images te gebruiken op uw page kunt ge mss best een class maken.
<img class="floatleft" ... />
img.floatleft { float: left }
Should work..
no votes
-
04-06-2007, 01:04 #10Approved 9-lifer
- Registered
- 14/12/05
- Location
- Dilbeek
- Posts
- 10,473
- iTrader
- 20 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/40
no votes
-
04-06-2007, 02:35 #11Member
- Registered
- 29/11/04
- Location
- My attic
- Posts
- 5,936
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 12/15
Daar wil ik toch nog even op inpikken: als de afbeelding enkel "bij" een bepaalde paragraaf hoort is het net wél beter om je afbeelding "in" de paragraaf te zetten. Kwestie van semantisch te blijven.
Nu we toch tips aan't geven zijn: waarom geen strict doctype? Je gebruikt nu transitional, da's voor niets goed, gezien je code perfect strict-compatible is
.
no votes
-
04-06-2007, 18:07 #12Approved 9-lifer
- Registered
- 14/12/05
- Location
- Dilbeek
- Posts
- 10,473
- iTrader
- 20 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/40
no votes
-
04-06-2007, 18:16 #13Member
- Registered
- 22/01/04
- Location
- Deerlijk
- Posts
- 401
- iTrader
- 6 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
nee, deze
HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">no votes
-
04-06-2007, 20:11 #14Approved 9-lifer
- Registered
- 14/12/05
- Location
- Dilbeek
- Posts
- 10,473
- iTrader
- 20 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/40
no votes
-
04-06-2007, 20:23 #15
Omdat je met strict soms wel heel gelimiteerd bent op vlak van html. Voor moderne browsers is dit geen probleem en kan je gewoon werken met css. Maar als er ook de eis is om oudere browsers te ondersteunen kan je praktisch niet anders dan xhtml transitional te gebruiken.
no votes


