1.4 to 1.5 More Theme questions

Hi everyone again,

I have put all my CSS in that one new CSS file and it looks alot better however I still have a couple of questions.

1: I used to have a splitter image between each menu item on the left bar menu (Categories/Manufactures etc) But its completly gone now and I can't find how to fix it...

2: Is there and easy way to get the main menu starting with 'HOME' to start where the 'Search' box is and not centered and get the Search box over the right hand side?


Thanks in advance for any help and advice.

Regards,
Max

1: i guess you probably had it in twocolumn.master

2: try this :

look in stylesheet for

.headermenu
{
  color: #FFFFFF;
  background: #702829;
  padding: 8px 5px 9px 5px;
  text-align: center;
  height: 100%;
  vertical-align: middle;
  letter-spacing: 1px;
  margin: 0 5px 0 5px;
}
and change the text in bold to left

then find
.searchbox
and set
float: right;


you'll probably have to move the searchbox <div></div>  to after </ul>

Thanks for the info managed to do it all but looks wrong still. I like the search box being over the right that looks good but the header menu I would like to be centered not over the left. Is their a way I can do that?


I have been playing around with CSS for an hour now and I can't figure out how to get those menu items in the middle!!!!!!!!

max_carpenter wrote:

sorry max, i thought you wanted the menu items not centered ?  i'm not 100% sure what you are after, but you could try pushing the items to where you want if the left,right,center   settings don't get you what you want

try going back to   .headermenu

set   text-align: right;

and try editing these settings to push the menu items away from the searchbox

  padding: 8px 5px 9px 5px;

  margin: 0 5px 0 5px;

(the order these 4 values relate is like this     top - right - bottom - left )

Hi thanks for the help but its actually a different part that does it. Here is the code I had to change:

.headermenu
{
  background:url(images/menubg.gif) repeat-x 0 0;
  width:1010px;
  height:35px;
  float:right; - THIS WAS ALREADY 'RIGHT' AND MY TEXT WAS ALIGNED LEFT STILL
  margin:0px 0px 0px 0px;
  }
  
.headermenu ul {margin:0; padding:0px 35px 0px 0px; float:right} - THIS IS WHERE I ADDED 'Float:right' TO GET THE TEXT RIGHT THEN I ADDED 'padding' TO OFF CENTER THE TEXT TO THE LEFT
.headermenu li, .headermenu li a{ font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; float:left; list-style-type:none; color:#fff;height:15px;padding:0px 5px 0px 0px} - I ADDED THE '5px' HERE TO GIVE A BIT MORE SPACING BETWEEN EACH ITEM

Regards,
Max

Hi, i'm not a web graphics but with "float" you don't align text but the box.
From Css property
Definition and Usage

The float property specifies whether or not a box (an element) should float.

Note: Absolutely positioned elements ignores the float property!

for text you must use text-align.

text-align    Aligns the text in an element    left,right,center,justify

Well I am not very good at CSS but it all looks perfect at the moment so don't really want to touch it unless its not working :-)