Jeg har lavet en tabel hvor jeg gerne vil have en skygge på hver side, altså left og right side! Skyggerne har jeg på meget små billeder! men jeg kan ikk finde ud af at få dem til at vise en skygge på min tabel, det hele er styret med en css..
koden til min Html fil!
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="themes/style.css" />
<style type="text/css">
<!--
.style1 {
color: #0000FF;
font-weight: bold;
}
.style6 {color: #00CCCC}
-->
</style>
</head>
<body>
<div class="top">
<table align="right" class="banner">
<tr>
<td ><a href="http://www.partner-ads.com/dk/klikbanner.php?partnerid=3889&bannerid=3787" target=_blank>
<img src="http://www.partner-ads.com/dk/visbanner.php?partnerid=3889&bannerid=3787" border=0></a></td>
</tr>
</table>
<h1><strong>xxx</strong></h1>
</div>
<div class="ramme">
<table>
<tr>
<td class="left"><span class="style1">» </span>Menu - <span class="style1">» </span>Nyeste produkter - <span class="style1">»</span> reklame! </td>
<td class="middle"><div class="tekstmargin">Produkt kategorier </div></td>
<td class="right"><div class="menuboxcontex">
<div align="center"><span class="style6">»</span> Login</div>
</div></td>
</tr>
</table>
</div>
<div class="copyright">
<div align="center">Copyright 2006 xxx all rights reserved!</div>
</div>
</body>
</html>
Og min css kode
body {
background-color:#CECDCA;
margin:0px;
font-family:Verdana;
font-size:11px;
}
.top {
width:800px;
height:100px;
border-bottom:1px dashed #999999;
margin:0 auto;
border-left:1px solid black;
border-right:1px solid black;
background-color:#FFFFFF;
}
.banner {
width:468px;
height:60px;
top:50px;
margin:0 left;
margin-top:10px;
}
.ramme {
margin:0 auto;
width:800px;
height:100%;
border-left:1px solid black;
border-right:1px solid black;
background-color:#FFFFFF;
}
.left {
border-right:1px dashed gray;
width:150px;
height:100%;
}
.middle {
width:500px;
font-family:tahoma;
}
.right {
width:150px;
height:100%;
border-left:1px dashed gray;
}
.copyright {
width:800px;
height:auto;
font-size:10px;
font-family:tahoma;
margin:0 auto;
border-top:1px solid black;
}
.tekstmargin {
margin-left:9px;
}
.menuboxcontex {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
border-buttom:1px solid black;
color:#009999;
}
.menubox {
color:#0099CC;
}
.bg-shadow-left{
background-image: url(images/bg-shadow-left.gif);
background-repeat: repeat-y;
width: 15px;
}
.bg-shadow-right{
background-image: url(images/bg-shadow-right.gif);
background-repeat: repeat-y;
width: 15px;
}
Hvis der findes en bedre metode til at fremstille min Html kode på, så må i gerne vise den!
Men det hoved saglige er hvordan jeg får en skygge på min left side og right side