Siden og CSS i orden? Hjælp!
Hej,Jeg er ved at lægge sidste hånd på en side jeg skal bruge til et mindre eksamensprojekt. Imidlertid er jeg blevet forvirret over min egen kode og kunne godt tænke mig at få andre øjne til at give mig feedback - på både HTML- og CSS-koden. Designet (farver mv.) efterlyser jeg ikke kommentarer til, det er på plads.
Desuden kunne jeg godt tænke mig at have en footer i form af en tabel nederst på siden, hvor der bare lige bliver opgivet en e-mail-adresse og et navn etc. Det er dog vigtigt at det hele forbliver i 800x600.
Derudover ser det ud til at der er en frilinje nederst (hvis man marker alt i browseren (med CTRL+A) kan det ses), hvilket der ikke skal være... kan bare ikke finde det i HTML-koden :-(
Der udloves gode point, som kan deles, hvis der er flere der svarer fornuftigt på det hele :-)
Filerne skal gemmes som index.htm og style.css
Det er vigtigt at hente sidens pt. eneste billede ned, som findes på:
http://www.upitfree.dk/upload/files/logo.jpg[2]
Håber ikke det var for meget - ellers spørg...
------------------ index.htm ------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ØkoGården</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript">
<!--
window.onload = function() {
var divs=document.getElementsByTagName("div");
for (i=0;i<divs.length;i++){
if (divs[i].className=="top") {
divs[i].onmouseover=function() {
this.firstChild.nextSibling.className="on";
}
divs[i].onmouseout=function() {
this.firstChild.nextSibling.className="off";
}
}
}
}
//-->
</script>
</head>
<body>
<center>
<div id="title_tbl">
<img src="grafik/logo.jpg" alt="ØkoGården - på
nettet" class="billede">
<h1 id=t1>ØkoGården</h1>
<p id=t2>... din økologiske partner!</p>
</div>
<div id="all">
<table> <!-- Menu indeholdt i tabel -->
<td>
<center>
<div id="menu">
<div class="top">
Om gården
<div class="skjult">
<div class="menup" onmouseover="style.backgroundColor='lightgreen';"
onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><a
href="historie.htm">Historie</a></div>
<div class="menup"
onmouseover="style.backgroundColor='lightgreen';"
onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><a
href="medarbejdere.htm" >Medarbejdere</a></div>
<div class="menup"
onmouseover="style.backgroundColor='lightgreen';"
onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><a href="job.htm">Job hos
os?</a></div>
</div>
</div>
<div class="top">
Produkter
<div class="skjult">
<div class="menup" onmouseover="style.backgroundColor='lightgreen';"
onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><a
href="produkter.htm">Vores produkter</a></div>
</div>
</div>
<div class="top">
Værd at vide
<div class="skjult">
<div class="menup" onmouseover="style.backgroundColor='lightgreen';"
onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><a href="oekologi.htm"
>Læs om økologi</a></div>
<div class="menup"
onmouseover="style.backgroundColor='lightgreen';"
onmouseout="style.backgroundColor='rgb(240, 240, 240)';"><a href="kontakt.htm"
>Kontakt os</a></div>
</div>
</div>
</td>
</table> <!-- Slut tabel for menu -->
<!-- Indholdet -->
<table width="430px">
<div id="txt">
<b>Velkommen hos ØkoGåden!</b><br><p>
Vi er et selvstændigt økologisk landbrug, der dyrker vores egne
produkter uafhængigt af andre. Hos <i>ØkoGården</i> den er du
altid sikker på at få de bedste økologiske råvarer mellem
hænderne.
<i>ØkoGården</i> befinder sig i det smukke midtfynske landskab, hvor
jorden er god til dyrkning.<p>
For at læse mere om <i>ØkoGården</i> og dens mange
facetter, da anvend menunavigationen foroven.</p>
</div>
</table>
</center>
</body>
</html>
----------------- style.css -------------------
#t1 {
FONT: bold italic 4em "Times New Roman", serif; COLOR: #99cccc; position: relative; TOP: -0.15em;
}
#t2 {
FONT: 1 em arial, sans-serif; COLOR: #336666; LETTER-SPACING: 3px; POSITION: relative; TOP: -2.8em; left: 8em;
}
a {
color: black;
}
a:visited {
color: black;
}
body {
}
#menu {
position: relative;
width: 500px; height: 85px;
/*height: 100px;*/
left: 125px;
}
.menup {
padding-top: 3px;
padding-bottom: 3px;
border-top: solid green 1px; /* solid også en mulighed */
}
#title_tbl {
width: 800px;
height: 10px;
/*background-color: lightgreen;*/
}
#dato {
width: 800px;
height: 10px;
background-color: lightred;
}
#all {
position: relative;
width: 800px;
height: 510px;
background-color: rgb(240, 240, 240);
/*border: solid #000 1px;*/
border: dotted lightgreen 1px;
top: -19px;
}
#txt {
font-family:Verdana;font-size:11px;
}
.top {font-family:Arial;font-size:12px;float:left;border:1px dotted green; width: 25%;}
.skjult {display:none;}
.on {display:block;border-top:2px solid green;}
.off {display:none}
.billede {position:relative;float:left;clear:right;}
