[html] Text om een afbeelding heen

[Verwijderd]

Ik probeer netjes de tekst om een afbeelding heen te krijgen, maar met een tabel wil dat niet natuurlijk niet lukken. Wellicht dat dit met CSS kan ofzo? Zie afbeelding voor wat ik wil...

Bovenin is de huidige situatie, onderin is wat ik zou willen.



Heb de search en google al omgespit maar kan niet vinden wat ik zoek omdat ik niet weet waar ik precies naar moet zoeken... ai... hoe noem je zo iets.

[Verwijderd]

CSS:
float:left;

[Edmund]

In de IMG-tag -> ALIGN="left"

[BtM909]

Edmund schreef op 25 juni 2004 @ 13:14:
In de IMG-tag -> ALIGN="left"

En toch is het beter om het met css op te lossen.

[Edmund]

BtM909 schreef op 25 juni 2004 @ 13:17:
[...]

En toch is het beter om het met css op te lossen.

CSS is inderdaad beter. Dan hoef je bij verder afbeeldingen er niet meer na om te kijken. Ik gaf slechts een extra oplossing voor het probleem.

[Bosmonster]

BtM909 schreef op 25 juni 2004 @ 13:17:
[...]

En toch is het beter om het met css op te lossen.

Hangt er vanaf welke HTML standaard TS aan wil houden.

Oude html is niet per definitie fout natuurlijk

[ Voor 12% gewijzigd door Bosmonster op 25-06-2004 13:46 ]

[Verwijderd]

Edmund schreef op 25 juni 2004 @ 13:14:
In de IMG-tag -> ALIGN="left"

Dit werkt perfect... ga later nog wel een keer uitzoeken hoe css werkt.

[Johnny]

Verwijderd schreef op 25 juni 2004 @ 13:53:
[...]


Dit werkt perfect... ga later nog wel een keer uitzoeken hoe css werkt.

Zo werkt CSS:

code:

[img]"plaatje.jpg"[/img]

In dit voorbeeld heeft het nog geen voordeel boven algin=, maar als je allerlei andere leuke dingen wilt doen kan dat ook makkelijk:

code:

[img]"plaatje.jpg"[/img]

En als je dan meerdere plaatjes dezelfde opmaak wilt geven:

code:

<style type="text/css">

img.mijnPlaatje {
 float: left;
 border: #aaf solid 4px;
 margin: 2px;
}

</style>

[img]"plaatje1.jpg"[/img]
[img]"plaatje2.jpg"[/img]
[img]"plaatje3.jpg"[/img]
[img]"plaatje4.jpg"[/img]

[ Voor 17% gewijzigd door Johnny op 25-06-2004 18:32 ]

[Verwijderd]

Oude html is niet per definitie fout natuurlijk

Hmm, dit vraagt bijna om een flame

[Verwijderd]

Johnny schreef op 25 juni 2004 @ 18:32:
[...]

class="mijnPlaatje"

dat is niet het idee achter css, een classname "mijnPlaatje" beschrijft ook niet de functie van het plaatje, dus op deze manier leg je de opmaak van je document toch weer vast in je html, namelijk via die class

Probeer daarom gebruik van classes zoveel mogelijk te vermijden, zeg bijvoorbeeld gewoon dat alle img in een p float left moeten hebben ofzo.

Een class moet je zien als toevoeging op de elementnaam, je beschrijft welke functie iets heeft

jij en ik en m'n moeder zijn beiden element mens, we hebben allemaal ons eigen id (onze naam) en jou en mij class is webdevver, die van m'n moeder echter niet.

[Verwijderd]

mophor +1

[Johnny]

Verwijderd schreef op 25 juni 2004 @ 19:15:
[...]

dat is niet het idee achter css, een classname "mijnPlaatje" beschrijft ook niet de functie van het plaatje, dus op deze manier leg je de opmaak van je document toch weer vast in je html, namelijk via die class

Probeer daarom gebruik van classes zoveel mogelijk te vermijden, zeg bijvoorbeeld gewoon dat alle img in een p float left moeten hebben ofzo.

Een class moet je zien als toevoeging op de elementnaam, je beschrijft welke functie iets heeft

jij en ik en m'n moeder zijn beiden element mens, we hebben allemaal ons eigen id (onze naam) en jou en mij class is webdevver, die van m'n moeder echter niet.

Ik dacht nog: "laat ik hem niet 'blauweRand' noemen, anders krijgen we dat gezeik weer dat het geen goede naam voor een class is."

En omdat ik niet weet welke functie de afbeelding in deze context heeft kan ik moeilijk een betere naam verzinnen, en als dan blijkt dat er meerdere afneeldingen in dezelfde alinea komen te staan en de TS gaat dat proberen en raakt gefrustreerd omdat al zijn afbeeldingen naar links gaan en zal zal hij CSS weer helemaal laten vallen.

[flashin]

Johnny +1

Idd, hij weet niet wat voor functie die afbeelding heeft op zijn pagina. Maar hoe zou jij hem dan noemen? imgLeft oid?

[Verwijderd]

Idd, hij weet niet wat voor functie die afbeelding heeft op zijn pagina. Maar hoe zou jij hem dan noemen? imgLeft oid?

Jij hebt het dus niet begrepen .

In geval van voorbeelden is er een soort semi-geaccepteerde standaard om dingen als 'foo', 'quuc' of 'bar' te gebruiken. NL varianten zouden 'blaat' of 'test' kunnen zijn.

[Verwijderd]

Je hebt natuurlijk gelijk mophor, maar niet elk element is uniek te benaderen via generieke (tagname-gebaseerde) CSS. Zeker niet als je ook probeert IE-compatible te zijn.

Cascading Stylesheet:

Dit zou leuk zijn:
p:first-child img:first-child { float:left; }
of
h1+p img:first-child { float:left; }

Maar in helaas ontkom je meestal niet aan dit soort constructies:
p.Intro img.Illustratie { float:left; }

[flame-bait]
Overigens is het een leuk idee, dat totaal scheiden van data en opmaak, zover scheiden zelfs dat een className die opmaak suggereert niet zou mogen...in de praktijk is het soms wel zo handig. Zeker als je met meerdere (wat minder CSS-savvy) developers aan een project werkt kan het een hoop tijd schelen als onmiddelijk duidelijk is wat een CSS klasse doet.

[ Voor 32% gewijzigd door Verwijderd op 26-06-2004 00:25 ]

[Verwijderd]

Ik zeg ook niet dat het altijd zonder class is op te lossen, zeker niet, dat gaat je alleen lukken met standaard ontwerpen.

Alleen bijna altijd hebben elementen een opmaak met een bepaalde reden, probeer dan de reden ervan weer te geven in een class (class="important") en niet beoogde resultaat ervan (redBorderLeft), wellicht heb je over een week liever een groen ontwerp en zit je met je classnames die geen hout meer snijden.

Maar als een element een unieke functie heeft geef hem dan een id en spreek hem zo aan, dat vind ik eigenlijk nog netter dan via een class. (je spreekt iemand ook persoonlijk aan:
"wil Blues aan de linkerkant gaan staan"
als het om een specifiek iemand gaat; met een class is het
"willen alle webdevvers aan de linkerkant gaan staan en een rode pet opzetten"
en niet
"willen zij die aan de linkerkant staan en een rode pet ophebben aan de linker kant gaan staan en een rode pet opzetten")

sommige ul's fungeren als menu en hebben een compleet andere opmaak als gewone lijsten. Doe dan niet class="menu", maar id="mainmenu" ofzo.

als je met meerdere devvers werkt vind ik het juist handig om "correcte" namen te gebruiken, dan kan de een leuk door met HTML kloppen en iemand anders maakt de stylesheet er bij. En dan hoor je niet dat hgalver wegen alle class="redborder" eigenlijk toch maar vervangen moet worden door class="blueborder"

Ergens een (actuele) lijst ophangen met wat de classes doen is dan handig. Ik maak vaak (of laat maken) een dummypagina met wat lorem ipsum waar je dan alle classes in zet. Als iemand iets toevoegt aan de styles, dan zorgt ie dat die dummypagina dat ook laat zien. Print een screenshot van het ding uit op a1: werkt perfect (als je in dezelfde kamer zit )

[ Voor 27% gewijzigd door Verwijderd op 26-06-2004 10:00 ]

[Dr_Frickin_Evil]

