Archief - CSS: vertikaal uitlijnen

Hallo,

Ik heb een probleempje met het vertikaal uitlijnen van afbeeldingen in mijn div.
De tekst uitlijnen is mij al gelukt door als extra een line-height in te stellen. Maar de afbeeldingen willen niet meewerken. Zijn blijven in de hoek plakken.

De site in kwestie: http://tycarine.be/test/
Rechts bovenaan (taalselectie) doet het probleem zich voor.

Een ander probleem is dat de foto's enkel in IE mooi rechts van de tekst gaan staan. In alle andere browsers staan ze onder de tekst. Heb het al proberen oplossen, maar dan werkt het niet meer in IE...

Hoop dat iemand mij kan helpen.

voor uw foto'kes


voor uw foto's is hoogstwaarschijnlijk uw tekstblok te groot, waardoor je fotoblok er gewoon niet naast kán staan. Op te lossen door er bvb 20px vanaf te knabbelen.

Als ik die margin-top gebruik, dan gaat de tekst ook lager staan. Als ik die dan weer wil corrigeren met padding of iets dergelijks, dan gaat de afbeelding terug omhoog.
De onderkant van de tekst blijft gelijk staan met de onderkant van de afbeelding. Normaal zou vertical-align dit toch moetn verhelpen.

Door de breedte te veranderen is het inderdaad opgelost. Blijkbaar is IE wel logisch in het begrijpen van de CSS . Als ik 700 breed kies, en padding rondom van 10. Dan is het hok effectief 700 breed en het tekstgedeelte 680 breed. FF (en andere) maken het tekstgedeelte 700 breed, en dan nog eens padding er rond dus 720 breed. Beetje verwarrend. Hetgeen FF doet is toch juist margin en niet padding.

Het afsnijden van de tekst komt omdat uw div#language vast ingesteld staat op height: 20px;
Dit kan je gewoon weghalen als je wil

Het is niet dat de tekst wordt afgesneden, maar ze beweegt ook naar beneden. Het is de uitlijning van de tekst ten opzichte van de afbeeldingen die moet veranderen. Dat geraakt niet opgelost met margin of padding.

je kan natuurlijk altijd u vlaggetjes in een div steken en die dan gaan positioneren.

Da zal waarschijnlijk het gemakkelijkst zijn.

Het probleem met die foto's krijg ik wel niet opgelost. Want als ik de kader smaller maak, dan werkt het in FF, maar is hij te smal in IE.

euhmm, ik heb het eens getest in IE en FF2.0/3.0b en bij alledrie is het bovenaanrechts volledig inorde,.. of is het probleem al opgelost

Hier is het nog steeds hetzelfde. Heb trouwens nog niks veranderd aan de online versie. Mss vindt jij het op deze manier wel mooi, maar is het niet mijn bedoeling

Soundstorm zei:

Door de breedte te veranderen is het inderdaad opgelost. Blijkbaar is IE wel logisch in het begrijpen van de CSS . Als ik 700 breed kies, en padding rondom van 10. Dan is het hok effectief 700 breed en het tekstgedeelte 680 breed. FF (en andere) maken het tekstgedeelte 700 breed, en dan nog eens padding er rond dus 720 breed. Beetje verwarrend. Hetgeen FF doet is toch juist margin en niet padding.

Klik om te vergroten...

IE zit hier dus fout. paddin is niet IN het tekstgedeelte, maar is de breedte RONd uw div. DUs niet-IE browsers houden zich aan de regels, en IE verkloot het weer (om het zo te zeggen)

maar als ik het dus goed begrijp, moet de bovenkant van de tekst overeen komen met de foto's?
ik zou het zo doen: plaats nen div rond de foto'kes
en dan style="position:absolute;top:10px;background:url(afbeelding.jpg) no-repeat " (dus 3 verschillende divs telkens, en dan moet je niet met de <img> tag werken, maar moet je gewoon een link op die div zetten)
en dan rond uwen tekst en de foto's enne algemenen div plaatsen (die is er al) maar maakt diene dan dus iets groter, de height dus. namelijk 10px groter als de momentele width van de afbeelding. En dan zo wat met de top foefeleen tot uw afbeelding daar staat waar ze moet staan

trouwens: gebruik cheat-charts die zijn vreed handig voor het correct maken ven je css en html
http://www.ilovejackdaniels.com/cheat-sheets/
en dan de css en de html voor jou.
In de css is er een mooie afbeelding waarin je goed kunt zien hoe het zit met padding, margin e.d

ng veel geluk en ik hoop dat ik hiermee iets heb kunnen helpen

Bon, ik had het dus omgekeerd, padding vs margin. Normaal zal ik het dan wel in orde krijgen al ik marging gebruik.

De tekst en de foto's hoeven totaal niet op elkaar uitgelijnd te worden, dat is enkel bovenaan bij die vlagjes. Enige waarom ik daar wat padding/marging gebruik is omdat de tekst dan niet tegen de randen plakt.

Die foto's zitten telkens in een div die de blauwe achtergrond en kader bevat. Zit php scriptje in die er voor zorgt dat ik snel kaan aanpassen hoe veel foto's er moeten staan. Foto's zelf worden random gekozen.
In FF staan die idd nog niet mooi, maar dat zal ook het padding vs margin probleem zijn.

De vlagjes zijn nu in orde. Maar kan het niet online zetten omdat ik het wachtwoord niet van buiten weet

Is het normaal dat FF een lege div niet weergeeft? Dus een div die geopend wordt, een spatie en div sluiten.