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)

Button positioneren met CSS

None
9 antwoorden
  • Ik weet dat het m.b.v. CSS mogelijk is om bijvoorbeeld een button zelf te positioneren (waar dan ook) met de attributen "position:absolute; top:x px; left:x px;" waarbij x px het aantal pixels afstand zijn van bijvoorbeeld de linker- of bovenkant van het scherm.
    Maar is dit ook mogelijk in relatie tot een div waar deze button in zit?
    De situatie is zo:

    <div>
    <input type=button />
    </div>

    Wat ik wil bereiken is dat ik kan bepalen, hoeveel pixels afstand (bijvoorbeeld van links) de button met betrekking tot deze div – dus niet het hele scherm – moet hebben. Dus dat als je bijvoorbeeld <input style="left:5px; top:5px;" type="button"> gebruikt, dat de button dan 5px van de boven- en linkerkant van de div waar hij in zit verwijderd is.

    Hoe kan ik dit doen? (het is vast wel mogelijk :wink: )
    Ik heb al position:relative gebruikt maar dit blijkt het niet te zijn….. ?

    Alvast bedankt!
  • euhm margin?

    dus:

    [code:1:29b07b78cd]
    <div style="width:200px; border: 1px solid red;">
    <p style="margin: 5px 5px 5px 5px;"> blabla blabla blabla blabla blabla blabla blabla blabla blabla bla
    blabla blabla blabla blabla blabla blabla blabla blabla blabla bla
    blabla blabla blabla blabla blabla blabla blabla blabla blabla bla
    blabla blabla blabla blabla blabla blabla blabla blabla blabla bla
    blabla blabla blabla blabla blabla blabla blabla blabla blabla bla </p>
    </div>[/code:1:29b07b78cd]

    en dan gewoon het p element vervangen door je formelier enzovoort.
  • Of je geeft de div de eigenschap [i:2c3956c2ef]position: relative;[/i:2c3956c2ef], wat niets verandert, maar alle geneste elementen van deze div zullen gepositioneerd worden tov de div en niet het scherm.

    - Bas
  • En als alles binnen de div een paar pixels links uit de kant moet, kun je altijd nog kiezen om een padding aan je div te hangen.

    padding-left: 5px;

    of

    padding: 0 0 0 5px;

    Wat jij wil :P
  • [quote:1e92f5d6fa="InZane"]En als alles binnen de div een paar pixels links uit de kant moet, kun je altijd nog kiezen om een padding aan je div te hangen.

    padding-left: 5px;

    of

    padding: 0 0 0 5px;

    Wat jij wil :P[/quote:1e92f5d6fa]
    Maar dat bedoelde ik niet. Ik bedoelde meer dat wat bashamar zegt, dat ik de button overal waar ik wil, in deze div kan plaatsen. Als je position:absolute; left:5px; right:5px; doet, dan verschijnt de button 5 pixels van de linkerkant van het beeld en 5px van de bovenkant van het beeld. Ik wil er dus precies hetzelfde bereiken, maar dan in relatie tot de div, dus niet tot het hele beeld. Helaas werkt dat voorbeeld van bashamar ook niet…

    Iemand nog een idee?
  • [quote:205dbe8a96="carlobernardini"][quote:205dbe8a96="InZane"]En als alles binnen de div een paar pixels links uit de kant moet, kun je altijd nog kiezen om een padding aan je div te hangen.

    padding-left: 5px;

    of

    padding: 0 0 0 5px;

    Wat jij wil :P[/quote:205dbe8a96]
    Maar dat bedoelde ik niet. Ik bedoelde meer dat wat bashamar zegt, dat ik de button overal waar ik wil, in deze div kan plaatsen. Als je position:absolute; left:5px; right:5px; doet, dan verschijnt de button 5 pixels van de linkerkant van het beeld en 5px van de bovenkant van het beeld. Ik wil er dus precies hetzelfde bereiken, maar dan in relatie tot de div, dus niet tot het hele beeld. Helaas werkt dat voorbeeld van bashamar ook niet…

    Iemand nog een idee?[/quote:205dbe8a96]

    Tuurlijk werkt dat voorbeeld van Bas wel.
    Je zit toch niet stiekem absolute te positioneren he?
  • Huh, maar als ik het volgende probeer:

    <div style="width:300px; height:200px;">
    <input type="button" style="position:relative; right:0px; top:0px; " />
    </div>

    Dan werkt het niet…
    Zo bedoelen jullie het toch?
  • [code:1:441f17dfe7]<div style="width:300px; height:200px; position:relative;">
    <input type="button" style="right:0px; top:0px; " />
    </div>[/code:1:441f17dfe7]Nee, meer iets als dit. Niet getest.

    - Bas
  • [quote:7ff8428f1b="BasHamar"][code:1:7ff8428f1b]<div style="width:300px; height:200px; position:relative;">
    <input type="button" style="right:0px; top:0px; " />
    </div>[/code:1:7ff8428f1b]Nee, meer iets als dit. Niet getest.

    - Bas[/quote:7ff8428f1b]
    Werkt niet…

Beantwoord deze vraag

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