gebruiker45
Gebruiker
- Lid geworden
- 21 sep 2006
- Berichten
- 88
Ik probeer een vertikaal menuutje te maken met daarin 1 niveau submenu. Het liefst uitklapbaar, maar dat lukt al helemaal niet. Ik had een menu van webshapes.com dat werkte wel in aparte bestandjes, maar niet in m'n website. Zoals ik het nu heb gedaan zit er heel veel ruimte tussen de sub-knoppen. Ik wil ze gewoon laten aansluiten, maar wel een andere achtergrondkleur. Ook lijkt het lettertype kleiner dan op de overige knoppen. Geen idee waar dat vandaag komt. Ik heb al van alles geprobeerd, maar kom er niet uit.
In het CSS-deel staat nog een hoop code voor het uitklapmenu, maar om niets verkeerds weg te halen laat ik het maar even staan.
Ik werk zelf met IE7
Alvast dank voor je hulp.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bijtje Bezig Barbiemode en -Accessoires</title>
<link rel="stylesheet" type="text/css" href="test.css">
<STYLE TYPE="text/css">
</STYLE>
</head>
<body>
<div id="container">
<div id="logo">
</div>
<div id="logo2">
</div>
<div id="top">
<h1>Mode voor Barbie en andere modepoppen</h1>
</div>
<div id="leftnav">
<div class="menu">
<ul>
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Barbiemode</li><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<li class="menu li.sub"><a href="#nogo">Complete setjes</a></li>
<li class="menu li.sub"><a href="#nogo">Nachtkleding en lingerie</a></li>
<li class="menu li.sub"><a href="#nogo">Losse kledingstukken</a></li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="#nogo">Sieraden en accessoires</a></li>
<li><a href="#nogo">Bestellen</a></li>
<li><a href="#nogo">Links</a></li>
CSS:
body
{
background-color: #660066
}
#container
{
width: 100%;
margin: 0 auto;
background-image: url(images/bgbarbie.jpg);
color: #333;
border: 1px solid gray;
line-height: 130%;
font-family: Harrington;
}
h2
{
font-family: Arial;
font-size: 20px;
margin: 0 0 10px 0;
}
#top
{
margin-left: 79px;
height: 80 px;
padding-top: 30px;
background-color: white;
border-bottom: 1px solid gray;
text-align: center;
font-size: 24;
}
#logo
{
float: left;
width: 80 px;
height: 80 px;
margin: 0 0;
border-bottom: 1px solid gray;
background-image: url(images/bij2.jpg);
}
#logo2
{
float: right;
width: 80 px;
height: 80 px;
margin: 0 0;
border-bottom: 1px solid gray;
background-image: url(images/bij2.jpg);
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float:left;
width: 165px;
margin: 0;
padding: 1em;
}
.menu {
height:150px;
font-size:85%;
margin:25px 0 50px 5px; /* this page only */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* style the list items */
.menu li {
background: blue url(images/menubasis.jpg);
height:26px;
/* for IE7 */
float:left;
}
.menu li.sub {background: url(images/menumb.jpg)
height: 26px;
padding:0;
margin:0;
}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#000;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 1px;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px; w\idth:149px;}
/* style the link hover */
* html .menu a:hover {color: purple; background: transparent url(images/menumbhov.gif); position:relative;}
.menu li:hover {position:relative;}
/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {color: #993366;}
/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {color:#993366;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(images/transparent.gif);
}
/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}
/* for IE5.5 and IE6 you need to style each level hover */
/* keep the third level+ hidden when you hover on first level link */
.menu ul a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
.menu ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
visibility:visible;
}
/* make the third level visible when you hover over second level link */
.menu ul a:hover ul a:hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level link */
.menu ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
table {
border-collapse: separate;
empty-cells: show;
font-size: 95%;
width: 750px;
border: 3px double rgb(0,85,145);
font-family: arial;
}
td {
width: 25%;
padding: 1em;
text-align: left;
vertical-align: top;
}
.image
{
height: 200px;
border: 1px solid grey;
}
</ul>
</div>
</div>
<p>
De meeste kledingstukken zijn eigen ontwerp. Voor een aantal gebreide kledingstukken is, met toestemming, een patroon
van www.stickatillbarbie.se gebruikt.
<p>De prijzen zijn exclusief pop en schoentjes. Ook de verzendkosten zijn niet inbegrepen.<p>
Klik op de foto voor een vergroting.</p>
<p>
<table>
<td><IMG class="image" SRC="Pics/set01.jpg" alt="Set 01"></td><td>Set 01<br>omschrijving flaie mflaiej laeijf asjlaeiaç</td>
<td><IMG class="image" SRC="Pics/set01.jpg" alt="Set 01"></td><td>Set 01<br>omschrijving </td>
<tr> <td><IMG SRC="Pics/set01.jpg" HEIGHT="200" border="0" alt="Set 01"></td><td>rechts onder</td>
</div>
</div>
In het CSS-deel staat nog een hoop code voor het uitklapmenu, maar om niets verkeerds weg te halen laat ik het maar even staan.
Ik werk zelf met IE7
Alvast dank voor je hulp.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bijtje Bezig Barbiemode en -Accessoires</title>
<link rel="stylesheet" type="text/css" href="test.css">
<STYLE TYPE="text/css">
</STYLE>
</head>
<body>
<div id="container">
<div id="logo">
</div>
<div id="logo2">
</div>
<div id="top">
<h1>Mode voor Barbie en andere modepoppen</h1>
</div>
<div id="leftnav">
<div class="menu">
<ul>
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Barbiemode</li><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<li class="menu li.sub"><a href="#nogo">Complete setjes</a></li>
<li class="menu li.sub"><a href="#nogo">Nachtkleding en lingerie</a></li>
<li class="menu li.sub"><a href="#nogo">Losse kledingstukken</a></li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="#nogo">Sieraden en accessoires</a></li>
<li><a href="#nogo">Bestellen</a></li>
<li><a href="#nogo">Links</a></li>
CSS:
body
{
background-color: #660066
}
#container
{
width: 100%;
margin: 0 auto;
background-image: url(images/bgbarbie.jpg);
color: #333;
border: 1px solid gray;
line-height: 130%;
font-family: Harrington;
}
h2
{
font-family: Arial;
font-size: 20px;
margin: 0 0 10px 0;
}
#top
{
margin-left: 79px;
height: 80 px;
padding-top: 30px;
background-color: white;
border-bottom: 1px solid gray;
text-align: center;
font-size: 24;
}
#logo
{
float: left;
width: 80 px;
height: 80 px;
margin: 0 0;
border-bottom: 1px solid gray;
background-image: url(images/bij2.jpg);
}
#logo2
{
float: right;
width: 80 px;
height: 80 px;
margin: 0 0;
border-bottom: 1px solid gray;
background-image: url(images/bij2.jpg);
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float:left;
width: 165px;
margin: 0;
padding: 1em;
}
.menu {
height:150px;
font-size:85%;
margin:25px 0 50px 5px; /* this page only */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* style the list items */
.menu li {
background: blue url(images/menubasis.jpg);
height:26px;
/* for IE7 */
float:left;
}
.menu li.sub {background: url(images/menumb.jpg)
height: 26px;
padding:0;
margin:0;
}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#000;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 1px;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px; w\idth:149px;}
/* style the link hover */
* html .menu a:hover {color: purple; background: transparent url(images/menumbhov.gif); position:relative;}
.menu li:hover {position:relative;}
/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {color: #993366;}
/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {color:#993366;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(images/transparent.gif);
}
/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}
/* for IE5.5 and IE6 you need to style each level hover */
/* keep the third level+ hidden when you hover on first level link */
.menu ul a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
.menu ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
visibility:visible;
}
/* make the third level visible when you hover over second level link */
.menu ul a:hover ul a:hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level link */
.menu ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
table {
border-collapse: separate;
empty-cells: show;
font-size: 95%;
width: 750px;
border: 3px double rgb(0,85,145);
font-family: arial;
}
td {
width: 25%;
padding: 1em;
text-align: left;
vertical-align: top;
}
.image
{
height: 200px;
border: 1px solid grey;
}
</ul>
</div>
</div>
<p>
De meeste kledingstukken zijn eigen ontwerp. Voor een aantal gebreide kledingstukken is, met toestemming, een patroon
van www.stickatillbarbie.se gebruikt.
<p>De prijzen zijn exclusief pop en schoentjes. Ook de verzendkosten zijn niet inbegrepen.<p>
Klik op de foto voor een vergroting.</p>
<p>
<table>
<td><IMG class="image" SRC="Pics/set01.jpg" alt="Set 01"></td><td>Set 01<br>omschrijving flaie mflaiej laeijf asjlaeiaç</td>
<td><IMG class="image" SRC="Pics/set01.jpg" alt="Set 01"></td><td>Set 01<br>omschrijving </td>
<tr> <td><IMG SRC="Pics/set01.jpg" HEIGHT="200" border="0" alt="Set 01"></td><td>rechts onder</td>
</div>
</div>
