Ruimte tussen de cellen aanpassen...

Status
Niet open voor verdere reacties.
B

Bassos

Gebruiker
Lid geworden
12 nov 2004
Berichten
357
Hey ik ben bezig een simpel menuutje aan het maken, maar om een of andere reden kan ik de ruimte tussen de cellen niet aanpassen??

Dit is de code van het .css bestand:

#menu {
font-family: Verdana;
font-size: 9pt;
font-weight: bold;
background-color: #000060;
text-align: justify;
width:200px;
height:0%;
}
a{
width:100%;
text-decoration:none;
color:white;
background-color:#CC0000;
padding:0.5em 0.5em;
border:1px solid #FFFFFF;
}
a:hover{
color:#000000;
background-color:#FFFFFF;
border:1px solid #000000;
}

En dit de code van de .htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<title>Menu</title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="menustyle.css">
</head>

<body>
<center>
<table id="menu">
<tr>
<td><a target="_inlineframe" href="stand.htm">Home</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="topper/topper.htm">Topper</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="zonen/zonen.htm">Zonen</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="fotos/fotos.htm">Foto's</a></td>
</tr>
<tr>
<td><a href="#">Link two</a></td>
</tr>
<tr>
<td><a href="#">Link three</a></td>
</tr>
</table>
</body>

</html>

Ik krijg het gewoon niet voor elkaar om de "celspacing" aan te passen in het menu. Kan iemand mij ff helpen??
 
Ja, maar er staan straks meerdere tabellen in mijn pagina. Dus wil ik het zo maken dat alleen de tabel met id="menu" dit heeft.

Snap je, zoals jij het liet zien, dan veranderen al mijn tabellen.
 
Ja heb je wel gelijk in, maar ik wilde het gewoon proberen te fixen via het sylesheet :o
 
Is dit beter?

<style type="text/css" >
<!--
table.menu {
font-family: Verdana;
font-size: 9pt;
font-weight: bold;
background-color: #000060;
text-align: justify;
width:200px;
height:300px;
}
a{
width:100%;
text-decoration:none;
color:white;
background-color:#CC0000;
padding:0.5em 0.5em;
border:1px solid #FFFFFF;
}
a:hover{
color:#000000;
background-color:#FFFFFF;
border:1px solid #000000;
}
--></style></head>

<body>
<center>
<table class="menu">
--rest van code -----


Je had geen hoogte aangegeven. Ja height:0%; dan wordt dus alles gecomprimeerd.

Class gebruikt ipv ID.

:cool:
 
Ja, maar dat was ook de bedoeling om de ruimte tussen de cellen weg te krijgen. Vandaar die 0% height. En in dit geval is er toch niet echt een verschil of je nu ID gebruikt of class??
 
Hey ik ben bezig een simpel menuutje aan het maken, maar om een of andere reden kan ik de ruimte tussen de cellen niet aanpassen??
Klik om te vergroten...


Ja, maar dat was ook de bedoeling om de ruimte tussen de cellen weg te krijgen.
Klik om te vergroten...

Wat is dan wel de bedoeling?

Kijk maar wat id en class doet.

:cool:
 
Aanpassen is toch ook kleiner maken, of heb ik het nu verkeerd?? En als ik het groter kan maken, dan kan ik het ook kleiner maken...
 
En hoe kan ik zorgen dat alleen bepaalde hyperlinks (bijvoorbeeld alleen die in een bepaalde tabel) een opmaak krijgen van het stylesheet??
 
Voor menu speciale style maken en aanroepen met class.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<title>Menu</title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css" >
<!--
#menu {
font-family: Verdana;
font-size: 9pt;
font-weight: bold;
background-color: #000060;
text-align: justify;
width:200px;
height:30px;
}
a.menu:link
{
width:100%;
text-decoration:none;
color:white;
background-color:#CC0000;
padding:0.5em ;
border:1px solid #FFFFFF;
}
a.menu:visited
{
width:100%;
text-decoration:none;
color:white;
background-color:#CC0000;
padding:0.5em;
border:1px solid #FFFFFF;
}

a.menu:active
{
width:100%;
text-decoration:none;
color:white;
background-color:#CC0000;
padding:0.5em;
border:1px solid #FFFFFF;
}

a.menu:hover
{
color:#000000;
background-color:#FFFFFF;
border:1px solid #000000;
}

a:link
{
width:90px;
text-decoration:none;
color:white;
background-color:#808040;
border:1px solid #f2f904;
padding-left:20px;

}

a:visited
{
color:#000000;
background-color:#FFFFFF;
border:1px solid #000000;
}

a:hover
{
color:#000000;
background-color:#FFFFFF;
border:1px solid #000000;
}

a:active
{
color:#000000;
background-color:#FFFFFF;
border:1px solid #000000;
}

--></style></head>
<body>
<center>
<table id="menu">
<tr>
<td><a target="_inlineframe" href="stand.htm" class="menu">Home</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="topper/topper.htm" class="menu">Topper</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="zonen/zonen.htm" class="menu">Zonen</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="fotos/fotos.htm" class="menu">Foto's</a></td>
</tr>
<tr>
<td><a href="#" class="menu">Link two</a></td>
</tr>
<tr>
<td><a href="#" class="menu">Link three</a></td>
</tr>
</table>

<table width="80%" border="1" cellspacing="1" cellpadding="1" bordercolor="#800040" align="center">
<tr>
<!-- Row 1 Column 1 -->
<td width="40%" height="50">
<b>
<a target="_inlineframe" href="fotos/fotos.htm">Foto's</a>
</b>
</td>
<!-- Row 1 Column 2 -->
<td >
<a target="_inlineframe" href="fotos/fotos.htm">Foto's</a>
</td>
<!-- Row 1 Column 3 -->
<td >
<a target="_inlineframe" href="fotos/fotos.htm">Foto's</a> </td>
</tr>
</table>

</body>

</html>

Als het nog dicter opeen moet de padding aanpassen.

:cool:
 
Ik heb het net even iets anders gemaakt, maar het werkt perfect op die manier van jou. Alleen 1 klein probleempje, misschien zie ik iets over het hoofd ofzo?? Maar alle links in het menu doen het perfect, behalve die van het gastenboek!!! En die deed het wel gewoon voordat ik de links een class gaf, raaraa??

Dit is overigens de stylesheet:

/* Dit is de opmaak voor de hoofdtabel */

table.index{
background-color: #ffffff;
font-size:9pt;
font-family:verdana;
text-align:justify;
border:0 solid;
}

/* Dit is de opmaak voor het menu zelf */

table.menu {
font-family:verdana;
font-size:9pt;
font-weight:bold;
background-color:#FFFFFF;
text-align:justify;
width:100px;
height:0%;
}

/* Dit is de opmaak voor de hyperlinks in het menu */

a.menu:link{
width:100%;
text-decoration:none;
color:#FFFFFF;
background-color:#CC0000;
padding:0.3em 0.3em;
border:1px solid #FFFFFF;
}
a.menu:hover{
text-decoration:none;
color:#CC0000;
background-color:#FFFFFF;
border:1px solid #CC0000;
}

/* Dit is de opmaak voor de plaatjes */

img {
border:0;
}

/* Dit is de opmaak voor de hyperlinks */

}
a:link,a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #000000;
}
a:active {
text-decoration: underline;
color: #000000;
font-weight: bold;
}

**************En nu komt de htm pagina**********

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<title>Menu</title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="indexstyle.css">
</head>

<body>
<center>
<table class="menu" cellspacing="0" cellpadding="0">
<tr>
<td height="100" align="center"><a target="_blank" href="http://www.vvzigo.nl/home/">
<img src="ZIGO.gif" width="90" height="70" alt="Officiële website v.v. ZIGO"></a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="home.htm" class="menu">Home</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="topper/topper.htm" class="menu">Topper</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="zonen/zonen.htm" class="menu">Zonen</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="fotos/fotos.htm" class="menu">Foto's</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="verslagen/verslagen.htm" class="menu">Verslagen</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="programma.htm" class="menu">Programma</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="stand.htm" class="menu">Stand</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="topscorer.htm" class="menu">Topscorer</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="vroeger.htm" class="menu">Vroeger</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="sponsor/sponsor.htm" class="menu">Sponsor</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="http://www.tboek.nl/tboek/index.php?name=zigo4" class="menu">Gastenboek</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="kalender/2005jan.htm" class="menu">Kalender</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="members/members.htm" class="menu">Members</a></td>
</tr>
<tr>
<td><a target="_inlineframe" href="http://www.svg7.tk" class="menu">SVG 7</a></td>
</tr>
<tr>
<td height="80" align="center">
<!-- Begin Nedstat Basic code -->
<!-- Title: ZIGO 4 - Toppers United -->
<!-- URL: http://www.zigo4.tk/ -->
<script language="JavaScript" type="text/javascript"
src="http://m1.nedstatbasic.net/basic.js">
</script>
<script language="JavaScript" type="text/javascript" >
<!--
nedstatbasic("ADJipAjDvVZGiiJTlzhqLiFPhXnQ", 1);
// -->
</script>
<noscript>
<a target="_blank"
href="http://www.nedstatbasic.net/stats?ADJipAjDvVZGiiJTlzhqLiFPhXnQ"><img
src="http://m1.nedstatbasic.net/n?id=ADJipAjDvVZGiiJTlzhqLiFPhXnQ"
border="0" width="18" height="18"
alt="Nedstat Basic - Gratis web site statistieken
Eigen homepage website teller"></a>
</noscript>
<!-- End Nedstat Basic code --></td>
</tr>
</table>
</body>

</html>
 
Nee zo bedoel ik het niet, had het iets duidelijker moeten formuleren. Het grafische gedeelte van de link is niet goed er staat geen rood kader omheen en ook de grote van de cel klopt niet (van de laatste trouwens ook SVG 7) en dat komt omdat het externe links zijn. Maar hoe fix ik dat nu.......?
 
Ditte?

/* Dit is de opmaak voor de hyperlinks in het menu */

a.menu:link,a:visited, a:active{
width:100%;
text-decoration:none;
color:#FFFFFF;
background-color:#CC0000;
padding:0.3em 0.3em;
border:1px solid #FFFFFF;
}
a.menu:hover{
text-decoration:none;
color:#CC0000;
background-color:#FFFFFF;
padding:0.3em 0.3em;
border:1px solid #CC0000;
}

:cool:
 
Bijna goed dit is het geworden en het werkt!!

/* Dit is de opmaak voor de hyperlinks in het menu */

a.menu:link,a.menu:visited, a.menu:active{
width:100%;
background-color:#CC0000;
padding:0.3em 0.3em;
border:1px solid #FFFFFF;
color:#FFFFFF;
text-decoration:none;
}


:thumb: thanx
 
Met verschillende kleurtjes, dan weet de bezoeker wat al bezocht is en aktief is.


/* Dit is de opmaak voor de hyperlinks in het menu */

a.menu:link{
width:100%;
text-decoration:none;
color:#FFFFFF;
background-color:#CC0000;
padding:0.3em 0.3em;
border:1px solid #FFFFFF;
}
a.menu:visited{
width:100%;
text-decoration:none;
color:#FFFFFF;
background-color:#808080;
padding:0.3em 0.3em;
border:1px solid #FFFFFF;
}
a.menu:active{
width:100%;
text-decoration:none;
color:#FFFFFF;
background-color:#CC00ff;
padding:0.3em 0.3em;
border:1px solid #FFFFFF;
}
a.menu:hover{
text-decoration:none;
color:#CC0000;
background-color:#FFFFFF;
padding:0.3em 0.3em;
border:1px solid #CC0000;
}



:cool:
 
Nee die verschillende kleurtjes laat ik achterwegen, stoort alleen maar... Maar ik heb het nu eindelijk met succes in mijn index pag gezet, werkt allemaal goed. Behalve mijn iframe, daar zit nog een of andere rand of verdieping of schaduw in. De opmaak in de css ziet er als volgt uit:

/* Dit is de opmaak van het iframe */

iframe{
border:0px solid;
width:100%;
height:100%;
}

Maar dit is niet genoeg merk ik, wat hoort er nog meer bij, zodat die schaduw of zoiets dergelijks weg is??
 
Toevoegin in je iframe tag
frameborder="no"

Krijg het in de css niet voor elkaar.

:cool:
 
Ik heb al vanalles ingevuld bij mijn iframe tag, maar ik merk nu dat de rand wel weggaat als je een keer op vernieuwen drukt..... Echt heel raar!!

Weet iemand misschien waar het foutje dan zit. ik zal eens naar http://validator.w3.org/ gaan om te controleren of ze daar iets fouts zien
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan