CSS Help Please.

[Cyklops]

#bottombar {
height: 30px;
width: 100%;
position: fixed;
bottom: -1px;
color: #000000;
}

#topbar {
height: 30px;
width: 100%;
position: fixed;
margin: auto auto;
color: #000000;

}

[ThisNameWillDo!]

Well.. Did you ever consider looking at his source for help?

I am in no way telling you to copy his HTML completely, but it can get you started on what you need.

He has this as his HTML for the box [Floating at the bottom]

Show Hide

<div id="nav_menu_wrapper">
        <div class="nav_menu">
            <ul>
                <li><a href="http://ryan.rawswift.com/">Home</a></li>
                <li><a href="http://ryan.rawswift.com/about/">About</a></li>
                <li><a href="http://ryan.rawswift.com/resume/">Resume</a></li>
                <li><a href="http://ryan.rawswift.com/portfolio/">Portfolio</a></li>
                <li><a href="http://ryan.rawswift.com/contact/">Contact</a></li>
                <li><a href="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/">*** Checkout the latest demo</a></li>
            </ul>
        </div>
    </div>

And here is the CSS of his page:

Show Hide

@charset "utf-8";
/*
 * CSS Document
 * Written by Ryan Yonzon
 * http://ryan.rawswift.com/
 */
 
html, body {
    margin:0px; /* FF hack: or we'll have double scrollbar showing on the browser */
    overflow:hidden; /* hide browser's main scrollbar */
}

#main_container {
    width:100%;
    background-color:#FFFFFF; /* DO NOT REMOVE THIS; or you'll have issue w/ the scrollbar, when the mouse pointer is on a white space */
    
    height:100%;    /* this will make sure that the height will extend at the bottom */
    overflow:auto;    /* will have a scrollbar at our content containier */
    position:absolute; /* container div must be absolute, for our fixed bar to work */
}

    #main_container .content_wrapper {
        margin-left:auto;
        margin-right:auto;
        width:90%;
    }
    
    #main_container .spacer { /* spacer w/ fixed height; give space to the content and fixed bar */
        height:30px;
    }

#nav_menu_wrapper { /* this will ba used as a wrapper for the nav_menu so we can center it (nav_menu). especially for IE */
    height:30px; /* fix bar's height */
    width:100%; /* use 100% of width */
    
    /* the code below will PUT the bar at the bottom */    
    bottom:0px;
    position:absolute;
    
    /* hide scrollbar for this wrapper */
    overflow:hidden;
}

    #nav_menu_wrapper .nav_menu { /* the menu itself */
        height:30px; /* fix bar's height */
        width:900px; /* fixed width */

        /* center this div */
        margin-left:auto;
        margin-right:auto;    
        
        /* add effect */
        background-color:#EEEEEE;
        border:#666666 solid 1px;
    }
    
    /*
     * menu links and link effects
     */
        #nav_menu_wrapper .nav_menu ul {
            margin-top:5px;
            list-style:none;
        }
        
        #nav_menu_wrapper .nav_menu li {
            display:inline;
        }
        
        #nav_menu_wrapper .nav_menu li a {
            padding-top:3px;
            padding-bottom:5px;
            padding-left:9px;            
            padding-right:9px;
        }
        
        #nav_menu_wrapper .nav_menu a:link, #nav_menu_wrapper .nav_menu a:visited {
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:12px;
            color:#333333;
            text-decoration:none;
            background-color:#EEEEEE;
        }

        #nav_menu_wrapper .nav_menu a:hover {
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:12px;
            color:#FFFFFF;
            text-decoration:none;
            background-color:#0099FF;
        }

So take a look at this, and see what it has to offer, to be honest I didn't even look at it, I just want to try and help you out. Now remember, you're not going to learn a thing by just copying his stuff, so just look at it and try and see where your code is wrong at.

Good luck, hopefully I've helped and not made the matter worse

Thanks,
Dan

Thanks for the help, I've already looked at his coding, yet I still can't seem to get it to work, it's strange. It seems I have to change it to position: absolute; for it to work in Internet Explorer, but then it won't work in any other browser! Damn I hate Internet Explorer, it sucks.

#bottombar {
height: 30px;
width: 100%;
position: fixed;
bottom: -1px;
color: #000000;
}

#topbar {
height: 30px;
width: 100%;
position: fixed;
margin: auto auto;
color: #000000;

}

Hey, thank you for your help, however, this still did not work. Thank you anyway though!

+Rep to you both.

[Colin-Roberts]

make two style sheets one for ie , one for every other browser then in the ie one do the absolute position

[ThisNameWillDo!]

make two style sheets one for ie , one for every other browser then in the ie one do the absolute position

Hey, I like that idea, but wouldn't that mean if I change one stylesheet, I'd have to change the other too?

[Tomm]

His solution is not just the CSS on the div you want the content in, it also relies on some other spacer divs.

Thanks for the help, I've already looked at his coding, yet I still can't seem to get it to work, it's strange. It seems I have to change it to position: absolute; for it to work in Internet Explorer, but then it won't work in any other browser! Damn I hate Internet Explorer, it sucks.



Hey, thank you for your help, however, this still did not work. Thank you anyway though!

+Rep to you both.

[Cyklops]

#bottombar {
position: fixed;
width: 100%;
height: 36px;
float: left;
padding-top: 7px;
margin: 0;
}

[Colin-Roberts]

ye you would have to change both, or make a global one and 2 secondary ones for just that element

[ThisNameWillDo!]

His solution is not just the CSS on the div you want the content in, it also relies on some other spacer divs.

#bottombar {
height: 30px;
width: 99%;
position: fixed;
bottom: 0px;
left: 0px;
color: #000000;
}

#bottombar .barmenu {
height: 30px;
width: 99%;
margin-left: auto;
margin-right: auto;
background-color: #EEEEEE;
border: #666666 solid 1px;
color: #000000;
}

This is what I have for the bottom bar, I've tried changing everything, nothing seems to be working.

#bottombar {
position: fixed;
width: 100%;
height: 36px;
float: left;
padding-top: 7px;
margin: 0;
}

Still didn't work, but thanks for attempting again.

[Cyklops]

#bottombar {
height: 30px;
width: 99%;
position: fixed;
bottom: -1px;
left: 0px;
color: #000000;
}

#bottombar .barmenu {
height: 30px;
width: 99%;
margin-left: auto;
margin-right: auto;
background-color: #EEEEEE;
border: #666666 solid 1px;
color: #000000;
}