Jeg vil høre om der er nogen der sidder inde med guldkornene mht.
at bygge design op om css, dvs. ingen brug af tabeller. Det er et
must fra mit undervisningssted, at vi ikke bruger tabeller.
Jeg synes også at det er en smart, hvis bare ikke det ser så
forskelligt ud i diverse browsere. Når jeg fx tilpasser det til
IE, ser det helt forkert ud i Opera og K-Meleon, og omvendt, suk!
Jeg har efterhånden prøvet alt muligt, men der er ikke noget der
hjælper. Så prøvede jeg at kopiere en side fra 3W', men det ser
stadigvæk ikke godt ud i alle browsere på en gang.
Hvis der er nogen, der kan sige mig hvordan man løser dette
problem, så er det yderst velkommet.
Kilden er denne:
<!DOCTYPE html PUBLIC "-//W3//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>
<title>information</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen"
href="index.css" />
<link rel="stylesheet" type="text/css" media="screnn"
href="sc_styles.css" />
<style type="text/css">
body {
background-color: #ffffff;
color: #4a4a4a;
font-family: verdana, arial, helvetica;
font-size: 11px;
background-image: URL(grafik/bg.gif);
padding-left: 10px;
}
a:link {
color: #747474; text-decoration: none;
}
a:visited {
color: #000000; text-decoration: none;
}
a:hover
{
color: #000000; text-decoration: none;
}
a:active
{
color: #000000; text-decoration: none;
}
0.banner {
position: absolute;
border-left: 35%;
top: 4%;
}
foto {
position: absolute;
left: 0%;
top: 20%;
}
box0 {
position: absolute;
border-right: medium none;
background: #eec;
float: left;
left: 14%;
width: 75.4%;
height: 14%;
top: 16%;
color: #000;
border-bottom: 1px solid #c9c9c9;
background-image: URL(grafik/bgg.gif);
padding: 10px 10px 0px 20px;
border: 1px solid #c9c9c9;
z-index: 1;
}
box1 {
position: absolute;
background: #eec;
float: left;
left: 14%;
width: 16%;
height: 16%;
top: 32%;
color: #000;
border-bottom: 1px solid #c9c9c9;
background-image: URL(grafik/bgg.gif);
padding: 10px 10px 10px 20px;
border: 1px solid #c9c9c9;
z-index: auto;
}
box2 {
position: absolute;
float: left;
left: 14%;
width: 16%;
height: 28%;
text-align:left;
top: 32%;
padding: 10px 10px 58px 20px;
border: 1px solid #c9c9c9;
z-index: auto;
}
box3 {
position: absolute;
float: left;
left: 32.8%;
width: 56%;
height: 16%;
text-align:left;
top: 32%;
background-color: #fefefe;
padding: 10px 10px 10px 20px;
border: 1px solid #c9c9c9;
z-index: auto;
}
box5 {
position: absolute;
float: left;
left: 32.8%;
width: 56%;
height: 50%;
text-align:left;
top: 38%;
background-color: #fefefe;
border: 1px solid #c9c9c9;
padding: 10px 10px 40px 20px;
z-index: auto;
}
</style>
</head>
<body>
<div align="center">
<div class="banner"><a href="
http://www.netcom.dk/" />
</div>
<img src="../../animation/master.gif" width="300" height="50"
alt="banner" /><a />
</div>
<div class="box0">
<h4>Til netfolket</h4>
<h2>En ressourceguide</h2>
</div>
<!--#include virtual="/include/logo.inc"-->
<div class="box1">
<p>Menu</p>
</div>
<div class="box2">
<p><a href="index.html">Indeks</a></p>
<p><a href="layout/layoutfilosofi.shtml" />Layoutfilosofi</a></p>
<p><a href="layout/tilgaengelig.shtml"
/>Tilgængelighedstest</a></p>
<p><a href="grafik/png.shtml" />Billedformater</a></p>
<p><a href="information/information.shtml"
/>Informationer</a></p>
<p><a href="sprog/boef.shtml" />Sprogfbøffer</a></p>
<p><a href="sprog/referencer.shtml" />Referenceværktøjer</a></p>
<p><a href="sprog/digital.shtml" />Digital mirakel?</a></p>
<p><a href="kontakt/kontakt.shtml" />Kontakt</a></p>
</div>
<div class="box3">
Index
</div>
<div class="box5">
En samling <em>goodies</em> for informationsmedarbejdere.<br />
Kom godt i gang, få styr på den digitale formidling.
<p>En side med fokus på:</p>
<p>sproglige virkemidler</p>
<p>tilgængelighed</p>
<p>layout og grafik</p>
</div>
</body>
</html>
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! =>
http://www.html.dk/tutorials