Header Image Placement

[wildrose]

Hi..

I love Prestashop and Im struggling a bit with the header customization as I dont know any css, so Im really hoping someone can give me detailed instructions on how to fix the following...

1. Im trying to make the header image in the pic a header, but when I put it in as a logo (as in the pic below), it doesnt go right to the top. When I use SotEW's Adds and place it as a header, all the top blocks (search, currency etc) move down to below the header. What can I do!?

2. Is there also any way for me to have this header fluid width so that it stretch 100% across the screen no matter what resolution it is viewed at? Its just the header I want stretched and not the rest of the site...

Hopefully someone can help me out here?

Thanks,
Rose

[wildrose]

Please....Anyone?

Any response will be appreciated...

Rose

[jhnstcks]

Do you mean you want the brown bar at the very top of the page with everything else to be underneath?

If you could supply a link to the site you ned help with it will make it easier to help.

[wildrose]

Hi jhnstcks, thanks for replying...

The website is only hosted local server at the moment so I cant give you the address, but I have attached the pic of the header I am trying to put in.
Ideally, I would like the top of the header to be at the top of the page, with the currency, contact, site map etc to be in their original position at the top also, with the header as a background.

Is this possible?

Rose

[king]

you know what to do, use firefox and download "inspect element" (one of the Add on's) then when it is enabled you can go to your shop page and right click on the header right at the bottom you see inspection element > click that and you'll find out the rest. then you can open your header template as well as the globel.css using dreamweaver and change thnigs. i hope it helps

I am stuck in a part where the logo doesn't appear with the correct resolution, it is lower than that i dont know to sort this out any one has the solution please share it.

[wildrose]

Thanks for the Firefox tip, King, I will try it out, however with the gracious help of jhnstcks I have fixed my header margin problem.
It was in Global.css on line 190, the top margin was set to 1.5cm, so I deleted that and all is well.
Sorry, I cant help you with your query, hopefully someone here will respond to you.

Regards,
Rose

[hieloiceberg]

Hi Rose I have try this maybe it will help you to extend your header 100% side to side

On the global.css

body {
   background-color: white;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align:center;
   background: url(../img/your_image.jpg) repeat-x    <---new background image
}

#header {
   float: left;
   height:147px;   <---adjust height to your image
   width: 71%;
   text-align: right;
}

[wildrose]

hieloiceberg, you are a legand!

Thank you very much, I now have it positioned perfectly


Rose

[hieloiceberg]

Great wildrose!! maybe some day you can show us your work :-)

[Paul C]

On the subject of FireFox and fiddling with themes you really, really should download FireBug. You can then browse the source and css (with line numbers for the appropriate entries) and even test out css tweaks "live" on the page

Paul

[wildrose]

Paul - yes, Ive just discovered Firebug and it does make process a whole lot quicker (although Im yet to find the undo function!)...Thanks for the tip

Hieloiceberg - My site is a few months from being published as it is still in the preliminary stage. I have yet to write the content (a massive amount of articles) and also create the product (mp3s). But as soon as it is live, it will be definately be part of my signature!
I love what you have done with your demo site btw, I esp like the cloud effects in the header..very soothing. I imagine something like that done with water would be beautiful as well!

Rose

[nikitas]

i agree with firebug although now google chrome comes with its own firebug at installation ! cool and timesaver tool 2 !