...

View Full Version : Canīt get a centered container in CSS



backfolder
05-29-2007, 12:59 PM
Hello everyone!
Iīve been merging two CSS and now I have what I want using tabs as menus, but thereīs no way of center the container... so If someone can help me, it would be really well appeciated.

Thereīs the test web page:
http://www.arcorel.com/test/index.html

And the two CSS (structure and tabbed-menu):
http://www.arcorel.com/test/basic.css
http://www.arcorel.com/test/tabs.css

Iīve been spending around three hours and no way to center !
Thanks in advance!!!

backfolder.-


PD: CSS based in the Daniel Burkaīs one, you can find it here: http://labs.silverorange.com/archives/2004/may/updatedsimple
Thanks a lot to him!!!

kewlceo
05-29-2007, 02:59 PM
Try adding the code in red below to the portion of CSS I have pasted here:



html, body {
height: 100%; /* Required */
/*float: left;*/
}

body, { /* redundant rules for bad browsers */
/*width: 760px;*/
font-family: verdana,sans-serif;
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
color: #333;
background-image: url(images/mainbg.gif);
background-position: top center;
background-repeat: repeat-y;
}

body {
/*width: 760px;*/
color: #333;
padding: 0em 20px 3em 20px;
margin: 0;
background-image: url(images/mainbg.gif);
background-position: top center;
background-repeat: repeat-y;
}

#container-page {
width: 760px;
margin: 0 auto;
height: 100%;
clear: both;
display: block;
}

backfolder
05-29-2007, 06:57 PM
Hi kewlceo!
First of all, many thanks for your quick reply.
Iīm gonna try those changes soon and post the result.

backfolder.-

kewlceo
05-29-2007, 07:50 PM
Sounds good, I'll look forward to hearing about your results. :)

_Aerospace_Eng_
05-30-2007, 12:00 AM
You will probably want to change this

#container-page {
width: 760px;
margin: 0 auto;
height: 100%;
clear: both;
display: block;
}
to this

#container-page {
width: 760px;
margin: 0 auto;
min-height: 100%;
}

backfolder
05-30-2007, 10:08 AM
@ kewlceo,
Your tweak works!!! So thanks a lot!!!
Iīm start to develop the main content, and so on...
Iīm so happy! (and now trying to understand the change and effect)
:eek:

@_Aerospace_Eng_
Iīve tried your tweak firstly, because it is shorter and quick, but it didnīt works. So then Iīve tried the kewlceo tweak, and voilá.
Thanks anyway!!!
:thumbsup:

This site is the best reference Iīve found in helping people whose introducing CSS like me, so keep good work!

And sorry about my post tittle.

backfolder.-

_Aerospace_Eng_
05-30-2007, 10:30 AM
There was no reason why the code I gave you wouldn't work. I tested it before I gave it to you as solution and it worked fine. Of course this was if you used kewlcos suggestions. You will probably be back when you realize that the 100% is only the height of the browser not the layout.

backfolder
05-30-2007, 11:05 AM
@_Aerospace_Eng_
The good & bad thing is that the CSS in the test site is now updated, so Iīm gonna try again your tweak from scratch in the local site. Wait for my results.

backfolder.-

_Aerospace_Eng_
05-30-2007, 11:20 AM
You will still need to follow kewlco's suggestions.

backfolder
05-30-2007, 11:26 AM
@_Aerospace_Eng_
Definetively, that tweak donīt work. Iīve upload the previous CSS files and index.html, and you can get and test here:

http://www.arcorel.com/test/previous_CSS.zip

Thanks anyway!!!

backfolder.-

_Aerospace_Eng_
05-30-2007, 11:34 AM
Ugh, please read my posts fully before you post again in this thread. YOU HAVE to USE Kewlco's suggestions as WELL as MY suggestion. My suggestion alone won't work by itself. It just a suggestion to use min-height rather than height.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum