Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

margin-top werkt niet

gwbonline
7 antwoorden
  • 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?
  • 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
  • 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 hier

    terecht.
  • 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.
  • 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
  • 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.
  • Dan kun je in plaats van met margin-top werken met margin-bottom.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.