[css] afbeelding verticaal centreren in dynamische LI

donderdag 25 augustus 2011 13:29

Acties:

0 Henk 'm!

Topicstarter

Ik heb een list waarin de geselecteerde filters in een webshop laat zien. Ik wil nu de afbeelding om een filter te sluiten, verticaal centreren t.o.v. de hoogte van de li. Ik krijg het echter niet voor elkaar:

Afbeeldingslocatie: http://cache.hostmyjpg.com/faa4234683_pre.png

Afbeeldingslocatie: http://cache.hostmyjpg.com/faa4234683_pre.png

Dit is mijn html/css:

HTML:

<html>
 <head>
  <title> New Document </title>
<style type="text/css">
#navlist
{
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    width:310px;
}

#navlist li
{
    padding-left: 10px;
    padding-top:2px;
    padding-bottom:2px;
    background-image: url(flyout-bg.png);
    background-repeat: repeat-x;
    background-position:bottom;
    margin-top:2px;
    border:1px solid #bcbcbc;
}

#navlist ul { list-style: none; }

.close_icon
{
    float:right;
    padding-right:5px;
    padding-top:2px;
    clear:both;
    display:block;
}

.close_icon img
{
    
}


.selectedfilter
{
    font-family:arial,tahoma;
    font-size:10pt;
    font-weight:bolder;
}

.selectedvalues
{
    font-family:arial,tahoma;
    font-size:10pt;
    font-weight:normal;
}
</style>
 </head>

<body>
<ul id="navlist">
    <li>
        <span class="selectedfilter">Schoenen</span>
        <span class="close_icon"><a href="#"><img src="close_sel_icon.png"></a></span>
    </li>
    <li>
        <span class="selectedfilter">Merk</span>
        <span class="close_icon"><a href="#"><img src="close_sel_icon.png"></a></span><br>
        <span class="selectedvalues">Nike, Adidas, Timberland</span>
    </li>
    <li>
        <span class="selectedfilter">Maat</span>
        <span class="close_icon"><a href="#"><img src="close_sel_icon.png"></a></span><br>
        <span class="selectedvalues">46, 47</span>
    </li>
    <li>
        <span class="selectedfilter">Geschikt voor</span>
        <span class="close_icon"><a href="#"><img src="close_sel_icon.png"></a></span><br>
        <span class="selectedvalues">hardlopen, bergbeklimmen, fietsen, wandelen, zwemmen, freestylen</span>
    </li>
</ul>
</body>
</html>

[ Voor 0% gewijzigd door RobIII op 25-08-2011 13:44 . Reden: Code tags toegevoegd ]

We see things as we are, not as they are

donderdag 25 augustus 2011 13:54

Acties:

0 Henk 'm!

Flowmo

Probeer dit eens:

Cascading Stylesheet:

#navlist li
{
    position:relative;
    padding-left: 10px;
    padding-top:2px;
    padding-bottom:2px;
    background-image: url(flyout-bg.png);
    background-repeat: repeat-x;
    background-position:bottom;
    margin-top:2px;
    border:1px solid #bcbcbc;
}

.close_icon
{
    position:absolute;
    right:5;
    top:50%;
    margin-top: - halve hoogte van icoontje;
    clear:both;
    display:block;
}

donderdag 25 augustus 2011 14:01

Acties:

0 Henk 'm!

TutanRamon

Topicstarter

Fantastisch, ze staan nu in het midden. Alleen ze staan aan de linkerzijde over de tekst heen. Ik heb ze float:right gegeven in de .close_icon class, maar dat helpt niet. Hoe krijg ik ze nu naar rechts?

We see things as we are, not as they are

donderdag 25 augustus 2011 14:14

Acties:

0 Henk 'm!

Flowmo

excuseer, heb een typo gemaakt in mijn css. right:5; moet zijn right:5px;.

donderdag 25 augustus 2011 14:23

Acties:

0 Henk 'm!

TutanRamon

Topicstarter

Top, nu werkt het. Is die float:right dan overbodig geworden of kan ik die evengoed laten staan?

Bedankt!

[ Voor 5% gewijzigd door TutanRamon op 25-08-2011 14:23 ]

We see things as we are, not as they are

donderdag 25 augustus 2011 14:46

Acties:

0 Henk 'm!

Flowmo

float:right werkt niet met pos:abs dus die mag je verwijderen.

donderdag 25 augustus 2011 14:50

Acties:

0 Henk 'm!

Scrummie

Think different

TutanRamon schreef op donderdag 25 augustus 2011 @ 14:23:
Top, nu werkt het. Is die float:right dan overbodig geworden of kan ik die evengoed laten staan?

Bedankt!

Misschien handig/interessant voor je om te lezen: http://css.maxdesign.com.au/floatutorial/

Seizoenskaarthouder Feyenoord - Vak T

Onderwerpen