horizontaal menu, met float left centreren in een div...

IvoBookish · 30 mei 2012

Goeden dag,

Op www.huizerenboom.nl ben ik een website aan het maken.
Ik heb daarin een mooie horizontaal menu gemaakt met behulp van een list, float-left.
Erg netjes is hij nog niet omdat ik hem eigenlijk in zijn geheel gecentreerd wil hebben.
Nu lijkt hij (redelijk) gecentreerd maar in IE9 loopt het menu door naar de volgende regel.

Wie heeft er een tip voor mij?

pum · 31 mei 2012

Het was even puzzelen maar zo moet het volgens mij werken. Ik heb ik de code commentaar geplaatst zodat je beter snapt waarom bepaalde dingen zo gedaan zijn.

index.html

HTML:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Centreren float menu</title>
		<link rel="stylesheet" href="screen.css">
	</head>
	
	<body>
		<div id="page">
			<header id="header">
				<div class="menucontainer mainnav"><!-- hier dubbele class -->
					<ul class="menu main"><!-- hier dubbele class -->
						<li><a href="" title="blaat">link1</a></li>
						<li><a href="" title="blaat">link1</a></li>
						<li><a href="" title="blaat">deze link is bijvoorbeeld breder</a></li>
						<li><a href="" title="blaat">link1</a></li>
						<li><a href="" title="blaat">link1</a></li>
						<li><a href="" title="blaat">link1</a></li>
						<li><a href="" title="blaat">link1</a></li>
					</ul>
				</div>	
			</header>	
			<div id="main">
				<img src="uc.jpg"/>
			</div>
			<footer class="menucontainer footnav"><!-- hier dubbele class -->
				<ul class="menu foot"><!-- hier dubbele class -->
					<li><a href="#" title="blaat">link 1</a></li>
					<li><a href="#" title="blaat">link 1</a></li>					
					<li><a href="#" title="blaat">link 1</a></li>			
				</ul>
			</footer>
		</div>	
		
	</body>
</html>

je css bestand screen.css

Code:

body {
	margin: 0;
	padding: 0;
	font: normal 16px 'Arial';
}

img {
	display: block;
}

a img {
	border: 0;
}
	
	#page {
		position: relative;
		width: 900px;
		margin: 0 auto;
	}
	
	/*  Met padding-bottom word aan de onderkant van de #header ruimte beschikbaar gemaakt. 
		hierdoor kan .mainnav met position absolute onder header geplaatst worden */	
	#header {
		position: relative;
		width: 900px;
		height: 180px;
		background: #e9e9e9 url(header.jpg) left top no-repeat;
		padding-bottom: 30px;
	}
	
	/* ALGEMENE STIJL MENU */
	
	.menucontainer {
		clear: both;
		float: left;
		overflow: hidden;
		width: 100%;			
	}	
				
		.menu {
			float: left;
			left: 50%;
			list-style-type: none;
			margin: 0 auto;
			padding: 0;
			position: relative;
		}
		
			.menu li {
				float: left;
				position: relative;
				right: 50%;
			}			
			
				.menu li a {
					background: none repeat scroll 0 0 #0088CC;
					border: 1px solid #FFFFFF;
					color: #FFFFFF;
					display: block;
					padding: 4px 16px;
					text-decoration: none;
					width: auto;
				}
				
				.menu li a:hover {
					background: none repeat scroll 0 0 red;
				}
				
	/* 
		door de dubbele classes die worden mee gegeven aan beide div's (index.html) erft 
		de tweede class op dezelfde div alles van de eerste class 
		dit zorgt ervoor dat de tweede class dezelfde stijl meekrijgt.
		Hierdoor hoef je bij de tweede class alleen aan te geven wat anders is. 
		
		N.B: dubbele classes werken niet in alle browsers  */

        /* doordat #header een position relative heeft kan .mainnav hier op worden uitgelijnd */
	.mainnav {
		position: absolute;
		left: 0;
		bottom: 0;
		background-color: purple;
	}

	/* MAIN */
	
	#main {
		background-color: yellow;
	}
	
	/* FOOTER */
	
	#footer {
		width: 900px;
		height: 50px;
		background-color: green;
	}
	
		/* hier erft hij weer de stijlen van menucontainer dus alleen stijlen wat anders is voor .footnav */
		.footnav {		
			background-color: green;
		}
	
		/* ook hier gebruik ik een dubbele class in dit geval word alles over geerfd van .menu
		hier alleen stijlen wat anders is voor .foot li a */
		.foot li a {
			padding: 17px;						
		}								
		
		/* etc */
		.foot li a:hover {
			background: none repeat scroll 0 0 pink;
		}

