Jump to content

Getting rid of area beside scroll bar.


Recommended Posts

I've been making a new layout for my site, and I've finally got everything lined up, but it leaves this annoying bar beside the scroll bar. This is what it looks like: http://pokemondarkaura.netne.net/testpage.htm It's that blue bar beside the scroll bar. Here's the css: http://pokemondarkaura.netne.net/layout.css

Edited by Dire_Wolf
Link to post
Share on other sites

:)it's just the background image.edit: actually I think it's the background color of the body tag. You should just change it to be the hex value of the gray part of the right edge of the background image

Edited by thescientist
Link to post
Share on other sites

When at the correct window size it looks fine but when you change the browser window to a bigger or smaller size things dont line up, you may want to put a #wrapper around everything so this doesnt happen.

Link to post
Share on other sites
When at the correct window size it looks fine but when you change the browser window to a bigger or smaller size things dont line up, you may want to put a #wrapper around everything so this doesnt happen.
yeah, good call. didn't even notice that until you mentioned it. The layout was a bit jarring enough for me.
Link to post
Share on other sites
How exactly do you do the #wrapper?
Just put a div with id='wrapper' around everything you currently have:<div id='wrapper'>...All of your current content...</div>Then give the wrapper a width and, if you want it centered, margin: 0px auto;
Link to post
Share on other sites

Exactly what mage said,Its just a div that surrounds everything so it cant expand more then what you tell the wrapper to be. Its kind of like wearing spandex.Put the wrapper just after the body tag, and close it just before the closing body tag

<body><div id='wrapper'><!-- all of your web page code and content --></div></body>

Hope that explains it.Then on the .css to center it. (also put a width: whatever it may be)

#wrapper{margin: 0px auto;}

EDIT: Now correct me but i always put 'position: relative;' to center it. Is that an unneeded step for the wrapper?

Edited by DizzyDan
Link to post
Share on other sites
Now correct me but i always put 'position: relative;' to center it. Is that an unneeded step for the wrapper?
Yes. Unless, you have a need to use absolutely positioned elements.
Link to post
Share on other sites

I can't visit your page since I'm at work, but your wrapper has to have a width specified or it isn't going to do anything. Make it an absolute width (ie, in px not % or em). Or if you make it a relative width, you'll need to give it a min/max-width.

Link to post
Share on other sites
I tried the #wrapper, but it doesn't do anything.EDIT:Just to be sure, do you guys see something like this: http://i54.tinypic.com/2e4w6qp.jpg Or does it look completely messed up?
no, i don't see that, in that specific way. The background stretches way past the body. You might want to consider putting the background image on a different element, like the wrapper. Personally I would have avoided all the positioning to begin with, I think you'll find it's why you are having a problem trying to get the #wrapper to work.
Link to post
Share on other sites

If you want to avoid the positioning you would pretty much have to start from scratch.For a quick fix you would need the wrapper. Which you have to a set width. im not sure what the best width for your site would be but some trial and error will do it. start with like 800px or something.

Link to post
Share on other sites

If you're using positioning, you might also have to add position: relative to the wrapper. Remember though, this is only a "band-aid" fix. You'll need to nix the positioning if you want to do it right, which will probably mean rewriting it from scratch.

Link to post
Share on other sites

1) The wrapper won't work because the body is using position absolute, which will force all children elements to the left. REMOVE position: absolute from body.2) wrapper will need position: relative to center itself and control the position: absolute elements position throughout it defined area.3) better option, start from scratch and don't use positioning, as I've/we have said numerous times you really should not use positioning unless you, really, really, really, really, REALLY HAVE to.edit: finally setting banner right property to right:0; will bring it in line with background-image;

Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...