hi!
I am trying to make a site for myself using css. But I am new to this and I am having a problem with the layout.
I am trying to make a center design, what is the best way to do that? I want to center all the main divs. I made a try at it but I think I must be doing something wrong...because it is not laying out the way I want it to.
Here is a link...please give the image a second to load...
My Personal Site (<!-- m --><a class="postlink" href="http://users.iglide.net/tonnesenteam/andysHome.html">http://users.iglide.net/tonnesenteam/andysHome.html</a><!-- m -->)
Cheers - Andy
The best way to do it would be to have a container div with the code- margin:auto; and all of the remaining divs with that inside them.
Hope that makes sense.It's easy to center layouts. Place all your columns inside a container DIV (like mentioned above) and apply the following CSS to it:
body {
text-align: center; /* Centers layout in IE5/PC */
}
#container {
text-align: left; /* End IE5/PC hack */
margin: 0 auto; /* Set left and right margins to auto to
center block-level elements within
other block elements */
}
A note on most browsers: If the centered DIV is wider than the screen, some of the layout will be pulled off-screen by the auto margins. This happens in Gecko browsers and Opera, that I know of, but not in IE.I have tried that and it did not work
. I must be doing it wrong. I tried it again just now. My Personal Site (<!-- m --><a class="postlink" href="http://users.iglide.net/tonnesenteam/andysHome.html">http://users.iglide.net/tonnesenteam/andysHome.html</a><!-- m -->).
Also when I did put them all in a container the background color for the menu disapered. Thanks for any help!
Here is my css:
img
{
display: block;
border: 0;
}
body
{
margin: 0;
padding: 0;
background-color: #6f9cc5;
text-align: center;
}
#container
{
text-align: left;
margin: 0 auto;
}
/*Mount Rushmore Picture*/
#mainImage
{
width: 720px;
margin: 0;
padding: 0;
height: 228px;
background-image: url(../images/4faces_flag.jpg);
border-top: 1px solid #45769f;
border-right: 1px solid #45769f;
border-bottom: none;
border-left: 1px solid #45769f;
}
/*horizontal menu*/
#menu
{
top: 234px;
width: 720px;
margin: 0px;
padding: 0px;
background: #d8d8d8;
}
#menu ul
{
border: 0px;
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
clear: left;
}
#menu ul li
{
display: block;
float: left;
text-align: center;
padding: 0px;
margin: 0px;
}
#menu ul li a
{
color: #202218;
width: 143px;
height: 1.5em;
border-top: 1px solid #7a5d57;
border-left: 1px solid #7a5d57;
border-bottom: 1px solid #7a5d57;
border-right: none;
padding: 0px;
margin: 0px 0px 0px 0px;
text-decoration: none;
display: block;
text-align: center;
font-weight: normal;
letter-spacing: 1px;
line-height: 1.5em;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
html>#menu ul li a
{
font-size: x-small;
}
#menu ul li#five a
{
width: 142px;
border-right: 1px solid #7a5d57;
}
#menu ul li a:link
{
color: #202218;
font-size: small;
}
#menu ul li a:hover
{
color: #515448;
background: #d0cdc4;
font-weight: bold;
}
#menu ul li a:active
{
color: #202218;
background: #d8d8d8;
}
Cheers - AndyFirst, you do not really need a #container when you already have one:
body
{ margin: 0 auto;
width: 100ex;
}
then, unless you specify the width of a block element, it occupies all that is given to it, so you got nothing to center....Sorry ive got it now just on the main image id set the margin to auto and the nav id do the same it worked i used my trusty edit css plugin.Originally posted by Vladdy
First, you do not really need a #container when you already have one:
body
{ margin: 0 auto;
width: 100ex;
}
then, unless you specify the width of a block element, it occupies all that is given to it, so you got nothing to center....
I should have thought of that
. Thanks! Also, do you have any idea why the background color on the menu is not showing? I have set to #d8d8d8...at lest I think I do...lol...
Thanks for all the help guys - AndyIt seems to be showing through fine in IE6 and Moz 1.6
I asked this question earlier, here's the thread:
Problem Centering a Div (<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=29750&highlight=problem+center+div%2A">http://forums.webdeveloper.com/showthre ... ter+div%2A</a><!-- m -->)
Follow the links within the thread, you may find a different solution other than the one I presented.
Hope this helps .
Edit: under firther development, I've realized that using overflaw: auto in divs such as 'navigation' and 'content' in my solution still breaks the 'container' div. Would anyone know how to resolve this?Originally posted by toicontien
It seems to be showing through fine in IE6 and Moz 1.6
Yeh, it is really wierd. I was some bug on my computer. I got it fixed. Thanks.
tonyh, thanks for your post. But I took care of the centering problem already. Thanks anyway.
Cheers - AndyOriginally posted by AnacondaAndy
tonyh, thanks for your post. But I took care of the centering problem already. Thanks anyway.
Cheers - Andy
I guess that's what happens when you don't read the entire thread
.
Your quite welcome, and I did resolve the overflow; auto issue, but now I'm discussing whether or not using overflow is accessible at all. Here is an example of my code using scrolling containers: My Demo 2 (<!-- m --><a class="postlink" href="http://people.uleth.ca/~tony.hughes/CenterTest/xhtml10StrictCenter2.html">http://people.uleth.ca/~tony.hughes/Cen ... nter2.html</a><!-- m -->). It hasn't been tested in browsers other than IE6.
I am trying to make a site for myself using css. But I am new to this and I am having a problem with the layout.
I am trying to make a center design, what is the best way to do that? I want to center all the main divs. I made a try at it but I think I must be doing something wrong...because it is not laying out the way I want it to.
Here is a link...please give the image a second to load...
My Personal Site (<!-- m --><a class="postlink" href="http://users.iglide.net/tonnesenteam/andysHome.html">http://users.iglide.net/tonnesenteam/andysHome.html</a><!-- m -->)
Cheers - Andy
The best way to do it would be to have a container div with the code- margin:auto; and all of the remaining divs with that inside them.Hope that makes sense.It's easy to center layouts. Place all your columns inside a container DIV (like mentioned above) and apply the following CSS to it:
body {
text-align: center; /* Centers layout in IE5/PC */
}
#container {
text-align: left; /* End IE5/PC hack */
margin: 0 auto; /* Set left and right margins to auto to
center block-level elements within
other block elements */
}
A note on most browsers: If the centered DIV is wider than the screen, some of the layout will be pulled off-screen by the auto margins. This happens in Gecko browsers and Opera, that I know of, but not in IE.I have tried that and it did not work
. I must be doing it wrong. I tried it again just now. My Personal Site (<!-- m --><a class="postlink" href="http://users.iglide.net/tonnesenteam/andysHome.html">http://users.iglide.net/tonnesenteam/andysHome.html</a><!-- m -->).Also when I did put them all in a container the background color for the menu disapered. Thanks for any help!
Here is my css:
img
{
display: block;
border: 0;
}
body
{
margin: 0;
padding: 0;
background-color: #6f9cc5;
text-align: center;
}
#container
{
text-align: left;
margin: 0 auto;
}
/*Mount Rushmore Picture*/
#mainImage
{
width: 720px;
margin: 0;
padding: 0;
height: 228px;
background-image: url(../images/4faces_flag.jpg);
border-top: 1px solid #45769f;
border-right: 1px solid #45769f;
border-bottom: none;
border-left: 1px solid #45769f;
}
/*horizontal menu*/
#menu
{
top: 234px;
width: 720px;
margin: 0px;
padding: 0px;
background: #d8d8d8;
}
#menu ul
{
border: 0px;
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
clear: left;
}
#menu ul li
{
display: block;
float: left;
text-align: center;
padding: 0px;
margin: 0px;
}
#menu ul li a
{
color: #202218;
width: 143px;
height: 1.5em;
border-top: 1px solid #7a5d57;
border-left: 1px solid #7a5d57;
border-bottom: 1px solid #7a5d57;
border-right: none;
padding: 0px;
margin: 0px 0px 0px 0px;
text-decoration: none;
display: block;
text-align: center;
font-weight: normal;
letter-spacing: 1px;
line-height: 1.5em;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
html>#menu ul li a
{
font-size: x-small;
}
#menu ul li#five a
{
width: 142px;
border-right: 1px solid #7a5d57;
}
#menu ul li a:link
{
color: #202218;
font-size: small;
}
#menu ul li a:hover
{
color: #515448;
background: #d0cdc4;
font-weight: bold;
}
#menu ul li a:active
{
color: #202218;
background: #d8d8d8;
}
Cheers - AndyFirst, you do not really need a #container when you already have one:
body
{ margin: 0 auto;
width: 100ex;
}
then, unless you specify the width of a block element, it occupies all that is given to it, so you got nothing to center....Sorry ive got it now just on the main image id set the margin to auto and the nav id do the same it worked i used my trusty edit css plugin.Originally posted by Vladdy
First, you do not really need a #container when you already have one:
body
{ margin: 0 auto;
width: 100ex;
}
then, unless you specify the width of a block element, it occupies all that is given to it, so you got nothing to center....
I should have thought of that
. Thanks! Also, do you have any idea why the background color on the menu is not showing? I have set to #d8d8d8...at lest I think I do...lol... Thanks for all the help guys - AndyIt seems to be showing through fine in IE6 and Moz 1.6
I asked this question earlier, here's the thread:Problem Centering a Div (<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=29750&highlight=problem+center+div%2A">http://forums.webdeveloper.com/showthre ... ter+div%2A</a><!-- m -->)
Follow the links within the thread, you may find a different solution other than the one I presented.
Hope this helps
.Edit: under firther development, I've realized that using overflaw: auto in divs such as 'navigation' and 'content' in my solution still breaks the 'container' div. Would anyone know how to resolve this?Originally posted by toicontien
It seems to be showing through fine in IE6 and Moz 1.6
Yeh, it is really wierd. I was some bug on my computer. I got it fixed. Thanks.
tonyh, thanks for your post. But I took care of the centering problem already. Thanks anyway.
Cheers - AndyOriginally posted by AnacondaAndy
tonyh, thanks for your post. But I took care of the centering problem already. Thanks anyway.
Cheers - Andy
I guess that's what happens when you don't read the entire thread
.Your quite welcome, and I did resolve the overflow; auto issue, but now I'm discussing whether or not using overflow is accessible at all. Here is an example of my code using scrolling containers: My Demo 2 (<!-- m --><a class="postlink" href="http://people.uleth.ca/~tony.hughes/CenterTest/xhtml10StrictCenter2.html">http://people.uleth.ca/~tony.hughes/Cen ... nter2.html</a><!-- m -->). It hasn't been tested in browsers other than IE6.