A Flash Developer Resource Site

Results 1 to 10 of 10

Thread: Positioning

  1. #1
    Senior Member
    Join Date
    Jan 2006
    Posts
    263

    Positioning

    I have made this menu with an <ul>. I have a problem though I can not get it to center in the page. I have tried using a <div> to center it and tried a table as well.

    code:

    <style type="text/css">


    body {
    font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFF;
    }


    ul {
    margin: 0;
    padding: 0;
    float: left;
    width: 750px;
    background: #666 url(images/bar.gif) repeat-x;
    list-style: none;
    text-transform: uppercase;

    }

    ul li {
    float: left;

    }


    ul a {
    padding: 0 2em;
    line-height: 2.1em;
    background: url(images/bar.gif) repeat-y left top;
    text-decoration: none;
    color: #000;
    float: left;
    display: block;

    }


    ul a:hover {
    color: #FFF;
    text-decoration: underline;
    }



    </style>
    </head>

    <body>
    <div align="center">

    <ul>
    <li class="first"><a href="#">Home</a></li>
    <li><a href="#">Something</a></li>
    <li><li><a href="#">Something</a></li>
    <li><a href="#">Something</a></li>
    <li><a href="#">Something</a></li>
    <li><a href="#">Something Else</a></li>
    </ul>
    </div>

    </body>
    </html>


  2. #2
    Total Universe Mod jAQUAN's Avatar
    Join Date
    Jul 2000
    Location
    Honolulu
    Posts
    2,429
    Usually, you just need to add a width style
    I would just style the div

    add this style

    .centerDiv{
    width:200px;
    margin:0 auto; /*center the div*/
    }

    then change this
    <div align="center">
    to this
    <div class="centerDiv">

  3. #3
    Senior Member
    Join Date
    Jan 2006
    Posts
    263
    Awesome thanks. Worked like a charm.

  4. #4
    Senior Member
    Join Date
    Jan 2006
    Posts
    263
    I have broken my html somehow now. I have validated this code at w3c. But now everything goes to the left of my menu no matter what.If I put 10 pics the page will keep getting wider and wider.

    Probably something with the css.
    code:

    <style type="text/css">


    body {
    font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;

    background-color: #FFFFFF
    }
    a{color:#000000;}

    ul {
    margin: 0;
    padding: 0;
    float: left;
    width:720px;
    background: url(images/bar.gif) repeat-x bottom;
    list-style: none;
    text-transform: uppercase;

    }

    ul li {
    float: left;

    }


    ul a {
    padding: 0 2em;
    line-height: 2.1em;
    background: url(images/bar.gif) repeat-y left center;
    text-decoration: none;
    float: left;
    display: block;

    }


    ul a:hover {
    text-decoration: underline;
    }

    .bgImage {
    background-color: #FFF;
    background-image: url(images/fade.jpg);
    background-repeat: repeat-x;
    }
    .centerDiv{
    width:750px;
    margin:0 auto;
    }

    </style>
    </head>

    <body>

    <div class="centerDiv">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Something</a></li>
    <li><a href="#">Something</a></li>
    <li><a href="#">Something</a></li>
    <li><a href="#">Something</a></li>
    <li><a href="#">Something Else</a></li>
    <li><a href="#">And something Else</a></li>
    <li><a href="#">And something Else</a></li>
    </ul>
    <br/>
    <br/>
    </div>
    <div align="center">
    <table width="750">
    <tr>
    <td>ggggnjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjhb kjlubjbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbb
    </td>
    </tr>
    </table>
    </div>
    </body>
    </html>



    I can put this page online at a url if someone needs to see what I'm talking about.

  5. #5
    Junior Member
    Join Date
    Mar 2007
    Posts
    21
    you need to add to your .center, things like float, position, margin-left (or right).

    my 1st reply in this topic explain exactly how to make a cell perfectly centered.

    http://board.flashkit.com/board/showthread.php?t=724853

  6. #6
    Senior Member
    Join Date
    Jan 2006
    Posts
    263
    I tried adding some of the things you mention. It's likes it centers it but in the table it just ignores the <tr><td> etc. I've put this up at my site.

    You can see the text does not wrap in the table cell like it should.

    Figure I would save posting code seeing you can view source, and get a visual representation of the problem.

    http://www.musiciansprophecies.net/flashkit/

    Thanks

  7. #7
    Junior Member
    Join Date
    Mar 2007
    Posts
    21
    You already have the CenterDiv tag with 750px width, why a <table> ??

    You also have two #CenterDiv but only one closing </div> tag.



    One of the point of using CSS is not to have to use Tables...

  8. #8
    Senior Member
    Join Date
    Jan 2006
    Posts
    263
    This is for my college. We are required to use tables on this project. Other wise I would not be using them.

    This is driving me nuts. Still not working :-(

    I did fix the missing div tag.
    Last edited by jamesloacher; 04-01-2007 at 07:16 PM.

  9. #9
    Junior Member
    Join Date
    Mar 2007
    Posts
    21
    Have to ? guess there's a reason for it, although it doesnt make sense to use both tables and CSS for the same page.

    Might suggest onw thing though, if you absolutely have to use tables,

    make one, with one row/col only, and put everything inside it, position will need to be relative instead of absolute, but that's about it.

  10. #10
    Senior Member
    Join Date
    Jan 2006
    Posts
    263
    I've decided to ditch using a css menu. I guess it's just to much trouble with using tables too. This is a beginning web design course. Starting at square one hence the use of tables. We are required to use CSS for elements on our page, (font color,size,etc) a css menu is probably a little to fancy for this course anyways.

    I do appreciate all the help though. I learned a thing or two.

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center