Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

[SOLVED] Background Image Pushed to Left


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #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!
  #2  
Old Feb 8, 2011, 01:13 PM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
1) Why are you putting 'body' styles in your posts"
2) review your sidebar code
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Feb 8, 2011, 01:24 PM
eric41's Avatar
eric41
 
51 posts · Aug 2010
Nieder Sachsen, Germany
Juggledad, I included the code in my original post because there are some positioning attributes there that I thought might be causing the problem, such as margins, but as I said, I'm pretty new to all this.

As far as the sidebars, I'm not quite sure what you mean. I actually have the sidebars turned off altogether at this point, with both set to 0px. And the fact that IE8 is showing space below the background image instead of to the side, made me think it's not a sidebar issue.

Could you clarify or be a bit more specific? Thank you!
  #4  
Old Feb 8, 2011, 01:35 PM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
forget the sidebar, my mistake.

Forget your code for the menu.

Why do you have POSTS with <style...> in them? expically a style with a 'body' selector?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Feb 8, 2011, 02:22 PM
eric41's Avatar
eric41
 
51 posts · Aug 2010
Nieder Sachsen, Germany
Well, what is most appropriate to use there to move this menu around on the page and place it precisely where I want it? I thought "style" attributes were ok to use in a div container or general html. Should I be using CSS to position it? And if so, can you tell where in the code I should put it or maybe scribble down a small sample of code that could be used for placing the menu?
  #6  
Old Feb 8, 2011, 05:55 PM
eric41's Avatar
eric41
 
51 posts · Aug 2010
Nieder Sachsen, Germany
Juggledad, thanks as always for your expertise! It seemed you were leading me to the answer without giving me the answer; maybe you were trying to get me to figure it out on my own. I finally got it looking like I want it for the moment.

Here's what I did:

I realized that trying to position the menu with 'style' stuff in the html was making things really tough. That is clearly not the way to go. So, I took that junk out, changed the "position:relative" in the CSS block that styles the overall menu to "position:absolute" and then added margin-top and margin-left attributes to the CSS blocks that control the individual button links, and that seemed to do it, not to mention gave me complete flexibility with moving the menu one button at a time until I got them exactly where I wanted them.

I don't know if that makes any sense, and I'm not even certain it's THE best way to go about it, but so far, it seems to have to done the trick!

Thanks for your suggestions, Juggledad.

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 08:41 AM.


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