No replies
jahays100
Offline
newbie
Last seen: 10 years 7 weeks ago
Timezone: GMT+2
Joined: 2010-01-21
Posts: 3
Points: 5

Hi.

I'm a CSS beginner (US citizen living and working as a freelancer in Berlin Germany--Guten Tag) and am looking for some help with some spacing between buttons. The buttons I'm having trouble with are the horizontal buttons under the large ZIELE (Goal in English) button in the center of the website at http://www.xleft.com. I'm using Wordpress as my CMS and trying to make the site work as a liquid layout.

My main issue is when the top 4 buttons (Rucken & Nacken, Muskel, Abnehmen, and Wohlbefinden) are "on/clicked/active/current" the rest of the buttons move down or over to allow for the extra space that is added because of the border outline. If I remove the border outline it works fine but my client wants the outline. I've tried tweaking the margins, padding and width and continue to have problems.

The other issue is that I can't get all the buttons to align correctly under the ZIELE button from end to end. I'm sure this has something to do with the Liquid part of my layout.

Here is my CSS code. I included the code for the main body and large ZIELE button just in case.

body {
margin:0;
padding:3%;
border:0;
width:90%;
background:#3e3732;
min-width:600px;
font-size:12px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
}
 
.topmenu_title	/* Button Ziele (Goal in English) */
{
   font: bold 16px Verdana, Arial, Helvetica, Sans-Serif;
   text-align: center;
   color:#c7c2bc;
   width:96.7%;					
   margin: 5px auto 0 auto;
   padding: 7px 5px 7px 9px;
   background-color:#3e3732;
   border: 1px solid #c7c2bc; 
}
 
ul.topmenu_buttons {  /* Buttons Rucken & Nacken (Back & Neck in English), etc. */
width: 99.5%;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
 
ul.topmenu_buttons li
{
font: bold 16px Verdana, Arial, Helvetica, Sans-Serif;
text-align: center;
float: left;
color:#3e3732;
width:19%;
margin: 4px 4px 0 1px;
padding: 7px 1px 7px 0;
background-color:#c7c2bc;
border: none;
display: inline;
overflow: hidden;
white-space:nowrap;
}

Here is the HTML for the buttons:

<div class="topmenu_title"><a href="http://www.xleft.com/ziele" title="Ziele">Ziele</a></div>
<ul class="topmenu_buttons"><?php wp_list_pages('child_of=27&title_li=0&sort_column=menu_order'); ?>
</ul>

Any help would be appreciated. I'm at my wits end.
jahays100