[HTML] Plaatjes op website - positie

[Solid Seal]

Hallo,
Ik ben bezig met een website (je mag kijken, maar niet lachen ) maar ik wil daar wat plaatjes in hebben...

Nu weet ik wel hoe ik er een plaatje in krijg plus ook de resolutie van het plaatje... maar nu wil ik wel eens weten of ik ook een locatie van het plaatje kan aangeven?

Bijv: ik wil een plaatje van 100 * 100 ergens rechtsonder van een pagina... hoe doe ik dat in HTML? dus de positie v/h plaatje....

Alvast bedankt

/me Solid Seal is best wel heel erg HTML-nOOb

[rickmans]

Aan je HTML kennis licht het niet, meer aan je CSS kennis dit kan je doen door middel van CSS.

Bijvoorbeeld:

code:

/*CSS is dit dus*/
#plaatje
{
position:absolute;
top: 392px;
left: 252px;
}

En dan dit bij je plaatje

code:

<div id="plaatje">[img]"url"></div[/img]

Hierdoor komt je plaatje 392px van de bovenkant en 252 px van links te staan

[Solid Seal]

en kan ik dan ook nog dit toevoegen ? :

<div id="plaatje">[img]"url"[/img]</div>

voor de dimensies van het plaatje..

iig bedankt

[man-o-script]

lijkt me makkelijker om gewoon een tabelletje te gebruiken?

[edie]

Wat ook kan, is in de img-tag je style defninieren:

code:

<img 
 src="url" 
 alt="alt tekst" 
 style="width: 100px; height: 100px; position: absolute; bottom: 10px; right: 10px;">

Deze maakt een img van 100px bij 100px en zet het op 10px van onder en 10px van rechts (van de canvas)

[Solid Seal]

man-o-script schreef op 22 augustus 2002 @ 18:58:
lijkt me makkelijker om gewoon een tabelletje te gebruiken?

Hmm ja..


/me Solid Seals bouw je eigen website-nOObisme wordt steeds groter

Maar met dat CSS werkt het iig

[Solid Seal]

eddie19 schreef op 22 augustus 2002 @ 19:01:
Wat ook kan, is in de img-tag je style defninieren:

code:

<img 
 src="url" 
 alt="alt tekst" 
 style="width: 100px; height: 100px; position: absolute; bottom: 10px; right: 10px;">

Deze maakt een img van 100px bij 100px en zet het op 10px van onder en 10px van rechts (van de canvas)

Oh dus het is dus zo dat als ik de gegevens Bottom : 384px; right: 512px; dat het plaatje dan niet in het midden staat op een schermresolutie van 1024*768?

[Dark Blue]

Met een tabel..stel je maar even een tabel voor in Excel ofzo .. heb je voor alles een eigen hokje. Dus denk je in dat je een site hebt waarop je een loei van een tabel zet, met vier grote hokken.
In het hok linksboven zet je je tekst; in het hok rechtsonder je plaatje. In de overgebleven hokken zet je alleen een spatie neer, zodat de browser niet denkt dat het een leeg hok is en m niet weergeeft...

Wat je ook kunt doen:

code:

#plaatjerechts
{
float: right;
}

En je code:

Teksttekstteksttekst ja en ook heel veel zinnige tekst en natuurlijk tekst Teksttekstteksttekst ja en ook heel veel zinnige tekst en natuurlijk tekst Teksttekstteksttekst ja en ook heel veel zinnige tekst en natuurlijk tekst
<div id="plaatjerechts"><img .. enz.></div>
Hier de tekst waarmee de bovenlijn van het plaatje gelijk moet lopen.
Dit is de tweede regel dus hier zal het plaatje rechts naast staan.

Probeer het maar eens uit. Ik hoop dat je al wel weet hoe en waar je css in moet voegen?

[Dark Blue]

Solid Seal schreef op 22 augustus 2002 @ 19:13:
[...]


Oh dus het is dus zo dat als ik de gegevens Bottom : 384px; right: 512px; dat het plaatje dan niet in het midden staat op een schermresolutie van 1024*768?

Daar heb je hartstikke gelijk in, daarom is position:absolute eigenlijk alleen handig op plaatsen waar er niet gescrolled zal worden of als de pagina ingeklemd staat tussen andere frames, zodat de afstand van de rand altijd gelijk blijft. Enfin, dat is verder geblaat.

Probeer dat eens met mijn css zou ik zeggen.
Maar ik waarschuw je wel; als je telkens onderaan de pagina wat schrijft, zul je het regeltje met die <div> telkens naar onderen moeten blijven plaatsen tot boven de regel waar het plaatje in de pagina naast zal moeten komen te staan.

[edie]

Solid Seal schreef op 22 augustus 2002 @ 19:13:
[...]


Oh dus het is dus zo dat als ik de gegevens Bottom : 384px; right: 512px; dat het plaatje dan niet in het midden staat op een schermresolutie van 1024*768?

Niet helemaal.
bottom: 384px betekend 384 pixels van de onderkant van het plaatjes tot de onderkant van het scherm (tot de onderkant van het block waar hij inzit (containing block), als hij relatief gepositioneerd is (bron)).

Omdat het plaatje 100px hoog is, moet je er 50px vanaf halen.

Het wordt dus:
bottom: 334px;

Hetzelfde geld voor right (en left, en top).

[Solid Seal]

Ah ik snap het nu... ik ga er maar eens mee eXperimenteren... ik wil alleen nog een ding weten.... kan het ook met TEKST??

[Verwijderd]

Het kan ook heel makkelijk met relatieve positionering hoor maar dan werk je weet met de body background:

<style>
body { background: URL(images/achtergrond.jpg) no-repeat 100% 100% }
</style>

Gaat ook heel goed

Maar het hangt er helemaal af hoe je site opgebouwd is en bla bla bla

[Verwijderd]

Solid Seal schreef op 22 augustus 2002 @ 22:33:
Ah ik snap het nu... ik ga er maar eens mee eXperimenteren... ik wil alleen nog een ding weten.... kan het ook met TEKST??

Ja, moet je ff die code gebruiken die ze gaven met de DIV tags en de CSS code daarvoor. Plaatje vervangen door tekst easypeasy
(mijn laatste code werkt dus niet met tekst voor alle duidelijkheid)