Archief - menu zonder "bullets", maar lijst op pagina met "bullets"

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
R

Rep1

Legacy Member
Standaard is een menu gestyled in CSS een unordered list (ul)
Om geen bullets te krijgen voor elk item, wordt volgende code toegevoegd
Code: 
ul#nav, ul {
	list-style-type: none;
}

Zo ziet mijn menu er dus als volgt uit:
Code: 
<ul id="nav">
<li>eerste item</li>
<li>tweede item</li>
<li>derde item</li>
etc...
</ul>

Aangezien ik op mijn pagina zelf wel een lijst wil met bullets (squares in mijn geval) heb ik een ul#lijst, ul aangemaakt met volgende eigenschap:
Code: 
ul#lijst, ul {
      list-style-type: square;
}

In mijn CSS staat verder ook:
Code: 
li {
      list-style-type: square;
}
en ziet deze lijst eruit als:
Code: 
<ul id="lijst">
<li>eerste item</li>
<li>tweede item</li>
<li>derde item</li>
etc...
</ul>
In Firefox wordt nu een bullet weergegeven (zoals ik het zou willen) maar in IE weigert hij om die te laten zien.
Pak ik dit verkeerd aan?
Is er iets dat ik over het hoofd zie?

Ik heb ook net dit even geprobeerd:
Code: 
<ul style="list-style-type: square">
<li>eerste lijstitem</li>
<li>tweede lijstitem</li>
<li>derde lijstitem</li>
</ul>
maar ook hier geeft IE geen bullets weer (Firefox doet dit wel)

Het zal wel een mij liggen (of althans aan mijn code... ik ben tenslotte nog steeds beginner) maar ik had dit toch graag opgelost gezien.

Alvast bedankt
j

j design

Legacy Member
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<style type="text/css">
<!--

#nav {
list-style: none;
}

.lijst {
list-style: square;
}

-->
</style></head>

<body>
Navigatie
<ul id="nav">
<li>eerste item</li>
<li>tweede item</li>
<li>derde item</li>
</ul>

Voor een algemene liststyle kan je beter een class gebruiken.
Een class kan je meerdere keren gebruiken in tegenstelling met een ID maar 1keer.
<ul class="lijst">
<li>eerste item</li>
<li>tweede item</li>
<li>derde item</li>
</ul>
</body>
</html>
Klik om te vergroten...
X

Xavez

Legacy Member
Heeft weinig met classes of ID's te maken (al gebruik je idd beter een class in dit geval).
Als je nu gewoon het volgende doet in je CSS dan zou het moeten werken:

#nav {list-style: none}
.lijst {list-style-type: square;}
j

j design

Legacy Member
Is list-style: square niet voldoende?

Ik ben blijkbaar wat uitleg vergeten geven bij vorige post. Maar wat Xavez zegt is uiteraard waar.

Een ID is uniek, die mag maar 1x op een pagina gebruikt worden.
Classes daarintegen mag je zoveel gebruiken als je wil op een pagina.
Dus tenzij je die lijst maar 1 keer gaat gebruiken kan je beter een class nemen.
U

UnD3RD0G

Legacy Member
probeer er eens list-style-position:inline / outline op te zetten, ik weet dat 1 vd 2 iets oplost met een non-showing issue...
zet het op outline, als ze dan niet verschijnen op inline,
one of them should do the trick denk ik
R

Rep1

