[css/html] positionering van img/label in div

donderdag 3 november 2011 19:28

Acties:

0 Henk 'm!

Topicstarter

Hallo Tweakers,

De hele dag ben ik bezig geweest met dit ongelooflijk irritante probleem en ik geloof dat jullie mijn laatste hoop zijn. Ik kan me niet voorstellen dat niemand anders dit probleem nog nooit heeft gehad. Misschien gebruik ik niet de juiste zoektermen, ik weet het niet. Hoe dan ook:

In de code hieronder staat een klein onderdeel van mijn form. Achter een label met beschrijving van de input-box komt een plaatje genaamd info.png (14x14px). Een margin op de class "plaatje" zorgt er echter voor dat de label die ervoor staat ietswat naar beneden gaat en die krijg ik onder geen beding weer terug naar boven, zodat zij mooi op één lijn zit met de inputbox en label. Het volgende plaatje laat zien wat ik zou willen bewerkstelligen:

Afbeeldingslocatie: http://img716.imageshack.us/img716/4981/tweakersvoorbeeld.png

Afbeeldingslocatie: http://img716.imageshack.us/img716/4981/tweakersvoorbeeld.png

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <link href="test.css" rel="stylesheet" type="text/css">
    <head>
    <body>
        <div class="linkerzijde">
            <div class="inner-linkerzijde">
                <label class="labeltje">Geboortedatum</label>
                <img class="plaatje" src="img/info.png" title="Vul hier de geboortedatum in.">
            </div>
        </div>
        <div class="rechterzijde">
            <input name="dag" type="text" title="Dag van de maand waarop u geboren bent" id="dag" size="1" maxlength="2" />
            <input name="maand" type="text" title="Maand van het jaar waarin u geboren bent" id="maand" size="1" maxlength="2" />
            <input name="jaar" type="text" title="Jaar waarin u geboren bent" size="2" maxlength="4" /> 
            <label>(dd-mm-jjjj)</label>
        </div>
        <br><br>
        <div class="linkerzijde">
            <div class="inner-linkerzijde">
                <label class="labeltje">Geboortedatum partner</label>
                <img class="plaatje" src="img/info.png" title="Vul hier geboortedatum van uw partner in.">
            </div>
        </div>
        <div class="rechterzijde">
            <input name="dag" type="text" title="Dag van de maand waarop u geboren bent" size="1" maxlength="2" >
            <input name="maand" type="text" title="Maand van het jaar waarin u geboren bent" size="1" maxlength="2" />
            <input name="jaar" type="text" title="Jaar waarin u geboren bent." size="2" maxlength="4" /> 
            <label>(dd-mm-jjjj)</label>
        </div>
    </body>
</html>

Cascading Stylesheet:

.linkerzijde{display:inline; width:320px; float:left; height:30px;}
.inner-linkerzijde{float:right;}
.rechterzijde{display:inline; float:left;}

.plaatje{top:14px;}

donderdag 3 november 2011 19:32

Acties:

0 Henk 'm!

smeetsmeister

Als je de afbeelding precies in het midden hebt qua hoogte van de div, en je wilt de tekst ook precies in het midden hebben kun je de line-height van de text op de hoogte van de div zetten(zolang het 1 regel is) staat het altijd qua hoogte in het midden.

donderdag 3 november 2011 21:55

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Html
Css

Je kunt goochelen met line-height, maar om dit crossbrowser en crossplatform op de pixel goed te krijgen, dat lukt bijna niet.

Eventueel kun je de afbeelding ook als achtergrond in het label zetten en de hele label de title.

Echt toegankelijk is dat niet, maar dat is deze oplossing ook niet (ik mis bijvoorbeeld de alt op de afbeelding).

vrijdag 4 november 2011 09:49

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Misschien dat je ook voor sommige browsers nog wat moet klooien met vertical-align.

Maar wat Bosmonster ook al zegt, dit zijn dingen die vrijwel niet cross-browser pixel-perfect te maken zijn. En in mijn ogen is dat ook helemaal niet nodig.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 9 november 2011 12:14

Acties:

0 Henk 'm!

ikbenmelle

Front-end javascript developer

Met line-height is het mogelijk maar dan wordt alles aangepast in het element, niet ideaal aangezien het om de <img> tag zelf gaat. Dat is verwarrend als je de code ook voor andere delen in de toekomst gaat gebruiken.

Vertical-align is een beter alternatief, het heeft alleen betrekking op de <img> tag.

Wat ook mogelijk is, is om de <img> relatief te positioneren en vervolgens met de top en left properties te positioneren en daarmee de rest van de elementen met rust te laten.

code:

.plaatje
{
position:relative;
top:-2px; left:0;
}

donderdag 10 november 2011 23:54

Acties:

0 Henk 'm!

Mulder_fox

is het niet gewoon heel simpel:

Cascading Stylesheet:

.plaatje{
position:relative;
top:16px;
}

Onderwerpen