How to re-arrangement header

[carol]

I ´m struggling with my header.
I would like to have a small logo on the top left of my site and next to it, on the top right, I would like to have the links: Home l Enter l Shipping l Contact l Info
I managed to get a small logo on the left. However I get all sorts of errors when I try to include the information links in the header and I can´t align links on the same row as my logo.

In my older cart (1.2.6) I added some code in tpl_header but this doesn´t work in 1.3.0.2 .

Any advice how to include the information and more information links (of the sidebox) in the header and how to align these in the same row as my logo?

[kuroi]

As you want to mix navTabs and information links, here's an outline solution that keeps it manageable:

1. Use the internal URL feature of EZ-Pages to define a list of all the links that you want in your header.

2. Comment out the navTabs links in tpl_header to avoid duplication.

3. Give your headerWrapper position:relative in your stylesheet

4. Give your navEZPagesTop div position:absolute and top and right values that position it where you want.

[carol]

Thanks! I´ve got my links with EZpages on the topright now. However I still can´t get my links and logo aligned in one single row. Could you give some hints what I configured wrong in these classes:

#logoWrapper {
float: left;
position: relative;
}

#headerWrapper {
margin: 0em;
padding: 0em;
position: relative;
float: right;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
position: relative;
float: right;
margin: 0em;
border-top: 1px solid #cccccc;
background-color: #ffffff;
font-weight: bold;
color: #000000;
height: 1%;
width: 75%;
}

#navEZPagesTop {
position: relative;
background-color: #ffffff;
float: right;
}

With a absolute position it moves out of the body page.

[kuroi]

Your browser is probably a little confused as you can't both float and position elements. I suggested positioning, with absolute values as one way of achieving what you want, floating with margins and padding is equally valid. Just one method at a time though

Do you have a link so that we can see where you have got to, it makes giving advice much less theoretical and easier?

[carol]

Here is a link:shop preview

Currently, only the links need to move upwards to position them next to the logo

But I think I ve been a little too enthousiastic with float elements in CSS, because alignment of some other text parts have also changed....

Hope you could help me some more. Thanks.

[kobra]

You might begin with editing your stylesheet.css file; find the code:

#headerWrapper {
	margin: 0em;
	padding: 0em;
	position: relative;
	float: right;
	}

and remove the float: right line.

Try this and see what else you might wnat to rearrange.

[kuroi]

I've had a little play and managed to get most of your page back into alignment, mostly by taking out floats - but before getting into too much detail about that - have you edited your tpl_header file? If so, I recommend moving the <div id="headerWrapper"> code back up to just below

<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

This is because the headerWrapper div is a useful element to position your links within, but currently it starts until below your logo. Although we could use negative positioning to move your links outside of it, this wouldn't be good practise.

Also, are you aiming to align your links with the top, middle or bottom of the logo?

[carol]

I had made some changes in tpl_header to add the additional headerimage and to move the logo on top of the page. I thought that maybe the headerwrapper prevented that the logo and links didn´t aligned in one row. Thus not.

I put the headerWrapper on top again. I would like to align the links on the bottom of the logo.

[kuroi]

I see the changes that you have made. You shouldn't have two elements with the same ID, e.g. logo, on the same page; this is also likely to confuse browsers.

The second logo image would be better handled as a background image positoned within headerWapper. But before doing anything about that, I recommend the following:

1. remove the floats from headerWrapper, logoWrapper and navEZPagesTop

2. change navEZPagesTop to position:absolute

3. add top:17px and right:0px to navEZPagesTop

That will hopefully bring everything back to something approximating what you intended. Though you will still have problems with the two sets of links in your header if your users decide to increase the text size in their browsers.

Let us know how it goes and if you want further assistance.