3 svar · 433 visningar · startad av Aniita
Jag håller på att lära mig HTML/CSS och behöver hjälp med att centrera nedanstående layout så den förblir centrerad oavsett skärmupplösning.
Edit: Tar gärna emot förslag på andra HTML/CSS fotogalleri som man kan använda, gärna lite bättre än detta.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Text</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>
<style type="text/css">
<!--
#photo {
padding-left:340px;
}
#footer {
padding-left:340px;
padding-top:10px;
}
a:link {
color:#000000;
text-decoration:none;
}
a:hover {
color:#FFFFFF;
background-color:#FF0000;
}
.menu {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}
.footer_text {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#CCCCCC;
}
.photo_1 {
border-style:solid;
border-width:1px;
border-color:#000000;
padding:10px;
color:#000000;
}
abbr[title]:after{
content: "";
}
abbr[title]:hover:after{
content: " (" attr(title) ")";
}
-->
</style></head><body>
<div id="photo"><br>
<span class="menu">Foton:
<a href="javascript:changeImage('http://img248.imageshack.us/img248/1761/stockholmlc9.jpg')">Stockholm</a> -
<a href="javascript:changeImage('http://img248.imageshack.us/img248/1761/stockholmlc9.jpg')">Stockholm</a> -
<a href="javascript:changeImage('http://img248.imageshack.us/img248/1761/stockholmlc9.jpg')">Stockholm</a> -
<a href="javascript:changeImage('http://img248.imageshack.us/img248/1761/stockholmlc9.jpg')">Stockholm</a> -
<a href="javascript:changeImage('http://img248.imageshack.us/img248/1761/stockholmlc9.jpg')">Stockholm</a> -
</span><br>
<br>
<img src="http://img248.imageshack.us/img248/1761/stockholmlc9.jpg" name="mainimage" class="photo_1" alt="Photo" height="300" width="400">
</div>
<div id="footer"><span class="footer_text">Copyrighttext</span></div>
</body></html>
Använd kod-taggarna när du postar kod! så blir det mycket lättare att se hur det ser ut! Alltså, omgärda kodstycket med: [ html]din HTML-kod eller [ code]din annan kod . (Fast utan mellanslag mellan [ och h/c )Exempel:
<input type="text" name="n" value="apa">
Annan kod:
function() {
return true;
}
Det finns två enkla saker du kan göra med den du har.
antingen centrerar du alltihop i body
body{
text-align: center;
}
eller t.ex skapar en <div> som bara ska centrera
t.ex
#galleri{
width: 500px;/*hittade på en bredd.*/
margin:5% auto;/*5% är från toppen och auto centrerar.*/
}
I båda fallen raderar du din padding-left som du har annars blir det fel.
<div id="galleri">lägger du överst under </head> och </div> längst ner på sidan innan </body>.
Och välkommen till WF! :)
Om du vill testa fotoalbum utan javascript och bara css kan du titta på flera olika på Stu´s sida
http://www.cssplay.co.uk/menu/complex_slides.html