Hej udviklere.
Jeg er igang med en side for min far's linedance klub, og er stødt ind i nogle problemer. Jeg bruger CSS og php til min side. Min kildekode:
<body>
<div id="title">
<img id="logo" src="logo.gif" alt="Stonless Boots's logo" />
<img src="linedance-tegn.gif" alt="linedancerer"
id="billede-1" /><img src="dance.gif" id="billede-2" alt="linedancerer" />
</div>
<div id="menu">
<a href="index.php?side=">Forside</a>
<a href="index.php?side=aktuelt">Aktuelt</a>
<a href="index.php?side=danse">Danse</a>
<a href="index.php?side=kalender">Kalender</a>
<a href="index.php?side=links">Links</a>
</div>
<div id="indhold">
<!-- indhold -->
<?
$side = $_GET["side"];
if($side == "") {
include ("hvem-er-vi.html");
}
elseif ($side == "links") {
include ("links.html");
}
elseif ($side == "aktuelt") {
include ("aktuelt.html");
}
elseif ($side == "danse") {
include ("danse-index.html");
}
?>
</div>
<div id="bund">
<img src="../powerani.gif" alt="Devil" id="billede-d" />
</div>
</body>
Og mit CSS
a:link {
color: #0000ff;
}
a:visited {
color: #0000ff;
}
a:hover {
color: #ff0000;
}
a:active {
color: #0000ff;
}
body {
background-image: url("Background.gif");
margin: 0px;
padding: 0px;
font-size: 0.5cm;
font-family: helvetica, sans-serif;
}
p {
font-size: 0.5cm;
font-family: helvitica, sans-serif;
}
img.top-b {
height: 100px;
}
#logo {
text-align: center;
height: 170px;
width: 200px;
background: transparent;
}
#billede-1 {
position: absolute;
top: 30px;
left: 0px;
text-align: left;
vertical-align: top;
height: 100px;
}
#billede-2 {
position: absolute;
top: 20px;
right: 0px;
text-align: left;
vertical-align: top;
height: 100px;
}
h2 {
font-family: Serif;
font-style: italic;
font-weight: bold;
}
#title {
position: absolute;
top: 0px;
left: 0px;
text-align: center;
margin-left: 10%;
width: 85%;
height: 20%;
border: 0px;
}
#menu {
position: absolute;
left: 0px;
top: 25%;
text-align: center;
width: 15%;
height: 600px;
}
#indhold {
position: absolute;
top: 200px;
margin-left: 25%;
margin-right: 25%;
text-align: left;
width: 51%;
height: 65%;
overflow: auto;
}
#bund {
position: absolute;
bottom: 0px;
left: 0px;
height: 10%;
width: 100%;
}
#tekst {
width: 100%;
height: 70%;
overflow: auto;
background-color: transparent;
}
#billede-d {
height: 50px;
position: absolute;
left: 0px;
bottom: 0px;
}
Indholdet er almindelige html filer med tekst, så det er ikke dem der er noget i vejen med.
Jeg skal have indholdet til at kunne scrolle, ligesom en iframe, men der kommer et grimt border med iframe, selv om man siger border="0", også skal den være transparent. Jeg har prøvet <object>, overflow: auto; og iframe.
Det duer kun i Firefox når jeg bruger <object> og overflow: auto;. Med <object> kommer der en hvid baggrund i IE, og med overflow: auto; sker der ikke noget.
----------------------------------------
http://validator.w3.org - og bliv en bedere koder.