Click to See Complete Forum and Search --> : CSS modification question


Taurus
11-06-2008, 05:14 PM
question about CSS modifications: I use default joomla template but want expand header image across the top of the entire template.
default template example (http://www.ppukltd.com/):

I find some examples for this and modified css, so header now is expanded (http://sirius.byethost2.com/):

I am not quite sure about few details, so I just wanna make sure this was done correctly.

Part of original CSS:

#header_outer {
text-align: left;
border: 0px;
margin: 0px;
}

#header {
float: left;
padding: 0px;
margin-right: 2px;
width: 635px;
height: 150px;
background: url(../images/header_short.jpg) no-repeat;
}

#top_outer{
float: left;
width: 165px;
}

#top_inner {
border: 1px solid #cccccc;
padding: 2px;
height: 144px !important;
height: 150px;
overflow: hidden;
float: none !important;
float: left;
}

#left_outer {
float: left;
margin-top: 2px;
width: 165px;
}

#left_inner {
border: 1px solid #cccccc;
padding: 2px;
float: none !important;
float: left;
}

#content_outer {
padding: 0px;
margin-top: 0px;
margin-left: 2px;
/** border: 1px solid #cccccc; **/
float: left;
width: 635px;
}

#content_inner{
float: none !important;
float: left;
padding: 0;
padding-top: 2px;
margin: 0;
}

modified CSS I use:

#header_outer {
border: 0px;
padding: 0px;
}

#header {
width: 802px;
height: 127px;
background: url(../images/header.jpg) no-repeat;
}

#top_outer{
float: left;
width: 0px;
}

#top_inner {
border: 1px solid #cccccc;
padding: 2px;
height: 0px;
height: 0px;
display: none;
overflow: hidden;
float: none !important;
float: left;
}

#left_outer {
float: left;
margin-top: 2px;
width: 165px;
}

#left_inner {
border: 1px solid #cccccc;
padding: 2px;
float: none !important;
float: left;
}

#content_outer {
padding: 0px;
margin-top: 0px;
margin-left: 2px;
/** border: 1px solid #cccccc; **/
float: left;
width: 635px;
}

#content_inner{
float: none !important;
float: left;
padding: 0;
padding-top: 2px;
margin: 0;
}

what is correct image width, 800 or 802px? I need padding 2px between image and outline border same as on original layout.
Do the header image need 'float: left;' ?

* #header_outer: shoud be used 'text-align: left;' ?

#header_outer {
text-align: left;
border: 0px;
margin: 0px;
}

* #top_inner: does this values should be set to zero?

height: 0px;
height: 0px;

I saw some mods where this part is not changed (http://www.nfofo.net/).
Which way is correct?