Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   [SOLVED] CSS Spacing (http://forum.bytesforall.com/showthread.php?t=12676)

eric41 Feb 7, 2011 03:49 PM

[SOLVED] CSS Spacing
 
Hi all. Using Atahualpa 3.4.6 and WP 3.0.5 (Stable), I think it is.

I'm trying to place a CSS Sprite Rollover Menu over a background image...kind of practicing for the real project. I have 7 bottuns & links in the menu, but as you can see here, the last few are hitting a wall to the right and getting pushed down, but I can't figure out what's causing the wall. I've tried fiddling around with pretty much every line in the code but no fix yet.

Can one of you guys peak at this code and see if you can spot the fix? Thanks!

First, here's the unordered list in a DIV, which I placed at ATO>HTML&CSS Inserts>Body Top:


HTML Code:

<div id="centeredmenu" style="margin: 370px; margin-left: 180px;">     
  <ul>
      <li id="button1"><a href="#">Home</a></li>
      <li id="button2"><a href="#" class="active">Firm Overview</a></li>
      <li id="button3"><a href="#">Attorney Profiles</a></li>
      <li id="button4"><a href="#">Client Services</a></li>
      <li id="button5"><a href="#">Testimonials</a></li>
      <li id="button6"><a href="#">Contact Us</a></li>
      <li id="button7"><a href="#">Videos</a></li>
  </ul>
</div>


and then here's the CSS, which I placed at ATO>HTML&CSS Inserts>CSS


Code:

#centeredmenu {
  float:left;
 
  background:transparent;
 
  overflow:hidden;
 
}
#centeredmenu ul {
  clear:left;
  float:left;
  list-style:none;
  margin:0;
  padding: 0;
  position:relative;
  left:50%;
  text-align:center;
}
#centeredmenu ul li {
  display:block;
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  right:50%;
}
#centeredmenu ul li 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 35px;
  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 50px;
  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 50px;
  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 50px;
  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 50px;
  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/1-Hover-On.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:url(http://sayitwithgreen.com/wp-content/uploads/2011/02/2-Hover-On.jpg);
  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:url(http://sayitwithgreen.com/wp-content/uploads/2011/02/1-Hover-On.jpg);
  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:url(http://sayitwithgreen.com/wp-content/uploads/2011/02/1-Hover-On.jpg);
  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:url(http://sayitwithgreen.com/wp-content/uploads/2011/02/1-Hover-On.jpg);
  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:url(http://sayitwithgreen.com/wp-content/uploads/2011/02/1-Hover-On.jpg);
  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:url(http://sayitwithgreen.com/wp-content/uploads/2011/02/1-Hover-On.jpg);
  color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
  color:#fff;
  background:transparent;
  font-weight:bold;
}


runnerb0y Feb 7, 2011 03:58 PM

I'm not sure I totally understand the question, but here goes...

It looks like you've got a huge margin (370px) being established on the top, bottom and right. When playing around with the margin settings (specifically the right margin), I *think* I'm getting the results you're looking for.

eric41 Feb 7, 2011 04:08 PM

Ok, I'm feeling a little dumb. Thank you so much, runner! I was paying more attention to the positioning in the CSS when the answer was pretty simple, thanks to you. That 2nd set of eyes comes up with many-a-cure, huh? I just threw in an adjusted margin-right, and walaa!!

Thanks very much again!

Mods, can I get a [solved]?

runnerb0y Feb 7, 2011 04:13 PM

eric41,

Glad to help. You're so right that sometimes we can stare at the code for hours and sometimes days and not see it.

You can "solve" the thread yourself by using the Thread Tools dropdown (I think that's where that option lives).

Best of luck!

~runnerb0y


All times are GMT -6. The time now is 08:16 AM.

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