Jump to content

Border which doesn't affect page width...


theo

Recommended Posts

Hi all,

 

I'm trying to do something which might be quite unique, so I'll understand if no-one has an answer. Basically, due to space constraints, I'd like my page to have 10px borders left and right only as the browser window moves beyond 1024px. I have achieved this with a background image which is centred, however this method is not ideal, because it means that I need a very large image to cater for all resolutions (because I also have a downwards gradient outside the borders).

 

So I guess my question is whether there is a way of creating 'outside (i.e. 1024px + 10px either side) borders' which don't affect the width of the page?

 

Many thanks,

Theo.

Edited by theo
Link to comment
Share on other sites

Does the border have to be limited to 10px? And if so, what is supposed to be on the outside of the border? If the 10px aren't a must, just create a wrapper at a width of 1024 px and color the body for the 'border'. However, if you design for a width of 1024, than anything viewed with a resolution of 1024 AND less will have a horizontal scroll bar.

Link to comment
Share on other sites

I've worked it out. It was staring me right in the face really.

 

Basically all you have to do is to create a div with width:100%, then use a background image which is 10pxls larger on either side of the resolution (in this case 1024px, but what is in reality 1009px once the scroll bar has taken 15pxls) which you intend to border, centre it and repeat-y.

 

The code:

 

And hey presto! you have borders which won't add to the width of the page/reduce the size of the page which you are able to work with.


Edited by theo
Link to comment
Share on other sites

I don't follow what you are doing; if your background-image borders.gif is a fixed width (it has to be) of say 1024px, what happens in a resolution of 1280*1024?

 

At 1280*1024 your div width: 100% will be 1280 less the side scrollbar but your background-image will still be only 1024px or whatever width it is, so you still need a background-image with a very wide width or repeat-x.

 

An alternative is to use max-width: 1009px for your div and put the background-image in the body, then when the page is less wide than 1009px you won't see the background but over 1009px the body background will start to show, giving borders of a few px in 1024*768 resolution and more in greater resolutions. IE6 will have to have a fixed width of say 1009px and will scroll in smaller resolutions as IE6 does not support max-width.

 

Remember that the vertical scrollbar varies in different browser between about 16px and 19px and can be varied by a viewer altering his browser settings.

Edited by Wickham
Link to comment
Share on other sites

Sorry, I shoud have said that yes, I have a central content div of 1009px wide. As I said, the reason why I need it in a separate div and not as part of the body is that I am already using the body to display a downwards gradient and a dark grey color below this (i.e. background: #color url(gradient.gif)). I'm not bothered about scrolling at resolutions below 1024 though.

 

It's not failproof I know, however it doesn't matter a huge amount if the scroll bar varies, as you then just see a bit more of the border if the page is too short to need a scroll bar. Is there a recommended maximum width to ensure that a web page will fit the 1024px size minus scroll bar width though?

Edited by theo
Link to comment
Share on other sites

Is there a recommended maximum width to ensure that a web page will fit the 1024px size minus scroll bar width though?
As Wickham said - scrollbars can vary from 16 to 19 px - I'd go with 25 just to be sure.

 

I'd really like to see a link to the page you're working on.

Link to comment
Share on other sites

The bbc image is just a plain color 994px wide, which means that it shows the image as side borders in a 1024px wide window without a scrollbar as the total width is less than 1024px minus the scrollbar.

 

You want the inner content to be say 1006px wide and NOT show the borders in 1024px window, only if the window is bigger, which means that you cannot put it in a div with a width greater than 1024px without creating the horizontal scrollbar as you already said, so you could use it as a body background, which you don't want to do because of the gradient background outside the borders.

 

Try this:-

 

Make the body have your gradient background-image repeating across and down.

Make the background div width: 100% and put the gray image 1026px wide in it as a background-image, centered and repeat-y only.

Make a main container fixed width 1006px wide, centered, so that it fills a normal 1024px wide window inside a scrollbar and doesn't show the gray background, but if the window is wider than 1024px the div will be centered inside the 100% wide background div with the 1026px wide centered gray image and both will be inside the body gradient background.

Link to comment
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.
Note: Your post will require moderator approval before it will be visible.

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...