Hoe krijg ik de links in dit menu naar links met css?

Question

Ik heb op mijn website een menu met css. Wanneer ik dit menu bekijk in mijn editor dan staan de links daarin allemaal netjes aan de lionkerkant en de langere links op 1 regel, maar zodra ik hem in de browser bekijk dan staan de links meer naar rechts en de langere links op 2 regels. Hoe kan ik dit zo krijgen zoals ik het ook in mijn editor zie? Ik heb van alles al geprobeerd met padding en margin, maar niets helpt.

Ik kan helaas de code er niet helemaal onder plakken want is te lang, maar ik denk dat het ergens hier in moet zitten:

.headright ul, .headrighttop ul{
list-style:none;
padding: 0px;
}

.headright ul li, .headrighttop ul li{
margin: 7px;
}

.list1 a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color:#000000;
}

.list1 a:hover{
text-decoration:underline;
color: #9d0000;
}

.list1{
padding-left: 12px;
background:url(afb/list_style.gif) no-repeat left top;
margin-left: 20px;
}

rose · Accepted Answer

Als je de list zo maakt:

(dus de class bij ul i.p.v. li) en de css als volgt aanpast: .list1{ padding-left: 12px; background:url(afb/list_style.gif) no-repeat left top; margin-left: 14px; } Dan krijg je wat je wilt in Firefox, Chrome en IE7. Toegevoegd na 37 minuten: Ik weet inmiddels hoe het komt, Internet Explorer geeft blijkbaar aan ul auto een margin 30 mee, als je geen margin toekent.

 · Answer

Heb je het al zonder lists geprobeerd? Het is de list die je hier een probleem geeft. Wellicht kan je de li en ul elementen eerst helemaal op padding 0px en margin 0px zetten. En anders gewoon zonder de Lists, en alleen de A als block zetten, en het elemente waar ze in vallen definieren als een block met bepaalde grootte. Zie ook je pm

Toegevoegd na 6 minuten:
==
 /* ---- Menu box ---- */
.menu0, .menu1, .menu2, .menur, a.mainrefs, a.forum_menu, a.rmenu
	{
	display: 	block;
	text-decoration: none;
	}

/* Normal navigation links */
a.menu0, a.menu1, a.menu2, a.forum_menu
	{
	margin-top: 	3px;
	width: 		115px;
	padding-left: 	10px;
	}
==

 · Answer

Je gebruikt geen valide Doctype, waardoor je pagina in 'Quirks mode' wordt gerenderd. Dat is de oorzaak van de onverklaarbare verspringingen.

Vervang de eerste regel van je HTML-pagina met de volgende, en je zult zien dat je problemen als sneeuw voor de zon verdwijnen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Hoe krijg ik de links in dit menu naar links met css?

Submenu

Menu

Het beste antwoord

Andere antwoorden (2)

Weet jij het beter..?