Huge scroll bars on website.

H

honeybadger

New Member
Guys this is my first time playing around with HTML/CSS and I am trying to make a simple page with pictures on it.

It loads perfectly, just where I want it. But to the right and underneath the pictures are HUGE scroll bars full of empty space.

Why did I get that?

here is my code:
HTML: 
    <html>
    <head><TITLE>This is the Title</TITLE></head>
    <style type="text/css">
    body {
    text-align: center;
    }
     
    #container {
    margin: 0 auto;
    width: 1024px;
    }
     
    #toppage {
    position: relative;
    top: 0px;
    left: 0px;
    }
     
    #picture {
    top: 30px;
    left: 0px;
    position: relative;
    }
     
    #nextpicture {
    top: -383px;
    left: 44px;
    position: relative;
    }
     
    #thirdtpicture {
    top: -678px;
    left: 742px;
    position: relative;
    }

   #fourthpicture {
   top: -870px;
   left: 758px;
   position: relative;
   }
    </style>
     
    <div id="container">
     
    <body bgcolor="white">
     
    <div id='toppage'><p align="center"><img src="headerpicture"</p></div>
     
    <div id='picture'><p align="center"><img src="picture1"/></p></div>
     
    <div id='nextpicture'><p><img src="picture2"/></p></div>
     
    <div id='thirdpicture'><p><img src="picture3"/></p></div>
   
    <div id='fourthpicture'><p><img src="picture4"/></p></div>
     
    </body>
    </div>
    </html>
 
H

honeybadger

New Member
CaldwellYSR said:
Why are your images inside <p> tags??? Also why is there a div outside your body?
Click to expand...

I thought they needed to be.
and the div tags i just used them to assign a variable to the pictures to I could call it later on the top in my CSS text.


Could that be the problem?
 
Edge

Edge

Member
should be this:

<html>
<head><TITLE>This is the Title</TITLE></head>
<style type="text/css">
body {
text-align: center;
}

#container {
margin: 0 auto;
width: 1024px;
}

#toppage {
position: relative;
top: 0px;
left: 0px;
}

#picture {
top: 30px;
left: 0px;
position: relative;
}

#nextpicture {
top: -383px;
left: 44px;
position: relative;
}

#thirdtpicture {
top: -678px;
left: 742px;
position: relative;
}

#fourthpicture {
top: -870px;
left: 758px;
position: relative;
}
</style>



<body bgcolor="white">
<div id="container">
<div id='toppage'><img src="headerpicture"/></div>

<div id='picture'><img src="picture1"/></div>

<div id='nextpicture'><img src="picture2"/></div>

<div id='thirdpicture'><img src="picture3"/></div>

<div id='fourthpicture'><img src="picture4"/></div>
</div>
</body>

</html>


You can't have divs outside your body tags and one of your image elements wasn't closed. Also don't use align=center as its deprecated (just css for presentational stuff) and no need to have p tags inside your divs - try and minimise unecessary HTML. You could even get rid of divs and make images block level elements and assign id's to images.
 
CaldwellYSR

CaldwellYSR

Member
Yeah that could be the problem. In all honesty you don't even need the div tags, although they won't cause the problem. You could just have the images and give the images a class and/or id attribute. If I was making a grid out of the image I would probably put them in an unordered list. Like so...

HTML: 
<ul id="pic_grid">
    <li class="grid_item"><img src="path/to/image" alt="img description" /></li>
    <li class="grid_item"><img src="path/to/image" alt="img description" /></li>
    <li class="grid_item"><img src="path/to/image" alt="img description" /></li>
    ...
    ...
</ul>

Then your css would look like:

HTML: 
#pic_grid {
    list-style: none; /* Get rid of bullets */
    width: /* This is figured out by taking the number of columns you want, multiplied by the width of the images plus the margin between the images (multiplied times num of cols minus one) */
    overflow: auto; /* Used as a clearfix to make the list stretch down over the floated images */
}
.grid_item {
    float: left; /* Force them all into the grid */
    width: xxx; /* To make them all the same size if they aren't already */
    margin: xxx; /* How much space you want between the images */
}

Looking back at your css I don't think you have a good understand of what position means. Position: relative means that any child elements to that selector (ie the elements inside the div you're styling) will be positioned relative to that block. What you're trying to to is position: absolute, which is not a good idea. This means you have to hardcode all those numbers to determine where the images will be. This is no doubt what is causing your scrollbar issue because your image is trying to position itself within the div and you're not giving it any positioning rules. So I would drop position for now and use floating to make this happen.
 
H

honeybadger

New Member
I took out the <p> like you guys said. and I also removed the position:relative and replaced it with float:left.

Well i got rid of the huge scroll bars....but the images just got bunched up in the middle from left to right lol.

The scroll bars are gone, I just need to find out how to put the images in their respective places again.

After i used float:left The pictures ignore the top: pixel and left: pixel positions I gave them.

how do I put them back where they belong?
would using z-index work?


<html>
<head><TITLE>This is the Title</TITLE></head>
<style type="text/css">
body {
text-align: center;
}

#container {
margin: 0 auto;
width: 1024px;
}

#toppage {
top: 0px;
left: 0px;
float:left;
}

#picture {
top: 30px;
left: 0px;
float:left;
}

#nextpicture {
top: -383px;
left: 44px;
float:left;
}

#thirdtpicture {
top: -678px;
left: 742px;
float:left;
}

#fourthpicture {
top: -870px;
left: 758px;
float:left;
}
</style>



<body bgcolor="white">
<div id="container">
<div id='toppage'><img src="headerpicture"/></div>

<div id='picture'><img src="picture1"/></div>

<div id='nextpicture'><img src="picture2"/></div>

<div id='thirdpicture'><img src="picture3"/></div>

<div id='fourthpicture'><img src="picture4"/></div>
</div>
</body>

</html>
 
Last edited:
H

honeybadger

New Member
well I guess what I am trying to do, is make the pictures overlap.

With float:left they stack from left to right.

When I use position:relative I could overlap them...but I got those huge scroll bars.

with float, there are no huge scroll bars, but the images don't overlap.
 
CaldwellYSR

CaldwellYSR

Member
There are tutorials on this site that explain the usage of position and the usage of floats. If you had a live example of what was going on it would help greatly. Otherwise it's kind of hard to help you. If you can, add me to iChat (AIM) and I'll see what I can do to help.
 
You must log in or register to reply here.
Top