Grow your CSS skills. Land your dream job.

Tables must die

  • # September 5, 2009 at 5:33 am

    Hi,
    I’m new here and I do hate tables especially when I create my web-site using CSS. They just put all elements out of place and I can barely control them.
    Well, finally I got rid of all the tables and created my site with DIVs. But there is a problem there too – I’m having a problem with my main menu arrangement.

    Code:

    Now I want both menu navigation items to be centered within "main_nav". This is a portion of CSS file:

    Code:
    #main_nav {
    width: 570px;
    height: 50px;
    background-color: #E8ECED;
    padding: 0;
    margin: 30px 0 0 0;
    }
    main_nav_list {
    position: relative;
    height: 50px;
    margin: 0;
    }
    #menunav {
    position: relative;
    height: 39px;
    float: left;
    margin: 0 13px 0 13px;
    }

    I tried to float the entire "main_nav_list" to the right, and no effect, and tried to margin it – same, no result. The only margin that I can do is on "menunav" items. What am I doing wrong here? It seem that the container for the menu items (main_nav_list) is not moving at all. I thought I could nest DIVs inside another DIV, move them to the left, and then align the containing DIV within another DIV. Please, don’t make me go back to tables:(

    # September 5, 2009 at 12:02 pm

    can you not center #main_nav by adding "text-align: center;"?
    it does have a width so should center.

    Al

    # September 5, 2009 at 10:24 pm
    "al_m473" wrote:
    can you not center #main_nav by adding "text-align: center;"?
    it does have a width so should center.

    Al

    I did. No luck.
    Looks like float:left property overrides any center positioning. I removed "float:left" and added "text-align: center", and it did center itself, with one huge bug – all the elements were positioned into a column instead of the row. I’m going to try using <ul id="main_nav_list"> and try to put all elements in a row (that way I don’t have to use "float: left" and "text-align:center" will work, hopefully).
    Nevertheless, if I move all elements to the left with "float:left" inside a <DIV> why can’t I align that <DIV> inside another <DIV>?

    # September 6, 2009 at 2:42 am

    Ok, I’ve changed the code a little bit. I’ve replaced "main_nav_list" DIV with UL.

    Code:

    And the CSS looks like this:

    Code:
    #main_nav {
    width: 570px;
    height: 50px;
    background-color: #E8ECED;
    padding: 0;
    margin: 30px 0 0 0;
    }
    #main_nav_list {
    position: relative;
    height: 50px;
    }
    #menunav {
    position: relative;
    height: 39px;
    margin: 10px 6px 0 6px;
    float: left;
    }

    Now all the menu items are positioned in the center. But the <UL> part looks completely wrong to me. I never even edited <UL> properties in CSS, therefore it’s pure HTML. Although it works for me, it makes no sense to me. I’ve checked the page on my IE8, Firefox and Safari – and looks centered in all of them. Sorry guys, my web-site has not been published yet online. Should be there by tomorrow. But if anyone has answer before I publish it, I will greatly appreciate it.

    # September 6, 2009 at 5:59 am

    A link to the file so we can actually see what is going on would be very helpful

    # September 6, 2009 at 6:17 am
    "ikthius" wrote:
    A link to the file so we can actually see what is going on would be very helpful

    Ok, I’ve just uploaded the site:
    http://aizhanastore.com
    You can see in the Source that I’m using <UL> for the top navigation – Home, Jewelry, About. It’s positioned OK, but doesn’t make sense in terms of the way I’m using <UL>. Use Index.html (Home page) for reference in code (it has less code that any other pages).
    Here’s the CSS files:
    http://aizhanastore.com/PageSetup.css
    http://aizhanastore.com/PageStyle.css
    The PageSetup.css is where all the arragement, backgrounds happen. The CSS is arranged in order – the same order where all DIV tags occur on the HTML page for easy reference (excluding "absolute" positioned items). I’ve coded HTML nicely too to easy reference and see all the DIVs and tags. In other words – if the Main navigation appears at the top of the page, I will be somewhere at the top of the CSS file (it’s pretty long), and the bottom elements, at the bottom.
    Thanks:)

    # September 6, 2009 at 7:03 am

    you have <ul> but no <li> in your nav but you have it in your footer???

    <ul> = un-ordered list
    <li> = list itme…. this is the things in your <ul>

    plus if you want to do a <ul> with <li> then make your CSS for that element have display:inline;

    and a word of warning to make your code work for you…….

    <div id="something"></div>
    <div id="something"></div>
    <div id="something"></div>
    <div id="something"></div>

    would be better as:
    <div class="something"></div>
    <div class="something"></div>
    <div class="something"></div>
    <div class="something"></div>

    with your css going from:
    #something
    to
    .something (notice the period/full stop)

    in a nutshell:
    id for solitary elements classes for multiple elements

    # September 6, 2009 at 7:17 am

    I changed some code in Firebug, not tested anywhere else:

    index.html changed just the nav

    Code:
    © Aizhana Store Image Quality: Best
    Loading Image…

    css for main changed just the mainnav made it a class and added in display:inline

    Code:
    body#main_page {
    margin: 0;
    padding: 0;
    background: #000000 url(Design/SiteDesign/StarSky.png);
    position: relative;
    }
    #grass {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    min-width: 0.1%;
    height: 100px;
    background: url(Design/SiteDesign/Grass.png) repeat-x;
    }
    #clouds {
    position: absolute;
    top: 85px;
    left: 204px;
    width: 600px;
    height: 62px;
    background: url(Design/SiteDesign/Clouds.png) no-repeat;
    }
    #clouds2 {
    position: absolute;
    top: 85px;
    left: 0;
    width: 100%;
    height: 62px;
    background: url(Design/SiteDesign/Clouds2.png);
    background-position: -20px 0;
    min-width: 0.1%;
    }
    #line {
    position: absolute;
    top: 168px;
    left: 265px;
    width: 460px;
    height: 1px;
    background: url(Design/SiteDesign/line.png) no-repeat;
    }
    #page {
    position: relative;
    margin: auto;
    width: 800px;
    height: 100%;
    background: url(Design/SiteDesign/moon.png) no-repeat;
    background-position: 74px 5px;
    }
    #header {
    margin: 0px 0px 0px 219px;
    padding: 0;
    width: 570px;
    height: 180px;
    }
    #logo {
    z-index: 1;
    position: relative;
    top: 0;
    left: 163px;
    width: 191px;
    height: 90px;
    background: url(Design/SiteDesign/Aizhana.png) no-repeat;
    }
    #main_nav {
    width: 570px;
    height: 60px;
    background-color: #E8ECED;
    padding: 0;
    margin: 30px 0 0 0;
    text-align: center;
    }
    #main_nav_list {
    position: relative;
    height: 50px;
    }
    .menunav {
    display:inline;
    position: relative;
    height: 39px;
    margin: 10px 6px 0 6px;
    float: left;
    }
    #contents {
    padding: 0;
    margin: 0;
    width: 800px;
    height: 100%;
    }
    #left_column {
    background: #000000 url(Design/SiteDesign/StarSky.png) repeat-y;
    width: 219px;
    height: 100%;
    top: 0;
    left: 0;
    float: left;
    }
    #left_column_container {
    padding-left: 0px;
    margin: 0 0 0 0px;
    width: 219px;
    }
    .sub_nav_container {
    margin: 0 0 0 0px;
    padding: 0;
    width: 219px;
    }
    .sub_nav_list {
    border: 0;
    padding: 0;
    margin: 0;
    list-style-type: none;
    }
    .sub_nav_list li {
    clear: both;
    margin: 0 0 3px 0;
    padding: 0;
    }

    .sub_nav_list a {
    overflow: hidden;
    text-align: center;
    line-height: 90px;
    height: 65px;
    margin: 0;
    padding: 0;
    display: block;
    }
    #main_column {
    width: 570px;
    height: 100%;
    background-color: #E8ECED;
    top: 298px;
    left: 0px;
    float: left;
    min-height: 550px;
    }
    #data {
    line-height: 1.2;
    margin: 0;
    padding: 0 0 0 30px;
    width: 510px;
    height: 100%;
    overflow: visible;
    }
    #data p {
    margin: 5px 10px 10px 5px;
    padding: 0;
    line-height: 1.2;
    }
    #data iframe {
    margin: 20px 0 0 0;
    padding: 0;
    }
    #ace_full {
    line-height: 1.2;
    margin: 0;
    padding: 0;
    width: 510px;
    }
    #items {
    border-collapse: collapse;
    width: 502px;
    }
    #item_picture {
    vertical-align: middle;
    border-top: dotted 1px;
    width: 102px;
    height: 99px;
    text-align: center;
    }
    #item_description {
    vertical-align: top;
    text-align: top;
    border-top: dotted 1px;
    width: 250px;
    height: 99px;
    }
    #item_description p {
    margin: 0px 0px 0px 5px;
    padding: 0;
    line-height: 1.2;
    }
    #item_buy {
    verical-align: middle;
    text-align: center;
    border-top: dotted 1px;
    width: 150px;
    height: 99px;
    }
    #details {
    border-collapse: collapse;
    width: 510px;
    }
    #item_img {
    vertical-align: top;
    border-top: dotted 1px;
    width: 255px;
    text-align: center;
    }
    #item_price {
    vertical-align: bottom;
    border-style: none;
    width: 255px;
    text-align: center;
    }
    #footer {
    clear: both;
    margin: 0;
    padding: 0;
    width: 800px;
    height: 110px;
    bottom: 0;
    }
    #left_footer {
    background: url(Design/SiteDesign/FooterFairy.png) no-repeat;
    width: 219px;
    height: 110px;
    float: left;
    botom: 0;
    }
    #right_footer {
    width: 570px;
    height: 110px;
    background: #E8ECED url(Design/SiteDesign/FooterBack.png) no-repeat;
    float: left;
    bottom: 0;
    }
    #footer_text {
    padding: 0;
    margin: 10px 0 0 0;
    text-align: center;
    }
    #footer_links {
    padding: 0;
    width: 300px;
    margin: 10px 0px 0 0;
    text-align: center;
    bottom: 35px;
    right: 150px;
    position: absolute;
    }
    #footer_nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    #footer_nav li {
    display: inline;
    padding: 0 10px 0 10px;
    }
    /*— Custom —*/
    #me {
    border: solid 1px;
    width: 231px;
    height: 307px;
    background: #000000 url(Images/Resources/Myself.png) no-repeat;
    vertical-align: top;
    float: left;
    margin: 0 10px 0 0;
    }
    #myplaces {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    #myplaces li {
    margin: 7px 0 0 7px;
    padding: 0;
    }
    #support_nav {
    width: 570px;
    height: 60px;
    background-color: #E8ECED;
    padding: 0;
    margin: 30px 0 0 0;
    text-align: center;
    }
    #support_nav_list {
    position: relative;
    height: 50px;
    }
    #support_menunav {
    position: relative;
    height: 39px;
    margin: 10px 26px 0 26px;
    float: left;
    }
    #support_line {
    position: absolute;
    top: 168px;
    left: 286px;
    width: 445px;
    height: 1px;
    background: url(Design/SiteDesign/line.png) no-repeat;
    }
    #item_care {
    width: 170px;
    height: 39;
    vertical-align: top;
    }
    #returns {
    width: 170px;
    height: 39px;
    vertical-align: top;
    }
    /*— Forms —*/
    .data fieldset {
    padding: 15px;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    }
    .data input {
    border-style: solid;
    border-width: 1px;
    border-style: none;
    }
    .data textarea {
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    }
    .data submit {
    text-align: right;
    }
    .ace select {
    text-align: center;
    background-color: #E9EDEE;
    border: 2 ridge #008000;
    font-weight: bold;
    font-size: 11px;
    line-height: 11px;
    .data legend{
    color: #000000;
    }
    .data label {
    color: #000000;
    }
    .data button {
    background-color:#A85C8E;
    }
    #ace_full table {
    border-style: none;
    border-width: 0px;
    border-spacing: 0;
    }

    #ace_full th {
    color: #FFFFFF;
    background-color:#A15084;
    padding: 3px 2px 3px 2px;
    }

    #ace_full tr.odd {
    color: #000000;
    background-color:#F8F2F6;
    padding: 3px 2px 3px 2px;
    }

    #ace_full tr.even {
    color: #000000;
    background-color:#EFE2EB;
    padding: 3px 2px 3px 2px;
    }

    I also think your nav links are too close th=o the line break you got, you may want to space out that a bit more.

    # September 6, 2009 at 7:49 am

    Thanks a lot:) I’ve changed my code into <ul><li>… And thanks for the tip about using classes – I’m new to CSS:) Used it only for a month:)
    But here’s the problem about spacing top navigation items. Now it won’t even move to the left. If I space them, all the items move to the right.
    http://aizhanastore.com – Updated index.html
    http://aizhanastore.com/PageSetup2.css – Updated CSS only for index.html – other pages use PageSetup.css
    Now, if I space them more, how can I move that entire navigation to the left? Or even center it? It keeps moving to the right into the black background if I increase margin of ".menunav" from 7 to 10 or more… For some reason there is an empty space in front of Home button.

    # September 6, 2009 at 8:05 am

    you need to think about your sizes.

    what size is your site? I mean what size is your visable content site, not your background….

    if it is for example 900, then you need to think my nav is 900.

    I have a nav wrapper of 900
    I have 5 parts to my nav
    900/5 = 180
    can my text fit in that?
    if so should it be centered or flowing from left?
    if centered I want auto padding or set padding?

    what I do when I am making a site is make a rough copy…. maybe draw it out, then I highlight areas to make wrappers, beofre I break them up into elements.

    then I code the wrappers with borders… border:1px solid #ff0000;
    then I make sure everything can fit in that wrapper, with the borders you can see what you are actually working on, when you apply styling to certain elements

    I hope this helps with what your trying to achieve….. I must admit I don’t really know what your last posts was really trying to say

    # September 6, 2009 at 8:18 am

    Everything is sized:) I’ve checked.
    The main container is 800px wide.
    The header, where the main navigation resides is 570px and the conatiner where all info is displayed – is too – 570px, and the footer.
    There is no problems there.And I did sketch it out on the paper;)
    And sorry for the description. But here, http://aizhanastore.com – check it out now – I’ve spaced main navigation by 10px 13px 0 13px, and it uses PageSetup2.css file ( http://aizhanastore.com/PageSetup2.css ). See? All nav items move to the right beyond and out towards the right side, not left. And there is a big gap between the left side and "Home" navigation button. How can I move it to the left?

    # September 6, 2009 at 8:58 am

    ul & li tend to move to the right…..

    test this by making a basic page with a paragraph and then do a ul with 5 li itmes, you will notice that they move to the right

    to combat this, have your ul/li left by negative pixels…
    e.g.
    left:-50px;

    here for your css:

    Code:
    #main_nav_list {
    position: relative;
    width: 570px;
    height: 50px;
    list-style-type: none;
    left:-30px;
    }

    you may want to make your line longer to accomodate your shifts in sizes

    # September 6, 2009 at 9:00 am

    Thanks:) I thought about that, but I didn’t know that ul/li does shifts to the right by default:) Now I know and move it to negative left:)

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".