Ok I am hoping this provides some great information. I have created my newest website in the dimensions of 1280x(height differs). So if you have a screen width of 1280 or more you get the full effect. However, on a 1024 or other smaller screens, the site appears differently. What I want, is for the site to cut off each side when the smaller screens are looking at it, as opposed to just putting a scroll bar at the bottom for you to scroll right to see the rest of the page. Below I have linked my site, and I have linked another site that does what I WANT mine to do, which is centers the site in a smaller screen.
My site:
What I want:
Jaguars.com
Thank you for your time, and I hope someone can help!!
Need Help with Different Dimensions.
Ryan Williams
Registered User
23 posts
BillR
Ambassador
3,144 posts
Ryan,
Your site is doing as the Jaguars.com site does. The only difference is in the width dimension. Your site is 1280px and their site is 1024px wide (or something close to that).
If you redesign your site to fit a 1024px width, and leave everything else as you have it set, it will behave very much like their site.
It is the football players on each side that are part of your page and not a part of your background that is causing the width to be so wide. If the two players are made part of the background your content will not get a bottom scroll until the browser width is under 1024px. I don't know how to make them part of the background using VSD, but I can make them part of the backgrounds using HTML. It involves setting a background that on your site appears to be black, then setting your sides and top image as a background, and putting your content on top of that.
Your site is doing as the Jaguars.com site does. The only difference is in the width dimension. Your site is 1280px and their site is 1024px wide (or something close to that).
If you redesign your site to fit a 1024px width, and leave everything else as you have it set, it will behave very much like their site.
It is the football players on each side that are part of your page and not a part of your background that is causing the width to be so wide. If the two players are made part of the background your content will not get a bottom scroll until the browser width is under 1024px. I don't know how to make them part of the background using VSD, but I can make them part of the backgrounds using HTML. It involves setting a background that on your site appears to be black, then setting your sides and top image as a background, and putting your content on top of that.
Ryan Williams
Registered User
23 posts
Thank you for your willingness to help.
Though many people can't believe it, my sites are all built on images. The only HTML I use is the video players, and that's codes that I just insert. So, for someone who is a dummy to HTML, how could I get my site to basically appear without the players on each side for 1024, and then with the players on each side on a 1280?
Though many people can't believe it, my sites are all built on images. The only HTML I use is the video players, and that's codes that I just insert. So, for someone who is a dummy to HTML, how could I get my site to basically appear without the players on each side for 1024, and then with the players on each side on a 1280?
BillR
Ambassador
3,144 posts
Ryan,
I did not realize your entire page was just a single image. To do what I was suggesting would require HTML and CSS coding as well as some graphic editing.
If you want to learn HTML and CSS, we can continue. Otherwise, there may be a way with VSD to create the same effect.
If anyone knows how to this with VSD, maybe they will post here.
To start with HTML, you can use MS Notepad, but a real HTML editor such as the CoffeeCup HTML Editor will have many features that will help.
I would start by cutting a section from your single image. The part with the content that changes from page to page can be removed leaving an image like an inverted U. The image that is left can be used as a background and will not need to load every time a new page is selected. If you name that image something like background.jpg the initial code would be:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> GCTFootball.com - Where Golden Eagle Football Lives </title>
<style type="text/css">
body {
width:100%;
background-color:#000000;
}
#background {
background-image: background.jpg;
}
#content {
bbackground-color:#000000;
}
</style>
</head>
<body>
<div id="background">
<div id="content">
<img src="homecontent.jpg" width="1024" height="400px" title"image of content" alt="image of content" >
</div> <!-- this closes the content div -->
</div> <!-- this closes the background div -->
</body>
</html>
There would need to be some margin and padding code added, but once you get the initial page set, all you would need to do is change the content of the IMG tag to match the content image for each page.
One thing to consider is that search engines cannot read images so you will not get many visitors from Google and Yahoo searches.
I did not realize your entire page was just a single image. To do what I was suggesting would require HTML and CSS coding as well as some graphic editing.
If you want to learn HTML and CSS, we can continue. Otherwise, there may be a way with VSD to create the same effect.
If anyone knows how to this with VSD, maybe they will post here.
To start with HTML, you can use MS Notepad, but a real HTML editor such as the CoffeeCup HTML Editor will have many features that will help.
I would start by cutting a section from your single image. The part with the content that changes from page to page can be removed leaving an image like an inverted U. The image that is left can be used as a background and will not need to load every time a new page is selected. If you name that image something like background.jpg the initial code would be:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> GCTFootball.com - Where Golden Eagle Football Lives </title>
<style type="text/css">
body {
width:100%;
background-color:#000000;
}
#background {
background-image: background.jpg;
}
#content {
bbackground-color:#000000;
}
</style>
</head>
<body>
<div id="background">
<div id="content">
<img src="homecontent.jpg" width="1024" height="400px" title"image of content" alt="image of content" >
</div> <!-- this closes the content div -->
</div> <!-- this closes the background div -->
</body>
</html>
There would need to be some margin and padding code added, but once you get the initial page set, all you would need to do is change the content of the IMG tag to match the content image for each page.
One thing to consider is that search engines cannot read images so you will not get many visitors from Google and Yahoo searches.
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.
