Grow your CSS skills. Land your dream job.

Move drop down to below header image

  • # September 11, 2009 at 9:02 am

    Hi,

    After too many problems with my drop down and getting it to work in IE I have give up and let IE win. Am looking to move this drop down below my header image now, am hoping this will no longer result in conflict with my flashfader widget I have in the header and finally work in IE!

    I am quite confused about how to do this.. a few hours research has given me the answer of using PHP to move it.. (something am not at all happy with) or using CSS. From my research I have found out that I would have to get the dropdown relative to my header wrapper..

    How would I do this? Am still learning and get stuck a few times..

    Here is the code for my drop down..

    In header

    Code:

    Header div

    Code:
    < ?php
    include (ABSPATH."wp-content/flashfader/flashfaderhtml.txt");
    ?>

    Main style

    Code:
    #header {
    width: 100%;
    float: left;
    }
    #header #blog-name {
    float: left;
    width: 100%;
    }
    #header #blog-name h1 {
    color: #FFFFFF;
    }
    /* End Images */#header #blog-name h1 a {
    color: #FFFFFF;
    text-decoration: none;
    }
    #header #blog-name h1 a:link {
    color: #FFFFFF;
    text-decoration: none;
    }
    #header #blog-name h1 a:hover {
    color: #003366;
    text-decoration: none;
    }
    #header #navigation {
    position: relative;
    float: right;
    width: 100%;
    text-align: left;
    }

    #header-image {
    float: left;
    width: 100%;
    height: 383px;
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #FFFFFF;
    }

    Nav code (if needed)

    Code:
    ul#nav {
    height:1.75em;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    list-style:none;
    margin:0; /* reset the default left margin in IE */
    padding:0 .5em 0 0; /* reset the default left padding in good browsers */
    background:#000;
    font-size:1em;
    }
    #nav li {
    position:relative; /* establish stacking context for the AP’d dropdown sublist */
    float:right;
    padding:0;
    line-height:1.75em;
    }
    #nav li a {
    float:left;
    padding:0 .5em;
    border-right: 1px solid #333;
    color: #CCCCCC;
    text-decoration: none;
    }
    #nav li a.first {border:none;}

    #nav li:hover,
    #nav li.sfhover{
    background:black;/* background for all links on hover */
    visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
    }
    #nav li:hover a,
    #nav li.sfhover a {color:#FFF}/*1st level font color on hover*/

    /*=== All Sublist Styles ===*/
    #nav ul {
    position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav li) in this case*/
    width:12em; /*150px*/
    margin-left:-999em;/* hide the sublist */
    padding:0;
    left:0; /* IE6/7 need this to position the sublist correctly on hover*/
    top:1.75em;
    background: url(fake-image.jpg);/* IE needs some sort of BG on the nested ul */
    }
    #nav li li {
    float: none;/*reset the float from #nav li*/
    display:block;
    height:auto;
    line-height:1.5;
    border:none;/*reset borders from #nav li*/
    }
    #nav li li a {
    float: none;/*reset the float from #nav li*/
    display:block;
    width:11em;/*IE6 needs a width (12em total with padding)*/
    padding:0 .5em;
    border:0;
    }
    * html #nav li li a {display:inline-block;} /*hide an overflow bug in IE6*/
    *+html #nav li li a {display:inline-block;} /*hide same overflow bug in IE7*/

    /*=== Hide All Sublists ===*/
    #nav li:hover ul,
    #nav li.sfhover ul {
    margin-left:-999em;
    }
    /*=== Sublist Font Colors ===*/
    #nav li:hover li a,
    #nav li.sfhover li a {color:#000;} /*2nd level font color*/

    #nav li li:hover a,
    #nav li li.sfhover a {color:#FFF;} /*2nd level font color on hover*/

    /*=== Second Level UL position on hover ===*/
    #nav li:hover ul,
    #nav li.sfhover ul {
    margin-left: 0; /* show the sublist (line up with left border on main list items)*/
    }

    label.screen-reader-text {
    display: none;
    }
    .avatar {
    display:none;

    ie.css

    Code:
    #header-image {
    float: left;
    width: 100%;
    height: 383px;
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #FFFFFF;
    margin-bottom: 20px;
    }

    Do you think that if I moved the drop down away from the widget then this would end the IE problems and get it to work?

    Thanks to anyone that can help :)

    http://www.leehughes.co.uk

    # September 11, 2009 at 10:46 am

    Ahhh am such a idiot!

    Still getting used to files wordpress themes and the way they use php..

    I need to simply put

    Code:

    Under my header div image..

    The content now needs adjusting..

    http://www.leehughes.co.uk

    :)

    # September 11, 2009 at 11:05 am

    Ok..

    Drop down moved.. content adjusted..

    Just need to style the drop down now..

    If any one has a few mins could you just see if it is working in I.E please?

    Am in a mac house with no access to anything windows (for about a week)

    Thanks :)

    # September 11, 2009 at 11:50 am

    In all browsers:

    • Hovering over "Miscellaneous" causes a horizontal scroll bar to appear[/*:m]
    • Make sure you give a background color to the drop down, looks like it’s transparent right now, and when hovering over, say, "Expeditions", the drop down item "Future Expeditions" is completely unreadable[/*:m][/list:u]

      IE6

      • "Done, but with errors on the page"[/*:m]
      • Dropdown doesn’t show[/*:m][/list:u]

        IE7

        • "Done, but with errors on the page"[/*:m][/list:u]
    # September 11, 2009 at 11:55 am

    aww thanks.. Yes still validating..

    Still playing with the colours somewhat..

    I shall add some padding to get rid of the horz scroll bar :)

    Don’t know what to do about IE6..

    Thanks though you have been loads of help :)

    # September 11, 2009 at 11:58 am

    Hmmm, adding padding will only increase the chance of a horizontal scroll bar. Leave that one for now, I’ll have a quick check on it later today.

    # September 11, 2009 at 12:04 pm

    Yeah..

    I don’t like the look of the code to be honest..

    Code:
    ul#nav {
    height:1.75em;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    list-style:none;
    margin:0; /* reset the default left margin in IE */
    padding:0 .5em 0 0; /* reset the default left padding in good browsers */
    background:#000;
    font-size:1em;
    }

    Quite confusing to me..

    Thanks

    # September 11, 2009 at 2:43 pm

    I have a pretty good feeling that the "errors on page" are coming from the Jquery translate script.
    I looked in firebugs console, and it says "unterminated string literal" I did a google search and found some instances where the

    Code:

    tag can screw up if not terminated…. (basically a parsing error.)

    As far as your code, the instance that triggers the error is inside of the translate script. (oddly enough the source shows it as blank, but friebug shows part of your source code is being worked on by the script.)

    when I say part, i mean part. the first good chunk of it is hacked off and it starts with,

    Code:
    uk/multimedia/video/”>Video
    2
  • Photography
  • 3

  • Media
  • 4

and nothing before that.

Same thing with the image flow plugin, are the image flow plugin, and the translate plugin being used?

I’m still researching it to see if I can help in any way.

# September 11, 2009 at 2:50 pm

Hi,

Am getting 3 errors on transitional..

One of these is related to the search widget.. as you mentioned in another post

Attribute "role" is not a valid attribute. Did you mean "frameborder" or "scrolling"?

<form role="search" method="get" id="searchform" action="http://www.leehughes.co

I remove this widget the error goes..

However, I need another search widget.. any ideas.

Are you using strict?

Thanks

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

You must be logged in to reply to this topic.

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