margin-top werkt niet

[anoniem]

Ik heb een div gemaakt, die ik een margin-top mee wil geven. Maar welke waarde ik ook opgeef (negatief of positief), het heeft geen effect. Een voorbeeld: http://www.nettyvertelt.nl/fabels-van-aesopus Onderaan staat een div met een V. Die wil ik omhoog plaatsen met z-index en een negatieve margin-top, zodat de div in feite achter die erboven komt te staan en de onderkant van de V in lijn is met de laatste regel tekst. Margin-left heeft wel effect, maar margin-top werkt niet. Wat doe ik fout?

[anoniem]

probeer het eens met position:absolute en z-index. Voorbeeldje(waarden kan je zelf aanpassen): [code:1:461abb6647] div #logo{ position:absolute; top:50px; z-index:-1; } [/code:1:461abb6647] Groetjes, Mike

[anoniem]

Je kan ook background-image gebruiken, wat volgens mij beter is. Voorbeeld: [code:1:14320bd3df] #tekst{background-image:url('afbeelding');} [/code:1:14320bd3df] Als je nu je afbeelding wilt verplaatsen: [code:1:14320bd3df] //Zodat het in alle browsers werkt... background-attachment:fixed; //de positie background-position: je positie; [/code:1:14320bd3df] Voor een tutorial over background-position kan je [url=http://www.w3schools.com/css/pr_background-position.asp]hier[/url] terecht.

[anoniem]

Dank voor de suggesties. Ik zal eens proberen of het werkt. Overigens is de V in de div al een achtergrondafbeelding. De div heeft een vaste hoogte, zodat de afbeelding ook te zien is (verder heeft de div geen inhoud). Afgezien of het al dan niet werkt blijf ik benieuwd naar waarom margin-top niet werkt. Normaal gesproken heb ik daar geen problemen mee. Maar nu haalt margin-top niets uit. De div met de V staat in een main div onder twee andere divs die beide een float hebben. Kan dit ermee te maken hebben? Ik maak gebruik van Firebug en die browseruitbreiding laat met kleuren het effect van de margin-top zien. Blauw is de inhoud en geel de marge. Het gekke is dat de marge wel groter wordt (laat gele kleur zien), maar dat de inhoud van de div niet zichtbaar omhoog gaat.

[anoniem]

De DIV is (misschien) te breed en er staat clear:both; waardoor hij altijd onder de floats komt. Ik heb even dit : [code:1:6f618ec343].v { background: url("v.png") no-repeat scroll 0% 0% transparent; width: 220px; height: 272px; border: 1px solid #fff; margin-left: 80px; margin-top: 500px; }[/code:1:6f618ec343]geprobeerd en dat gaat hier goed. Je kunt ook het plaatje als gewone img in de mainlinks DIV zetten. wimb

[anoniem]

Ik heb het ook geprobeerd, maar het heeft niet het effect wat ik bedoel. Ik wil de afbeelding op welke manier dan ook onder het menu hebben en links naast de div met tekst, zodat de onderkant van de V in lijn is met de laatste regel tekst. Daar komt bij dat niet iedere pagina even langs is. Maar waarschijnlijk gaat dit niet lukken. Je zou denken dat de oplossing simpel is. Een afbeelding onder het menu plaatsen en daarna aangeven dat hij aan de bodem van de div 'main' moet plakken. Immers, het einde van de tekst zit logischerwijs ook bij de bodem van de main div.

[anoniem]

Dan kun je in plaats van met margin-top werken met margin-bottom.

[anoniem]

Margin-bottom begrijp ik, maar dat werkt eveneens niet. Ik heb nu iets anders. De .v (div) is nu gewoon 200px breed, heeft een clear: both en een float:left. Het vreemde is dat in dit geval de margin-top:-280px wel werkt. De afbeelding (de div) staat nu achter het menu, maar precies in het gebied van de afbeelding kan ik niet op de links klikken. Alsof .v boven #mainlinks staat, terwijl dat niet zo is: .v heeft een z-index van 2 en de #mainlinks een z-index van 100. EDIT: als .v een z-index van -1 geef, staat de #mainlinks wel bovenaan en werken de links ook. Ik dacht dat z-index als volgt werkt: een lager getal is positioneren onder een element met een hoger getal of geen z-index. Het lijkt erop dat ik nu heb wat ik wil.