Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Menu Bar Problem

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #31517
    mwdewitt
    Member

    I am following along with one of Chris Coyier’s videos (Video Cast #26, I believe), and I am having a difficult time with the menu bar. Since my site is currently local, here is a screen capture of my website thus far:

    http://img11.imageshack.us/i/screenshotjl.jpg/

    What I am trying to do is move the “SUPPORT” button to the right. The buttons have been highlighted in “red” purely for this experiment. In my CSS, the text is aligned to the right and then the “div” is floated to the right, but for some reason it is appearing under the other menu items and next to “Hello world!”

    Here is the accompanying CSS for all the elements involved:

    /*
    MENU
    */

    #menu-bar {
    padding-top: 1px;
    margin-bottom: 10px;
    }

    ul#main-nav {
    width: 400px;
    float: left;
    }

    ul#extra-nav {
    width: 400px;
    float: right;
    text-align: right;
    }

    ul#main-nav li, ul#extra-nav li {
    display: inline;
    }

    If you need to see anything else to help solve this problem, just let me know and I will get right on it. Thanks in advance!

    #62637
    Sirlon
    Member

    This looks like one of the parent elements is set to a width of 400px so that it cant float when both menus are 400px wide;

    Thats what i can say without the html ;)

    #62622
    mwdewitt
    Member

    I did all of this in WordPress, so here is the file “style.css”:

    /*
    RESET
    */

    * {
    margin: 0;
    padding: 0;
    }

    html {
    overflow-y: scroll;
    }

    html, body {
    height: 100%
    }

    body {
    font-sixe: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
    color: #272727;
    background: url(./images/body-bg.png) top center repeat-x white;
    }

    ul {
    list-style: square inside;
    }

    ol {
    list-style: decimal inside;
    }

    a {
    outline: none;
    text-decoration: none;
    }

    a img {
    border: none;
    }

    img {
    vertical-align: middle;
    }

    table {
    border-collapse: collapse;
    }

    /*
    UTILITY
    */

    .floatLeft {
    float: left;
    }

    .floatRight {
    float: right;
    }

    .clear {
    clear: both;
    }

    .button {
    border: 1px solid #FFC800;
    background: #FFC800;
    padding: 3px 8px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #FFFFFF;
    font-weight: bold;
    }

    .button:hover {
    color: #FFC800;
    background-color: #FFFFFF;
    }

    /*
    STRUCTURE
    */

    #page-wrap {
    width: 800px;
    margin: 0px auto -250px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    }

    #push {
    height: 250px;
    }

    /*
    HEADER
    */

    h1#logo {
    width: 367px;
    height: 100px;
    background: url(./images/logo.png) top left no-repeat;
    text-indent: -9999px;
    margin: 0 0 10px 0;
    float: left;
    }

    #top-bar .description {
    color: #000000;
    width: 300px;
    float: left;
    }

    form#searchform {
    margin: 0 0 10px 0;
    float: right;
    }

    /*
    MENU
    */

    #menu-bar {
    padding-top: 1px;
    margin-bottom: 10px;
    }

    ul#main-nav {
    width: 400px;
    float: left;
    }

    ul#extra-nav {
    width: 400px;
    float: right;
    text-align: right;
    }

    ul#main-nav li, ul#extra-nav li {
    display: inline;
    }

    ul#main-nav li a, ul#extra-nav li a {
    text-transform: uppercase;
    color: red;
    font-size: 10pt;
    padding: 3px 8px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-weight: bold;
    }

    ul#main-nav li a:hover, ul#extra-nav li a:hover {
    background: white;
    color: #272727;
    }

    And here is the file “header.php”:


    >








    <br /> <?php<br /> if (function_exists('is_tag') && is_tag()) {<br /> single_tag_title("Tag Archive for ""); echo '" - '; }<br /> elseif (is_archive()) {<br /> wp_title(''); echo ' Archive - '; }<br /> elseif (is_search()) {<br /> echo 'Search for "'.wp_specialchars($s).'" - '; }<br /> elseif (!(is_404()) && (is_single()) || (is_page())) {<br /> wp_title(''); echo ' - '; }<br /> elseif (is_404()) {<br /> echo 'Not Found - '; }<br /> if (is_home()) {<br /> bloginfo('name'); echo ' - '; bloginfo('description'); }<br /> else {<br /> bloginfo('name'); }<br /> if ($paged>1) {<br /> echo ' - page '. $paged; }<br /> ?><br />












    >

    #62547
    Sirlon
    Member

    You are not closing your ul tags ;) At both lists the / is missing.

    #62508
    jamygolden
    Member

    @ChristopherBurton What do you mean? Invalid xhtml?

    #62390
    jamygolden
    Member

    It doesn’t actually work like that. XHTML mostly validates as HTML5 except for deprecated items.

    For example, if you validate my site. It will validate as XHTML strict. In that same window, select ‘Doctype HTML5 (experimental) – The default option is ‘Detect automatically’.
    It will validate as HTML5 too.

    #62373
    mwdewitt
    Member

    Okay, it was not working because I did not close my “ul” tags. This is furthering my belief that I should not be a programmer, because I make the stupidest mistakes. Also, I do not quite understand the conversation going on about XHTML and HTML5, but it does not seem to be a problem thus far. Thank you for the help!

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.