Problem med nästan färdig hemsida
Hej igen, postade för länge sedan en tråd om en hemsida, men la ner projektet strax efter det på grund av tidsbrist. MEN nu har jag kodat en ny hemsida (:P) och tagit till mig alla (tror jag) tips från den gamla tråden. Nu till problem lösningen!
Ber om ursäkt för alla svara fält som jag lagt in (med paint!) i bilderna, men jag hoppas och tror inte att de kommer förhindra att ni inte inser vad felen är.
Hemsidan funkar helt okej i Google Chrome, både på datorn och på min iphone, endast att man ser bakgrundsfärgen i toppen av sidan samt att min snygga ram cepar i hörnet i "bildgalleri".
Sedan så var jag ju så dum att jag inte testade sidan i någon annan webbläsare än Chrome när jag byggde den, så jag halvt dog när jag öppnade den i Internet Explorer och såg hur ful den var...
slänger in bilderna här, så kan ni se vad jag menar:
Så här bra fungerar 5 av 6 sidor i Chrome, man ser en rand av bakgrunden i toppen av sidan, samt att jag markerat ut ett "fungerande hörn".
Här ser vi fliken bildgalleri, det är här "hörnet" inte fungerar, som ni ser förskjuts hela "botten biten av ramen" en liten bit åt höger.
här ser vi sidan i Explorer...
Skumma saker:
1. hörnet som inte fungerar i Chrome fungerar här.
2. sidan är till skillnad från i Chrome inte vågrätt centrerad, återkommer till detta.
3. som ni ser ser man även här en tunn bit av bakgrunden ovanför sidan.
4. I IE sticker även en bit av bakgrunden för div:en #container ut under hela sidan...
Att hörnet fungerar i IE och inte i Chrome tycker jag är konstigt, att det trycks undan över huvudtaget är väldigt konstigt, eftersom att det bara trycks bort den biten som är färgad, bakgrundsbilden är egentligen lång, men med vit bakgrund.
Vill ha sidan centrerad vågrätt i webbläsaren, vilket Chrome gör, till skillnad från IE. Har provat med "margin-left: auto; margin-right: auto;" i cssen utan att lyckas bra alls... När jag gjorde det så flyttades typ bara menyraden till mitten, och resten låg kvar, samt att bakgrundsbilden försvann...
Här är all kod, har skrivit i html, css, och stulit ett javascript till bildgalleriet.
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Bildgalleri</title>
<script type="text/javascript" src="imgc.js">
</script>
</head>
<body background="images/bakgrund.gif" cellpadding="0" cellspacing="0">
<div id="container">
<div id="header">
<A HREF="index.html"><IMG SRC="images/logga.gif"></A>
</div>
<div id="meny">
<A HREF="index.html"><IMG SRC="images/valkommen.gif"></A><A HREF="kullastolen.html"><IMG SRC="images/kullastolen.gif"></A><A HREF="foretaget.html"><IMG SRC="images/foretaget.gif"></A><A HREF="bildgalleri.html"><IMG SRC="images/bildgalleri.gif"></A><A HREF="aterforsaljare.html"><IMG SRC="images/aterforsaljare.gif"></A><A HREF="kontakt.html"><IMG SRC="images/kontakt.gif"></A>
</div>
<div id="body">
<div id="gtextbox1">
<h2><br>Bildgalleri</h2>
</div>
<div id="gimgbox1">
<p align="center">
<span onmouseover="document.rollimg.src=image0.src;"><img src="images/galleri/1.jpg" width="75" border="0" alt="1"></span>
<span onmouseover="document.rollimg.src=image1.src;"><img src="images/galleri/2.jpg" width="75" border="0" alt="1"></span>
<span onmouseover="document.rollimg.src=image2.src;"><img src="images/galleri/3.jpg" width="75" border="0" alt="1"></span>
<span onmouseover="document.rollimg.src=image3.src;"><img src="images/galleri/4.jpg" width="75" border="0" alt="1"></span>
<span onmouseover="document.rollimg.src=image4.src;"><img src="images/galleri/5.jpg" width="75" border="0" alt="1"></span>
<span onmouseover="document.rollimg.src=image5.src;"><img src="images/galleri/6.jpg" width="75" border="0" alt="1"></span>
<span onmouseover="document.rollimg.src=image6.src;"><img src="images/galleri/7.jpg" width="75" border="0" alt="1"></span>
</p>
<p align="center">
<img src="images/galleri/1.jpg" width="150" border="0" alt="Larger version of one of the smaller images above" name="rollimg">
</p>
<p align="center">
<span onmouseover="document.rollimg.src=image7.src;"><img src="images/galleri/8.jpg" width="75" border="0" alt="1"></span>
<span onmouseover="document.rollimg.src=image8.src;"><img src="images/galleri/9.jpg" width="75" height="113" border="0" alt="1"></span>
<span onmouseover="document.rollimg.src=image9.src;"><img src="images/galleri/10.jpg" width="75" height="113" border="0" alt="1"></span>
<span onmouseover="document.rollimg.src=image10.src;"><img src="images/galleri/11.jpg" width="75" height="113" border="0" alt="1"></span>
<span onmouseover="document.rollimg.src=image11.src;"><img src="images/galleri/12.jpg" width="75" height="113" border="0" alt="1"></span>
<span onmouseover="document.rollimg.src=image12.src;"><img src="images/galleri/13.jpg" width="75" height="113" border="0" alt="1"></span>
<span onmouseover="document.rollimg.src=image13.src;"><img src="images/galleri/14.jpg" width="75" height="113" border="0" alt="1"></span>
</p>
</div>
<div id="footer"><img src="images/footer.gif">
</div>
</div>
</body>
</html>
a img {border:0;}
#container {
background-image:url(images/sidan.gif);
width: 1000px;
hight:auto;
margin:0px auto;
padding:0px 0px;
font-family:"Times New Roman",arial;
}
#header {
margin:0px 20px;
width: auto;
height: 98px;
position: relative;
}
#meny{
margin:20px 0px;
border:0px;
padding:0px;
text-align: center;
}
#body {
margin:auto;
width:960px;
height:auto;
padding:0px;
}
#footer {
margin:auto;
width:1000px;
text-align:center;
clear: both;
}
/*indexboxar*/
#itextbox1{
width:600px;
margin:5px 20px;
float:left;
}
#iimgbox1{
width:270px;
margin:10px 10px;
float:right;
}
/*Företagetboxar*/
#ftextbox1{
width:600px;
margin:5px 20px;
float:left;
}
/*kullastolenboxar*/
#kutextbox1{
width:600px;
margin:5px 20px;
float:left;
}
#kuimgbox1{
width:auto;
margin:5px 10px;
float:right;
}
/*Galleriboxar*/
#gtextbox1{
width:600px;
margin:5px 20px;
float:left;
}
#gimgbox1{
margin:10px 20px;
width:600;
}
/*åsäljboxarboxar*/
#atextbox1{
width:600px;
margin:5px 20px;
float:left;
}
/*kontaktboxar*/
#kotextbox1{
width:400px;
margin:5px 20px;
float:left;
}
#karta{
float:right;
}
h2 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 15pt;
padding-top: 0px;
padding-bottom: 3px;
}
if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image3 = new Image;
image4 = new Image;
image5 = new Image;
image6 = new Image;
image7 = new Image;
image8 = new Image;
image9 = new Image;
image10 = new Image;
image11 = new Image;
image12 = new Image;
image13 = new Image;
image0.src = 'images/galleri/1.jpg';
image1.src = 'images/galleri/2.jpg';
image2.src = 'images/galleri/3.jpg';
image3.src = 'images/galleri/4.jpg';
image4.src = 'images/galleri/5.jpg';
image5.src = 'images/galleri/6.jpg';
image6.src = 'images/galleri/7.jpg';
image7.src = 'images/galleri/8.jpg';
image8.src = 'images/galleri/9.jpg';
image9.src = 'images/galleri/10.jpg';
image10.src = 'images/galleri/11.jpg';
image11.src = 'images/galleri/12.jpg';
image12.src = 'images/galleri/13.jpg';
image13.src = 'images/galleri/14.jpg';
} else {
image0 = '';
image1 = '';
image2 = '';
image3 = '';
image4 = '';
image5 = '';
image6 = '';
image7 = '';
image8 = '';
image9 = '';
image10 = '';
image11 = '';
image12 = '';
image13 = '';
document.rollimg = '';
}
var cap = ['Picture One',
'Second Picture',
'Three'];
function rollover(n) {
document.rollimg.src = window['image'+n].src;
document.getElementById('caption').innerHTML = cap[n];
}
Här är koden till en fungerande del av hemsidan, utan "hörnproblem"
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Återförsäljare</title>
</head>
<body background="images/bakgrund.gif" cellpadding="0" cellspacing="0">
<div id="container">
<div id="header">
<A HREF="index.html"><IMG SRC="images/logga.gif"></A>
</div>
<div id="meny">
<A HREF="index.html"><IMG SRC="images/valkommen.gif"></A><A HREF="kullastolen.html"><IMG SRC="images/kullastolen.gif"></A><A HREF="foretaget.html"><IMG SRC="images/foretaget.gif"></A><A HREF="bildgalleri.html"><IMG SRC="images/bildgalleri.gif"></A><A HREF="aterforsaljare.html"><IMG SRC="images/aterforsaljare.gif"></A><A HREF="kontakt.html"><IMG SRC="images/kontakt.gif"></A>
</div>
<div id="body">
<div id="atextbox1">
<h2>Återförsäljare</h2>
<P>
Kullastolen säljs via möbel- och designbutiker och affärer för barnartiklar samt via skolmaterielföretag<br><br>Fråga efter Kullastolen i din lokala möbel-/design-/barnartikelbutik!<br><br>Kullastolen säljs via återförsäljare spridda över landet. Möbelhandel och designbutiker erbjuder produkten. Affärer och varuhus för barnartiklar, barnvagnar och/eller leksaker säljer Kullastolen. Till skolor och enskild och offentlig barnomsorg erbjuds produkten via inredningsföretag och företag som säljer skolmateriel.<br><br>Finns inte Kullastolen tillgänglig i din närhet? Hör av dig - se kontaktsidan
</p>
</div>
</div>
<div id="footer"><img src="images/footer.gif">
</div>
</div>
</body>
</html>
Tror inte jag missat något nu :/
Ska gå och äta nu, så bli inte ledsna om jag inte svarar direkt, och bli inte sura för jag visste inte att det var mat när jag började skriva
Tack på förhand, Najsisen!
Citera för svar :)
Intel 3770k / Msi Mpower / 980 TI / 16gb 1600mhz Corsair Vengeance / H100i / Silverstone Strider 1000w Gold / Samsung 830 128gb / Fractal Design Arc
