Hey, im creating a website but I need some help with creating a script so that my website will load in all browsers without a horizontal bar no matter what the users resolution is. Can anyone help me out please? My website is <!-- w --><a class="postlink" href="http://www.nbmracing.com">www.nbmracing.com</a><!-- w --> when I use it on a smaller resolution, horizontal bars appear. Is there a script or something to fix it if so please tell me.<br />
Thank Your For your Time<br />
Johmel Galloway<!--content-->You have a very wide, fixed width page. The only way to allow it to fit on all resolutions would be for you to make it a fluid width. Look what I cound in your source code: width:1001px;<br />
<br />
You're not going to fit 1001 pixels horizontally on a 640x480 display are you?<br />
<br />
Have a fluid width layout on me.
<!--content-->You've got a lot of elements that have width attributes. You'll need to drop most of the widths and rethink the layout in a fluid manner. Even then you can't *guarantee* someone won't shrink their browser up enough to cause a horizontal scrollbar to appear.<!--content-->I created that website with dreamweaver, I know a bit about html; such as most of the tags and the order they are in. When i make my screen resolution lower on the website like at 750px, when its opened with 1024x728 resolution, there is a big space on the right... Is there a way i can center it with dreamweavermx?<!--content-->I have no idea about Dreamweaver, but if you were to use the layout I posted it doesn't need centering since it expande to the full width of the page (with margins here and there).<br />
If you want to leave bigger gaps here and there then play with the margins.<!--content-->Well since i have already started with my current website, how would i imput it inside of my current code that you looked at?<!--content-->Well one look at your page tells me that you seem to have two columns, (even though you have used position:absolute on everything).<br />
Just take everything on the left hand side of the page and dump it in the #left div tag, then take everything on the right and dump it in #centre, dump your header into #header and dump your footer into #footer.<br />
<br />
Then get rid of all width's that you specified and get rid of all instances of position:absolute.<br />
<br />
While you're at it, try and get rid of some of those tables.<!--content-->well lioke i said before i dontt kow to much about html, if its not to much trouble does anyone think they will be able to look at my source code and add the code in for me or something like that?<!--content-->I had a go at it. Put your banner and background image in the same folder as the page.<br />
<br />
I removed the JavaScript text scroller because it's corny and not what form elements were disigned for.<br />
It looks good when images and styles are disabled and I'd go as far to say that it's WAI-AAA (<!-- m --><a class="postlink" href="http://www.w3.org/WAI/WCAG1AAA-Conformance">http://www.w3.org/WAI/WCAG1AAA-Conformance</a><!-- m -->) compliant if you were to use abbr tags to explain what NBM means. For example:<abbr title="National British Marmalade">NBM</abbr><!--content-->Wow bro. What did you do, do you think i should add the background image nack? How did you do that can you teach me so i can do it to all og my other pages please?<!--content-->Well all I did was look at where something was on your page, found it in the source and dropped it into the right place starting from my template.<br />
<br />
I also added a few paragraphs here and there and other little things.<br />
But now you can can see what goes where you should just be able to change the content around how you like.<br />
I would suggest that you learn a bit of code rather than relying on Dreameweaver to produce it all. Programs like that can never be as good as doing it yourself. When I cracked open your source I saw that everything used position:absolute and it was scattered all over everywhere.<br />
<br />
I've made an ever so slight change to the styles, just to make sure that the footer is always below the longest column (whichever it may be).<!--content-->I noticed that when i did just open it inside of dreamweaver everythiing was scattered EVERYWHERE. I resort to dreamweaver because i dont really know alot about html except some cammands and i found that easier.<!--content-->It seems that you found it easy to create a fixed width layout in DW, but not a fluid one.<br />
That's why hand coding is better, you know exactly what you're creating because you can see the code.<!--content-->Is there away that i can insert a code that will have my resolution for the site appear the sam ein allbrowsers so i wont have to start all over again?<!--content-->I don't know what you mean. Can you explain more?<!--content-->Ok. Umm is there a certain script that i can insert inside of my html so that when a user from another computer who has a differnt resolution than mine still use my website without any horizontal bars?<br />
Thanx<!--content-->You don't need a script for that, you need a layout which is of a fluid width, not a fixed width. I posted one that works for all resolutions, but if you want to chop and change content around, you'll need to get your hands dirty.<br />
<br />
Not that much needs to change really, I assume that your header, side-bar and footer are going to stay the same, that means all you need to change it the main content, which is mainly text.<!--content-->So I am going to have to go throough all od my widths on my website and make them into percent instaed of pixels and then it will be a liquid sheet so the resolution will work in most browsers?<!--content-->As long as you make sure that your %'s never add up to more than 100 then you should be OK, go for it.<!--content-->make sure that ALL of them never add up to 100, and im going to have to add the "percent" tag and get rid of he pixel right?<!--content-->Make sure that at any one time the total width of the document doesn't exceed 100%.<br />
<br />
You can do that any way you want, the easiest way would be to use % rather than px.<br />
So for example, make sure that your side-bar width + main content width + any margins or padding is not over 100% page width.<!--content-->For me just finding all of the widths is going to be a challange, thats why i was just trying to take the short cut way out and find a script to do it for me,lol. Thank you for all of your help
<!--content-->Also, why didnt you just put the styles page inside of the html document, im goiing to try to do this now because the website has to be running without horizontal bars 2nite!<!--content-->I didn't put the styles in the HTML page in my example because some old browsers don't understand the styles properly.<br />
By using the include it hides the styles from them and then the presentation for those browsers depends upon the default presentation of the HTML elements used.<br />
<br />
Also when the layout is used accross many pages the stylesheet only has to be Download <!--more-->ed once.<!--content-->Hmm, well should i do that and in the styles, it has "px" dosent that tag stand for pixels?<!--content-->0hey, if i created to version's of the website in differnt resolutions, ten would this script be able to work?<br />
<br />
<SCRIPT LANGUAGE="JavaScript"><br />
/*<br />
Made By Aviv Salem, <!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e --><br />
*/<br />
<br />
// browser test:<br />
browserName = navigator.appName;<br />
browserVer = parseInt(navigator.appVersion);<br />
if (browserName == "Netscape" && browserVer >= 4 || browserName ==<br />
"Microsoft Internet Explorer" && browserVer >= 4)<br />
version = "1";<br />
else if (browserName == "Netscape" && browserVer >= 3)<br />
version = "2";<br />
else<br />
version = "3";<br />
if (version == "1") {<br />
var correctwidth=800<br />
var correctheight=600<br />
if (screen.width<correctwidth||screen.height<correctheight)<br />
location="PAGE_FOR_LOW_SIZE.htm"<br />
else<br />
location="PAGE_FOR_HIGH_SIZE.htm"<br />
}<br />
if (version == "2") {<br />
var toolkit = java.awt.Toolkit.getDefaultToolkit();<br />
var screen_size = toolkit.getScreenSize();<br />
var correctwidth=800<br />
var correctheight=600<br />
if (screen_size.width<correctwidth||screen_size.height<correctheight)<br />
location="PAGE_FOR_LOW_SIZE.htm"<br />
else<br />
location="PAGE_FOR_HIGH_SIZE.htm"<br />
}<br />
if (version == "3")<br />
location="DEFAULT_PAGE.htm"<br />
</SCRIPT><!--content-->Stop looking for the easy way out and do it the proper way. What if someone re-sizes their window to smaller than their resolution, what if someone is using a resolution that is lower than what you designed for?<br />
<br />
Just do the job properly.<br />
<br />
Also, don't rely on JavaScript to display your page.<!--content-->I really want to do it the proper wway but im still sort of unsure how, do you have aim or soemthing that we can talk on?<!--content-->I have MSN messenger, do you have that?<!--content-->
Thank Your For your Time<br />
Johmel Galloway<!--content-->You have a very wide, fixed width page. The only way to allow it to fit on all resolutions would be for you to make it a fluid width. Look what I cound in your source code: width:1001px;<br />
<br />
You're not going to fit 1001 pixels horizontally on a 640x480 display are you?<br />
<br />
Have a fluid width layout on me.
<!--content-->You've got a lot of elements that have width attributes. You'll need to drop most of the widths and rethink the layout in a fluid manner. Even then you can't *guarantee* someone won't shrink their browser up enough to cause a horizontal scrollbar to appear.<!--content-->I created that website with dreamweaver, I know a bit about html; such as most of the tags and the order they are in. When i make my screen resolution lower on the website like at 750px, when its opened with 1024x728 resolution, there is a big space on the right... Is there a way i can center it with dreamweavermx?<!--content-->I have no idea about Dreamweaver, but if you were to use the layout I posted it doesn't need centering since it expande to the full width of the page (with margins here and there).<br />If you want to leave bigger gaps here and there then play with the margins.<!--content-->Well since i have already started with my current website, how would i imput it inside of my current code that you looked at?<!--content-->Well one look at your page tells me that you seem to have two columns, (even though you have used position:absolute on everything).<br />
Just take everything on the left hand side of the page and dump it in the #left div tag, then take everything on the right and dump it in #centre, dump your header into #header and dump your footer into #footer.<br />
<br />
Then get rid of all width's that you specified and get rid of all instances of position:absolute.<br />
<br />
While you're at it, try and get rid of some of those tables.<!--content-->well lioke i said before i dontt kow to much about html, if its not to much trouble does anyone think they will be able to look at my source code and add the code in for me or something like that?<!--content-->I had a go at it. Put your banner and background image in the same folder as the page.<br />
<br />
I removed the JavaScript text scroller because it's corny and not what form elements were disigned for.<br />
It looks good when images and styles are disabled and I'd go as far to say that it's WAI-AAA (<!-- m --><a class="postlink" href="http://www.w3.org/WAI/WCAG1AAA-Conformance">http://www.w3.org/WAI/WCAG1AAA-Conformance</a><!-- m -->) compliant if you were to use abbr tags to explain what NBM means. For example:<abbr title="National British Marmalade">NBM</abbr><!--content-->Wow bro. What did you do, do you think i should add the background image nack? How did you do that can you teach me so i can do it to all og my other pages please?<!--content-->Well all I did was look at where something was on your page, found it in the source and dropped it into the right place starting from my template.<br />
<br />
I also added a few paragraphs here and there and other little things.<br />
But now you can can see what goes where you should just be able to change the content around how you like.<br />
I would suggest that you learn a bit of code rather than relying on Dreameweaver to produce it all. Programs like that can never be as good as doing it yourself. When I cracked open your source I saw that everything used position:absolute and it was scattered all over everywhere.<br />
<br />
I've made an ever so slight change to the styles, just to make sure that the footer is always below the longest column (whichever it may be).<!--content-->I noticed that when i did just open it inside of dreamweaver everythiing was scattered EVERYWHERE. I resort to dreamweaver because i dont really know alot about html except some cammands and i found that easier.<!--content-->It seems that you found it easy to create a fixed width layout in DW, but not a fluid one.<br />
That's why hand coding is better, you know exactly what you're creating because you can see the code.<!--content-->Is there away that i can insert a code that will have my resolution for the site appear the sam ein allbrowsers so i wont have to start all over again?<!--content-->I don't know what you mean. Can you explain more?<!--content-->Ok. Umm is there a certain script that i can insert inside of my html so that when a user from another computer who has a differnt resolution than mine still use my website without any horizontal bars?<br />
Thanx<!--content-->You don't need a script for that, you need a layout which is of a fluid width, not a fixed width. I posted one that works for all resolutions, but if you want to chop and change content around, you'll need to get your hands dirty.<br />
<br />
Not that much needs to change really, I assume that your header, side-bar and footer are going to stay the same, that means all you need to change it the main content, which is mainly text.<!--content-->So I am going to have to go throough all od my widths on my website and make them into percent instaed of pixels and then it will be a liquid sheet so the resolution will work in most browsers?<!--content-->As long as you make sure that your %'s never add up to more than 100 then you should be OK, go for it.<!--content-->make sure that ALL of them never add up to 100, and im going to have to add the "percent" tag and get rid of he pixel right?<!--content-->Make sure that at any one time the total width of the document doesn't exceed 100%.<br />
<br />
You can do that any way you want, the easiest way would be to use % rather than px.<br />
So for example, make sure that your side-bar width + main content width + any margins or padding is not over 100% page width.<!--content-->For me just finding all of the widths is going to be a challange, thats why i was just trying to take the short cut way out and find a script to do it for me,lol. Thank you for all of your help
<!--content-->Also, why didnt you just put the styles page inside of the html document, im goiing to try to do this now because the website has to be running without horizontal bars 2nite!<!--content-->I didn't put the styles in the HTML page in my example because some old browsers don't understand the styles properly.<br />By using the include it hides the styles from them and then the presentation for those browsers depends upon the default presentation of the HTML elements used.<br />
<br />
Also when the layout is used accross many pages the stylesheet only has to be Download <!--more-->ed once.<!--content-->Hmm, well should i do that and in the styles, it has "px" dosent that tag stand for pixels?<!--content-->0hey, if i created to version's of the website in differnt resolutions, ten would this script be able to work?<br />
<br />
<SCRIPT LANGUAGE="JavaScript"><br />
/*<br />
Made By Aviv Salem, <!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e --><br />
*/<br />
<br />
// browser test:<br />
browserName = navigator.appName;<br />
browserVer = parseInt(navigator.appVersion);<br />
if (browserName == "Netscape" && browserVer >= 4 || browserName ==<br />
"Microsoft Internet Explorer" && browserVer >= 4)<br />
version = "1";<br />
else if (browserName == "Netscape" && browserVer >= 3)<br />
version = "2";<br />
else<br />
version = "3";<br />
if (version == "1") {<br />
var correctwidth=800<br />
var correctheight=600<br />
if (screen.width<correctwidth||screen.height<correctheight)<br />
location="PAGE_FOR_LOW_SIZE.htm"<br />
else<br />
location="PAGE_FOR_HIGH_SIZE.htm"<br />
}<br />
if (version == "2") {<br />
var toolkit = java.awt.Toolkit.getDefaultToolkit();<br />
var screen_size = toolkit.getScreenSize();<br />
var correctwidth=800<br />
var correctheight=600<br />
if (screen_size.width<correctwidth||screen_size.height<correctheight)<br />
location="PAGE_FOR_LOW_SIZE.htm"<br />
else<br />
location="PAGE_FOR_HIGH_SIZE.htm"<br />
}<br />
if (version == "3")<br />
location="DEFAULT_PAGE.htm"<br />
</SCRIPT><!--content-->Stop looking for the easy way out and do it the proper way. What if someone re-sizes their window to smaller than their resolution, what if someone is using a resolution that is lower than what you designed for?<br />
<br />
Just do the job properly.<br />
<br />
Also, don't rely on JavaScript to display your page.<!--content-->I really want to do it the proper wway but im still sort of unsure how, do you have aim or soemthing that we can talk on?<!--content-->I have MSN messenger, do you have that?<!--content-->