Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » Forum Usage » Forum How-To »

[SOLVED] Background Image Pushed to Left


 
Prev Previous Post   Next Post Next
  #1  
Old Feb 8, 2011, 12:21 PM
eric41's Avatar
eric41
 
51 posts · Aug 2010
Nieder Sachsen, Germany
[SOLVED] Background Image Pushed to Left

Hey guys. Using Atahualpa 3.4.6 and WP 3.0.5

I got some great help here yesterday from runnerboy, and now I have another problem. I'm pretty new to CSS, and I'm sure that's easy to see.

I've put some code at ATO>HTML&CSS Inserts to create a CSS Sprite Rollover Menu. The main page image is a background image added via the "Custom Post Background" plugin. So I'm basically superimposing this Sprite Menu over the background image.

The background image is being pushed way to the left of the footer in FIREFOX, as you can see hereif you scroll the page horizontally. In IE8, space is being created vertically between the background image and the footer.

Here is the DIV part of the Menu:

HTML Code:
<div id="centeredmenu" style="margin-top: 370px; margin-left: 180px;">      
   <ul>
      <li id="button1"><a href="#" style="font-family: Nyala; font-weight: normal; font-size: 1.2em; ">HOME</a></li>
      <li id="button2"><a href="#" style="font-family: Nyala; font-weight: normal; font-size: 1.2em; " class="active">FIRM OVERVIEW</a></li>
      <li id="button3"><a href="#" style="font-family: Nyala; font-weight: normal; font-size: 1.2em; ">ATTORNEY PROFILES</a></li>
      <li id="button4"><a href="#" style="font-family: Nyala; font-weight: normal; font-size: 1.2em;">CLIENT SERVICES</a></li>
      <li id="button5"><a href="#" style="font-family: Nyala; font-weight: normal; font-size: 1.2em;">TESTIMONIALS</a></li>
      <li id="button6"><a href="#" style="font-family: Nyala; font-weight: normal; font-size: 1.2em;">CONTACT US</a></li>
      <li id="button7"><a href="#" style="font-family: Nyala; font-weight: normal; font-size: 1.2em;">VIDEOS</a></li>
   </ul>
</div>
And here is the CSS:

Code:
#centeredmenu {
   float:left;
   background:transparent;
   overflow:hidden;
   position:relative;
}





#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding: 0;
   position:relative;
   left:50%;
   text-align:center;
   background:transparent;
}



#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}




#centeredmenu ul li#button1 a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:transparent;
   color:#fff;
   text-decoration:none;
   line-height:1.3em;
}



#centeredmenu ul li#button2 a {
   display:block;
   margin:0 0 0 24px;
   padding:3px 10px;
   background:transparent;
   color:#fff;
   text-decoration:none;
   line-height:1.3em;
}



#centeredmenu ul li#button3 a {
   display:block;
   margin:0 0 0 35px;
   padding:3px 10px;
   background:transparent;
   color:#fff;
   text-decoration:none;
   line-height:1.3em;
}



#centeredmenu ul li#button4 a {
   display:block;
   margin:0 0 0 50px;
   padding:3px 10px;
   background:transparent;
   color:#fff;
   text-decoration:none;
   line-height:1.3em;
}



#centeredmenu ul li#button5 a {
   display:block;
   margin:0 0 0 33px;
   padding:3px 10px;
   background:transparent;
   color:#fff;
   text-decoration:none;
   line-height:1.3em;
}



#centeredmenu ul li#button6 a {
   display:block;
   margin:0 0 0 30px;
   padding:3px 10px;
   background:transparent;
   color:#fff;
   text-decoration:none;
   line-height:1.3em;
}



#centeredmenu ul li#button7 a {
   display:block;
   margin:0 0 0 30px;
   padding:3px 10px;
   background:transparent;
   color:#fff;
   text-decoration:none;
   line-height:1.3em;
}








#centeredmenu ul li#button1 a:hover {
   background:url(http://sayitwithgreen.com/wp-content/uploads/2011/02/homerollover2.jpg);
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:transparent;
   font-weight:bold;
}






#centeredmenu ul li#button2 a:hover {
   background:transparent;
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}





#centeredmenu ul li#button3 a:hover {
   background:transparent;
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:transparent;
   font-weight:bold;
}





#centeredmenu ul li#button4 a:hover {
   background:transparent;
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:transparent;
   font-weight:bold;
}




#centeredmenu ul li#button5 a:hover {
   background:transparent;
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:transparent;
   font-weight:bold;
}



#centeredmenu ul li#button6 a:hover {
   background:transparent;
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:transparent;
   font-weight:bold;
}



#centeredmenu ul li#button7 a:hover {
   background:transparent;
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:transparent;
   font-weight:bold;
}

Thanks so much for any help!
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] removing %cat pushed content up joe hark Header configuration & styling 1 Aug 25, 2010 06:40 AM
Background image in left sidebar camiana Sidebars & Widgets 10 Jun 12, 2010 07:12 AM
background image over-sized - Full Page Background Image prokopino Atahualpa 3 Wordpress theme 2 Mar 30, 2010 04:42 AM
[SOLVED] How to set widgets background different in left and right sidebars? braids Sidebars & Widgets 3 Dec 12, 2009 08:34 PM
[SOLVED] Background left and right of WordPress Ber|Art Atahualpa 3 Wordpress theme 1 Oct 23, 2009 08:32 AM


All times are GMT -6. The time now is 02:53 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.