Ik hoop dat dit is wat je zocht. Mocht je nog vragen hebben dan kun je ze hieronder posten

IvoBookish · 31 mei 2012

Whoowww... THX. :thumb:
Ik heb het nog niet helemaal bekeken maar alvast bedankt voor de gedane moeite!
Eigenlijk had ik een heel eenvoudig tipje verwacht waar het mee opgelost zou worden, waar ik zelf dan net niet achter kwam

nogmaals Dank, laat nog van me horen

csshunter · 31 mei 2012

Hoi Ivo,
Zo, dat is lang geleden: de tresmode.nl, met nog steeds een geurige bak verse koffie!

*)
Maar ter zake.
Een alternatief voor het floaten van het menu zou kunnen zijn: niet floaten, de <ul> een {text-align: center;} geven, en dan de <li>'s een {display: inline;}.

Maar zowel voor de suggestie van pum als de inline-oplossing zie ik nog een probleempje.
De breedte let hier nogal nauw: het past er net op, en bij het minste geringste dropt het laatste item naar beneden.
Dat gebeurt in elk geval als de bezoeker in Firefox het letterformaat aanpast. Daar is het menu niet tegen bestand.
In principe kan de oplossing zijn: een flexibele hoogte van het menu maken, zodat er een volgende regel kan ontstaan waarop 1 of meer niet passende items dan terechtkomen.

Zie bv. de manier op pagina 21 van het Reisverslag uit Cascade-land.

In principe ... maar helaas niet in de praktijk van de huidige site-in-aanbouw.
De onderkant van de hovers sluit immers mooi aan bij het onderbalkje van het menu. Als er een tweede regel ontstaat, is dat niet meer het geval voor de items op de eerste regel.

Om het altijd goed te laten gaan, lijken er 2 oplossingen te zijn:

De tekstgrootte van het menu kleiner maken (items blijven dan gecentreerd), zodat er altijd maar 1 regel blijft en de items pas bij behoorlijke grootte de zijkanten raken.
Of geen tekst-menu maar een image-menu waarin de items niet van breedte kunnen veranderen.

Bij de eerste oplossing zal de standaard-lettergrootte vrij klein moeten zijn, wat niet zo mooi/handig is:

Daarom denk ik dat je het beste kunt overstappen naar een image-menu. **)
Dat kan dan 1 image zijn, waarin alle normale toestanden en alle hover-varianten gecombineerd zijn (een "css-sprite"). Dit img kan background-img zijn, en voor de verschillende items en hun hovers met css background-position's bestuurd worden.

Methode: Een blokje knoppen

Met vriendelijke groet,
CSShunter
_________
*) Ik zie trouwens dat er van 30-01-2012 nog een vraag van je open staat. Is dat inmiddels gelukt, of is er nog assistentie nodig?

**) Met px als eenheid voor het letterformaat (i.p.v. em's) krijg je een fixed font-size in Internet Explorer, die de bezoeker niet kan opschalen; daarmee gaat het goed wat IE betreft.
Maar! (a) IE houdt zich hiermee niet aan de standaarden, en (b) andere browsers trekken zich er niets van aan: die vinden terecht dat de bezoekers de baas moeten zijn over de lettergroottes op hun scherm, en niet de websitebouwer.

IvoBookish · 1 jun 2012

Hoi csshunter,
Das idd lang geleden en ja, de koffie staat "nog steeds" voor je klaar

..
Nu we het daar toch over hebben, krijg mega positieve reacties van mijn moeders klanten, deel komen die jou toch dus bij deze :thumb:

even on topic,
Ik ga je reis snel eens beleven, wist nog niet van het bestaan!
Verder denk ik dat ik voor de plaatjes optie ga kiezen, al wringt het hier wel een beetje, daarmee bedoel ik eigenlijk, dat het raar is dat ik wel mag bepalen welk lettertype men ziet als het een (vaak net wat minder scherp) plaatje is en niet mag bepalen hoe groot het lettertype is als ik er tekst van maak...

toch?!
Ik snap waarom het schaal baar moet zijn hoor daar niet van!

Maar goed, als nette webb(urger)ouwer zal ik me aan de regeltjes houden ;-)
Plaatjes it is...

TNX again, wordt vervolgt.

Ps:
Mijn 30-01-2012 vraag is idd nog niet opgelost. Het is een grafische probleempje en op zich draait de site (deels af) nu zonder de oplossing maar ik zou het mooier vinden als daar een eenvoudige oplossing voor is ;-)
http://www.mozambiquehoneycompany.com/2.0

csshunter · 1 jun 2012

Hoi Ivo,
Leuk dat tres zo aardig in de smaak valt. :thumb: - Ik verwijs hier af en toe naar het betreffende topic, voor welke toeren je soms moet uithalen om een pagina met background-afbeelding auto-rekbaar te krijgen.

... al wringt het hier wel een beetje ...

Ja, daar heb je wel gelijk in. Aan de andere kant:

bij plaatjes kan je een alt="..." meegeven met wat er op staat,
en/of een title="...",
en/of, wat ik meestal doe, een tekst van de link binnen de (lege) <a> zetten, en die met css buiten het gezichtsveld van het scherm plaatsen. *)

Op deze manier blijft een plaatjes-menu toch goed toegankelijk (ook voor pure tekstbrowsers en voorleesbrowsers); en, niet minder belangrijk, ook prettig vindbaar voor de Google-bot en andere zoekmachines.

Nu kan je natuurlijk ook bij hele kleine tekst een title zetten (bij alles kan je een title zetten: zie hier!), want bezoekers die vergroting nodig hebben zullen ervoor zorgen dat ze de systeemletters van o.a. de title's flink groot hebben staan om die te kunnen lezen.
Maar dan ben je bezig je hele tekst te dupliceren.

Voor de andere vraag: zie de andere vraag!

Met vriendelijke groet,
CSShunter
____________
*) Bv. als het plaatje een background-img bij de link is:

HTML:

<ul id="menu">
    <li><a id="home" href="index.html"><span>Home</span></a></li>
    ... enz.

Met als css:

Code:

#menu a span {
    position: absolute;
    left: 0;
    margin-left: -9999px;
    }

IvoBookish · 5 jun 2012

Gaat goed!!
alleen...
Het menu wat ik nu gebruik is natuurlijk weer lastiger dan de "een blokje knoppen".
Aan het begin en aan het einde zit (nu ik er 1 plaatje van gemaakt heb) 15pix zonder knopjes. Als ik die weer wil geven zoals bij de knoppen worden ze "klick baar", er komt een vingertje i.p.v. een pijltje.. Ik kan daar natuurlijk een img in zetten en daarna het menu beginnen maar misschien is er nog een "beter" oplossing?
project te volgen op: http://www.huizerenboom.nl/temp/

Weer hartelijk dank!

ps: Die

tekst van de link

ga ik zeker ook toepassen!

csshunter · 5 jun 2012

Ik kan daar natuurlijk een img in zetten ...

Ja, dat is 'm! :thumb:

Je haalt de twee spacer-<li>'s uit het menu, dan blijven alleen de echte links over.
Je geeft in plaats daarvan het menu L/R ruimte met #knoppenblok {padding:0 15px;}.
Links en rechts zit nu wit, waar het img moet komen.
Het img is er al! Je combi-image kan hergebruikt worden.
Dat gaat nu ook als background-image in het #knoppenblok, dan ligt het precies onder de andere.
Nu is er nog steeds wit. Klopt, dat komt omdat de list-items gefloat zijn, en ontsnappen uit de normal flow van de html-elementen. Daardoor heeft de <ul> waar ze in zitten geen hoogte.
Dat wordt gecorrigeerd met: #knoppenblok {height: 70px;}.
Nu heeft de <ul id="knoppenblok"> wel hoogte, en het bg-img wordt daarmee getoond.

Met vriendelijke groet,
CSShunter

IvoBookish · 6 jun 2012

Helemaal netjes!! Wist wel dat jij daar een goede slimme en eenvoudige/nette manier voor wist :thumb: THX...

alleen...

Toch weer tegen een probleem aan gelopen

Normaal gebruik ik a:active om een plaatje te laden als de pagina active is. Kan dat ook in dit systeem? (had ik eigenlijk eerder aan moeten denken)

Verder ben ik erg nieuwsgierig naar je oplossing want die lukt me niet zo

, misschien een ander topic?

sorry, nieuwe link www.huizerenboom.nl/2.0

csshunter · 6 jun 2012

Auto-identificatie voor knoppen!

Hoi Ivo,

Normaal gebruik ik a:active om een plaatje te laden als de pagina active is. Kan dat ook in dit systeem?

Nee, want in dit systeem ga je bij een nieuwe pagina naar een echte nieuwe pagina, en die kan niet weten welke knop op de vorige pagina actief werd gemaakt.

Maar ... een pagina kan wel weten wat de pagina zelf is, en daar kan je handig gebruik van maken.

Als volgt:
Je geeft elke pagina een id mee in de <body>-tag, bv.:

<body id="nieuws">
<body id="tuinpark">
enz.

Nu geef je via de css opdracht om als de pagina de id="nieuws" heeft (en alleen dan), de nieuwsknop (knop1) dezelfde stijl te geven als bij een hover.
Hetzelfde bij de andere pagina/knop verbintenissen:

Code:

#nieuws   #knop1 a { cursor: default; background-position: -15px -70px }
#tuinpark #knop2 a { cursor: default; background-position: -96px -70px }
enz.

Behalve de opgelichte knop is hier tegelijkertijd ook de cursor bij die knop op normaal gezet (pijltje ipv handje), omdat er toch niet op geklikt hoeft te worden: daar ben je al.
Dit rijtje voeg je dus toe aan het stylesheet, en dan gaat alles automatisch.

Test 1: pagina Nieuws henb-nws.htm
Test 2: pagina Tuinpark henb-prk.htm
Deze pagina's hebben dus dezelfde css en dezelfde html in het menu, alleen de id van de body verschilt.

Op de kom ik later nog terug.

Met vriendelijke groet,
CSShunter

IvoBookish · 25 jun 2012

Sorry... Excuses...

Al een aantal weken niet kunnen werken aan het hierboven besproken probleem, vandaar ook geen reactie...
(operatie gehad)

Zal er spoedig weer mee verder gaan!!!!!

IvoBookish · 13 aug 2012

HEHE..... daar ben ik dan weer eindelijk

!!! Weer helemaal top fit :thumb:

Volgens mij staat het er in zoals jij het bedoeld hebt!
(gewoon onder www.huizerenboom.nl, geen 2.0 meer)

Als ik het goed begrijp zeg je nu, als iets de naam(id=) Nieuws heeft en daarin heeft iets de naam(id=) knop1 zorg dan dat bij de link (a) de cursor standaard is en de achtergrond afbeelding verschuift naar -15px -70px...
Super handig!

Dit menu kan ik straks het handigste in een php bestandje stoppen heb ik van iemand geleerd

Ben benieuwd naar je uitleg over de oplossing!
Ik heb je aanwijzingen opgevolgd maar ik krijg geen "tekst vlakje" in beeld, of hoeft dat niet??

Nogmaals excuses voor de enorme vertraging

csshunter · 13 aug 2012

Hoi Ivo,
Niks te sorry'en hoor:

Weer helemaal top fit

Prachtig! :thumb:
En het blokje knoppen draait ook mooi nu.

Ho - herstel!
In Internet Explorer 7 komen de knoppen in het midden onder elkaar te staan (gedeeltelijk onder de content-afbeelding door).

Dit is te verhelpen met #knoppenblok li a {display: inline-block;} ipv #knoppenblok li a {display: block;}.
De andere browsers en ook IE8 en IE9 hebben daar geen last van.
Tegelijk kan je ook even in het stylesheet veranderen: ; moet zijn: /* einde knoppenblok-styles */ (de html-commentaarmethode werkt niet in css).
Test: hboom-nw.htm
Valt voor de verschillende IE-versies te controleren met Netrenderer.com (zonder het hover-effect, want screenshots).

=======

Als ik het goed begrijp ...

Begrijp je goed.

=======

... menu het handigste in een php bestandje ...

Indendraad.

=======

uitleg over je oplossing...

Deze oplossing zit al keurig in je html en css!

HTML:

<div id="menu">
    <ul id="knoppenblok">
        <li id="knop1"><a href="../html/nieuws.htm"><span>Nieuws</span></a></li>
        <li id="knop2"><a href="../html/tuinpark.htm"><span>Tuin &nbsp; Park</span></a></li>
        enz.

Code:

#menu a span {
    position: absolute;
    left: 0;
    margin-left: -9999px;
    }

Wat tussen de staat, krijgt op scherm (bij ingeschakeld css) een absolute positie. Dwz de 's staan nu los van de item-posities in het menu. Met de {left:0;} worden ze helemaal op de linkerrand van de schermbreedte gezet. En met de {margin: -9999px;} worden ze voorbij die rand geschoven: een paar metertjes links van het scherm. En waar geen scherm zit, zie je de inhoud van de 's niet meer!

Maar de -inhouden staan nog steeds wel als pure tekst in de html.
Dat kan je zien als je in de browser de css uitschakelt (bv. Firefox: menu Beeld > Paginastijl > Geen stijl): dan komt er gewoon het lijstje tekst-links. Verticaal omdat dat zonder css altjd zo is met list-items, en zonder images, omdat die via de cssbackground getoverd werden.
Dat ziet dus ook een pure tekst-browser (resultaat: zie hier).
En de Google-bot is blind voor wat er op image-links staat, maar neemt hetzelfde waar als een pure tekst-browser: de tekst-links; dat gaat dus ook goed!
Wat je ook ziet, is dat er tussen "Tuin" en "Park" (en tussen "Service" en "Onderhoud") geen &-teken staat, maar een extra spatie.
Maar dat klopt: in de html staat   in plaats van &

=======
Wat ik verder nog zou overwegen, is om het tractortje in de kop te spiegelen; nu rijdt ie (met de leesrichting mee) van het scherm af:

- - -

Andersom komt ie naar je toerijden:

... en gaat de beweegrichting naar de tekst van de inhoud.
En daar moet de lieve lezer naar toe!

Met vriendelijke groet,
CSShunter

IvoBookish · 26 aug 2012

Kan door omstandigheden ff niet op de site (server probleempjes) maar komt goed...
Alvast toch even een reactie

=======
uitleg over je oplossing...
Deze oplossing zit al keurig in je html en css!

