Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

[SOLVED] CSS Spacing


  #1  
Old Feb 7, 2011, 04:49 PM
eric41's Avatar
eric41
 
51 posts · Aug 2010
Nieder Sachsen, Germany
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;
}
  #2  
Old Feb 7, 2011, 04:58 PM
runnerb0y
 
67 posts · Nov 2010
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.
  #3  
Old Feb 7, 2011, 05:08 PM
eric41's Avatar
eric41
 
51 posts · Aug 2010
Nieder Sachsen, Germany
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]?
  #4  
Old Feb 7, 2011, 05:13 PM
runnerb0y
 
67 posts · Nov 2010
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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Google Fonts css insert not being recognized with Atahualpa 3.5.3 css douglaswarnold Atahualpa 3 Wordpress theme 2 Nov 29, 2010 11:36 AM
Missing CSS in style.css HollyKNY New Versions, & Updating 3 Oct 29, 2010 05:50 PM
Spacing help... cep55 Center area post/pages 6 Sep 13, 2010 09:51 PM
Line spacing blp koeln New Versions, & Updating 4 Jul 19, 2009 05:30 PM


All times are GMT -6. The time now is 05:47 AM.


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