[SOLVED] How to change position of a header module?

[Urbanfarmer]

Hi......I've made room for a background header image I want to use. Now I need to lower the brown, full-width bar, including the nav links in it (Home, iPods, Accs). I'm not seeing any css that would let me do that. Does this require writing some new css within this html?

 

I also want to lower the search block so it is on top of the brown bar.

 

Any tips greatly appreciated.

 

 

<!-- /Block user information module HEADER -->
 
 <!-- Menu -->
 <div class="sf-contener clearfix">
  <ul class="sf-menu clearfix">
   <li ><a href="http://presta.theurbanfarm.com/index.php">Home</a><ul><li ><a href="http://presta.theurbanfarm.com/index.php?id_category=3&controller=category">iPods</a></li><li ><a href="http://presta.theurbanfarm.com/index.php?id_category=4&controller=category">Accessories</a></li>

[vekia]

in this case you have to use css styles

 

somewhere in global.css file use:

.sf-contener {
margin-top:150px!important;
}

you will need to change also background repeat param, because now your background is repeated

 

[Urbanfarmer]

Thanks for the invaluable help. I did it. So the term to designate this field is .sf-contener

 

What is the term for the search field? I see  div id="search_block_top"  in the source code, but I don't see the css term in global css.

 

I assume the application will be similar to the sf, except the first term must be different.

 

for example:   search_block_top { margin-top:150px!important; }

 

I want to lower the search block right on top of the brown field. Am I on the right track about this?

 

And then later I want to lower the Cart block too and remove the lefthand logo.

[vekia]

you have to use code like:

#search_block_top { margin-top:150px!important; }

or just edit:

#search_block_top #search_query_top {
padding: 0 5px;
height: 23px;
width: 300px;
border: 1px solid #666;
border-right: 0 !important;
color: #666;
background: url(img/bg_search_input.png) repeat-x 0 0 #fff;
float: left;
}

it's a part of this: http://presta.theurbanfarm.com/modules/blocksearch/blocksearch.css file

[Urbanfarmer]

I clicked the link and that is exactly what I've been looking for. What folder is that in? I can't find a file called blocksearch.css.

[Urbanfarmer]

Found it. I must have passed over it a hundred times. Now let me see what I can do. Thanks again, Vekia.

[Urbanfarmer]

Well, I thought I could do the same with blockcart.css, but I'm not getting any response at all from any of the parameters. What am I missing?.......

[vekia]

hard refresh (ctrl+f5) your website or clear browser cache

[Urbanfarmer]

I figured out what I was doing wrong, so I have response from the cart now. However, the problem I'm having is when I try to relocate the top cart downward, it pushes the sf.contener and everything else down also.

 

I'm using Firebug to try many different fixes, but still can't get the cart to move down independently. I want to put the cart field on top of the sf.contener, while keeping the sf. right on the bottom edge of the header img.

 

The sf and search box moved independently. The cart doesn't. Why is that, and how do I get around that? I tried z-index:1 among other changes. No go. Is this a position relative or fixed issue?

 

Appreciate the help. I'm starting to enjoy this.

[vekia]

sorry but don't understand now.

what is sf.contener ? i can't find this class / id in your website

can you create some image what you expect? then i will prepare code

[Urbanfarmer]

in this case you have to use css styles

 

somewhere in global.css file use:

.sf-contener {
margin-top:150px!important;
}

you will need to change also background repeat param, because now your background is repeated

 

 

 

You gave me this code which worked to re-position the brown bar. If you look at the site now you will see that I have the sf.contener and the search box where I want them. I want to get the cart box off the image header by dropping the white cart box straight down on top of the brown bar, like the search box, and I want the Welcome/login below the brown bar in the white space. I have been using blockuserinfo.css to move the cart block, but when I move it down, it pushes the whole page down, including the brown bar.

[Urbanfarmer]

Here is what I'm trying to achieve.

[Urbanfarmer]

Mark as solved. I was able to enter (position: fixed) and then I was able to move the top cart where I wanted it without anything else moving. It looks ok.

 

Thanks for the help. Now I've got another question on another post.

[vekia]

hello

 

thank you for information that your problem is solved now

im going to mark it as [solved] exactly as you suggested