In need of some HTML coding help

N

NukeULater

Gawd
Joined
Sep 12, 2006
Messages
917
Hello,

I am currently working on a website for my photographic business but I have ran into a few problems. But first, here is the URL to my site http://www.zacharyseib.com.

What is bugging me is the the centering of the portfolio page compared to the others. Because it is longer, a scroll bar appears on the right side of the browser window. This changes the centering of the website and makes it look strange when moving between pages. Is there any way I can keep the site in one place when the scroll bar appears? I have been looking around for a solution, but I have yet to find one.

Thanks in advance. :)
 
well, so long as your content is longer than the view port, you're going to have a scrollbar, there's no avoiding that.

However, you could "force" all your pages to have a scrollbar, even the ones that don't have very long content, and that would make everything consistent. You can do that using this bit of CSS which should work on all newer browsers, not sure about IE6 or earlier though.

Code: 
body
{
  height: 100%;
  margin-bottom: 1px;
}
 
Like maw said, the only way to make things consistent is to force the scroll bar. This alternate code will give you the bar without the handle to shift it that tiny pixel (assuming your page content is short).

In your stylesheet:

Code: 
html 
{
  overflow-y: scroll;
}

This is a CSS3 property so only the newer browsers will know what to do with it.
 
Last edited:
Oh and just to let you know, it looks great in my iPad because of the hidden scrollbar. I like the layout.

Id consider just resizing your page so that your content fits inside a container that allows wiggle room for a scrollbar. A forced scrollbar will look silly in the other pages.
 
monkey_slap said:
Are you setting the width of the main container? And this is more of a CSS thing. ;)
Click to expand...

monkey_slap, I am using basic tables for my design. I am currently teaching myself the basics of CSS, and am not knowledgeable about it. Currently I am using this code to center the tables.
Code: 
<div align="center">
  <table width="1024" height="169" border="0" cellpadding="0" cellspacing="0">
    <tr>
maw said:
However, you could "force" all your pages to have a scrollbar, even the ones that don't have very long content, and that would make everything consistent. You can do that using this bit of CSS which should work on all newer browsers, not sure about IE6 or earlier though.
Click to expand...
Alright I did modify your code to work perfectly for my site. It worked in both IE8 and Firefox 3.6.
Code: 
body {
    background-color: #ffffff; overflow-y: scroll;
}
I was more bothered by the fact that the design shifts to the left than by a forced scroll bar. So I think I will roll with that for now as a temporary solution. Would any of you know any decent websites were I could learn more about CSS?

Thanks again. :)
 
monkey_slap said:
Oh and just to let you know, it looks great in my iPad because of the hidden scrollbar. I like the layout.

Id consider just resizing your page so that your content fits inside a container that allows wiggle room for a scrollbar. A forced scrollbar will look silly in the other pages.
Click to expand...
monkey_slap, I'm not sure what you mean by "resizing your page so that your content fits inside a container that allows wiggle room for a scrollbar." Like I said before, I am a CSS noob.

I'm glad you like the design.
 
You can set a fixed height and use the overflow element.

Code: 
container {
    height: 400px;
    overflow: auto;
}

This will display a scrollbar when the content is too long for the div.
 
wags said:
In your stylesheet:

Code: 
html 
{
  overflow-y: scroll;
}

This is a CSS3 property so only the newer browsers will know what to do with it.
Click to expand...

awesome. that works even better than mine!
 
You must log in or register to reply here.
Back
Top