Widget help (CSS & Placement)

[angieatc]

I am completely stuck on why this is not working. Here is the site I am working on: http://test1.strosgirldesigns.com/

I used this tutorial here to create the widget area and used a 1 in this line: add_action( 'genesis_footer', 'child_footer_menu', 1 ); so I can get the widget to appear above the footer (credit area). So this is what I have in my functions.php file:

add_action( 'genesis_footer', 'child_footer_menu', 1 );
function child_footer_menu() {
echo '<div><div>';
dynamic_sidebar( 'footer menu' );
echo '</div><!-- end .wrap --></div><!-- end .footer-menu -->';
}
/** Register widget areas */
genesis_register_sidebar( array(
'id'            => 'footer-menu',
'name'          => __( 'Footer Menu', 'child' ),
'description'   => __( 'This is the widget area below the Footer for your menu. Please DO NOT add anything to this widget area.', 'child' ),
) );

and for my CSS I put this in:

#footer-menu {
background-color: #ec008c !important;
border-bottom: 3px solid #fff;
clear: both;
color: #fff;
overflow: hidden;
padding: 10px 0;
text-transform: uppercase;
width: 100%;
}

#footer-menu .wrap {
margin: 0 auto;
width: 960px;
}

#footer-menu ul {
float: left;
width: 100%;
}

#footer-menu li {
float: left;
list-style-type: none;
}

#footer-menu li a {
color: #fff;
display: block;
font-size: 12px;
padding: 6px 15px 5px;
position: relative;
text-decoration: none;
}

#footer-menu li a:hover,
#footer-menu li a:active,
#footer-menu li:hover a,
#footer-menu .current_page_item a,
#footer-menu .current-cat a,
#footer-menu .current-menu-item a {
color: #000;
}

#footer-menu li li a,
#footer-menu li li a:link,
#footer-menu li li a:visited {
background-color: #f5f5f5;
border: 1px solid #ddd;
border-top-width: 0;
color: #555;
font-size: 11px;
padding: 5px 10px;
position: relative;
text-transform: none;
width: 128px;
}

#footer-menu li li a:hover,
#footer-menu li li a:active {
color: #222;
}

#footer-menu li ul {
height: auto;
left: -9999px;
margin: 0 0 0 -1px;
position: absolute;
width: 150px;
z-index: 9999;
}

#footer-menu li ul a {
width: 130px;
}

#footer-menu li ul ul {
margin: -33px 0 0 149px;
}

#footer-menu li:hover>ul,
#footer-menu li.sfHover ul {
left: auto;
}

I know I am missing something because it is not even taking the background color for the menu. Can someone please help me on getting this thing to line up correctly? The only thing that is going in this widget is a custom menu but I need it above the credits but below the footer widgets.

Thanks

---

My design site, Hill Springs Designs

[sahdow]

I find it's easiest to deal with one issue at a time. From what I can see (just glancing) you haven't defined margins. Think of the margin as the container, but the padding as the space inside the container and how close to the walls.

Start by centering your footer menu:

Top left/right Bottom
0        auto      0

http://www.w3schools.com/css/css_margin.asp 

Then look at your list items, set to display inline

http://www.w3schools.com/css/css_list.asp

 

 

[angieatc]

It is still not working. There is something going on with it even registering the widget because it is not even taking the background color of black. Plus I cannot get the footer (where the credits are) to line up correctly either.

 

---

My design site, Hill Springs Designs

[Author]

Posts