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
W R
Registered User
11 posts
Jo Ann
Senior Advisor
7,579 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 Ann
http://lbwebsites.com - Web Design & Web Hosting
http://cattownrescue.org ... Current project in the works, love cats!
http://northbaldwinliteracycouncil.org .... Our local Literacy Council
Due to spammers the below sites are not viewable outside the US, sorry guys
http://proudayou.com - My sons website for his music business
http://rockinwithmainstreet.com - My brother's band website
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 Ann
http://lbwebsites.com - Web Design & Web Hosting
http://cattownrescue.org ... Current project in the works, love cats!
http://northbaldwinliteracycouncil.org .... Our local Literacy Council
Due to spammers the below sites are not viewable outside the US, sorry guys
http://proudayou.com - My sons website for his music business
http://rockinwithmainstreet.com - My brother's band website
Per
Senior Advisor
1,222 posts
Online Now
Nested inside your <head> section, you have the following:
The first thing to do is to remove all of that... Per
www.mingas.com
<!--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 -->
<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
W R
Registered User
11 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!
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!
paintbrush
Ambassador
1,802 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)
http://www.callendaledesigns.com
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)
http://www.callendaledesigns.com
paintbrush
Ambassador
1,802 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).
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)
http://www.callendaledesigns.com
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).
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)
http://www.callendaledesigns.com
W R
Registered User
11 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!
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.
