Menu te smal

Status
Niet open voor verdere reacties.
-Anne-

-Anne-

Gebruiker
Lid geworden
30 apr 2007
Berichten
15
Mijn menu is te smal.. Dit wil zeggen dat de menuknoppen maar half zichtbaar zijn.


Code van menu.html
HTML: 
<HTML>
<HEAD>

<link rel="stylesheet" type="text/css" media="screen" href="CSS/stijlen.css"/>

</HEAD>
<BODY  bgcolor="#fffddf">
<table align="center">
	<TR>
<TD width="110px" height="90px" class="menuItem">
			<a class="link" href="../home.html" target="mainframe"><img style="border-style:none;" src="graphic/knophome.jpg"></a>
		</TD>
		<TD width="110px" height="90px" class="menuItem">
			<a class="link" href="../pag1.html" target="mainframe"><img style="border-style:none;" src="../pag1.jpg"></a>
		</TD>
		<TD width="110px" height="90px"class="menuItem"><a class="link" href="../pag2.html" target="mainframe"><img style="border-style:none;" src="../pag2.jpg"></a>
		</TD>
	<TD  width="110px" height="90px" class="menuItem">
			<a class="link" href="../pag3.html" target="mainframe"><img style="border-style:none;" src="../pag3.jpg"></a>
		</TD>
		<TD width="110px" height="90px" class="menuItem">
			<a class="link" href="page/contact.html" target="mainframe"><img style="border-style:none;" src="graphic/knopcontact.jpg" width="110" height="90"></a>
		</TD>
		
		</TD>
		
	</TR>
</table>



</BODY>
</HTML>


en het bestand stijlen.css
Code: 
.bloklinks{
	float:left;
	width:12%;
	background-color: #fffddf;
}

.content{
	float:left;
	width:80%;
        height:90%;
	background-color:#fffddf;
	border: 2px;
	border-style: solid groove;
	border-color: #000000;
	padding:10px;
}

.standaard{
	background-color:#fffddf;
}
	
.menu {
background-colour: #fffddf; 
background-repeat:no-repeat;
height: 90px; 
width: 110px;
} 

.menuItem {
	background-color: #fffddf;
	text-align: center;
	border-style: solid;
	border-color:#000000;
	border-width:2px;
height: 90px; 
width: 110px;
}

.link {
	text-decoration:none;
	color: #000000;
}


een pagina:
HTML: 
<HTML>
<HEAD>

<link rel="stylesheet" type="text/css" media="screen" href="../css/stijlen.css"/>
<title></title>

</HEAD>
<BODY class="standaard">

<div class="bloklinks">
&nbsp;
</div>

<div class="content">
<FONT FACE="Verdana, Tahoma, Century Gothic, Times New Roman" SIZE="2px" color="black">
tekst


<br><br><br>

<div class="bloklinks">

</div>


</BODY>
</HTML>


kan iemand mij hiermee helpen?
 
.bloklinks{
float:left;
width:12%;
background-color: #fffddf;
}

Haal width:12%;
er eens uit, of wijzig in
width:110px;
 
Hoe moet je menu er dan uitzien?

Heb nu dit:
HTML: 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>

<link rel="stylesheet" type="text/css" media="screen" href="../css/stijlen.css"/>
<title></title>
<style type="text/css">
.bloklinks{
	float:left;
	width:120px;
	background-color: #fffddf;
}

.content{
	float:left;
	width:80%;
        height:90%;
	background-color:#fffddf;
	border: 2px;
	border-style: solid groove;
	border-color: #000000;
	padding:10px;
}

.standaard{
	background-color:#fffddf;
}
	
.menu {
background-colour: #fffddf; 
background-repeat:no-repeat;
height: 90px; 
width: 110px;
} 

.menuItem {
	background-color: #fffddf;
	text-align: center;
	border-style: solid;
	border-color:#000000;
	border-width:2px;
height: 90px; 
width: 110px;
}

.link {
	text-decoration:none;
	color: #000000;
}
</style>
</HEAD>
<BODY class="standaard">

<div class="bloklinks">
&nbsp;
	<TR>
<TD width="110px" height="90px" class="menuItem">
			<a class="link" href="../home.html" target="mainframe">li1<br>
<img style="border-style:none;" src="graphic/knophome.jpg"></a>
		</TD>
		<TD width="110px" height="90px" class="menuItem">
			<a class="link" href="../pag1.html" target="mainframe">li2<img style="border-style:none;" src="../pag1.jpg"></a>
		</TD>
		<TD width="110px" height="90px"class="menuItem"><a class="link" href="../pag2.html" target="mainframe">li3<br>
<img style="border-style:none;" src="../pag2.jpg"></a>
		</TD>
	<TD  width="110px" height="90px" class="menuItem">
			<a class="link" href="../pag3.html" target="mainframe">li4<br>
<img style="border-style:none;" src="../pag3.jpg"></a>
		</TD>
		<TD width="110px" height="90px" class="menuItem">
			<a class="link" href="page/contact.html" target="mainframe">li5<br>
<img style="border-style:none;" src="graphic/knopcontact.jpg" width="110" height="90"></a>
		</TD>
		
		</TD>
		
	</TR>
</table>

</div>

<div class="content">
<FONT FACE="Verdana, Tahoma, Century Gothic, Times New Roman" SIZE="2px" color="black">
tekst


<br><br><br>

<div class="bloklinks">

<table align="center">
	<TR>
<TD width="110px" height="90px" class="menuItem">
			<a class="link" href="../home.html" target="mainframe">li1<br>
<img style="border-style:none;" src="graphic/knophome.jpg"></a>
		</TD>
		<TD width="110px" height="90px" class="menuItem">
			<a class="link" href="../pag1.html" target="mainframe">li2<img style="border-style:none;" src="../pag1.jpg"></a>
		</TD>
		<TD width="110px" height="90px"class="menuItem"><a class="link" href="../pag2.html" target="mainframe">li3<br>
<img style="border-style:none;" src="../pag2.jpg"></a>
		</TD>
	<TD  width="110px" height="90px" class="menuItem">
			<a class="link" href="../pag3.html" target="mainframe">li4<br>
<img style="border-style:none;" src="../pag3.jpg"></a>
		</TD>
		<TD width="110px" height="90px" class="menuItem">
			<a class="link" href="page/contact.html" target="mainframe">li5<br>
<img style="border-style:none;" src="graphic/knopcontact.jpg" width="110" height="90"></a>
		</TD>
		
	
		
	</TR>
</table><br>
<br>
<table align="center">
	
	<tr>
	<TD width="110px" height="90px" class="menuItem">
			<a class="link" href="../home.html" target="mainframe">li1<br>
<img style="border-style:none;" src="graphic/knophome.jpg"></a>
		</TD></tr>
	<tr>	<TD width="110px" height="90px" class="menuItem">
			<a class="link" href="../pag1.html" target="mainframe">li2<img style="border-style:none;" src="../pag1.jpg"></a>
		</TD></tr>
	<tr>	<TD width="110px" height="90px"class="menuItem"><a class="link" href="../pag2.html" target="mainframe">li3<br>
<img style="border-style:none;" src="../pag2.jpg"></a>
		</TD></tr>
	<tr><TD  width="110px" height="90px" class="menuItem">
			<a class="link" href="../pag3.html" target="mainframe">li4<br>
<img style="border-style:none;" src="../pag3.jpg"></a>
		</TD></tr>
	<tr>	<TD width="110px" height="90px" class="menuItem">
			<a class="link" href="page/contact.html" target="mainframe">li5<br>
<img style="border-style:none;" src="graphic/knopcontact.jpg" width="110" height="90"></a>
		</TD></tr>
		
	
		
	</TR>
</table>
</div>


</BODY>
</HTML>

Wat wel belangrijk is dat je een doctype hebt.
dit dus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

ivm je css aanwijzingen voor de browser.

:cool:
 
Het is misschien ook het overwegen waard over te stappen naar div's, tabellen zijn niet bedoeld voor lay-out.
 
@ Peter vazed: Dit is hoe het er nu uit ziet:
fout.jpg


Mijn knoppen (afbeeldingen) zijn dus maar voor de helft te te zien..


@ SvU: Hoe zou ik dat dan het beste kunnen aanpakken? Heb je misschien een linkje?
 
Dan is je code anders dan je reeds hier hebt neergezet.

Vermits je hoogte te kort komt:
kijk welke class (div) dit is, maak de hoogte hoger.
Zet er eens een border om, zie je wat er gebeurt.
En heb je een clear na het menu gezet?

:cool:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan