først lidt kode:
index.htm:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<table>
<tr>
<td colspan="3" class="top"><center>hej</center></td>
</tr>
<tr>
<td class="left"><center>med</center></td>
<td class="middle"><center>dig</center></td>
<td class="right"><center>dit</center></td>
</tr>
<tr>
<td colspan="3" class="bottom"><center>kvaj</center></td>
</tr>
</table>
</body>
</html>style.css:
body {
overflow:auto;
}
table {
width:100%;
}
td {
border: 1px solid #000000;
background-color:#cccccc;
}
td.top, td.bottom {
width:100%;
}
td.left, td.right {
width:20%;
}
td.middle {
width:60%;
}Dette er jo utrolig simpelt, og det behøver faktisk ikke at være meget anderledes, men der er et par ting som jeg godt kunne tænkte mig lidt hjælp til.
1) Runde hjørner på "kasserne"
Jeg har set flere eksempler på javascripth løsninger, det har ingen interesse.
Grafiske løsninger kan også bruges, men jeg foretrækker ren html/css.
2) Blending
Disse kasser skulle gerne have en hvis grad af "gennemsigtighed". Dette kan godt komme i kambolage med de runde hjørner.
Igen er ren html/css at foretrække da IE absolut ikke bryder sig om png filer med alpha blending.
3) Skygger på kasserne
Ovenstående feature kunne også godt tænkes, men jeg har ingen idé om hvordan det skal gøres.
Alle værdier, størrelse på hjørner, blending og hvad der måtte være af justerbare værdier for skyggen, skal kunne justeres. Det dur ikke hvis man skal til at lave ny grafik og den slags hver gang man skal lave en smule om på designet.
Derudover skal koden naturligvis være kombatibel med de mest populære browsere:
IE, moz, opera, firefox, netscape, ect.
[Redigeret d. 04/03-06 18:45:52 af Felix Nielsen]