/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord? 		Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
1  molokyle 11184
2  Klaudi 5506
3  bentjuul 3377
4  severino 2040
5  smorch 1950
6  strarup 1525
7  natmaden 1396
8  scootergr.. 1320
9  e.c 1150
10  miritdk 1110
farve firkanten på en li
Fra : Martin

Dato : 13-12-07 15:44
Halløj...
Hvordan ændrer man farven på en <li>

li {
list-style:square inside none;
color:red;
}

Ændrer også farven på teksten - så den virker ikke

Ønskes:
Sort tekst med rød firkant

(og nej der er ikke noget link)

 
 
John S. Thomsen (13-12-2007)
Kommentar
Fra : John S. Thomsen

Dato : 13-12-07 15:55
Martin wrote:
> Halløj...
> Hvordan ændrer man farven på en <li>
>
> li {
> list-style:square inside none;
> color:red;
> }
>
> Ændrer også farven på teksten - så den virker ikke
>
> Ønskes:
> Sort tekst med rød firkant
>
> (og nej der er ikke noget link)

<!DOCTYPE html>
<title>red and black</title>
<style>
li {
   list-style:square inside none;
   color:red;
}
li span {
   color:black;
}
</style>
<ul>
<li><span>kartoffel</span>
<li><span>gulerod</span>
</ul>

Martin (13-12-2007)
Kommentar
Fra : Martin

Dato : 13-12-07 16:41
John S. Thomsen wrote:
> li {
> list-style:square inside none;
> color:red;
> }
> li span {
> color:black;
> }
> </style>
> <ul>
> <li><span>kartoffel</span>
> <li><span>gulerod</span>
> </ul>

Sådan tænkte jeg også at gøre - men så er det jo ikke sjovt :)

John S. Thomsen (13-12-2007)
Kommentar
Fra : John S. Thomsen

Dato : 13-12-07 17:06
Martin wrote:
> Sådan tænkte jeg også at gøre - men så er det jo ikke sjovt :)

Næ, sjovt er det ikke.

Hvis det skal være sjovt, så lad listen have sorte <li> fra start og
indsæt derefter <span> og 'color' med JavaScript.

Det giver en fornuftig fallback for de som ikke har JavaScript slået til.

Jørgen Farum Jensen (13-12-2007)
Kommentar
Fra : Jørgen Farum Jensen

Dato : 13-12-07 15:56
Martin skrev:
> Halløj...
> Hvordan ændrer man farven på en <li>
>
> li {
> list-style:square inside none;
> color:red;
> }
>
> Ændrer også farven på teksten - så den virker ikke
>
> Ønskes:
> Sort tekst med rød firkant
>
> (og nej der er ikke noget link)

Og nej det kan du ikke få - listepunkt-
tegnet (bullet, marker) er en browsergene-
reret del af li-markøren.

Det, du kan gøre, er at fjerne listepunkt-tegnet
og så indsætte en grafik:

ul, ol, li {padding:0;margin:0;border:0;}
li {
padding-left:2em; /* eller hvad der nu passer dig */
list-style-position:inside;
list-style:none;
list-style-image: url(marker.png);
}


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Martin (13-12-2007)
Kommentar
Fra : Martin

Dato : 13-12-07 16:42
Jørgen Farum Jensen wrote:
> Martin skrev:
>> Halløj...
>> Hvordan ændrer man farven på en <li>
>>
>> li {
>> list-style:square inside none;
>> color:red;
>> }
>>
>> Ændrer også farven på teksten - så den virker ikke
>>
>> Ønskes:
>> Sort tekst med rød firkant
>>
>> (og nej der er ikke noget link)
>
> Og nej det kan du ikke få - listepunkt-
> tegnet (bullet, marker) er en browsergene-
> reret del af li-markøren.

Tænkte det nok!

>
> Det, du kan gøre, er at fjerne listepunkt-tegnet
> og så indsætte en grafik:

Synes bare at det er lidt for besværligt at lave et stykke grafik, når
det netop er det "square" jeg vil bruge.

>
> ul, ol, li {padding:0;margin:0;border:0;}
> li {
> padding-left:2em; /* eller hvad der nu passer dig */
> list-style-position:inside;
> list-style:none;
> list-style-image: url(marker.png);
> }

Så må jeg lige sætte en span på teksten og farve spannen sort :)

Erik Ginnerskov (13-12-2007)
Kommentar
Fra : Erik Ginnerskov

Dato : 13-12-07 22:27
Martin wrote:

> Synes bare at det er lidt for besværligt at lave et stykke grafik, når
> det netop er det "square" jeg vil bruge.

Hvis den square er så vigtig, er grafikfilen den eneste skudsikre løsning.
At sætte li til rød og derefter en span til sort vil kun sikre farven, det
giver ingen garanti for, at alle browsere på alle operativsystemer viser den
præcis samme bullet.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk



Jørgen Farum Jensen (13-12-2007)
Kommentar
Fra : Jørgen Farum Jensen

Dato : 13-12-07 22:39
Erik Ginnerskov skrev:
> Martin wrote:
>
>> Synes bare at det er lidt for besværligt at lave et stykke grafik, når
>> det netop er det "square" jeg vil bruge.
>
> Hvis den square er så vigtig, er grafikfilen den eneste skudsikre løsning.
> At sætte li til rød og derefter en span til sort vil kun sikre farven, det
> giver ingen garanti for, at alle browsere på alle operativsystemer viser den
> præcis samme bullet.
>

Og vel også den "rigtige" løsning, eftersom
span'ing af teksten introducerer en overflødig
markør.

Og hvis svært kan det være at lave en rød firkant?

Jeg synes i øvrigt jeg kan huske jeg har lavet
noget en gang med background-image på li-markøren,
i stedet for list-style-image. Det var vist for
at få bedre kontroll med grafikkens position.

list-style-image tillader ikke positionering af
grafikken.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Allan Vebel (14-12-2007)
Kommentar
Fra : Allan Vebel

Dato : 14-12-07 02:57
Jørgen Farum Jensen skrev:

> Jeg synes i øvrigt jeg kan huske jeg har lavet
> noget en gang med background-image på li-markøren,
> i stedet for list-style-image. Det var vist for
> at få bedre kontroll med grafikkens position.

Ja, så kan man også bruge det sammen med a:hover,
som jeg har gjort på http://vebel.dk/links.asp

--
Allan Vebel
http://html-faq.dk



Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408925
Brugere : 218888
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.