Legacy Member
ik heb nog niet alles geprobeerd wat hier wordt voorgesteld, maar die .lijst aanmaken, gaf geen verschil. Er wordt dan wel een lijst aangemaakt (kleur van de tekst is plots zwart ipv de kleur van de p) en heeft een margin van 20 px (omdat ik dat zo had ingesteld) maar de bullets worden niet weergegeven (in Firefox werkt het wel, maar dat was al zo bij #lijst)

Ik zal anders proberen om straks of morgen de bewuste pagina eens ergens te uploaden en die link hier dan te plaatsen (incl. link naar de CSS)

(want om de kleur van een list-item dan hetzelfde te krijgen als die van de tekst, dat lukte ook niet. Dacht dat dat normaal in de body moest gezet worden -ook in de #lijst zelf geprobeerd- maar tekst bleef dus zwart... maar dat is al een volgend probleem, eerst die bullets oplossen)

Alvast bedankt allemaal
R

Rep1

Legacy Member
als ik in de CSS zet:
Code: 
#lijst {
	margin-left: 20px;
	padding: 0;
	width: 500px;
      list-style-type: square; 
}
met op de pagina
Code: 
ul id="lijst"
dan is het dit resultaat:
resultaat


Zet ik in de CSS
Code: 
.lijst {
	margin-left: 20px;
	padding: 0;
	width: 500px;
      list-style-type: square; 
}
met op de pagina
Code: 
ul class="lijst"
dan is dit het resultaat:
resultaat


In IE krijg ik geen bullets, in FF in beide gevallen wel.

De CSS van beide pagina's:
id: http://www.postalux.be/9lives/id/mijnstijl.css
class: http://www.postalux.be/9lives/class/mijnstijl.css



Als ik ul#nav, ul veranderde in #nav, dan was mijn menu plots een chaos, dus dat heb ik snel terug veranderd in ul#nav, ul

(menu-code heb ik van deze pagina: Vertical Drop Down Menus)
X

Xavez

Legacy Member
Code: 
ul #nav, ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width:150px;
}

veranderen in

Code: 
ul #nav, ul {
	margin: 0;
	padding: 0;
	width:150px;
}
#nav, #nav ul {list-style: none;}
R

Rep1

Legacy Member
Net aangepast (links zijn dezelfde) maar zonder resultaat.
In Firefox worden de bullets weergegeven, in IE niet.
M

Mr. Jean

Legacy Member
In plaats van hier:

.lijst {
list-style-type: square;
margin-left:20px;
padding:0;
width:500px;
}

margin-left te gebruiken beter eens padding-left gebruiken.

.lijst {
list-style-type: square;
padding-left:20px;
padding:0;
width:500px;
}

IE negeert bij UL/LI's nogal snel margin waardoor de bullet verdwijnt.
X

Xavez

Legacy Member
.lijst {
margin-left: 0px;
padding-left: 20px;
width: 500px;
list-style-type: square;
}

(uw padding en margin waren verwisseld :-))

/edit: gelijktijdig dus :p
R

Rep1

Legacy Member
Prachtig, de bullets zijn in IE eindelijk aanwezig.
Tsss, schrijf ik eens zelf een stukje van de CSS, is het nog fout ook... :doh:

En dan nu het probleem dat hierop volgde:
hoe kan ik de tekst van de list-items nu ook de kleur #777777 geven zoals de <p>?
Ik heb font-color: #7777777; zowel in de CSS van de body gezet als in de .lijst maar geen van beide heeft effect op de list-items blijkbaar.

Aangezien het best is om dus een class te geven aan die "lijst", ga ik dus verder met de .lijst (de pagina met id waarnaar eerder werd gerefereerd is dus niet meer geldig vanaf nu)
de links zijn dus: (nog steeds dezelfde)
pagina: http://www.postalux.be/9lives/class/buffetten.htm
css: http://www.postalux.be/9lives/class/mijnstijl.css

ja, ik weet het, ik kan een ambetant ventje zijn :D maar ik wil het wel in orde hebben natuurlijk.
R

Rep1

Legacy Member
ik heb het bij allebei aangepast... maar de tekst blijft zwart
(ik upload altijd direct zodat je de aanpassingen kan volgen)
X

Xavez

Legacy Member
Er staat een 7 teveel in je bodytext color-waarde ;). Trouwens: voor dingen als 000000 en 777777 en 77CCAA kan en mag je evengoed 000 777 en 7CA gebruiken! Maar van 77CF99 mag je natuurlijk niet 7CF9 maken! Altijd drie of zes tekens behouden :). Het zijn de hex-waardes voor het mengen van Rood Groen en Blauw. Rood is dus F00, groen 0F0 en blauw 00F... Dat even gewoon ter info :).
R

Rep1

Legacy Member
ja, ik was tegelijk aan het bellen en had er dus niet op gelet dat er 7 cijfers stonden. Nu aangepast naar 6 en het werkt dus perfect. :niceone:

Ik had inderdaad al eens gezien dat kleurcodes afgekort werden naar 3 cijfers, maar wist dus niet waarom dat was. Bij deze weet ik dat dus ook weeral.

Xavez, enorm bedankt!
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan