5 Days Fixed Width and Center

[mike errico]

How do I get 5 Days to center and be a fixed width? Im new w/ tpl files. I tried changing the header.tpl from <div class="page"> to <div align="center">, but the search box and logo did not center with the rest of the template..

I also tried changing the width in the css file from 100% to 800px. No luck...

Any advice?

[Tilek E.]

Hi, mike errico!

In order to move the logo you should:

1) Open the header.tpl file.

* Find the following code:

	<div class="header">
		&nbsp;
	</div>

* and replace it with:

	<div class="header">
		<div class="logo">
			<a href="/"><img src="{$img}logo.gif" alt="" title="" /></a>
		</div>
	</div>

* delete the next <div class="logo">...</div> because you have already paste it into the header div.

2) Open the style.css file.

* Find the following strings:

div.logo
{
	position: absolute;
	top: 40px;
	left: 3px;
}

* change it to:

div.logo
{
	position: relative;
	top: 40px;
	left: 3px;
}

Now the logo must be in the proper place.

Move the search box changing the following text in style.css:

div.search-form
{
	position: absolute;
	top: 128px;
	left: 10px;
	line-height: 30px;
}

to:

div.search-form
{
	position: relative;
	top: 8px;
	left: 10px;
	line-height: 30px;
}

If you have some problems with these modifications do not hesitate to ask.

[mike errico]

That worked thanks ..

The only thing is that the date and language divs need to be fixed. I tried changing the div.date in the css to relative, didnt work. Something in header.tpl im guessing?

[Tilek E.]

I tried changing the div.date in the css to relative, didnt work. Something in header.tpl im guessing?

You can leave header.tpl as it is. Just paste the following code to style.css instead of date div and lang-switch div:

div.date
{
	position: absolute;
	width: 700px;
	text-align: right;
	top: 22px;
	color: #000;
	line-height: 15px;
	font-size: 0.85em;
	font-weight: normal;
	padding: 0px;
}

div.lang-switch
{
	position: absolute;
	margin-left: 184px;
	top: 22px;
	line-height: 15px;
	font-size: 0.85em;
	font-weight: normal;
	padding: 0;
}

You can see that position: absolute requires top and left or right attributes. So if we write only one top attribute a div will automatically align with the ancestor div. I've tested this modification in different browsers. It works well.