[HTML] Hjälp med enkelt galleri.
Hej!
Jag håller på att göra en enkel hemsida, och jag har problem med att skapa ett enkelt galleri. Jag har lagt in bilderna som:
<a href="Bilder/one.png"><img class="galleribild" src="Bilder/one.png" alt="1"></a>
CSS för galleribild ser ut som följande:
.galleribild {
display:block;
height:10em;
border:none;
float:left;
margin:0.5em 1em 0.5em 0;
overflow:hidden;
}
Allt ser bra ut när man först laddar hemsidan, men om man klickar på länkarna för att få upp hela bilden och sedan laddar om huvudsidan så blir något galet, som ni ser i mina två bifogade bilder. Vad beror felet på? Stort tack till er som orkar ta er tiden att hjälpa mig!
Hela HTML-filen:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Galleritest</title>
</head>
<body>
<div id="container">
<div id="header">
<img src="banner.png" alt="banner">
</div>
<div id="topborder">
<ul>
<li><a href="index.html">Hem</a></li>
<div id="menubar"></div>
</div>
<div id="content">
<h1>Hemsidan är under konstruktion.</h1>
<div id="galleri">
<a href="Bilder/one.png"><img class="galleribild" src="Bilder/one.png" alt="1"></a>
<a href="Bilder/two.png"><img class="galleribild" src="Bilder/two.png" alt="2"></a>
<a href="Bilder/three.png"><img class="galleribild" src="Bilder/three.png" alt="3"></a>
<a href="Bilder/two.png"><img class="galleribild" src="Bilder/two.png" alt="2"></a>
<a href="Bilder/one.png"><img class="galleribild" src="Bilder/one.png" alt="1"></a>
<a href="Bilder/three.png"><img class="galleribild" src="Bilder/three.png" alt="3"></a>
</div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus, mauris nec egestas mollis, turpis augue vehicula sem, eu vulputate purus ligula non nisi. Sed tincidunt, lacus eu ullamcorper mollis, sem sem viverra nibh, a placerat ipsum leo in diam. In sed hendrerit erat. Nullam suscipit elementum odio suscipit consectetur. Mauris nibh dui, pulvinar ut facilisis eget, pretium in libero. Morbi eget orci vitae ipsum dictum bibendum ut non libero. Duis non enim vel nisl cursus pharetra. Suspendisse potenti. Nulla facilisi. Integer varius pellentesque mauris, eget fringilla lorem pharetra a. Mauris non magna leo. Curabitur vulputate risus sit amet lorem aliquet at luctus purus cursus. Praesent at elit et dolor consequat dapibus sed ac sem. Fusce vel purus non magna sollicitudin condimentum. Mauris gravida risus mi.</p>
<p>Nam euismod lacinia bibendum. Sed at auctor nulla. Praesent eget velit nec justo dapibus pretium at a mi. Donec justo nisl, pulvinar quis scelerisque mollis, pulvinar et eros. Vestibulum non sem ut metus iaculis auctor. Quisque congue sapien id dui dictum placerat. Cras vulputate faucibus convallis. Morbi vitae arcu enim, at feugiat mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rhoncus interdum felis, quis aliquet tellus tincidunt molestie. Praesent non elit nisl. Maecenas consectetur augue sit amet felis ullamcorper ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Aliquam erat volutpat. Aliquam erat volutpat. Etiam arcu risus, tristique ut luctus et, commodo sit amet felis. Nulla id diam ut dui accumsan porttitor. Sed nec urna nisl, in ultricies tortor. Sed sollicitudin nisi id quam aliquam at malesuada metus sollicitudin. Nullam ultricies pretium ipsum tincidunt varius. Vivamus gravida, enim vitae varius vulputate, lorem orci cursus arcu, ac vehicula arcu velit sed sapien. In hac habitasse platea dictumst. Duis tellus est, tristique vel dapibus id, posuere sit amet lorem. Maecenas sed facilisis sem.</p>
</div>
<div id="footer">
<div id="bottomborder"></div>
<div id="footercontent">
<p>Copyright © 2010 Gfield, All rights reserved.<br>E-post: info@something.se</p>
</div>
</div>
</div>
</body>
</html>
Hela CSS-filen:
html,body {
margin:0;
padding:0;
height:100%;
background:gray;
}
#container {
position:relative;
margin:0 auto;
padding:0;
width:728px;
height:auto !important;
height:100%;
min-height:100%;
border-left:3px solid;
border-right:3px solid;
background:#FFFFFF;
}
#header {
margin:0;
padding:10px 0 10px;
background:lightgray;
}
#topborder {
margin:0;
padding:0;
border-top:3px solid;
border-bottom:3px solid;
background:#FF9933;
}
#topborder ul {
margin:0;
padding:0;
list-style-type:none;
}
#topborder a:link, a:visited {
float:left;
display:block;
font-weight:bold;
text-align:center;
text-decoration:none;
width:80px;
color:#000000;
background-color:#FF9900;
}
#topborder a:hover, a:active {
background-color:#FF6633;
}
#menubar {
clear:both;
}
#content {
margin:0;
padding:0 1em 5em;
}
.bild {
display:block;
float:right;
margin-left:1em;
border:none;
width:40%;
}
.galleribild {
display:block;
height:10em;
border:none;
float:left;
margin:0.5em 1em 0.5em 0;
overflow:hidden;
}
br {
clear:both;
}
#bottomborder {
margin:0;
padding:0;
height:8px;
border-top:3px solid;
border-bottom:3px solid;
background:#FF9933;
}
#footer {
margin:0;
padding:0;
position:absolute;
width:100%;
bottom:0;
background:lightgray;
}
#footercontent {
margin:0;
padding:0;
}
#footercontent p {
font-size:small;
text-align:center;
}
[Asus P5B] [Intel C2D E6600] [Asus GTS 250] [Corsair 2x2GB XMS2] [Corsair HX520] [Antec Solo]
