Grow your CSS skills. Land your dream job.

[Solved] Battling with Positioning

  • # January 20, 2010 at 10:49 pm

    I have been battling with a positioning problem that I can’t seem to solve on my own.

    I’m still learning about the UL navigation, and don’t quite understand how to position them exactly where I want them. It seems like there are two objects fighting with one another. I’m trying to position the search box on the right-hand side (it’s almost there, but now the “go” button will not position beside it)… THEN, I’m trying to get the “Calendar, A to Z index, People Directory, and Home” links to position horizontally in the thicker black bar in the header. I simply cannot figure out how to do this. I have been pulling my hair over this for two days now. Any suggestions on this? I have tried different div’s, positioning, etc… Now, I am just about to give up on this.

    Anyone?

    This is what I have so far:

    And this is the CSS. I have tried so many things, I don’t even know what I had originally.

    Code:
    /** BEGIN HEADER LOGO, UL HEADER NAV and SEARCH BOX **/

    #header{
    height:90px;}

    #header_control{
    float:right;
    width: 400px;
    height: 90px;}

    ul.rollover li{
    text-align: left;
    list-style: none;
    margin: 0 0 0 0;
    font-size: 14px;}

    ul.rollover a{
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 1px 10px 3px 0px;
    margin: 0 0 0 0;}

    ul.rollover a:hover{
    color: #8C1850;
    text-decoration: none;}

    #search_box{
    float:right;
    margin: 10px 15px 0 0;}

    #header_nav{
    float:left;}

    /** END UL HEADER NAV and SEARCH BOX **/

    # January 21, 2010 at 4:50 am

    For the search box you had right margin of 15px pushing it inwards

    Code:
    #search_box {
    float:right;
    margin:10px 0 0;
    }

    for the image align top not middle
    <input type="image" align="top" onclick="this.submit()" alt="search" src="http://www.usm.edu/coal/new/arts_webgraphics/search_go.png&quot; id="search" name="search"/>

    I’m not sure what you mean about the navigation in the black bar, it is horizontal.

    # January 21, 2010 at 10:26 am

    Hey, thanks! Yeah, I finally figured out the navigation. Thanks very much for the help! Really appreciate it!

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

You must be logged in to reply to this topic.

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