menu wil niet naast elkaar
Nu heb ik een menutje gemaakt, maar deze moet naast elkaar komen.
Als ik display:inline doe, laat hij helemaal niks meer zien.
Online voorbeeldje:
http://82.73.133.147/candan/
kan je zelf de html bekijken.
CSS =
http://82.73.133.147/candan/style/style.css
Misschien dat iemand van jullie me kan helpen?
Code (php)
1
float: left;
mee.
Gewijzigd op 01/01/1970 01:00:00 door Douwe
Lists gebruiken voor een menu is juist semantisch correct.
Douwe schreef op 17.08.2009 13:01:
SanThe;
Lists gebruiken voor een menu is juist semantisch correct.
Lists gebruiken voor een menu is juist semantisch correct.
Okee.
Ik had het idee dat een list altijd onder elkaar kwam te staan. Maar blijkbaar is dat niet zo.
Je mist een doctype.
Je gebruikt divs in li? Is niet valid en niet nodig.
Kortom, vind het niet zo raar dat dingen raar gaan reageren. :)
SanThe schreef op 17.08.2009 13:04:
Okee.
Ik had het idee dat een list altijd onder elkaar kwam te staan. Maar blijkbaar is dat niet zo.
Douwe schreef op 17.08.2009 13:01:
SanThe;
Lists gebruiken voor een menu is juist semantisch correct.
Lists gebruiken voor een menu is juist semantisch correct.
Okee.
Ik had het idee dat een list altijd onder elkaar kwam te staan. Maar blijkbaar is dat niet zo.
Met CSS kun je een list prima stylen om horizontaal te staan, zonder van die icoontjes voor elk item.
Gewijzigd op 01/01/1970 01:00:00 door Douwe
Ik doe het altijd zo:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
/* overflow: hidden; in combinatie met een width, zodat je geen clearer div nodig hebt */
div#nav ul {overflow: hidden; width: 900px; margin: 0; padding: 0; list-style: none;}
/* li's floaten. de display: inline; is voor IE6 */
div#nav ul li {float: left; margin: 0 10px 0 0; display: inline;}
/* het actieve menu-item stylen we met <strong>, zodat het ook in een voorleesbrowser duidelijk is op welke pagina de user is */
div#nav ul li strong {color: #ff0; background: #000 url(../gfx/bg_navitem.jpg); font-weight: normal; cursor: default;}
div#nav ul li strong,
/* display: block; zodat de a's de li's helemaal opvullen */
div#nav ul li a {display: block; padding: 5px 10px; font-size: 12px; text-decoration: none;}
div#nav ul li a:link,
div#nav ul li a:visited {color: white;}
div#nav ul li a:hover,
div#nav ul li a:active {color: #ff0;}
div#nav ul {overflow: hidden; width: 900px; margin: 0; padding: 0; list-style: none;}
/* li's floaten. de display: inline; is voor IE6 */
div#nav ul li {float: left; margin: 0 10px 0 0; display: inline;}
/* het actieve menu-item stylen we met <strong>, zodat het ook in een voorleesbrowser duidelijk is op welke pagina de user is */
div#nav ul li strong {color: #ff0; background: #000 url(../gfx/bg_navitem.jpg); font-weight: normal; cursor: default;}
div#nav ul li strong,
/* display: block; zodat de a's de li's helemaal opvullen */
div#nav ul li a {display: block; padding: 5px 10px; font-size: 12px; text-decoration: none;}
div#nav ul li a:link,
div#nav ul li a:visited {color: white;}
div#nav ul li a:hover,
div#nav ul li a:active {color: #ff0;}
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Margin en float op 1 element? Dat is juist niet vriendelijk voor IE.
1.
Als je in IE 8 kijkt, zie je dat de content box een soort van margin/padding heeft, waardoor de bovenkant en onderkant niet aan gesloten worden. Iemand een idee om dit te fixen?
2. Hover werkt niet op IE 8. Hoe kan ik dit aanpakken?
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Gewijzigd op 01/01/1970 01:00:00 door Douwe
Jan Koehoorn schreef op 17.08.2009 13:19:
Dan is het alsnog handiger om de div gewoon 100% laten te doen, als je namelijk daad werkelijk zegt wilt die nog wel eens boos gaan doen qua box model.@ Mitchell: die width mag ook in procenten in combi met overflow: hidden. En die margin en float los je op met die display: inline.
Ah, ok. Was even vergeten dat inline een float verbeterd in IE.
Mitchell schreef op 17.08.2009 13:24:
Dan is het alsnog handiger om de div gewoon 100% laten te doen, als je namelijk daad werkelijk zegt wilt die nog wel eens boos gaan doen qua box model.
Hangt ervan af. Als je de breedte goed uitrekent krijg je geen problemen. En dan kun je indien nodig je ul nog een padding meegeven ook. Met 100% is dat weer lastig. Er is niet 1 oplossing die in alle gevallen werkt.
Plaats de hele site in een wrapper en centreer die wrapper.
Jan Koehoorn schreef op 17.08.2009 13:27:
Hangt ervan af. Als je de breedte goed uitrekent krijg je geen problemen. En dan kun je indien nodig je ul nog een padding meegeven ook. Met 100% is dat weer lastig. Er is niet 1 oplossing die in alle gevallen werkt.
Uhm, ja. Breedte van margins en padding (pixels) is onmogelijk om rekening mee te houden in een liquid div?Mitchell schreef op 17.08.2009 13:24:
Dan is het alsnog handiger om de div gewoon 100% laten te doen, als je namelijk daad werkelijk zegt wilt die nog wel eens boos gaan doen qua box model.
Hangt ervan af. Als je de breedte goed uitrekent krijg je geen problemen. En dan kun je indien nodig je ul nog een padding meegeven ook. Met 100% is dat weer lastig. Er is niet 1 oplossing die in alle gevallen werkt.