PDA

View Full Version : My website wont me scroll to the left when resized



yonas
Jan 17th, 2011, 10:59 PM
When I resize my browser, the website wont let me scroll to the left to see all the content. I also noticed the design wont work on iPhone etc. What's wrong with my code?

I'm a total noob on this subject so I'm sure that the code is ugly. All help to get it neat and efficient is welcome.

Here's the site: http://nerveend.com

HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<meta name="google-site-verification" content="eb5hHuJoRwWEq0ylEdNs76JJWTx5aGhy0cfA9aPOYD4" />

<meta name="description" content="Official website of Finnish metal band Nerve End">
<meta name="keywords" content="Nerve End, Metal, Progressive, Joonas Kaselius, Lauri Mäntynen, Erno Sallinen, Aki Jalkanen, Free, EP, Download, This State Of War">

<link rel="stylesheet" type="text/css" href="style.css" />
<TITLE>nerveend.com</TITLE>

<style type="text/css">
img {
border: 0;
}
</style>
</HEAD>
<BODY>

<div style="position: absolute; left: 50%; top: 0px; margin-left: -476px; height: 276px; width: 957px; "><img src="images/marquee.jpg">
</div>

<div style="position: absolute; left: 50%; top: 275px; margin-left: -480px; height: 65px; width: 970px; ">
<a href="http://facebook.com/nerveendband" class="menu_01" ></a><a href="http://myspace.com/nerveendband" class="menu_02" ></a><a href="http://youtube.com/ronixis" class="menu_03" ></a><a href="index.htm" class="menu_04" ></a><a href="bio.htm" class="menu_05" ></a><a href="gigs.htm" class="menu_06" ><a href="media.htm" class="menu_07" ><a href="http://nerveend.bigcartel.com" class="menu_08" ><a href="contact.htm" class="menu_09" ></a>
</div>

<div style="position: absolute; left: 50%; top: 348px; margin-left: -460px; height: 150px; width: 545px; ">
<img src="images/news.png"></div>

<div style="position: absolute; left: 50%; top: 440px; margin-left: -445px; height: 600px; width: 500px; ">

<font size="5"><b>FMA AWARDS 2011</font> <font size="3">January 15th, 2011</font></b><br>
Feel free to vote us as the best new undeground act here: <a href="http://www.imperiumi.net/index.php?act=fma">http://www.imperiumi.net/index.php?act=fma</a><br>
<br><br>

<font size="5"><b>NEW WEBSITE</font> <font size="3">January 15th, 2011</font></b><br>
Welcome to our new redesigned website!<br>
<br><br>

<font size="5"><b>NEW REHEARSAL PLACE</font> <font size="3">January 3rd, 2011</font></b><br>
We moved out to a bigger and better rehearsal place. There's some pics at <a href="media.htm">media section</a>.<br>
<br><br>

<font size="5"><b>SONGS ON SPOTIFY</font> <font size="3">December 10th, 2010</font></b><br>
You can listen to all of our songs at Spotify: <a href="http://open.spotify.com/album/5WBauWgNuosUx2K1hxA5Yt">http://open.spotify.com/album/5WBauWgNuosUx2K1hxA5Yt</a><br>
<br><br>

<font size="5"><b>BIGCARTEL WEBSTORE</font> <font size="3">December 4th, 2010</font></b><br>
Here's our new webstore: <a href="http://nerveend.bigcartel.com">nerveend.bigcartel.com</a>. You can buy our t-shirts and CDs here. You can pay via PayPal or regular credit card. We ship internationally.

</div>

<div style="position: absolute; left: 50%; top: 348px; margin-left: 110px; height: 150x; width: 370px; ">
<img src="images/mp3s.png"></div>


<div style="position: absolute; left: 50%; top: 425px; margin-left: 114px; height: 150x; width: 370px; ">

<div style="float: left; margin-right: 0px;">
<a href="http://nerveend.com/mp3/Nerve_End_-_This_State_Of_War_2010.zip"><img src="images/mp3s_01.png"></a></div><a href="http://nerveend.com/mp3/Nerve%20End%20-%2001%20-%20Arsonist.mp3">
<img src="images/mp3s_02.png"></a><br><a href="http://nerveend.com/mp3/Nerve%20End%20-%2002%20-%20This%20State%20Of%20War.mp3"><img src="images/mp3s_03.png"></a><br><a href="http://nerveend.com/mp3/Nerve%20End%20-%2003%20-%20Chains.mp3"><img src="images/mp3s_04.png"></a><br><a href="http://nerveend.com/mp3/Nerve%20End%20-%2004%20-%20Amnesia.mp3"><img src="images/mp3s_05.png"></a><br><a href="http://nerveend.com/mp3/Nerve_End_-_This_State_Of_War_2010.zip"><img src="images/mp3s_06.png"></a>

</div>

<div style="position: absolute; left: 50%; top: 598px; margin-left: 110px; height: 150px; width: 370px; ">
<img src="images/merchandise.png"></div>

<div style="position: absolute; left: 50%; top: 675px; margin-left: 110px; height: 150px; width: 370px; "><a href="http://nerveend.bigcartel.com">
<img src="images/merch_01.png"><br><img src="images/merch_02.png"></a><br><br><br><br><br></div>

</body>

</HTML>

CSS:

html, body
{
height: 100%;
color: black;
font-family: helvetica;
font-size: 17px;
background-color: #000000;
background-image: url('images/bg.jpg');
background-repeat: no-repeat;
background-position: top center;
padding: 0;
margin: 0;
}


a:link {color: #ffffff; text-decoration: underline; }
a:active {color: #ffffff; text-decoration: underline; }
a:visited {color: #ffffff; text-decoration: underline; }
a:hover {color: #000000; text-decoration: none; }

a.menu_01 {
background: url(images/menu_01.png) no-repeat 0 0;
width: 73px;
height: 62px;
float:left;
display: block;
outline: 0;
text-indent: -0px;
}

a.menu_01:hover { background-position: 0 -62px; }
a.menu_01:active { background-position: 0 -124px; }

a.menu_02 {
background: url(images/menu_02.png) no-repeat 0 0;
width: 55px;
height: 62px;
float:left;
display: block;
outline: 0;
}

a.menu_02:hover { background-position: 0 -62px; }
a.menu_02:active { background-position: 0 -124px; }

a.menu_03 {
background: url(images/menu_03.png) no-repeat 0 0;
width: 66px;
height: 62px;
float:left;
display: block;
outline: 0;
}

a.menu_03:hover { background-position: 0 -62px; }
a.menu_03:active { background-position: 0 -124px; }

a.menu_04 {
background: url(images/menu_04.png) no-repeat 0 0;
width: 129px;
height: 62px;
float:left;
display: block;
outline: 0;
}

a.menu_04:hover { background-position: 0 -62px; }
a.menu_04:active { background-position: 0 -124px; }

a.menu_05 {
background: url(images/menu_05.png) no-repeat 0 0;
width: 78px;
height: 62px;
float:left;
display: block;
outline: 0;
}

a.menu_05:hover { background-position: 0 -62px; }
a.menu_05:active { background-position: 0 -124px; }

a.menu_06 {
background: url(images/menu_06.png) no-repeat 0 0;
width: 110px;
height: 62px;
float:left;
display: block;
outline: 0;
}

a.menu_06:hover { background-position: 0 -62px; }
a.menu_06:active { background-position: 0 -124px; }


a.menu_07 {
background: url(images/menu_07.png) no-repeat 0 0;
width: 136px;
height: 62px;
float:left;
display: block;
outline: 0;
}

a.menu_07:hover { background-position: 0 -62px; }
a.menu_07:active { background-position: 0 -124px; }

a.menu_08 {
background: url(images/menu_08.png) no-repeat 0 0;
width: 126px;
height: 62px;
float:left;
display: block;
outline: 0;
}

a.menu_08:hover { background-position: 0 -62px; }
a.menu_08:active { background-position: 0 -124px; }

a.menu_09 {
background: url(images/menu_09.png) no-repeat 0 0;
width: 184px;
height: 62px;
float:left;
display: block;
outline: 0;
}

a.menu_09:hover { background-position: 0 -62px; }
a.menu_09:active { background-position: 0 -124px; }

Thanks in advance for all the help!

dome90uk
Jan 18th, 2011, 11:12 AM
Seems fine in my FFv3.6.13 - what browser are you having issues with?

teedoff
Jan 18th, 2011, 03:03 PM
You're going to have to remove the absolute positioning from each of your divs. then replace your negative margins with margin: 0 auto;

Then I think you can remove left positioning as well.

You should do some reading on the box model (http://www.w3schools.com/css/css_boxmodel.asp) and positioning (http://www.w3schools.com/css/css_positioning.asp).


edit: actually you need to play around with your margins for your nested divs to get them right.

yonas
Jan 18th, 2011, 08:41 PM
Hey, a big thanks to you teedoff! I was looking for a precise indication of what's wrong and that's what I got. I'll dig in to those problems and try to fix the pages.

yonas
Jan 18th, 2011, 08:42 PM
Seems fine in my FFv3.6.13 - what browser are you having issues with?

I'm using the same version of FF. The page looks fine when the window is expanded. The problem occurs only when I rezise the window really small.