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 » WordPress Themes » Atahualpa 3 Wordpress theme »

[SOLVED] CSS Spacing


  #1  
Old Feb 7, 2011, 03: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, 03: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, 04: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, 04: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 10:36 AM
Missing CSS in style.css HollyKNY New Versions, & Updating 3 Oct 29, 2010 04:50 PM
Spacing help... cep55 Center area post/pages 6 Sep 13, 2010 08:51 PM
Line spacing blp koeln New Versions, & Updating 4 Jul 19, 2009 04:30 PM


All times are GMT -6. The time now is 03:37 AM.


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