Ja, zo ver snapte ik het ook, maar is het nu niet vervelend dat men niet een bokje te zien krijgt met waar het plaatje voor staat, of is dat alleen gemaakt voor slecht ziende mensen ed. en leest hun apparaat die tekst dan toch wel?

Over de tractor, Je hebt er helemaal gelijk in alleen heb ik 2 bezwaren ;-)
1- de zon op ons schermpje komt altijd van links boven, (want daar komt hij op?) en op de tractor, zoals dat nu is klopt dat ook behoorlijk.
2- euh, er zijn al diverse reclame uitingen de deur uit gegaan met de de huidig weg rijdende tractor...

Maar ik zal toch even overleggen of ze er bezwaar bij hebben om hem even te laten omkeren..
binnenkort weer verder hoop ik!!!

csshunter · 27 aug 2012

ff snel: of zo?

===
Over de : Ja, bv. blinden horen hun voorleesbrowser kort en krachtig uitspreken wat tussen de ... staat: daar gaat deze link naar toe, en dat is precies wat men wil weten.
Dat er bv. bij "Nieuws" een plaatje als achtergrond staat met een krant er op, is voor hen niet echt relevant. Het is een extraatje voor scherm-bekijkers, en niet nodig om de link te kunnen begrijpen.

Een alt="..." van een voorgrond-image (NB: alleen in Internet Explorer verschijnt een tooltip-blokje met die tekst, andere browsers niet!) heeft dezelfde functie als zo'n : in woorden vertellen wat er op een afbeelding te zien is.

Alt - alternatief voor als er geen plaatje is (ook als plaatje ontbreekt, dan komt het ipv het plaatje op scherm).
Eventueel kan wel voor alle browsers een tooltip gemaakt worden via de title="..." eigenschap van een element (niet beperkt tot links!)
Door de alt en/of title wel/niet te vullen, kan IE op het goede spoor gebracht worden: zie hier.

Voor scherm-bekijkers is dat allemaal overbodig: als ze over een mooi geïllustreerde knop "Nieuws" hoveren, hoeven ze niet tegelijkertijd ook nog een tooltip te zien waar "Nieuws" op staat. Voegt niets toe, en verstoort zelfs het kijken naar de afbeelding!

Met vriendelijke groet,
CSShunter

IvoBookish · 27 aug 2012

Maar w3c vindt dat je een alt tekst toe moet voegen toch?

csshunter · 27 aug 2012

Ja, bij een image is het vermelden van een alt verplicht.
Maar het kan ook een "lege alt" zijn, zonder een opgegeven inhoud tussen de aanhalingstekens (en ook geen spatie ertussen).
Bijvoorbeeld:

HTML:

<img src="images/paragraafversiering.png" width="20px" height="10px" alt="">

Dat is dan een image dat er alleen voor de mooie opmaak in staat, en verder geen betekenis heeft. Een alternatieve tekst-omschrijving ervan is niet nodig voor bv. een blinde die de pagina laat voorlezen.

De html-specificatie zegt hierover:
=====

For user agents that cannot display images, forms, or applets, this attribute specifies alternate text.
...
While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:

Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (""). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.
Do not specify meaningless alternate text (e.g., "dummy text"). Not only will this frustrate users, it will slow down user agents that must convert text to speech or braille output.

=====
Zie: www.w3.org/TR/html401/struct/objects.html#h-13.8

horizontaal menu, met float left centreren in een div...

IvoBookish

Gebruiker

pum

Gebruiker

IvoBookish

Gebruiker

csshunter

Meubilair

IvoBookish

Gebruiker

csshunter

Meubilair

IvoBookish

Gebruiker

csshunter

Meubilair

IvoBookish

Gebruiker

csshunter

Meubilair

IvoBookish

Gebruiker

IvoBookish

Gebruiker

csshunter

Meubilair

IvoBookish

Gebruiker

csshunter

Meubilair

IvoBookish

Gebruiker

csshunter

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy