[html] Text om een afbeelding heen

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

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

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

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

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

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

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


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

1

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

1

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

Oude html is niet per definitie fout natuurlijk

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

class="mijnPlaatje"

Anoniem: 9542 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.

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

1
2
3
4
5
6
7

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; }

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

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

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?

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

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?

Anoniem: 9542 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.

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)

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?

1
2
3
4
5
6
7

#left {
   float : left;
}

#right {
   float : right;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

    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;
        }

1
2
3
4
5
6
7
8
9
10
11

<div class="opmaak_plaatje_links">

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

Hier komt de tekst naast het plaatje.

<div></div>

Paragraaf 2.

</div>

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

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.

1
2
3
4
5

[img]"melp"[/img]

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

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

code:

1 2 3 4 5

[img]"melp"[/img] <p> Toch echt naast het plaatje </p>

En ID's moeten idd uniek zijn.

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

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.