menu wil niet naast elkaar
Oke, ben bezig emt een site aan het maken.
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?
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?
En geef div#about ook even een width: 50px; mee.
Gewijzigd op 01/01/1970 01:00:00 door Douwe
Thanks, het werkt.
Ik ben niet zo goed in css, maar volgens mij moet je geen list gebruiken. (ul en li)
SanThe;
Lists gebruiken voor een menu is juist semantisch correct.
Lists gebruiken voor een menu is juist semantisch correct.
'Douwe:
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.
Waar is je CSS reset? Lists hebben veel overtollige extra's die je uiterlijk nog wel eens willen omver gooien.
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. :)
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. :)
Rustig aan mensen :) Hij was alleen maar de float: left; vergeten :P
'SanThe:
Okee.
Ik had het idee dat een list altijd onder elkaar kwam te staan. Maar blijkbaar is dat niet zo.
'Douwe:
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
Een ul met li's is inderdaad correct, maar je moet het goed stylen zodat het zelfs in IE6 werkt.
Ik doe het altijd zo:
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
@ Jan: Als je position: relative gebruikt, hoef je geen width aan te geven. Zover ik me herinner, is handig voor een liquid layout.
Margin en float op 1 element? Dat is juist niet vriendelijk voor IE.
Margin en float op 1 element? Dat is juist niet vriendelijk voor IE.
Nog 2 probleempjes, 1 dat niet te maken heeft met het menu, en een die er wel te maken me heeft.
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?
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?
@ Mitchell: die width mag ook in procenten in combi met overflow: hidden. En die margin en float los je op met die display: inline.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Heb er effe een doctype bij gezet, hover en dat content dingetje zijn gefixed, allen nu staat het menu niet goed in IE. staan een paar pixels te ver naar links.
Het lijkt er op dat jullie allemaal een scherm met een resolutie van 1280x800 gebruiken. Anders was het jullie allang opgevallen dat alleen met die resolutie het menu mooi in de lege plek in de blauwe balk staat. Als je je venster vergroot of verkleint, zie je dat het menu "meebeweegt".
Gewijzigd op 01/01/1970 01:00:00 door Douwe
'Jan:
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:
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.
Ik zie nu pas hoe idiotisch deze site is opgebouwd, het zijn allemaal divs die de volle breedte nemen en hij heeft enkel en alleen de achtergrond gecentreerd.. Dit is zeer verkeerd.
Plaats de hele site in een wrapper en centreer die wrapper.
Plaats de hele site in een wrapper en centreer die wrapper.
'Jan:
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:
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.




