X-Cart forums

[balinor]

Would need to see how you have your header coded.

[Cyber Matrix]

I figured it out after I kept playing with it. But here is the code and if any suggestions I'm all ears. I put the extra closing div tags in the rectangle_bottom.tpl if that is not where they go where would they go?

<div class="Headerbackgd">
<div class="HeadLogo"> <a href="{$http_location}/"><img src="{$ImagesDir}/logo.jpg" width="436" height="98" alt="{$smarty.capture.title|replace:"\n":""}"/></a></div>
    <div class="HeadRightBox">{if $usertype eq "C"}
{include file="customer/top_menu.tpl"}
{/if}
</div>
<div class="HeadLine">{if $usertype eq "C"}
{ include file="customer/search.tpl" }
{/if}
</div>

[balinor]

You need to close the <div> tag right in that file unless you want the headerbackgd class to be behind the whole site Also, if you are using float: you need to make sure to clear them.

[happyscott]

I tried that code for the head.tpl

Got the first div no problem with just my logo sat in there.

Problem I have is my customer/search.tpl and my customer/top_menu.tpl currently sit in the same line.

That is horizontally the search is on the left and the menu in the middle.

Can only get it to work in a div if one sits above the other.

Any ideas on that one please?

[balinor]

You need to use the css property "float" to get things to sit next to each other horizontally, or they will always stack.

[happyscott]

Thanks for that, looked up the float css stuff and got it to work, though I have the HeadRight on the left and the search box on the right.

One thing though, the div with the search box on the right is not as good as it could be, it has a 1 px gap at the bottom and a 2 px gap to the right, I have played with the padding and margins/borders, but cannot find why it is formatting like that.

I put another Div in to push the rest of the page back down as it all squashed together when I put the new divs in !

Here is what I have, note a few probably not needed extras in the css !

 
.HeadLine {
float:left;
width:44%;
padding: 3px;
margin:0;
}
.HeadRightBox
{
float:left;
width:55%;
padding: 1px;
margin:0;
BACKGROUND-COLOR: #ADDFEF;
border-left-width: 0px
MARGIN-RIGHT: 0 px;
BORDER: 0PX;
}
.HeadGapDiv
{
BACKGROUND-COLOR: #E7F3FF;
}

Here is the divs bit:

 
<div class="Headerbackgd">
<div class="HeadLogo"> <a href="{$http_location}/"><img class="logo" src="{$ImagesDir}/logo.jpg" width="800" height="120" alt="{$smarty.capture.title|replace:"\n":""}"/></a></div>
<div class="HeadRightBox">{if $usertype eq "C"}
{include file="customer/top_menu.tpl"}
{/if}
</div>
<div class="HeadLine">{if $usertype eq "C"}
{ include file="customer/search.tpl" }
{/if}
</div></div>
<div class="HeadGapDiv"><p></p></div>  

Really noticing the shop starting to load much quicker now, thanks for all you lots help so far, much appreciated

[happyscott]

ok ignore above code, deosn't work in firefox apparently.

bit stuck now, so put old code back in.

Not easy this css stuff

[Cyber Matrix]

I have mutliple columns layout for the categories and subs on a site with tables and I would like to convert it to css to clean up some of code. I have not been able to figure it out. How do you do it with all css?

[happyscott]

That's the problem, first you have to know css inside out, so options are to buy a template and then modify or really get to know what you're doing.

Problem I have found is that tutorials on the internet are good but they do not account for what we are trying to do and doing it a bit at a time means you have divs conflicting with tables.

The whole object being to get rid of tables but the code is sat in so many sources it's a headache.

Think I am going to buy a template regardless of updating issues it's the easy quick fix.

[Cyber Matrix]

The only css template that I'm aware of is http://www.cart-lab.com/X-Cart-version-41x-CSS-Template-p-113.html for x cart. Are there any others?