Afbeelding geforceerd onder in kader/box
Ik wil een afbeelding in de rechteronderhoek van een box/border plaatsen.
Rechts uitlijnen lukt me wel met onderstaande code.
Wat moet ik hier aan toevoegen om de afbeelding onderin de box/border te krijgen?
Code (php)
1
2
3
4
2
3
4
.afbeeldingrechts {
float: right;
margin-right: 0px;
}
float: right;
margin-right: 0px;
}
Kijk voor het voorbeeld op http://nieuwesite.genealogie-ermelo.nl/index.php
George van Baasbank
Gewijzigd op 31/12/2012 16:46:12 door George van Baasbank
top: -700px (als de afbeelding 700 px groodt is)
posision: relative
De code is niet helemaal bruikbaar maar ik heb wel een oplossing gevonden. Ik weet echter niet of deze afdoende is. Het kan n.l. voorkomen dat het kader waarin e.e.a. geplaatst is, variabvel in hoogte is door afwisselende content.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
.afbeeldingrechts {
float: right;
margin-right: 0px;
top: 100%;
top: 535px;
position: relative;
}
float: right;
margin-right: 0px;
top: 100%;
top: 535px;
position: relative;
}
George
Gewijzigd op 31/12/2012 17:03:18 door George van Baasbank
Waarom zet je een image in een <p> en dan ga je ook nog de <p> positioneren ipv de image zelf. Dat lijkt me niet correct. Het zit allemaal nogal hokkie-tokkie in elkaar. Je groene cirkel staat ook nog eens hoger dan de paarse!!
Quick fix... (maar eigenlijk moet je dit dus beter organiseren / structureren)
Code (php)
1
2
3
4
5
2
3
4
5
.afbeeldingrechts {
bottom: 60px;
position: absolute;
right: 10px;
}
bottom: 60px;
position: absolute;
right: 10px;
}
p.s. laat je even weten of het gelukt is?
Gewijzigd op 31/12/2012 17:32:05 door Ozzie PHP
Bedankt voor je suggesties. Ik heb je adviezen overgenomen.
Je code voor de afbeelding rechts werkt en deze heb ik dus ook toegepast voor de afbeelding links.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
.afbeeldingrechts {
bottom: 55px;
position: absolute;
right: 25px;
}
.afbeeldinglinks {
height: 200px;
bottom: 55px;
position: absolute;
left: 25px;
}
bottom: 55px;
position: absolute;
right: 25px;
}
.afbeeldinglinks {
height: 200px;
bottom: 55px;
position: absolute;
left: 25px;
}
Nu staan beide afbeelding op dezelfde wijze uitgelijnd.
De <height> in de afbeeldinglinks heb ik toegevoegd om ruimte te krijgen onder de ingevoegde code van een andere website.
George