Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Unhappy Can´t get a centered container in CSS

    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/archive.../updatedsimple
    Thanks a lot to him!!!
    Last edited by backfolder; 05-30-2007 at 12:03 PM.

  • #2
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Try adding the code in red below to the portion of CSS I have pasted here:

    Code:
    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;
    	}
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin • Installatron • Money-Back Guarantee • 24/7 Support
    Providing "Service Above All Else" since 2005.

  • #3
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi kewlceo!
    First of all, many thanks for your quick reply.
    I´m gonna try those changes soon and post the result.

    backfolder.-

  • #4
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Sounds good, I'll look forward to hearing about your results.
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin • Installatron • Money-Back Guarantee • 24/7 Support
    Providing "Service Above All Else" since 2005.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You will probably want to change this
    Code:
    #container-page { 
            width: 760px;
            margin: 0 auto;
    	height: 100%;
    	clear: both;
       display: block;
    	}
    to this
    Code:
    #container-page { 
            width: 760px;
            margin: 0 auto;
    	min-height: 100%;
    	}
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Thumbs up

    @ 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)


    @_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!!!


    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.-

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Last edited by _Aerospace_Eng_; 05-30-2007 at 11:34 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts
    @_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.-

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You will still need to follow kewlco's suggestions.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts
    @_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.-

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •