CSS margin/padding positioning probleem?

[rikgoodhart]

hoi allemaal,

ik heb de search al gebruikt, maar de gegeven oplossingen hielpen helaas niet.. .
het volgende:

ben een website aan het maken voor firefox en IE. in IE geeft hij een afbeelding iets te hoog aan, en in firefox is het perfect uitgelijnd. hieronder een plaatje van wat ik bedoel:

in mijn xhtml code staat:
<div id="plaatjevanportfolioknophbo">
[img]"../Af/Portfolionavigatie/HBO-werk-selected.jpg"[/img]
</div>

in mijn CSS sheet staat:

#plaatjevanportfolioknophbo
{
display:block;
position:absolute;
top: 169px;
width: 153px;
height: 93px;
float: left;
left: 155px;
visibility: visible;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px
}

verder staat dit er nog in:

body
{
background-color: #414040;
}

img
{
border-style: none;
margin: 0px;
padding 0px;
}

de padding en margin regels van top,bottom,left en right heb ik onder zowel body, img en #plaatjevanportfolioknophbo al geprobeerd, maar dit maakt geen verschil...

wel als ik zeg onder img: _margin: -3px; (dit ziet IE wel en firefox niet, maar dan heeft hij het bovenste gedeelte gewoon weggeknipt, en blijft het onderste gedeelte van het plaatje nog steeds net zo leeg als het was... hij schuift het hele plaatje dus niet naar onderen...

ook heb ik geprobeert deze div (#plaatjevanportfolioknophbo) weer in een andere div te zetten die dan op absolute staat en deze div op relative ...zelfde probleem.


als jullie mij hiermee kunnen helpen zou het mooi zijn! bedankt!

edit: voor mensen die alle code willen zien:
http://members.home.nl/rikgoedhart/stylesheet-portfolio.css
http://members.home.nl/rikgoedhart/portfolio.html

[ Voor 8% gewijzigd door rikgoodhart op 06-02-2006 09:24 ]

[JHS]

Het leest wat makkelijker als je [code][/code] tags toevoegd . Ik zie overigens de plaatjes en dergelijke niet terug in de link die je geeft?

Als ik het goed begrijp: Je positioneert je plaatje nu met `top: 169px;` . Dat blijkt 3 px teweinig te zijn in IE. Dus kan je dan niet met een hack / conditional statement specifiek voor IE `top: 172px;` meegeven?

[Zoefff]

Je plaatjes doen het niet, op deze manier is het een beetje lastig kijken wat er precies fout gaat

Wat me overigens wel opvalt is dat je een grote brei van allemaal div-tags is, die je met CSS deels absoluut positioneert, exacte waarden voor de hoogte / breedte opgeeft, etc. Misschien is het verstandiger om wat meer elementen gewoon in de paginaflow te houden, en wat diverser met het tag-gebruik om te gaan.

position:absolute;
float: left;

Bovenstaande properties op 1 element is natuurlijk een rare combinatie. Met de absolute positionering haal je het element uit de flow, dus kan je het helemaal niet meer laten floaten. float: left; is dan ook volkomen overbodig

[Verwijderd]

Waarom fonts definiëren voor een plaatje ? Die blokken (die je nu individueel allemaal positioneert - absolute) hadden ook in een list gekund ?

Voor die 3px verschil, kan je er nog een display: inline op hangen (ipv block) ?

edit:
en idd zoals zoefff zegt; floating werkt niet meer

volgens mij pak je het veel te moeilijk aan met al dat gepositioneer.

[ Voor 11% gewijzigd door Verwijderd op 06-02-2006 10:27 ]

[rikgoodhart]

Zoefff schreef op maandag 06 februari 2006 @ 10:17:
Je plaatjes doen het niet, op deze manier is het een beetje lastig kijken wat er precies fout gaat

Wat me overigens wel opvalt is dat je een grote brei van allemaal div-tags is, die je met CSS deels absoluut positioneert, exacte waarden voor de hoogte / breedte opgeeft, etc. Misschien is het verstandiger om wat meer elementen gewoon in de paginaflow te houden, en wat diverser met het tag-gebruik om te gaan.

position:absolute;
float: left;

Bovenstaande properties op 1 element is natuurlijk een rare combinatie. Met de absolute positionering haal je het element uit de flow, dus kan je het helemaal niet meer laten floaten. float: left; is dan ook volkomen overbodig

huh? ik ben best nieuw met css eigenlijk maar als ik mijn float left weg haal, zit de afbeelding helemaal links van de pagina...

en inderdaad... een font benoemen bij een plaatje heeft inderdaad weinig nut . heb ik inmiddels weggehaald.

_top:3px; dit deed de trick...dank jullie voor die tip! (was iemand bij die dat zei )

edit:
maargoed.. ik moet het door de CSS validatie halen, en dan zie ik:

Regel: 294 Context : #plaatjevanportfolioknophbo
Eigenschap _top bestaat niet : 173px

iemand dus nog een andere oplossing?

[ Voor 9% gewijzigd door rikgoodhart op 06-02-2006 13:49 ]

[crisp]

Die 3 pixels komt doordat het plaatje op de baseline is uitgelijnt.

Cascading Stylesheet:

#plaatjevanportfolioknophbo img {
  vertical-align: bottom;
}

zou het moeten oplossen en is een stuk netter dan een hack gebruiken waarmee je bovendien alleen het symptoom bestrijdt maar niet de oorzaak.

Verder sluit ik me aan bij Zoefff: gebruik of absolute positioning of floats - beide tegelijk kan niet (of - indien mogelijk - probeer het in de flow te houden). Ik krijg hiervan een beetje het gevoel dat je zelf nog niet precies weet hoe het CSS layout-model in elkaar zit...

[ Voor 35% gewijzigd door crisp op 06-02-2006 14:51 ]

[rikgoodhart]

crisp schreef op maandag 06 februari 2006 @ 14:44:
Die 3 pixels komt doordat het plaatje op de baseline is uitgelijnt.

Cascading Stylesheet:

#plaatjevanportfolioknophbo img {
  vertical-align: bottom;
}

zou het moeten oplossen en is een stuk netter dan een hack gebruiken waarmee je bovendien alleen het symptoom bestrijdt maar niet de oorzaak.

Verder sluit ik me aan bij Zoefff: gebruik of absolute positioning of floats - beide tegelijk kan niet (of - indien mogelijk - probeer het in de flow te houden). Ik krijg hiervan een beetje het gevoel dat je zelf nog niet precies weet hoe het CSS layout-model in elkaar zit...

vertical-align: bottom; heeft geholpen! je hebt inderdaad gelijk dat ik het nog niet allemaal precies snap. dit is dan ook de eerste site die ik gebruik icm het positioneren van afbeeldingen..

wat jullie trouwens telkens zitten te praten over....de flow... ???? wat is dat?

maar als ik het goed begrijp.. relative en absoluut niet doorelkaar gebruiken voor positioneren? want absoluut zorgt er wel voor dat alle afbeeldingen door elkaar springen bij het veranderen van de resolutie. dit heb ik kunnen oplossen door de absolute positionering binnen een relatieve te plaatsen...

mischien kan iemand hier wat meer uitleg over geven?
maar mijn probleem is gelukkig opgelost maar wil hier graag wat meer over horen (sites heb ik al gelezen..maar loste mijn resolutieprob. niet op... )

[Zoefff]

Ik zal een poging doen om het in jip-en-janneke-taal uit te leggen

Normaliter wordt je document gewoon opgebouwd in de volgorde waarin verschillende elementen in de bron staan. Neem bijvoorbeeld het volgende stukje code:

code:

<p>Lorem ipsum dolor sit amet, <strong>consectetuer adipiscing</strong> elit.</p>

<ul>
    <li>Lorem</li>
    <li>Ipsum</li>
</ul>

<p>
    Suspendisse vel eros. Pellentesque dictum odio non nunc aliquet bibendum.

    <img src="lipsum.png" alt="">

    Etiam fermentum lectus ut ligula. Praesent nibh.
</p>

Een paragraafje met een stuk vette tekst erin, een opsomming in een lijst, en nog een paragraaf, met een plaatje erin.

Zonder CSS wordt dit op een standaardmanier gerenderd door een browser. Daarbij zijn de paragrafen en lijst zogenaamde block elementen. Ze worden behandeld als 1 groot blok (ongeacht de inhoud), en in de "flow van het document" onder elkaar geplaatst. De vette tekst in de ene paragraaf, en het plaatje in de andere paragraaf, zijn daarentegen inline elementen. Ze worden daarom in de "flow binnen de paragraaf" op dezelfde regel gezet, en niet zoals een block-element op een nieuwe regel.

Wanneer je een block element het attribuut float:left; meegeeft, dan zal het links van de rest gaan "zweven". Geven we in de voorbeeldcode de lijst float:left; mee, dan zal de paragraaf eronder dus rechts naast de lijst terecht komen.

Als je nu een element absoluut gaat positioneren, haal je het uit de flow van het document. Het wordt niet meer op de hierboven beschreven logische manier gerenderd (in de volgorde van de code), maar op een plek neergezet waarvan jij zegt dat het moet staan. Maak je bijvoorbeeld een stuk CSS als dit,

Cascading Stylesheet:

p img {
    position:absolute;
    top:0;
    left:0;
}

dan zal het plaatje in de 2^e paragraaf helemaal linksbovenin het document terecht komen. Het maakt niet uit waar het plaatje in je code staat, het komt altijd terecht in de linkerbovenhoek. Logischerwijs maakt het dus niet meer uit of je een absoluut gepositioneerd element laat floaten of niet, het staat tóch op de positie x = 0, y = 0.

Het moge duidelijk zijn dat het de voorkeur heeft om zo veel mogelijk elementen binnen de flow van het document te houden, en (dus) zo weinig mogelijk absoluut te positioneren.

edit:

Nog een kleine toevoeging van chem om het nog enigzins te verduidelijken; Als een element absoluut gepositioneerd is, dan neemt het geen ruimte in op de pagina.

[ Voor 4% gewijzigd door Zoefff op 06-02-2006 16:32 ]

[crisp]

Nog een toevoeging: absolute positioning positioneerd ten opzichte van een parent-element met een position-waarde anders dan (de implicit) static, en anders tov het root-element.