Wat een gezeik zeg. Het punt is toch wel duidelijk? Waarom wil iedereen hier altijd laten weten dat ie het beter snapt als een ander?

[Verwijderd]

http://www.handleidinghtm...ingen/afbeeldingen05.html

[Verwijderd]

Wat een gezeik zeg. Het punt is toch wel duidelijk? Waarom wil iedereen hier altijd laten weten dat ie het beter snapt als een ander?

Waarom niet? Je hoeft het niet te lezen.

[Verwijderd]

Ik zeg ook niet dat ik alles beter weet (dan zou ik heel wat meer moeten verdienen ) ik probeer gewoon wat ik weet te delen en te laten toetsen door anderen. Zo heb ik regelmatig dat iemand zegt "klopt geen zak van wat je zegt" daar leer ik weer wat van en de hele community ook.

En inderdaad: je hoeft het niet te lezen, maar voor een ander kan het bijzonder nuttig en interessant zijn.

(overigens zal het mij een worst zijn als classnamen rood groen of geel zijn, het werkt in alle browsers, is netjes volgens de specs en er zullen daardoor ook nooit problemen optreden in welke browser dan ook; Ik heb alleen gemerkt dat als je zelf bezig bent (in een team of alleen) dat het bijzonder nuttig is om de class de (extra) functie van een element te laten beschrijven in plaats van het resultaat van de CSS. En toevallig blijkt dan dat het in eerste instantie ook nog zo bedoelt was)

Veel van wat ik hier zeg heb ik zelf hier geleerd of op andere plekken waar webdevvers samen komen (werk, GoTmeeting , kroeg). De visies en analogien van anderen zijn voor mij bijzonder verhelderend en insprirerend. Nu verbeter ik Blues misschien een beetje (en ik weet zeker dat ie dat waardeert), maar de volgende keer leer ik weer net zoveel van hem.

ZO heb ik m'n baas vorige week nog een ochtend les gegeven over gebruik van scope, axis, headers attributen in tabellen (en ik vermoed dat veel mensen hier ook nooit van deze attributen hebben gehoord, laat staan ze gebruikt)

[ Voor 27% gewijzigd door Verwijderd op 26-06-2004 14:10 ]

[Verwijderd]

Dr_Frickin_Evil schreef op 26 juni 2004 @ 10:22:
Wat een gezeik zeg. Het punt is toch wel duidelijk? Waarom wil iedereen hier altijd laten weten dat ie het beter snapt als een ander?

Dat is de reden waarom GoT/13 zo'n waardevol forum is. Er komen hier mensen die nationaal (en soms zelfs internationaal) experts zijn op hun deel van dit vakgebied (WebDevelopment) en niet bang zijn om te laten merken dat ze het (soms) beter weten. De vragen die hier worden gesteld eisen zelden het uiterste van deze mensen. Het zijn de discussies die deze vragen uitlokken die het hier zo interessant maken.

Verwijderd schreef op 26 juni 2004 @ 09:56:
Alleen bijna altijd hebben elementen een opmaak met een bepaalde reden, probeer dan de reden ervan weer te geven in een class (class="important") en niet beoogde resultaat ervan (redBorderLeft), wellicht heb je over een week liever een groen ontwerp en zit je met je classnames die geen hout meer snijden.

Een goed principe, absoluut. Maar ik heb dit in mijn (professionele) carriere volgens mij nog nooit meegemaakt. Wat ik wél heb meegemaakt (voornamelijk als ik bij klanten aan 't werk ben) is dat ik classNames gebruik die meer semantisch beschrijven wat het is (<p class="intro">) en dat mij later wordt gevraagd in waar nou wordt geregeld dat de eerste paragraaf 14px is i.p.v. 11.

Ik moet wel toegeven dat ik zowel voor mezelf als voor m'n collega's er een hogere standaard op na hou.

[Verwijderd]

ZO heb ik m'n baas vorige week nog een ochtend les gegeven over gebruik van scope, axis, headers attributen in tabellen (en ik vermoed dat veel mensen hier ook nooit van deze attributen hebben gehoord, laat staan ze gebruikt)

Tabellen zijn geweldig :-)

http://www.meyerweb.com/e.../06/26/structural-naming/
http://annevankesteren.nl/archives/href/2004/06#link-473

[hannos]

Dr_Frickin_Evil schreef op 26 juni 2004 @ 10:22:
Wat een gezeik zeg. Het punt is toch wel duidelijk? Waarom wil iedereen hier altijd laten weten dat ie het beter snapt als een ander?

/offtopic
beter snapt _dan_ een ander

Zelf gebruik ik vaak twee id's #left en #right die ik dan als volgt definieer:

code:

#left {
   float : left;
}

#right {
   float : right;
}

Vind het zelf erg overzichtelijk en het werkt prima (<img id="left" ... />).

[ Voor 4% gewijzigd door hannos op 27-06-2004 00:22 ]

[Verwijderd]

Op mijn persoonlijke website gaf slechts een "float: left" niet echt een gewenst resultaat (met name in Internet Explorer en Netscape Navigator) wanneer ik hetzelfde wilde als de TS, vandaar dat ik het als volgt heb opgelost:

code:

    div.opmaak_plaatje_links {
        width: 546px;
        min-height: 115px;
        margin: 12px 12px 12px 0;
        padding: 0;
        }

    div.opmaak_plaatje_links div { margin: 10px }

    div.opmaak_plaatje_links img {
        float: left;
        margin-right: 16px;
        margin-bottom: 12px;
        }

En dan een voorbeeldje van de HTML:

code:

<div class="opmaak_plaatje_links">

[img]"plaatje.png"[/img]

Hier komt de tekst naast het plaatje.

<div></div>

Paragraaf 2.

</div>

Rottig hierbij is alleen dat je nu geen <p> tags kunt gebruiken in IE, want dan wordt het hele zaakje alsnog onder het plaatje gezet. Vandaar die (halfgare) oplossing van een divje om ruimte tussen de paragrafen te creeëren. Trash het maar helemaal (dit is symantisch natuurlijk verre van correct), het werkt gelukkig wel (crossbrowser).

Voordat ik het verwijt krijg dat mijn classnaam niet verstandig is, op mijn eigen website hebben ze de naam "d_index", om aan te geven dat deze de opmaak bevatten voor de index op een van de index-pagina's binnen mijn digital sectie. "opmaak_plaatje_links" heb ik slechts even ter illustratie gebruikt. Waarbij ik overigens ook moet zeggen dat ik vind dat mophor een erg goed punt heeft wat betreft het namen van classes.

Edit: H a N N o, in jouw geval kun je beter classes gebruiken van id's. Ik dacht toch dat id's puur bij één element hoorden (een id is uniek), en een class juist ervoor diende om meerdere elementen van eenzelfde opmaak te voorzien (dan behoort een element tot een bepaalde groep met bepaalde kenmerken). Correct me if I'm wrong.

[ Voor 15% gewijzigd door Verwijderd op 27-06-2004 13:40 ]

[Clay]

Rottig hierbij is alleen dat je nu geen <p> tags kunt gebruiken in IE, want dan wordt het hele zaakje alsnog onder het plaatje gezet.

code:

[img]"melp"[/img]

<p>
    Toch echt naast het plaatje
</p>

En ID's moeten idd uniek zijn.

[Verwijderd]

Clay schreef op 27 juni 2004 @ 13:59:
[...]

code:

[img]"melp"[/img]

<p>
    Toch echt naast het plaatje
</p>

En ID's moeten idd uniek zijn.

Bekijk de volgende pagina's (+bron) maar eens in zowel Firefox als IE:

(url verwijderd)

Bij mij positioneert IE (6.02 SP1) de tekst toch echt ónder het plaatje zodra ik een P-tag gebruik.

[ Voor 10% gewijzigd door Verwijderd op 14-04-2021 18:36 ]

[Clay]

dat is waarschijnlijk omdat je de p een width geeft van 540px. dan past het er niet naast nee.

[Verwijderd]

Clay schreef op 27 juni 2004 @ 14:57:
dat is waarschijnlijk omdat je de p een width geeft van 540px. dan past het er niet naast nee.

Verrek, je hebt helemaal gelijk. Die p heeft echter die lengte omdat IE5.x anders de lengte veel te kort maakt. Is op te lossen door weer een P binnen de <div class="d_index"> te definiëren met een kortere lengte, ware het niet dat m'n CSS dan wel een beetje rommelig begint te worden.