Archief - CSS: list item menu

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

RpR

Legacy Member
Ik ben bezig aan mijn menu.
Deze zou vrij simpel moeten zijn.
Deze zou namelijk gewoon een klein image zijn + een hyper link.
Nu had ik gelezen van list items menu en ben ik hier eens mee begonnen

Dit heb ik ik als class voor mijn li item:
.menu {
list-style-position: inside;
list-style-image: url(../img/icons/menu/dot.gif);
float: left;
padding-right: 1em;
}

Maar vanaf als ik die float gebruik verdwijnt mijn image.
Iemand die hiervoor de oplossing heeft?
B

BloodSeaker

Legacy Member
mmm, kweet nu waarom ge .menu daar zet ma soit
ik doe het meestal zo

ul{
list-style-type: none;
margin: 0;
padding: 0;
float: left;
width: 200px;
}

li a{
background : #fff url("../images/li-bg.jpg");
display: block;
float: left;
width: 190px;
text-align: left;
padding: 0;
padding-left: 10px;
margin: 0;
}


zoiets bvb :)

Maar echt veel uitleg geef je niet.


edit: wsl omda uw andere elementen niet deftig in mekaar zit of zo, dat uw floats de mist in gaan, maar zonder meer info is dat moeilijk zeggen
R

RpR

Legacy Member
BloodSeaker zei:
mmm, kweet nu waarom ge .menu daar zet ma soit
ik doe het meestal zo

ul{
list-style-type: none;
margin: 0;
padding: 0;
float: left;
width: 200px;
}

li a{
background : #fff url("../images/li-bg.jpg");
display: block;
float: left;
width: 190px;
text-align: left;
padding: 0;
padding-left: 10px;
margin: 0;
}


zoiets bvb :)

Maar echt veel uitleg geef je niet.


edit: wsl omda uw andere elementen niet deftig in mekaar zit of zo, dat uw floats de mist in gaan, maar zonder meer info is dat moeilijk zeggen
Klik om te vergroten...
Wat ik wil bekomen is het volgende:

+Home +News +Downloads

Ter verduidelijking:
de + moet een image zijn. En ja ik kan het ook met gewoon img en dan a tags doen maar ik lees veel dat menu met list items "moeten" opgemaakt worden
o

orez

Legacy Member
Onderstaande werkt perfect:

Code: 
/* SUBMENU */
#submenu {
	margin: 20px;
	padding-bottom: 20px;
	border-bottom: 2px solid #72141A;
}

#submenu ul {
	list-style: none;
	padding: 0;
	margin: 20px 10px 0px 10px;
	line-height: 13px;
	display: inline;
}

#submenu ul li {
	padding: 0 5px 0 5px;
	margin: 0;
	font-size: 75%;
	display: inline;
}

#submenu li a:link, a:visited {
	display: inline;
	color: #72141A;
	text-decoration:none;
	font-size: 85%;
	text-transform: uppercase;
	padding: 5px 0px 2px 0px;
	letter-spacing: 1px;
}

#submenu li a:active {
	border-bottom: solid 3px #72141A;
}

#submenu li a:hover {
	color: #DA8C11;
	border-bottom: solid 3px #A4B0C8;
}

#submenu li.seperator {
	margin-left: 20px;
	border-left: solid 3px #72141A;
	padding-left: 10px;
}

#submenu is een aparte div. Met daarin dus een li. Wil je images gebruiken, gebruik je best background-image ipv list-style. Reden: werkt meestal beter om crossbrowser resultaten te bekomen, en is even correct.

li.seperator niet op letten, ik heb mijn menu, en dan heb ik een adminstuk naast dat menu indien ingelogd, en het eerste item begint met een verticale lijn die ik via deze manier opmaak, dat er onderscheid is tussen admin & gewone menu ;)
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