probleem met meerdere p classes in extern css document in xh
Geplaatst: 09 aug 2007 09:59
ik wil mijn haren uit mijn hoofd trekken!
(de codes staan onderaan)
ik snap er niets van.. ik probeer een menu te maken voor een pagina, en die bestaat uit meerdere tabellen die in elkaar geplaatst zijn, en de opmaak van zo'n beetje ALLES op de pagina staat in css. ook de opmaak van de tekst dus. nou wil ik meerdere 'p' classes maken zodat ik twee verschillende soorten opmaak kan gebruiken voor de pagina, logisch toch? goed, nu krijg ik de tweede p class met geen geweld werkende.. als ik de tweede p toeschrijf aan de class "starknop2" ipv "startknop 1" krijg ik een standaard times new roman lettertype, terwijl de class in principe precies hetzelfde is! hoe kan dit! hoe krijg ik dit werkende? iemand suggesties!? ik snap er echt helemaaal niets meer van
bij voorbaat dank
--
codes:
de CSS:
body {
background-color: #e1ddda;
}
table.menu {
width: 100%;
background-color: #cbc3bd;
border: 0px;
border-spacing: 0px;
}
table.gehelebar {
width: 100%;
background-color: #cbc3bd;
border-width: 0px;
border-bottom: 1px;
border-collapse: separate;
border-style: outset outset outset outset;
border-color: #5d594e;
}
td.startknop {
width: 80px;
background-color: #cbc3bd;
border-width: 1px;
border-collapse: separate;
border-style: solid;
border-color: #cbc3bd;
padding: 5px;
}
td.startknop:hover {
width: 80px;
background-color: #bebebe;
border-width: 1px;
border-collapse: separate;
border-style: outset;
border-color: gray gray gray gray;
padding: 5px;
cursor: default;
}
td.bar {
width: 100%;
background-color: #cbc3bd;
border-width: 0px;
border-collapse: separate;
border-style: none;
padding: 2px;
margin: 0px;
}
p.startknop {
color: #5d594e;
font-family: silkscreen; tahoma;
font-size: 6pt;
font-weight: none;
margin: 0px;
}
p.startknop2 {
color: #5d594e;
font-family: silkscreen; tahoma;
font-size: 6pt;
font-weight: none;
margin: 0px;
}
de XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>W I L C O L E N S I N K photography __</title>
<link rel="stylesheet" type="text/css" href="startmenu.css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
body {margin: 0px; }
</style>
</head>
<body>
<table class="menu"><tr><td>
<table class="gehelebar">
<tr>
<td class="startknop">
<p class="startknop">home</p>
</td>
<td class="startknop">
<p class="startknop">photography</p>
</td>
<td class="startknop">
<p class="startknop">poetry</p>
</td>
<td class="startknop">
<p class="startknop">exit</p>
</td>
<td class="bar">
<p class="startknop2">wilco lensink photography</p>
</td>
</tr>
</table>
</td></tr></table>
</body>
(de codes staan onderaan)
ik snap er niets van.. ik probeer een menu te maken voor een pagina, en die bestaat uit meerdere tabellen die in elkaar geplaatst zijn, en de opmaak van zo'n beetje ALLES op de pagina staat in css. ook de opmaak van de tekst dus. nou wil ik meerdere 'p' classes maken zodat ik twee verschillende soorten opmaak kan gebruiken voor de pagina, logisch toch? goed, nu krijg ik de tweede p class met geen geweld werkende.. als ik de tweede p toeschrijf aan de class "starknop2" ipv "startknop 1" krijg ik een standaard times new roman lettertype, terwijl de class in principe precies hetzelfde is! hoe kan dit! hoe krijg ik dit werkende? iemand suggesties!? ik snap er echt helemaaal niets meer van
bij voorbaat dank
--
codes:
de CSS:
body {
background-color: #e1ddda;
}
table.menu {
width: 100%;
background-color: #cbc3bd;
border: 0px;
border-spacing: 0px;
}
table.gehelebar {
width: 100%;
background-color: #cbc3bd;
border-width: 0px;
border-bottom: 1px;
border-collapse: separate;
border-style: outset outset outset outset;
border-color: #5d594e;
}
td.startknop {
width: 80px;
background-color: #cbc3bd;
border-width: 1px;
border-collapse: separate;
border-style: solid;
border-color: #cbc3bd;
padding: 5px;
}
td.startknop:hover {
width: 80px;
background-color: #bebebe;
border-width: 1px;
border-collapse: separate;
border-style: outset;
border-color: gray gray gray gray;
padding: 5px;
cursor: default;
}
td.bar {
width: 100%;
background-color: #cbc3bd;
border-width: 0px;
border-collapse: separate;
border-style: none;
padding: 2px;
margin: 0px;
}
p.startknop {
color: #5d594e;
font-family: silkscreen; tahoma;
font-size: 6pt;
font-weight: none;
margin: 0px;
}
p.startknop2 {
color: #5d594e;
font-family: silkscreen; tahoma;
font-size: 6pt;
font-weight: none;
margin: 0px;
}
de XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>W I L C O L E N S I N K photography __</title>
<link rel="stylesheet" type="text/css" href="startmenu.css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
body {margin: 0px; }
</style>
</head>
<body>
<table class="menu"><tr><td>
<table class="gehelebar">
<tr>
<td class="startknop">
<p class="startknop">home</p>
</td>
<td class="startknop">
<p class="startknop">photography</p>
</td>
<td class="startknop">
<p class="startknop">poetry</p>
</td>
<td class="startknop">
<p class="startknop">exit</p>
</td>
<td class="bar">
<p class="startknop2">wilco lensink photography</p>
</td>
</tr>
</table>
</td></tr></table>
</body>