[css] hoe <img> op de "bottom" plaatsen binnen een - Softwareontwikkeling

donderdag 28 februari 2008 22:48

Acties:

huh ?

Topicstarter

Ik probeer met css begeleidende plaatjes <img> in een paragraaf-tag te plaatsen. Uiterst links of recht gaat prima m.b.v. float:left; of float:right maar zodra ik vertical-align:bottom; of vertical-align:text-bottom; daar aan toevoeg blijft het plaatje helemaal boven aan de paragraaf-tag staan:

Kan het uberhaupt? De is geplaats in een groter geheel binnen een aantal andere div die deel uitmaken van een css-layout. Heb het nodige al opgezocht en text-bottom of bottom zou toch echt moeten werken

doctype die ik gebruik:

code:

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

stukje van de html

HTML:

<p><img class="imgLeft" src="./thumbs/1116873209.jpg" />Donec tincidunt. <a href="#">Mauris et nisi</a>. Pellentesque quis metus tincidunt neque 
ullamcorper aliquet. Vestibulum urna pede, commodo ac, consequat id, suscipit 
et, magna. Praesent ullamcorper diam non orci. Mauris adipiscing vestibulum 
tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
    ridiculus mus. In fermentum scelerisque dui. Cras ut velit a urna posuere 
    faucibus. In tincidunt, nisi non interdum congue, orci odio tempus pede, ut 
    convallis enim felis sed pede. Donec aliquet.
</p>
<p><img class="imgRight" src="./thumbs/1163528561.jpg" />Aenean in orci quis tortor tristique placerat. Suspendisse varius aliquam dui. 
    Proin rhoncus, nisl sit amet rutrum tristique, est pede porta felis, quis 
    volutpat diam leo a mauris. <a href="#">Curabitur consectetuer</a>, lacus vitae egestas mattis, 
    lectus massa consectetuer orci, ut vehicula orci sem id mauris. Nulla at sem. 
    Aliquam a nulla id justo euismod vulputate. <a href="#">Aliquam enim odio</a>, dictum vel, 
    pulvinar lacinia, tincidunt at, nunc. Etiam porta. In ullamcorper. Nullam 
    molestie dolor et sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing 
    elit. Integer sed nisl in nunc sodales congue. Phasellus gravida velit ac orci. 
    Nam erat. Cras eu risus consectetuer quam accumsan blandit.
</p>

stukje can de css

Cascading Stylesheet:

p img.imgLeft
{
float:left;
}

p img.imgRight
{
float:right;
vertical-align:bottom;
}

[ Voor 6% gewijzigd door shades op 28-02-2008 22:49 ]

https://k1600gt.nl

donderdag 28 februari 2008 23:04

Acties:

Bosmonster

*zucht*

Vertical-align geeft de alignment in de flow aan ten opzichte van andere elementen in die flow. Het zet een element niet ineens onderaan in een ander element. Niet zoals een float een element uit de normale flow haalt.

Ik snap nog niet helemaal wat je nu wilt bereiken. Als je iets onderaan wilt lijnen kun je binnen een relatief of absoluut element bottom:0 gebruiken.

vrijdag 29 februari 2008 06:04

Acties:

f.v.b

Zodra je het plaatje absoluut positioneert dan loopt de tekst er niet meer om heen. Wat TS graag wil is:


Donec tincidunt. Mauris et nisi Pellentesque quis metus tincidunt neque
ullamcorper aliquet. Vestibulum urna pede, commodo ac, consequat id, suscipit
XXXXXXXXXX et, magna. Praesent ullamcorper diam non orci. Mauris adipiscing
XXXXXXXXXX vestibulum tellus. Cum sociis natoque penatibus et magnis dis
XXXXXXXXXX montes, nascetur ridiculus mus. In fermentum scelerisque dui. Cras
XXXXXXXXXX velit a urna posuere faucibus. In tincidunt, nisi non interdum congue,
XXXXXXXXXX odio tempus pede, ut convallis enim felis sed pede. Donec aliquet.


Ik geloof niet dat het met HTML mogelijk is. Ik heb het in ieder geval niet vaak gezien. Volgens mij kan het alleen maar door de afbeelding handmatig op de juiste plek in de tekst te plaatsen zodat je het gewenste effect krijgt. Wat natuurlijk ook weer direct kapot gaat zodra iemand zijn letter grootte wijzigt, of een andere browser gebruikt.

Don't erase all files?
[Yes] [No]

vrijdag 29 februari 2008 06:21

Acties:

ThemNuts

Is te doen maar niet perfect zoals f.v.b al zij.

code:

.productl {
width:500px;
height:120px;
margin-top:15px;
margin-bottom:20px;
font-weight:normal;
}

.productr {
width:500px;
height:120px;
margin-top:15px;
margin-bottom:20px;
text-align:left;
font-weight:normal;
}

.squarel {
margin-top:0px;
margin-bottom:10px;
margin-right:15px;
background-color:#666666;
height:68px;
width:68px;
border-color:#333333;
border-style:solid;
border-width:1px;
float:left;
}

.squarer {
margin-top:0px;
margin-bottom:10px;
margin-left:15px;
background-color:#666666;
height:68px;
width:68px;
border-color:#333333;
border-style:solid;
border-width:1px;
float:right;
}

productl en productr (of wat je ze ook wil noemen) zijn de <div>'s voor de tekst + foto
squarel en squarer zijn de div's voor de foto zelf.
speel wat met de marges en je verkrijgt wat jij wil.

De tekst zal verschillend zijn van grote naargelang browser en OS maar dit kan je oplossen door dit toe te voegen

code:

1
2
3

font-size:16px;
font-size-adjust: 0.45;
font-weight:normal;

opnieuw met de waarden die jij wil.
font-size-adjust: zal alle fonts dezelfde verhouding meegeven.

en dit is dan de html

code:

<div class="productl">
<div class="squarel">
<img src="taart.jpg" />
</div>
text komt hier, wil je de img bovenaan, plaats de text boven de img div om het beneden te krijgen</div>

Zoals gezegt, niet perfect maar het helpt je misschien opweg.

[ Voor 10% gewijzigd door ThemNuts op 29-02-2008 06:25 . Reden: html ook maar toegevoegd ]

vrijdag 29 februari 2008 09:31

Acties:

shades

huh ?

Topicstarter

f.v.b schreef op vrijdag 29 februari 2008 @ 06:04:
Zodra je het plaatje absoluut positioneert dan loopt de tekst er niet meer om heen. Wat TS graag wil is:


Donec tincidunt. Mauris et nisi Pellentesque quis metus tincidunt neque
ullamcorper aliquet. Vestibulum urna pede, commodo ac, consequat id, suscipit
XXXXXXXXXX et, magna. Praesent ullamcorper diam non orci. Mauris adipiscing
XXXXXXXXXX vestibulum tellus. Cum sociis natoque penatibus et magnis dis
XXXXXXXXXX montes, nascetur ridiculus mus. In fermentum scelerisque dui. Cras
XXXXXXXXXX velit a urna posuere faucibus. In tincidunt, nisi non interdum congue,
XXXXXXXXXX odio tempus pede, ut convallis enim felis sed pede. Donec aliquet.


Ik geloof niet dat het met HTML mogelijk is. Ik heb het in ieder geval niet vaak gezien. Volgens mij kan het alleen maar door de afbeelding handmatig op de juiste plek in de tekst te plaatsen zodat je het gewenste effect krijgt. Wat natuurlijk ook weer direct kapot gaat zodra iemand zijn letter grootte wijzigt, of een andere browser gebruikt.

Yup, das precies wat ik wil (of juist rechts onder). En ik heb het ook nog nooit gezien nu je het zegt...

@ThemNuts: is wel erg veel css maar ik ga het proberen (heb nu niet zoveel tijd) - ik heb bottom0:px ook geprobeert maar dat werkt niet. In combinatie met position:absolute wordt ie echt onder aan de pagina gezet en niet onder aan de

[ Voor 11% gewijzigd door shades op 29-02-2008 09:34 ]

https://k1600gt.nl

vrijdag 29 februari 2008 10:37

Acties:

f.v.b

shades schreef op vrijdag 29 februari 2008 @ 09:31:
ik heb bottom0:px ook geprobeert maar dat werkt niet. In combinatie met position:absolute wordt ie echt onder aan de pagina gezet en niet onder aan de

Dat is op te lossen door een position: relative op de omhullende te zetten. Maar zodra je dat doet, gaat de tekst achter/over de afbeelding door- cq heenlopen.

Don't erase all files?
[Yes] [No]

vrijdag 29 februari 2008 18:47

Acties:

shades

huh ?

Topicstarter

f.v.b schreef op vrijdag 29 februari 2008 @ 10:37:
[...]

Dat is op te lossen door een position: relative op de omhullende te zetten. Maar zodra je dat doet, gaat de tekst achter/over de afbeelding door- cq heenlopen.

Daar was ik ook al achter ja - heel jammer wel..

https://k1600gt.nl

vrijdag 29 februari 2008 22:06

Acties:

ThemNuts

De gegeven code werkt prima, zie niet in wat het probleem is aan 'veel' code.
Je zal echter wel je html moeten aanpassen. Geef de img een aparte <div> binnenin de text-div en je kan hem zetten waar je wil.

[css] hoe <img> op de "bottom" plaatsen binnen een <p>