Horizontal Scroll - need to remove -...

Feb 6th, 2012 at 11:19 AM
User 2237943 Photo

W R
Registered User
16 posts

Hi All,

I just created a website for a friend (www.anxietyandtraumatherapybirmingham.com) and for some reason the site has a horizontal scroll. This is the third site I have created with Coffee Cup, and the first with this issue.

I created a background in InDesign, so I am not sure if that is where the problem is. I wanted the background with all of the design elements already included because I thought it would be easier to maintain. The background is currently set to repeat, but if I remove the repeat, the site still scrolls horizontally but just includes a bunch of white space.

Any help will be greatly appreciated. I just want to remove the horizontal scroll.

Thanks!

W
www.anxietyandtraumatherapybirmingham.com
Feb 6th, 2012 at 11:55 AM
User 38401 Photo

Jo Rice
Senior Advisor
10,951 posts

Hiya WR,

Not sure where to find this setting, but the thing you need to find is the background settings for your page in VSD. Once you find those (someone help here please as I don't know where they are) you'll see that there is a repeat setting in there that is repeating your background horizontally. In code it would be something like repeat-x but not sure what it is called in VSD. That's "what" the trouble is, just not sure "where" that setting is.
Jo

http://elementsinwebdesign.com
Feb 6th, 2012 at 12:12 PM
User 1948478 Photo

Per
Senior Advisor
1,850 posts

Nested inside your <head> section, you have the following:

<!--html inserted by user -->
<link rel="shortcut icon" href="/favicon.ico" />
<html>
<head>
<style type="text/css">
body{
background-image: url('batt-home-background.png');
background-repeat: repeat-x;
background-attachment: scroll;
background-position: center top;
}
</style>
</head>
</html>
<!--end of html inserted by user -->


The first thing to do is to remove all of that...
Per
www.mingas.com
Feb 6th, 2012 at 12:43 PM
User 2237943 Photo

W R
Registered User
16 posts

Thanks for the feedback. If I remove the "header" info, then the background does not go all the way out to the sides of the screen - even though I have selected "continue background fill" under the background options.

The background needs to be center top aligned, otherwise the off-white area in the center of the page is not centered. If I remove the alignment under page setup and remove the header info, then the background stretches properly, but the off-white area shifts to the right and that is not what I want.

I guess I could have just incorporate the off-white area separately in VSD, as opposed to including it in the InDesign background. That would work, but I am trying new things and hoping to learn more "tricks."

I making some tweaks now, and I hope it works. Any additional info is appreciated.

Thanks!

Feb 6th, 2012 at 12:50 PM
User 271657 Photo

paintbrush
Ambassador
3,816 posts

Best to use the tools provided by VSD for this. As Per recommends – get rid of that code and insert your background using the Settings > Background Properties button and/or the Page Settings button.
You only need a tall, thin 'strip' of your background pattern and VSD will repeat it to fill the browser window.
Set your page width to the size of the white area (best to stay a little under 1000px wide).
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
Feb 6th, 2012 at 01:14 PM
User 271657 Photo

paintbrush
Ambassador
3,816 posts

You could do it this way...
Make something like the example below; make it to your page dimensions (960 x 1000 for instance). This will be used for the Page background.
Take a strip of that pattern and save it for your Browser background. Now go back to the Page background and change the green area to white (or whatever color you want).

http://callie.coffeecup.com/storage/horizontal-bkgrnd.png

I don't know about InDesign, I use Photoshop for graphics creation, but maybe it's possible in InDesign?
Anyway, as long as the resolution/quality settings are the same for both, they should 'blend' together when viewed online.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
Feb 6th, 2012 at 01:32 PM
User 2237943 Photo

W R
Registered User
16 posts

Thanks for the feedback - it is now fixed.

Long story short - I created the background in InDesign and then used Image Mapper to incorporate the links in the menu bar and header. I used a transparent gif image as my placeholder for the html code, but that is what was causing the problem. The gif wouldn't even appear in Safari, and therefore, none of the links would work. Once I removed the transparent gif and replaced it with an actual image, everything worked properly.

I love the Coffee Cup community! Thanks!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.