Tabulært design vha. divs - hvordan?
Hej eksperterJeg vil nu forsøge helt at skrotte tabeller og har brug for lidt hjælp til processen.
Jeg har følgende html-kode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Title here!</title>
<link rel="stylesheet" href="include/main.css" type="text/css">
</head>
<body>
<div id="header">
header ting...
</div>
<div id="menu">
<ul>
<li><a href="#">Homepage</a></li>
<li><a href="#">Personal</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Curriculum Vitae</a></li>
<li><a href="#">Guestbook</a></li>
<li><a href="#">Study</a></li>
</ul>
</div>
<div id="content">
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
</div>
<div id="footer">
footer ting...
</div>
</body>
</html>
og følgende css-kode (menu fra A List Apart):
body {
background: #EEEEEE;
font: 1em normal Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0;
}
#header {
margin: 0;
width: 100%;
border-bottom: 1px solid #003366;
}
#content {
margin: 0.5em 0.5em 0.5em 12em;
padding: 2px 10px 10px 10px;
width: auto;
}
#footer {
margin: 0;
width: 100%;
border-top: 1px solid #003366;
border-bottom: 1px solid #003366;
}
/*Let’s look at the style sheet rule by rule, and I'll explain why each rule is constructed the way that it is.*/
#menu {
position: relative;
display: block;
width: 10em;
/*border-right: 1px solid #000;*/
padding: 0 0 1em 0;
margin-bottom: 1em;
font: 1em normal Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #90bade; /*90bade*/
color: #333333;
}
/* The first rule is for the #menu DIV. It defines the space that the menu will occupy, and provides
a context for the menu so that we can define the way the list and links will behave inside the DIV.
I chose to make the menu fluid, based on the browser’s font size preferences, so (almost) all units
are in ems. This includes the width of the menu. The solid black border on the right was based on the
original design from Michael. The bottom padding is there to extend the DIV down beyond the menu of
links so that you can see the background of the DIV. Again, this follows the original design. The
bottom margin is to separate the DIV from what follows it. The colors came from the original design.*/
#menu ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#menu li {
border-bottom: 1px solid #90bade; /*#90bade*/
margin: 0;
white-space: nowrap;
}
/* Next I defined what the list will look like. Since all the list items were to be links, and the
rollover functionality would be built into the CSS for the links, I essentially removed all styling
from the lists. I did add a single pixel border on the bottom of each link that matched the
background of the #menu DIV, to work as the separator. In the original design, this was an image.*/
#menu li a {
font-size: 0.9em;
display: block;
padding: 2px 3px 2px 5px;
border-left: 10px solid #1958b7; /*#1958b7*/
border-right: 10px solid #508fc4; /*#508fc4*/
background-color: #2175bc; /*#2175bc*/
color: #FFFFFF;
text-decoration: none;
width: 100%;
}
html>body #menu li a {
width: auto;
}
#menu li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #FFFFFF;
}
Nu er det jo at jeg gerne vil have menu og content til at stå "pænt" ved siden af hinanden - ligesom, hvis man havde 2 kolonner i en tabel - hvordan gør jeg det på den mest korrekte og browsereffektive (læs: fungerer i flest muligt browsere) facon?
På forhånd tak.
Mvh
tipsen
