Alright i wanted to center everything with my banner. Some people say its not centered and others say it is. I went to another forum and they told me to add a container and put my banner width: 80%; and also this stuff but im not sure if this is the correct way. Can any help me clean out my code and make everything centered with the banner?
thanks
<!-- m --><a class="postlink" href="http://marlinsclubhouse.net/I">http://marlinsclubhouse.net/I</a><!-- m --> tryed the page in Firefox, Safari and IE. It was centered for me in all 3.
I cant seem to find a problem with it. Can you please give some more infomation on the problem, becuse I cant seem to find a problem with it.
So, some more info on the problem,a nd I will try to fix it(if there is a problem).
Wofen
(Nice Banner BTW)
(And I did find a problem with the Schedule page. The drop down box it behind the info box)I tryed the page in Firefox, Safari and IE. It was centered for me in all 3.
I cant seem to find a problem with it. Can you please give some more infomation on the problem, becuse I cant seem to find a problem with it.
So, some more info on the problem,a nd I will try to fix it(if there is a problem).
Wofen
(Nice Banner BTW)
(And I did find a problem with the Schedule page. The drop down box it behind the info box)
Yeah the dropdown box is fine in IE but not in Firefox. I dont know how to fix it....
Also try putting the history column by clicking ctrl and "h" everything gets off centered. Also is my code right? Should anything be changed?
also look in the roster page, in IE in looks fine but in Firefox the table is way bigger. also one question, how can i space out the cells in that table, like the "Born" cell i need that cell bigger for the countries, there are some long countries that dont fit under that column. in Firefox it looks spaced out since the table is bigger but in IE it looks to crowded.
thanksOk, other then the fact that your banner is slightly larger then the div box you have it in(on the right hand side, you can see the black border of the div box ends about 10 px before the banner does.)
If you want the rest of the page to be centered under the banner, you are going to have to look at the positioning of your web page. The Rosters page has to much info to get it to fit under the banner. If you want it under the banner, try to move the info around, or remove what is not needed to make it fit. Or, you could set it up to give abit of info, then on a mouse over or a click, it displays the rest.
Ok, I am looking on the page as your update it. Thats kinda scray. And at this very second none of the links are working.
Everything still look certered to me.
You could also try the following code to get the banner to stay at 90% of the page width, no matter what size it is.
#Banner {
position:absolute;
Width:90%;
left:10%;
}
<img src=http://www.webdeveloper.com/forum/archive/index.php/"banner.jpg" width="100%">
Try that out.
WofenThe banner is centering differently from the nav and content areas. Also there is a big syntax error around the body tag that results in Javascript being displayed instead of executed.Ok, other then the fact that your banner is slightly larger then the div box you have it in(on the right hand side, you can see the black border of the div box ends about 10 px before the banner does.)
If you want the rest of the page to be centered under the banner, you are going to have to look at the positioning of your web page. The Rosters page has to much info to get it to fit under the banner. If you want it under the banner, try to move the info around, or remove what is not needed to make it fit. Or, you could set it up to give abit of info, then on a mouse over or a click, it displays the rest.
Ok, I am looking on the page as your update it. Thats kinda scray. And at this very second none of the links are working.
Everything still look certered to me.
You could also try the following code to get the banner to stay at 90% of the page width, no matter what size it is.
#Banner {
position:absolute;
Width:90%;
left:10%;
}
<img src=http://www.webdeveloper.com/forum/archive/index.php/"banner.jpg" width="100%">
Try that out.
Wofen
The border is now bigger than the banner.
<!-- m --><a class="postlink" href="http://marlinsclubhouse.net/roster.html">http://marlinsclubhouse.net/roster.html</a><!-- m -->
there is no way to space out the cells in the table like cellpadding or cellspacing?Just use center tags. When CSS provides an alternative to them that works as well and is as simple, I'll cease using them. Up to this point they haven't done so.anyone?body
text-align:center
#banner
should be width:800px;height:130px; just like the image.
.container
width:803px to match banner
#navigation
delete positioning, float:left, text-align:left, margin-top:15px;
table
delete positioning, float:left, width:600px, margin-top:15px, margin-left:15px
This was only done in Firefox so it will prolly croak in IE. At least there're some ideas there. I stay away from absolute positioning unless absolutely necessary.All the code you need to center a layout:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. IE5-Mac sometimes seems to read
this style declaration, so hide from IE5-Mac: \*/
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
} /* End IE5-Mac hiding */
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>Does the page looks better? i used toicontien code.
<!-- m --><a class="postlink" href="http://marlinsclubhouse.net/When">http://marlinsclubhouse.net/When</a><!-- m --> I viewed it in the latest version of Safari (v.2.0) the banner was centered but the rest of the content beneath was about 20-30 pixels shifted to the left.
One way that I've found of combatting this while still being valid code is to switch your doctype to loose/transitional and, just beneath ur body tag, put in a center tag. this is a pretty cheap fix tho because any text/images beneath it will also be centered so you must make additional rules to tell everything to justify left or right or wherever yuo want it to go. this can also create a bit of hell with floating objects/margins...
another method i have tried and that works well for images is this-
position: absolute;
left: 485px;
margin-left: -200px;
assuming your developing for a window width of 970, you set the "left" to be half of that width, which shifts the left edge of the image exactly to the middle of the screen. assuming your image is 400px wide, you then set a negative margin of 1/2 the image width to bring the image back a little and center it completely.
i just also found this link about centering with css - seee if any of these methods work out for you.
<!-- m --><a class="postlink" href="http://www.allmyfaqs.com/faq.pl?Center_with_CSSDoes">http://www.allmyfaqs.com/faq.pl?Center_with_CSSDoes</a><!-- m --> the page looks better? i used toicontien code.
<!-- m --><a class="postlink" href="http://marlinsclubhouse.net/">http://marlinsclubhouse.net/</a><!-- m -->
No the bottom isn't centered at all. It has a fixed left margin.
thanks
<!-- m --><a class="postlink" href="http://marlinsclubhouse.net/I">http://marlinsclubhouse.net/I</a><!-- m --> tryed the page in Firefox, Safari and IE. It was centered for me in all 3.
I cant seem to find a problem with it. Can you please give some more infomation on the problem, becuse I cant seem to find a problem with it.
So, some more info on the problem,a nd I will try to fix it(if there is a problem).
Wofen
(Nice Banner BTW)
(And I did find a problem with the Schedule page. The drop down box it behind the info box)I tryed the page in Firefox, Safari and IE. It was centered for me in all 3.
I cant seem to find a problem with it. Can you please give some more infomation on the problem, becuse I cant seem to find a problem with it.
So, some more info on the problem,a nd I will try to fix it(if there is a problem).
Wofen
(Nice Banner BTW)
(And I did find a problem with the Schedule page. The drop down box it behind the info box)
Yeah the dropdown box is fine in IE but not in Firefox. I dont know how to fix it....
Also try putting the history column by clicking ctrl and "h" everything gets off centered. Also is my code right? Should anything be changed?
also look in the roster page, in IE in looks fine but in Firefox the table is way bigger. also one question, how can i space out the cells in that table, like the "Born" cell i need that cell bigger for the countries, there are some long countries that dont fit under that column. in Firefox it looks spaced out since the table is bigger but in IE it looks to crowded.
thanksOk, other then the fact that your banner is slightly larger then the div box you have it in(on the right hand side, you can see the black border of the div box ends about 10 px before the banner does.)
If you want the rest of the page to be centered under the banner, you are going to have to look at the positioning of your web page. The Rosters page has to much info to get it to fit under the banner. If you want it under the banner, try to move the info around, or remove what is not needed to make it fit. Or, you could set it up to give abit of info, then on a mouse over or a click, it displays the rest.
Ok, I am looking on the page as your update it. Thats kinda scray. And at this very second none of the links are working.
Everything still look certered to me.
You could also try the following code to get the banner to stay at 90% of the page width, no matter what size it is.
#Banner {
position:absolute;
Width:90%;
left:10%;
}
<img src=http://www.webdeveloper.com/forum/archive/index.php/"banner.jpg" width="100%">
Try that out.
WofenThe banner is centering differently from the nav and content areas. Also there is a big syntax error around the body tag that results in Javascript being displayed instead of executed.Ok, other then the fact that your banner is slightly larger then the div box you have it in(on the right hand side, you can see the black border of the div box ends about 10 px before the banner does.)
If you want the rest of the page to be centered under the banner, you are going to have to look at the positioning of your web page. The Rosters page has to much info to get it to fit under the banner. If you want it under the banner, try to move the info around, or remove what is not needed to make it fit. Or, you could set it up to give abit of info, then on a mouse over or a click, it displays the rest.
Ok, I am looking on the page as your update it. Thats kinda scray. And at this very second none of the links are working.
Everything still look certered to me.
You could also try the following code to get the banner to stay at 90% of the page width, no matter what size it is.
#Banner {
position:absolute;
Width:90%;
left:10%;
}
<img src=http://www.webdeveloper.com/forum/archive/index.php/"banner.jpg" width="100%">
Try that out.
Wofen
The border is now bigger than the banner.
<!-- m --><a class="postlink" href="http://marlinsclubhouse.net/roster.html">http://marlinsclubhouse.net/roster.html</a><!-- m -->
there is no way to space out the cells in the table like cellpadding or cellspacing?Just use center tags. When CSS provides an alternative to them that works as well and is as simple, I'll cease using them. Up to this point they haven't done so.anyone?body
text-align:center
#banner
should be width:800px;height:130px; just like the image.
.container
width:803px to match banner
#navigation
delete positioning, float:left, text-align:left, margin-top:15px;
table
delete positioning, float:left, width:600px, margin-top:15px, margin-left:15px
This was only done in Firefox so it will prolly croak in IE. At least there're some ideas there. I stay away from absolute positioning unless absolutely necessary.All the code you need to center a layout:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. IE5-Mac sometimes seems to read
this style declaration, so hide from IE5-Mac: \*/
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
} /* End IE5-Mac hiding */
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>Does the page looks better? i used toicontien code.
<!-- m --><a class="postlink" href="http://marlinsclubhouse.net/When">http://marlinsclubhouse.net/When</a><!-- m --> I viewed it in the latest version of Safari (v.2.0) the banner was centered but the rest of the content beneath was about 20-30 pixels shifted to the left.
One way that I've found of combatting this while still being valid code is to switch your doctype to loose/transitional and, just beneath ur body tag, put in a center tag. this is a pretty cheap fix tho because any text/images beneath it will also be centered so you must make additional rules to tell everything to justify left or right or wherever yuo want it to go. this can also create a bit of hell with floating objects/margins...
another method i have tried and that works well for images is this-
position: absolute;
left: 485px;
margin-left: -200px;
assuming your developing for a window width of 970, you set the "left" to be half of that width, which shifts the left edge of the image exactly to the middle of the screen. assuming your image is 400px wide, you then set a negative margin of 1/2 the image width to bring the image back a little and center it completely.
i just also found this link about centering with css - seee if any of these methods work out for you.
<!-- m --><a class="postlink" href="http://www.allmyfaqs.com/faq.pl?Center_with_CSSDoes">http://www.allmyfaqs.com/faq.pl?Center_with_CSSDoes</a><!-- m --> the page looks better? i used toicontien code.
<!-- m --><a class="postlink" href="http://marlinsclubhouse.net/">http://marlinsclubhouse.net/</a><!-- m -->
No the bottom isn't centered at all. It has a fixed left margin.