Justering af tabel i CSS
HejProblemet ligger i denne side: www.miniklub-mv.dk/nytsite
En hurtig problemstilling er at kanten i højre side ikke passer med nyheds baggrunden og at selven siden skal fylde 100% af højden selvom der ikke er indhold til det.
Selve stylesheetet ser sådan ud:
body {
background-color: #ffffff;
background-image:url(../gfx/baggrund/baggrund.gif);
background-position: 0% 0%;
background-repeat: repeat;
margin: 0px;
font-family: trebuchet ms;
font-size: 12px;
}
/* tabel + celler
----------------------------------------------- */
#table_main {
width: 786px;
height: 100%;
background-color: transparent;
border: 0px;
text-align: center;
border-collapse: collapse;
}
/* kant celler
----------------------------------------------- */
#td_vside {
height: 100%;
width: 43px;
background-color: transparent;
background-image:url(../gfx/baggrunde/vb.jpg);
background-position: 0% 0%;
background-repeat: repeat-y;
text-align: center;
border-right: 1px solid #000000;
}
#td_hside {
height: 100%;
width: 43px;
background-color: transparent;
background-image:url(../gfx/baggrunde/hb.jpg);
background-position: 0% 0%;
background-repeat: repeat-y;
text-align: center;
border-left: 1px solid #000000;
}
/* top + menu celler
----------------------------------------------- */
#td_banner {
height: 114px;
width: 700px;
background-color: #ffffff;
background-image: url(../gfx/baggrunde/banner_top.jpg);
background-position: left;
background-repeat: no-repeat;
text-align: center;
border: 0px;
}
#td_tmenu{
height: 28px;
width: 116px;
background-color: #ffffff;
background-image: url(../gfx/baggrunde/tmenu.jpg);
background-position: 0% 0%;
background-repeat: no-repeat;
text-align: left;
border-bottom: 1px solid #000000;
}
#td_tfyld{
height: 28px;
width: 466px;
background-color: #ffffff;
background-image: url(../gfx/baggrunde/tfyld.jpg);
background-position: 0% 0%;
background-repeat: no-repeat;
text-align: center;
vertical-align:bottom;
border-bottom: 1px solid #000000;
}
#td_tnyhed{
height: 28px;
width: 116px;
background-color: #ffffff;
background-image: url(../gfx/baggrunde/tnyhed.jpg);
background-position: 0% 0%;
background-repeat: no-repeat;
text-align: center;
border-bottom: 1px solid #000000;
}
/* fyld celler
----------------------------------------------- */
#td_fmenu{
width: 116px;
background-color: #ffffff;
background-image: url(../gfx/baggrunde/fmenu.jpg);
background-position: 0% 0%;
background-repeat: repeat-y;
text-align: left;
vertical-align: top;
line-height:15px;
}
#td_ffyld{
width: 466px;
background-color: #ffffff;
background-image: url(../gfx/baggrunde/ffyld.jpg);
background-position: 0% 0%;
background-repeat: repeat-y;
text-align: justify;
vertical-align: top;
border: 0px;
overflow: hidden;
}
#td_fnyhed{
width: 116px;
background-color: #ffffff;
background-image: url(../gfx/baggrunde/fmenu.jpg);
background-position: 0% 0%;
background-repeat: repeat-y;
text-align: center;
}
/* bund celler
----------------------------------------------- */
#td_bmenu{
height: 28px;
width: 116px;
background-color: #ffffff;
background-image: url(../gfx/baggrunde/fmenu.jpg);
background-position: 0% 0%;
background-repeat: no-repeat;
text-align: center;
border-right: 1px solid #000000;
}
#td_bfyld{
height: 28px;
width: 466px;
background-color: #ffffff;
background-image: url(../gfx/baggrunde/ffyld.jpg);
background-position: 0% 0%;
background-repeat: no-repeat;
text-align: center;
vertical-align:bottom;
border: 0px;
}
#td_bnyhed{
height: 28px;
width: 116px;
background-color: #ffffff;
background-image: url(../gfx/baggrunde/fmenu.jpg);
background-position: 0% 0%;
background-repeat: no-repeat;
text-align: center;
border-left: 1px solid #000000;
}
/* skrift + links + billeder
----------------------------------------------- */
p {
font-size: 12px;
color: #000000;
font-weight: none;
padding: 8px;
}
a:link{
font-size: 12px;
color: #000000;
padding-left: 0px;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}
a:active{
font-size: 12px;
color: #000000;
padding-left: 0px;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}
a:visited{
font-size: 12px;
color: #000000;
padding-left: 0px;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}
a:hover {
font-size: 12px;
color: #760000;
padding-left: 0px;
font-weight: bold;
letter-spacing: 1px;
text-decoration: underline;
}
.img_menu {
border: 0px;
padding-right: 4px;
}
.bestyrelsen {
font-size: 10px;
}
h1 {
font-size: 16px;
}
h2 {
font-size: 16px;
}
Og et eksempel på opsætningen / html fil:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>mk-mv</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<script type="text/JavaScript">
function swap(imgID, imgSrc) {
document.getElementById(imgID).src = imgSrc;
}
</script>
</head>
<body>
<table id="table_main" align="center" cellspacing="0" cellpadding="0">
<tr>
<td id="td_vside" rowspan="4"> </td>
<td colspan="3" id="td_banner"> </td>
<td id="td_hside" rowspan="4"> </td>
</tr>
<tr>
<td id="td_tmenu"></td>
<td id="td_tfyld"><a href="kalender.asp"><font color='#760000'>Næste arrangement:</font>
<%
Set my_conn = Server.CreateObject("ADODB.Connection")
my_conn.Open "Driver={MySQL ODBC 3.51 Driver}; Server=localhost; Database=x; UID=x; PWD=x;"
strSQL = "SELECT LEFT(tekst, 40) AS korttekst FROM kalender order by dato"
Set rs = my_conn.Execute(strSQL)
Response.Write "<font color='#0068B9'> "& rs("korttekst")&"...</font>"
%>
</a></td>
<td id="td_tnyhed"> </td>
</tr>
<tr>
<td id="td_fmenu">
<a href="index.asp" onmouseover="swap('punkt1', 'gfx/pil_sort.gif')" onmouseout="swap('punkt1', 'gfx/pil.gif')"><img id="punkt1" style="border:0px;" src="gfx/pil.gif" alt=""><font color='#760000'>FORSIDE</font></a><br>
<a href="information.asp" onmouseover="swap('punkt2', 'gfx/pil_sort.gif')" onmouseout="swap('punkt2', 'gfx/pil.gif')"><img id="punkt2" style="border:0px;" src="gfx/pil.gif" alt=""><font color='#760000'>INFORMATION</font></a><br>
<a href="sidensidst.asp" onmouseover="swap('punkt3', 'gfx/pil_sort.gif')" onmouseout="swap('punkt3', 'gfx/pil.gif')"><img id="punkt3" style="border:0px;" src="gfx/pil.gif" alt=""><font color='#760000'>SIDEN SIDST</font></a><br>
<a href="kalender.asp" onmouseover="swap('punkt4', 'gfx/pil_sort.gif')" onmouseout="swap('punkt4', 'gfx/pil.gif')"><img id="punkt4" style="border:0px;" src="gfx/pil.gif" alt=""><font color='#760000'>KALENDER</font></a><br>
<a href="blivmedlem.asp" onmouseover="swap('punkt5', 'gfx/pil_sort.gif')" onmouseout="swap('punkt5', 'gfx/pil.gif')"><img id="punkt5" style="border:0px;" src="gfx/pil.gif" alt=""><font color='#760000'>BLIV MEDLEM</font></a><br>
<a href="medlemmer.asp" onmouseover="swap('punkt6', 'gfx/pil_sort.gif')" onmouseout="swap('punkt6', 'gfx/pil.gif')"><img id="punkt6" style="border:0px;" src="gfx/pil.gif" alt=""><font color='#760000'>MEDLEMMER</font></a><br>
<a href="bestyrelsen.asp" onmouseover="swap('punkt7', 'gfx/pil_sort.gif')" onmouseout="swap('punkt7', 'gfx/pil.gif')"><img id="punkt7" style="border:0px;" src="gfx/pil.gif" alt=""><font color='#760000'>BESTYRELSEN</font></a><br>
<a href="http://www.miniklub-mv.dk/galleri" target="_blank" onmouseover="swap('punkt8', 'gfx/pil_sort.gif')" onmouseout="swap('punkt8', 'gfx/pil.gif')"><img id="punkt8" style="border:0px;" src="gfx/pil.gif" alt=""><font color='#760000'>GALLERI</font></a><br>
<a href="handelsplads.asp" onmouseover="swap('punkt9', 'gfx/pil_sort.gif')" onmouseout="swap('punkt9', 'gfx/pil.gif')"><img id="punkt9" style="border:0px;" src="gfx/pil.gif" alt=""><font color='#760000'>HANDELSPLADS</font></a><br>
<a href="gaestebog.asp" onmouseover="swap('punkt10', 'gfx/pil_sort.gif')" onmouseout="swap('punkt10', 'gfx/pil.gif')"><img id="punkt10" style="border:0px;" src="gfx/pil.gif" alt=""><font color='#760000'>GÆSTEBOG</font></a><br>
<a href="links.asp" onmouseover="swap('punkt11', 'gfx/pil_sort.gif')" onmouseout="swap('punkt11', 'gfx/pil.gif')"><img id="punkt11" style="border:0px;" src="gfx/pil.gif" alt=""><font color='#760000'>LINKS</font></a><br>
<a href="login.asp" onmouseover="swap('punkt12', 'gfx/pil_sort.gif')" onmouseout="swap('punkt12', 'gfx/pil.gif')"><img id="punkt12" style="border:0px;" src="gfx/pil.gif" alt=""><font color='#760000'>LOGIN</font></a><br>
</td>
<td id="td_ffyld">
<p>Indhold side</p>
</td>
<td id="td_fnyhed" valign="top"><!--#include file="nyhed.asp"-->
</td>
</tr>
<tr>
<td id="td_bmenu">menu</td>
<td id="td_bfyld">fyld</td>
<td id="td_bnyhed">nyhed</td>
</tr>
</table>
</body>
</html>
Håber ikke det virker for uoverskueligt og håber i kan hjælpe med mit problem!
/Morten
