menu opties in rechthoekige gekleurde blokjes

Status
Niet open voor verdere reacties.
P.S. Daar bedoelde ik het horizontale menu bovenaan.
Ik zie het ook regelmatig verticaal, maar ik kan nu zo gauw even geen voorbeeld vinden.
 
Zoiets?
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
		body {font-family: verdana, arial, sans-serif;}
		ul {
			width: 574px; 
			height: 25px;           /* om achtergrondkleur te kunnen geven */
			margin: 0;                /* vanwege verschillen tussen browsers */
			padding: 0;              /* idem */
			list-style-type: none; 
			background: #246eb7;
			}
	  ul li {
			float: left;                     /* anders komen ze onder elkaar te staan */
			}
		ul a {
			display: block;            /* om hoogte en breedte en zo te kunnen gebruiken */
			border-left: #246eb7 solid 1px;       /* bij hoveren verschijnt 'n border  van 1px links en rechts */
			border-right: #246eb7 solid 1px;     /* door altijd 'n border neer te zetten, voorkom je schuiven van de <a>'s bij hoveren */
			line-height: 25px;                         /* tekst komt automatisch verticaal in het midden van de regelhoogte */
			text-decoration: none;
			color: white;
			text-align: center;                     /* tekst horizontaal centreren */
			}
		li#patient a {
			width: 104px;
			}
		li#bezoeker a {
			width: 134px;
			}
		li#professional a {
			width: 154px;
			}
		li#werkenleren a {
			width: 174px;
			}
		ul a:hover {
			background: red;
			border-left: white solid 1px;
			border-right: white solid 1px;
			}
	</style>
</head>
<body>
<ul>
	<li id="patient" ><a href="/smartsite.dws?id=HOME_PAT">pati&euml;nt</a></li>
	<li id="bezoeker" ><a href="/smartsite.dws?id=HOME_BEZ">bezoeker</a></li>
	<li id="professional" ><a href="/smartsite.dws?id=HOME_PRO">professional</a></li>
	<li id="werkenleren" ><a href="/smartsite.dws?id=HOME_LER">werken &amp; leren</a></li>
</ul>	
</body>
</html>
De borders links en rechts van de <a>'s zijn in dezelfde kleur als de achtergrond van de <ul>. Daardoor zie je ze niet. Ze zijn nodig omdat bij hoveren de <a>'s 'n border links en rechts krijgen. Daardoor zouden ze 2px breder worden, waardoor alle <a>'s 2 px verschuiven.
Door ze altijd 2 px breder te maken (met die onzichtbare borders dus) voorkom ik dat 't 'n dansschool in plaats van 'n menu wordt.
 
Laatst bewerkt:
Bedankt!! Hier kan ik mee verder.:)
Uiteindelijk heb ik de verticale variant nodig, ik zal eens kijken of ik dat zelf aan de praat krijg.
 
Mooi. Die verticale is makkelijker dan je misschien denkt, maar ik zal niks verklappen :D
Wat ik nog vergat: in de links moet 'n title komen:
HTML: 
<a href="/smartsite.dws?id=HOME_PAT" title="Bekijk onze schitterende collectie patiënten">pati&euml;nt</a>
Dat is voor spraakbrowsers e.d. van belang, en dus ook voor zoekmachines.
 
Ik heb er iets van kunnen maken - voor het gemak in de bijlage.
Volgens mij is het principe wel gelukt. Maar het is eigenlijk een beetje overheersend geworden.

Wat vind je ervan? Heb je nog aanbevelingen?
 

Bijlagen

Ik vind zo'n bijlage eigenlijk niet zo'n goed idee. Het is veel makkelijker als de code online staat. Ik werk met Linux, en daar draait IE niet op. Dus dit is veel extra werk. En veel meer mensen zullen 't ook bekijken als 't online is te zien, wat (hopelijk) meer reacties oplevert.

't Werkt niet in Firefox, Opera, Google Chrome en Safari. Je moet eigenlijk je code ook gelijk in die browsers testen. De links staan onder elkaar, maar je hebt de hoogte bij <ul> laten staan: 25 px. Nu proberen die browsers alles in die 25 px te proppen, en dat gaat wat lastig.
Dus bij <ul> moet die height: 25px; weg.

Maar nu is er helemaal geen hoogte meer, en dan werkt hoveren ook niet goed. Dus kun je toevoegen in je css:
Code: 
ul li {height: 2.4em; padding: 6px 0;}
Er zijn tig manieren om dit te doen, maar dit ziet er wel leuk uit, vind ik. De padding is voor wat afstand tussen de links. 'n Regelhoogte van 1.2em is min of meer standaard. Als je em als eenheid neemt, groeit de regelhoogte in alle browsers mee met de lettergrootte.

Nu je vraag wat ik ervan vind. Ik vind 't er best leuk uitzien. Alleen zou ik nooit knalrood nemen als hoverkleur. Als je 'n zachtere kleur neem, is 't gelijk minder overheersend. 'n Zachte kleur blauw past ook beter in het kleurenschema van de pagina. Volgens mij. (Ik moet er wel even bij zeggen dat ik kleurenzwak ben :D Dat is niet kleurenblind, maar er is geen kunstschilder aan mij verloren gegaan.)

De pagina past niet in 'n 1024x768-scherm, dat is op de desktop nog het meest gangbare. Bij 'n kleiner scherm is 'n horizontale scrollbalk niet zo'n probleem, maar bij 'n 1024 is 't niet erg netjes. Bij 'n kleiner scherm kan 't ook niet anders, omdat 't om 'n afbeelding gaat.
Ik zou de foto en 't menu dus zo klein maken, dat 't niet breder dan 970 px wordt. Als je de foto smaller maak, wordt hij ook lager en past 't ook verticaal beter.
Je zou 't menu ook smaller kunnen maken, dan is 't gelijk ook minder overheersend, als je dat vindt.
 
Laatst bewerkt:
Ik heb het zo afgemaakt:

css-file:
Code: 
...

ul             {list-style-type: none;
                width: 180px;
                margin: 0;
                padding: 0;
                background: #ADDFFF;}/* #56A5EC #5CB3FF #98AFC7 */
ul a           {display: block;
                border-top: #ADDFFF 1px;
                border-bottom: #ADDFFF 1px;
                text-decoration: none;
                color: white;
                font-size: 10pt;
                text-align: center;}
ul a:hover     {background: #FDD017;
                border-top: white solid 1px;
                border-bottom: white solid 1px;}

ul li          {height: 2.4em;
                padding: 3px 0;}

html:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="IJ, Amsterdam, foto, foto's, Het IJ" />
<meta name="google-site-verification" content="bughF9BEZzlvoK8uztmBt414-mEwcT95RmcwR4ioL0E" />
<link rel="stylesheet" type="text/css" href="common_files/ijamsterdam_1picture.css" />
<title>IJ Amsterdam</title>
<link rel="icon" href="common_files/ijamsterdamicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="common_files/ijamsterdamicon.ico" type="image/x-icon" />
</head>
<body>

<div id="kop">
   <div id="binnenkantKop">
      <br/>
      <h3>ijamsterdam.nl</h3>
   </div>
</div>

<div id="menukolom">
   <div id="binnenkantMenukolom">
      <br/>
      <br/>
      <br/>
      <ul>

         <li><a href="pictureview/index.php?locatienaam=keerkringpark&amp;fotonaam=keerkringpark01_800_600" title="Foto's ter hoogte van Keerkringpark">Foto's ter hoogte van Keerkringpark</a></li>
         <li><a href="pictureview/index.php?locatienaam=bvpont&amp;fotonaam=bvpont01_800_600" title="Foto's vanaf Buiksloterveerpont">Foto's vanaf Buiksloterveerpont</a></li>
         <li><a href="pictureview/index.php?locatienaam=ijpleinveer&amp;fotonaam=ijpleinveer01_800_600" title="Foto's vanaf het IJpleinveer">Foto's vanaf het IJpleinveer</a></li>
         <li><a href="pictureview/index.php?locatienaam=ndsm&amp;fotonaam=ndsm01_800_600" title="Foto's vanaf NDSM pont">Foto's vanaf NDSM pont</a></li>
         <li><a href="pictureview/index.php?locatienaam=centraalstation&amp;fotonaam=centraalstation01_800_600" title="Foto's vanaf noordkant Centraal Station">Foto's vanaf noordkant Centraal Station</a></li>
         <li><a href="pictureview/index.php?locatienaam=ndsmterrein&amp;fotonaam=ndsmterrein01_800_600" title="NDSM Terrein">NDSM Terrein</a></li>
         <li><a href="pictureview/index.php?locatienaam=javabrug&amp;fotonaam=javabrug01_800_600" title="Piet Heinkade, Javabrug, Java-eiland">Piet Heinkade, Javabrug, Java-eiland</a></li>
         <li><a href="pictureview/index.php?locatienaam=overhoeks&amp;fotonaam=overhoeks01_800_600" title="Rondom Overhoeks">Rondom Overhoeks</a></li>
      </ul>
   </div>
</div>

<div id="inhoud">
   <div id="binnenkantInhoud">
      <br/>
      <h4>Foto's op en rond Het IJ</h4>
      <br/>
      <p><img src = "images_800_600/centraalstation/centraalstation01_800_600.jpg" alt="" /></p>
      <br/>
      <p>informatie@ijamsterdam.nl</p>
      <p>Deze website is in voorbereiding.</p>
      <br/>
   </div>
</div>

<div class="clearBoth"><!-- ! --></div>

</body>
</html>

Staat nu hier online.

Wat die foto-omvang betreft, daar ga ik eens even over nadenken. Als ik de foto resize, dan wordt de kwaliteit daarvan weer iets minder.:confused:

Bedankt weer voor alle hulp!!:):)
 
Ah, da's echt 'n stuk makkelijker, online!
Er staat 'n grappige fout in je css, die de validator niet opmerkt omdat dat 'n domme machine is en je gewoon allemaal geldige woorden gebruikt:
Code: 
border-bottom:1px none #ADDFFF;
border-top:1px none #ADDFFF;
Dat moet ziijn:
Code: 
border-bottom: 1px solid #ADDFFF;
border-top: 1px solid #ADDFFF;
Nu wordt er geen border neergezet, waardoor bij hoveren de tekst iets verschuift. In IE 6 zelfs 'n heel stuk, want dat telt alle borders plotseling bij elkaar op of zoiets.

Als de browser de foto verkleint, kan de kwaliteit (sterk) teruglopen. Maar als je 'm met 'n grafisch programma verkleint, kan de kwaliteit wel goed blijven. 'n Browser is gewoon niet ontworpen om afbeeldingen te vergroten/verkleinen.
 
Ik had al een verticaal menu aan de linkerkant gebouwd.
Nu wil ik alsnog een horizontaal menu rechtsboven toevoegen.
Dat heb ik hier geprobeerd:

http://www.dyitto.com/ijamsterdamtest/

In IE7 ziet het eruit zoals ik had bedoeld.
Maar in firefox komt de donkerblauwe achtergrondkleur (#ADDFFF) van de menu opties niet door.

Wat kan ik hieraan doen?

De pagina is al ge-w3c-d dus daar ligt het niet aan.
 
Ik heb uit:
HTML: 
div#yearfilter > ul li {float: left; width: 45px; height: auto;}
de height auto attribuut weggehaald. Toen werd het al veel beter.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan