[CSS] verticale positie list-style - Softwareontwikkeling

vrijdag 27 december 2002 15:01

Acties:

Verwijderd

Topicstarter

ik heb een aantal linkjes in een list gezet, waar bij een hover een pijltje verschijnt.

code:

A {
    font-family: verdana, arial, helvetica;
    font-size: 12px;
    color:#000000;
    text-decoration: none;
}
A:hover {
    color:#FF9600;
}
A LI{
    list-style: none;
}
A:hover LI {
    list-style: url(pijltje.gif);
}

op zich prima, alleen nu wil ik de line-height vergroten. het is mij niet nu duidelijk hoe ik de verticale positie van het pijltje wordt bepaald. een standaard bullet blijft netjes in het midden van de tekstregel, maar mijn plaatje verschijnt iets boven de tekstregel. dit is wel weer op te lossen door de afmeting van het plaatje te wijzigen, maar dat is weer niet echt elegant. wie weet hoe de verticale plaatsing van de plaatjes bepaald wordt?

vrijdag 27 december 2002 16:03

Acties:

Dr_Frickin_Evil

met list-style-position kun je dat opgeven.
Zie ook : http://www.w3.org/TR/REC-CSS1#list-style-position

vrijdag 27 december 2002 16:12

Acties:

Verwijderd

Topicstarter

list-style position bepaalt alleen de horizontale positie van de bullet: inside of outside. mij gaat het juist om de verticale positie.

vrijdag 27 december 2002 16:19

Acties:

crisp

Devver

Pixelated

wellicht met vertical-align eventueel met het opgeven van een line-height?
http://www.w3.org/TR/REC-....html#propdef-line-height

Intentionally left blank

donderdag 2 januari 2003 09:58

Acties:

Verwijderd

Topicstarter

dit werkt niet zoals ik zou verwachten.
ik zou zeggen, definieer de vertical-align in de A:hover LI, dan geef je dus de positie tov het parent element, idg A:

code:

A {
    font-family: verdana, arial, helvetica;
    font-size: 12px;
    line-height: 4;
    color:#000000;
    text-decoration: none;
    /*vertical-align: 8px;*/
    border: 1px;
    border-style: solid;
}
A:hover {
    color:#FF9600;
}
A LI{
    list-style: none;
}
A:hover LI {
    list-style: url(pijltje.gif);
    vertical-align: middle;
}

(en voor duidelijkheid ook html:)

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>bullet images</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link href="listtest.css" rel="stylesheet" type="text/css">
</HEAD>

<BODY>
<ul>
    <a href="#"><li>link met LI</a>
    <a href="#"><li>link met LI</a>
    <a href="#"><li>link met LI</a>
</ul>
</BODY>
</HTML>

nu wordt de positie van de bullet wel iets aangepast, maar hij verschijnt niet in het midden van de link (heb er voor het kijkgemak even een border omheen gezet), en de link zelf schuift bij mouseover iets omhoog...

het werkt wel als ik de vertical-align in de A absoluut of in percentages definieer (in code hierboven uitgecommentarieerd), maar dan moet je voor elke line-height precies de vertical-align bepalen. ook blijft vaag op welke hoogte de list-style image wordt gezet. wanneer je bijvoorbeeld voor A LI en A:hover LI andere list-style images definieerd met een ongelijke hoogte, is hun basislijn niet hetzelfde.

mijn vraag is dus geloof ik:
hoe wordt de basislijn bepaald van de list-style image tov het parent-element?

donderdag 2 januari 2003 10:12

Acties:

edie

Je html code is ook niet goed. Een ul kan alleen, maar dan ook alleen maar li tags hebben. Een li kan vervolgens de a, p, etc tags hebben.

Je moet je li dus stylen, en daarbinnen je a.

"In America, consumption equals jobs. In these days, banks aren't lending us the money we need to buy the things we don't need to create the jobs we need to pay back the loans we can't afford." - Stephen Colbert

donderdag 2 januari 2003 10:29

Acties:

Woudloper

« - _ - »

Dus zo moet het eruit zien:

HTML:

ul>
 <li><a href="#">link met LI</a></li>
 <li><a href="#">link met LI</a></li>
 <li><a href="#">link met LI</a></li>
</ul>

donderdag 2 januari 2003 10:40

Acties:

Verwijderd

Topicstarter

hmm...
op zich werkte het verschijnen van het plaatje wel al, toch even aangepast:

code:

UL LI {
    font-family: verdana, arial, helvetica;
    font-size: 12px;
    line-height: 4;
    color:#000000;
    text-decoration: none;
    border: 1px;
    border-style: solid;
    vertical-align: bottom;
    list-style: none;
}
UL LI A{
    color: #FFcc00;
    border: 1px;
    border-style: solid;
    vertical-align: bottom;
}
UL LI A:hover {
    color: #000000;
    list-style: url(pijltje.gif);
}

en html:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>bullet images</TITLE>
<link href="listtest2.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<ul>
    <li><a href="#">betere html</a></li>
    <li><a href="#">betere html</a></li>
</ul>
</BODY>
</HTML>

de positie van de bullets blijft echter merkwaardig... ook zie ik nu dat bij vertical-align bij grote line-height de tekst ook niet op de onderzijde staat

donderdag 2 januari 2003 11:04

Acties:

edie

Verwijderd schreef op 02 January 2003 @ 10:40:
hmm...
op zich werkte het verschijnen van het plaatje wel al, toch even aangepast:
code:
1
2
3
4
5
*knip*
UL LI A:hover {
    color: #000000;
    list-style: url(pijltje.gif);
}

Een a element heeft geen list-style property. Alleen een li element heeft dat.
[wilde gok]
misschien een li:hover ?
[/wilde gok]

edit:
En ik zou bij je a ook een line-heigt opgeven (just in case)

[ Voor 10% gewijzigd door edie op 02-01-2003 11:05 ]

"In America, consumption equals jobs. In these days, banks aren't lending us the money we need to buy the things we don't need to create the jobs we need to pay back the loans we can't afford." - Stephen Colbert

donderdag 2 januari 2003 11:14

Acties:

Verwijderd

Topicstarter

het probleem zit m niet in het laten verschijnen van de bullets. dat werkt prima.
ook is het volgens mij zo dat als je een serie classes hebt (bv TD A) dat je in de css definitie alles kan meegeven wat ofwel in TD ofwel in A thuishoort.