probleem lettergrootte tussen letters dropdownmenu

Status
Niet open voor verdere reacties.
W

webdev

Gebruiker
Lid geworden
29 jul 2011
Berichten
67
hallo!
ik heb een probleem met een dropdown menu
want de lettergrootte's kloppen niet/ hier het script:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<link rel="stylesheet" href="./css/algemeen.css" type="text/css">

<script type="text/javascript"> 
var timeout	= 100;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose; 
</script>
		
</head>

<body>

<div id="header"> 
	
</div> 
 
<ul id="navigatie"> 
	<li><a href="../index.php">home</a></li> 
	<li><a href="../page2.php"
		onmouseover="mopen('m1')"
		onmouseout="mclosetime()"
		>page</a>
		<div id="m1"
		onmouseover="mcancelclosetime()"
		onmouseout="mclosetime()">
		<a href="#">page 1</a>
		<a href="#">page 3 2</a>
		</div>
	</li> 
	<li><a href="#">page</a></li> 
	<li><a href="#">page</a></li> 
	<li><a href="#">page</a></li> 
	<li id="laatst"><a href="#">page</a></li> 
</ul>
 
<div id="content" style="clear:both">

teksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst

</div> 				
</body>
</html>

Code: 
html {
	height: 100%;        
	padding-bottom: 1px; 	}
 

 
body {                     
	width : 876px;           
	margin : 0 auto;        
	background: rgb(213,238,249) url(../images/background1.png);
	background-repeat: repeat-x;
	background-position : 0 0;
	font-size: 62.5%;      
	line-height : 120%;      
	font-family: Arial, Helvetica, sans-serif;
	
	
}
 
#header {
	height : 200px;							
        background-image : url(../images/header.png);	
	background-repeat:no-repeat;
	padding: 0 20px;
}
 
#navigatie {           
	margin: 0;         
	padding: 0;       
	list-style: none;  
	font-family : verdana, Helvetica, Arial, sans-serif; 
	font-size: 2.4em;
	margin: 0;
	padding: 0px 200px 0px 20px;
	}
	
h4 {
	color: #0053CC;
	font-size: 2.2em;
	margin: 0;
	padding: 0px 200px 0px 20px;
	}

h5 {
	color: #0053CC;
	font-size: 2.0em;
	margin: 0;
	padding: 0px 200px 0px 20px;
	}
	
h6 {
	color: #0053CC;
	font-size: 1.8em;
	margin: 0;
	padding: 0px 200px 0px 20px;
	}
	
p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	margin: .5em 0;
	padding: 0px 200px 0px 20px;
	line-height: 130%;
	}
	
#onderaan {
	position: absolute; bottom: 0;
	}

aleen dus in de menu balk zijn de letters van de bovenste rij niet geljk aan het dropdown gedeelte!

groetjes,
 
perongeluk css niet goed gekpieerd:

Code: 
navigatie {            /* de <div> eromheen kan weg, dit is al de <ul> geworden ! */
	margin: 0;          /* voor alle browsers op nul zetten */
	padding: 0;         /* voor alle browsers op nul zetten */
	list-style: none;   /* bullets weg */
	font-family : verdana, Helvetica, Arial, sans-serif; /* lettertypen van het menu */
	font-size : 1.28em;    /* lettergrootte van het menu in em-maateenheid */
	font-weight : bold; /* dik gedrukte tekst */
	z-index: 30;
	}
 
#navigatie li {
	float : left;                   /* elk deeltje naast elkaar */
	width : 146px;                  /* elk deeltje met een breedte van 145px */
	margin: 0;                      /* voor alle browsers op nul zetten */
	padding: 0;                     /* voor alle browsers op nul zetten */
	text-align : center;
	/*border : solid #00C0C0;         /* type en kleur randje */
	/*border-width : 1px 0 1px 1px;   /* streepjes tussen elk deeltje van het menu */
	   	   /* geen rechterrandje, dat is het linkerrandje van de volgende */
	}
/*#navigatie li#laatst {
	border-right: 1px solid #00C0C0; /* de laatste heeft geen volgende, dus hier wel 
	}*/
 
#navigatie a {
	color : black;                  /* letterkleur menu */
	text-decoration : none;         /* onderstreping weg */
	display : block;    	/* het hele oppervlak van het menu-item is aanklikbaar */
	padding : 0px 0px;      /* padding */
	background-image : url(../images/menubar-top2.png);  /* achtergrond plaatje van het menu*/
	background-position : 0 50%;
	height: 2em;
	line-height : 2em;		/*hoogte van het menu*/
	}
 
#navigatie a:hover {
	background-image : url(../images/menubar-top_hover.png) ;  /* het iets donkerder worden als muis er over heen gaat */
}

#navigatie div {
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: rgb(255,255,255);
	border: 1px solid #EAEBD8;
}

	#navigatie div a {
		position: relative;
		display: block;
		margin: 0;
		width: auto;
		white-space: nowrap;
		text-align: center;
		text-decoration: none;
		background: #FF5454;
		color: #000;
		font-size : 1.28em;
		width: 146px;
	}
	
	#navigatie div a:hover {
		background: #49A3FF;
		color: #FFF;
	}
		

a:link {
	color: #FF000D;

	}

a:visited {
	color: #F47177;
	}
 
#content {
	clear : left;                   /* onder de floats van het menu beginnen */
	height : 1000px;
	padding: 10px 20px;             /* binnen-opvulling voordat de tekst begint */
	background : rgb(255,255,255);  /* content achtergrond wit */
	color : black;
}
h1 {
	color: #0053CC;
	font-size: 3.2em;
	margin: 0;
	padding: 0px 200px 0px 20px;
	}

h2 {
	color: #0053CC;
	font-size: 2.7em;
	margin: 0;
	padding: 0px 200px 0px 20px;
	}
	
h3 {
	color: #0053CC;
	font-size: 2.4em;
	margin: 0;
	padding: 0px 200px 0px 20px;
	}
	
h4 {
	color: #0053CC;
	font-size: 2.2em;
	margin: 0;
	padding: 0px 200px 0px 20px;
	}

h5 {
	color: #0053CC;
	font-size: 2.0em;
	margin: 0;
	padding: 0px 200px 0px 20px;
	}
	
h6 {
	color: #0053CC;
	font-size: 1.8em;
	margin: 0;
	padding: 0px 200px 0px 20px;
	}
	
p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	margin: .5em 0;
	padding: 0px 200px 0px 20px;
	line-height: 130%;
	}
	
#onderaan {
	position: absolute; bottom: 0;
	}
 
Hoi webdev,
Aha! Je hebt staan:
Code: 
#navigatie {
   ...
   font-size : 1.28em;
   }
en:
#navigatie div a {
   ...
   font-size : 1.28em;
   }
Dat betekent: alles in de #navigatie moet een lettergrootte van 1.28em krijgen.
En alles wat in een <a> in een <div> in de #navigatie staat, moet ook een lettergrootte van 1.28em krijgen.

Maar: de em-eenheid is een relatieve maat (en hier gelijk aan 128%).
Relatief = relatief ten opzichte van het omvattende element.

Met de html:
HTML: 
<body>
<ul id="navigatie"> 
    <li><a href="../index.php">home</a></li> 
    <li><a href="../page2.php" onmouseover="mopen('m1')" onmouseout="mclosetime()">page</a>
        <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
            <a href="#">page 1</a>
            <a href="#">page 3 2</a>
        </div>
    </li> 
</ul>
</body>
  • ... wordt de font-size van de <li>'s in de #navigatie daarmee: 1.28 maal de font-size van de <body>,
  • ... en de font-size van de <a>'s van de submenu-items: 1.28 maal de font-size van het omvattende element. Het omvattende element is de <div>, die zelf geen font-size heeft, en dus op 100% blijft staan. Dus moet het omvattende element van de <div> genomen worden: dat is de <li>, die een font-size van 1.28 maal de font-size van de <body> heeft. Oftewel: de submenu-items moeten een font-size van 1.28*1.28 keer de font-size van de body krijgen.
  • Daarmee worden de submenu-items dus 1.28 keer groter dan de menu-items!
De oplossing ligt nu voor de hand: géén font-size opgeven voor de #navigatie div a.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan