Archief - HTML: Tekst Rond Afbeeldingen

TiZon · 3 jun 2007

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:

HTML:

<!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 &#8220;Onze Aarde, Onze Toekomst&#8221;. De onderliggende gedachte is simpel: wij delen de planeet, dus zijn wij ook medeverantwoordelijk voor de bescherming en het behoud ervan.</p>
	</body>
</html>

Dit is het resultaat.

Vroeger gebruikte ik dan altijd een table voor, maar volgens mij kan dat beter

Thx,
Bart

BloodSeaker · 3 jun 2007

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>

TiZon · 3 jun 2007

HTML:

<!-- STYLE: Float: left of Float: right -->

Dat is toch comment... dat kan toch niet werken...
Als ik het test haalt het toch niets uit...

demon326 · 3 jun 2007

TiZon zei:
HTML:



Dat is toch comment... dat kan toch niet werken...
Als ik het test haalt het toch niets uit...

volgens mij moet ge die in uw css file plaatsen

Xavez · 3 jun 2007

in uw css:

p img {float: left}

TiZon · 3 jun 2007

Xavez zei:
in uw css:

p img {float: left}

geweldig, bedankt!

orez · 3 jun 2007

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, .....

TiZon · 3 jun 2007

orez zei:
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, .....

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:

<!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 &#8220;Onze Aarde, Onze Toekomst&#8221;. 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>

orez · 3 jun 2007

TiZon zei:
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

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..

TiZon · 4 jun 2007

Geweldig!

Werkt perfect!

Thx

Weer veel geleerd vandaag, tijd voor bedje nu

Thx!

Xavez · 4 jun 2007

orez zei:
het is trouwens ook beter om uw img niet in uw p-tag te includen

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

.

TiZon · 4 jun 2007

Deze:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

?

killerbee · 4 jun 2007

nee, deze

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

TiZon · 4 jun 2007

killerbee zei:
nee, deze

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Thx!
Nu is alles al valid, nog juist mijn home valid maken en we zijn er

Thx!

servi · 4 jun 2007

Xavez zei:
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 .

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.

Xavez · 5 jun 2007

servi zei:
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.

Over welke oude browsers heb je het dan precies? Ik heb met mijn strict doctypes nog nooit ergens een probleem gehad

.

orez · 5 jun 2007

Xavez zei:
Over welke oude browsers heb je het dan precies? Ik heb met mijn strict doctypes nog nooit ergens een probleem gehad .

IE 5 vooral
en IE voor Mac

ook de oudere Netscape's hebben er soms last mee

orez · 5 jun 2007

Xavez zei:
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.

Bwa, dat heeft al minder met effectieve semantiek te maken.
Het blijft (imo) zelfs overzichtelijker om zo weinig mogelijk tags te gaan nesten tenzij niet anders mogelijk.

Als je met een CSS disabled browser gaat werken, en uw img werkt niet meer krijg je de alt tekst aan het begin (of ergens in het midden/einde afhankelijk waar ge uw img tag plaatst natuurlijk) van u tekst.

Zet je uw img erbuiten zal de p mooi onder / boven de alt tag staan. En ik persoonlijk vind dat nu net gebruiksvriendelijker als de img tag te gaan includen binnenin de p tag

Xavez · 5 jun 2007

orez zei:
IE 5 vooral
en IE voor Mac

ook de oudere Netscape's hebben er soms last mee

Ik wou het al niet zeggen... Tja, als ik eerlijk mag zijn: iedereen die nog moeite doet om IE5 te ondersteunen doet m.i. verloren moeite. Je moet die dingen afwegen: meegaan met de tijd en je doctype juist definiëren of eeuwig blijven hangen in de verbannen landen van discontinued software. IE5 zit volledig in een dalende trend (de laatste loodjes wegen altijd het zwaarst). Nu nog websites ontwerpen die er compatible mee zijn is dan ook zonder meer absurd te noemen.

Je kan beter met een conditional comment die browser targetten en bovenaan een waarschuwing plaatsen dat de browser van de gebruiker verouderd is en dat de site mogelijk niet goed weergegeven wordt.

Bwa, dat heeft al minder met effectieve semantiek te maken.
Het blijft (imo) zelfs overzichtelijker om zo weinig mogelijk tags te gaan nesten tenzij niet anders mogelijk.

Als je met een CSS disabled browser gaat werken, en uw img werkt niet meer krijg je de alt tekst aan het begin (of ergens in het midden/einde afhankelijk waar ge uw img tag plaatst natuurlijk) van u tekst.

Zet je uw img erbuiten zal de p mooi onder / boven de alt tag staan. En ik persoonlijk vind dat nu net gebruiksvriendelijker als de img tag te gaan includen binnenin de p tag

opgepast: nerd-gehalte behoorlijk hoog
Een inline-afbeelding betekent dat de afbeelding per definitie een semantische waarde heeft. Die moet zo goed mogelijk omschreven worden in de Alt-tag. Als die alt-omschrijving goed is, zal de tekst bij het ontbreken van een afbeelding (of bij het uitlezen door een screenreader) logischer geschikt zijn als hij in de paragraaf staat waar hij ook werkelijk bij hoort.

En als de afbeelding niet bij een paragraaf hoort, dan kan je hem er alsnog buiten zetten

.

V!$u4L · 7 jun 2007

Hey
Ik had een vraag ivm images, maar ik wilde geen infraction riskeren met een nieuwe thread te starten, dus stel ik ze even hier.
Ik heb met fennel DVD manager (Mac) een inventaris gemaakt en die heb ik geëxport in html. Nu, die html met bijhorende gfx map heb ik dan geupload met ftp client Cyberduck.
Alles is perfect zichtbaar op mn webspace, maar enkel in Safari en Firefox op m'n Mac. Blijkbaar willen de images niet laden in FF en Internet Explorer in Windows... Hoe komt dat?

De link vind je in m'n sig.

Ik heb dezelfde html en gfx map proberen te uploaden met SmartFTP op de PC, maar zonder resultaat. De afbeeldingen laden vreemd genoeg wel gewoon op m'n harde schijf, zowel op PC als Mac.

Archief - HTML: Tekst Rond Afbeeldingen

TiZon

Legacy Member

BloodSeaker

Legacy Member

TiZon

Legacy Member

demon326

Legacy Member

Xavez

Legacy Member

TiZon

Legacy Member

orez

Legacy Member

TiZon

Legacy Member

orez

Legacy Member

TiZon

Legacy Member

Xavez

Legacy Member

TiZon

Legacy Member

killerbee

Legacy Member

TiZon

Legacy Member

servi

Legacy Member

Xavez

Legacy Member

orez

Legacy Member

orez

Legacy Member

Xavez

Legacy Member

V!$u4L

Legacy Member