Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Image binnen div positioneren

Anoniem
Gooly
3 antwoorden
  • Hallo,

    Graag wou ik weten hoe je een image binnen een div positioneerd ,heb al van alles geprobeerd maar het lukt nooit
    Moet ik mijn positie in Css bepalen of in html?
    HTML
    —————-
    [code:1:9ddf04640c]
    <div class="Opmaak">
    <p>bla bla bla</p>
    <img src="http://www.computerforum.be/Foto's/Kranten-1.gif" alt="Foto-Home" width="375" height="250" />

    </div>[/code:1:9ddf04640c]

    [code:1:9ddf04640c]
    div.Opmaak{
    background:url("../Achtergrond/achtergrond-bruin-transparant.png");
    /*filter:alpha(opacity=50);*/
    margin : 5% 50% 50% 1%;
    /*top, right, bottom and left*/
    text-align:left;
    font-family:"Goudy Old Style";
    font-size:120%;
    font-stretch:expanded;
    border:2px ridge;[/code:1:9ddf04640c]
  • In CSS. En daar zijn verschillende manieren voor. Het hangt ook een beetje af van waar je de afbeelding wilt hebben.
    ALs je de image met css gaat positioneren, dient hij een eigen CSS entry te krijgen.
    b.v.
    [code:1:59d1a4f052]
    .Opmaak img{
    float: right;
    margin: 5px;
    }
    [/code:1:59d1a4f052]
    (De afbeelding tegen de rechter zijkzant van de DIV aan met een marge van 5 pixels er omheen.)

    Je kunt ook nog absloluut positioneren, maar dat zou ik alleen doen als het echt niet met float lukt. Als je er weinig ervaring mee hebt zouden er onvoorspelbare dingen mee kunnen gebeuren.
    [code:1:59d1a4f052]
    img.gepositioneerd{
    position: absolute;
    left: 25px;
    top: 20 px;
    }
    [/code:1:59d1a4f052]
    (Zet de afbeelding 25 pixels van de linkerkant af, en 20 pixels van de bovenkant, ten opzichte van de 'moeder' div)
  • Hallo,
    Alvast bedankt!

    Ik heb zoals je zei een .opmaak img gemaakt in css
    maar wel buiten mijn andere div Het ziet er als volgt uit:
    [code:1:f8e92dc8c3]div.Opmaak{
    background:url("../Achtergrond/achtergrond-bruin-transparant.png");
    /*filter:alpha(opacity=50);*/
    margin : 5% 50% 50% 1%;
    /*top, right, bottom and left*/
    /*text-align:left;*/
    font-family:"Goudy Old Style";
    font-size:120%;
    font-stretch:expanded;
    border:2px ridge;
    /*background-position:right;*/
    position:absolute;
    }
    .Opmaak img{

    float: right;

    } [/code:1:f8e92dc8c3]
    Je ziet dat position :absolute in mijn eerste div staat als ik die in mijn 2e div zet komt mijn image buiten de gewone div

    Dit is eigenlijk de bedoeling van mijn werk maar het moet wel een stuk.smaller zijn [img:f8e92dc8c3]http://img715.imageshack.us/img715/9186/20101227144002.jpg[/img:f8e92dc8c3]

Beantwoord deze vraag

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