Banner width - Default theme,, Help please...

[TGF_Ian]

Hi all..

Before anyone shouts at me, i have searched as much as I can to try and find how to resolve this, but I have not been able to find a solution anywhere.

I have a forum and TP at www.tg-force.co.uk and I am trying to get the banner to take up 100% width of the top space.

The best I can manage is as shown below:



No matter what size I make the banner, it will always take up the same amount of space, and I can not see what I need to adjust, to get the banner to totally fill this area, as shown below by the highlighted area:



Please can you advise, basically, I want the banner area to be taken up totally with the banner,,,,

Thanks

Ian.



Below is a copy of the style.css file.

:

/* Normal, standard links. */
a:link, a:visited
{
   color: #005177;
   background-color: transparent;
   text-decoration: none;
}
a:hover
{
   color: #cc3333;
   background-color: transparent;
   text-decoration: none;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
   color: #000000;
   background-color: transparent;
   text-decoration: none;
}
a.nav:hover
{
   font-weight: bold;
   color: #cc3333;
   background-color: transparent;
   text-decoration: underline;
}

/* Tables should show empty cells too. */
table
{
   empty-cells: show;
}

/* By default (td, body..) use Verdana in black. */
body, td, th
{
   color: #000000;
   font-size: small;
   font-family: verdana, sans-serif;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea
{
   font-size: 9pt;
   color: #000000;
   font-family: verdana, sans-serif;
   background-color: #afc6db;
}

/* Checkboxes shouldn't have a background color. */
input.check
{
   background-color: transparent;
}

/* Selects are a bit smaller, because it makes them look even better . */
select
{
   font-size: 8pt;
   font-weight: normal;
   color: #000000;
   font-family: verdana, sans-serif;
   background-color: #afc6db;
}

/* Standard horizontal rule.. */
hr
{
   color: #6394bd;
   background-color: transparent;
}
/* A more colorful hr.. */
.hrcolor
{
   height: 1px;
   border: 0;
   color: #6394bd;
   background-color: #6394bd;
}

/* A quote, perhaps from another post. */
.quote
{
   color: #000000;
   background-color: #dee7ef;
   border: 1px solid black;
   margin: 1px;
   padding: 1px;
   font-size: x-small;
}

/* A code block - maybe even PHP . */
.code
{
   color: #000000;
   background-color: #cccccc;
   border: 1px solid black;
   margin: 1px;
   padding: 1px;
   font-size: x-small;
   line-height: 1.3em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
   color: #000000;
   text-decoration: none;
   font-style: normal;
   font-weight: bold;
   font-size: x-small;
   line-height: 1.2em;
}

/* Generally, those [?] icons. */
.help
{
   cursor: help;
   background-color: transparent;
}

/* /me uses this a lot. */
.meaction
{
   color: red;
   background-color: transparent;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
   width: 100%;
}

/* Highlighted text - such as search results. */
.highlight
{
   background-color: yellow;
   font-weight: bold;
   color: black;
}

/* Alternating backgrounds... */
.windowbg
{
   color: #000000;
   background-color: #afc6db;
}
.windowbg2
{
   color: #000000;
   background-color: #f8f8f8;
}

/* Titles - such as table headers. */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg a:link, .titlebg a:visited, .titlebg2, tr.titlebg2 th, tr.titlebg2 td, .titlebg2 a:link, .titlebg2 a:visited
{
   font-weight: bold;
   font-style: normal;
   color: #ffffff;
   background-color: #6e94b7;
}
.titlebg a:hover, .titlebg2 a:hover
{
   color: #ffffff;
   text-decoration: underline;
}

/* The category headers, page indexes, and such things. */
.catbg, .catbg3
{
   font-weight: bold;
   background-color: #afc6db;
   background-image: url(images/catbg.gif);
   color: #000000;
}

/* The borders around things. */
.bordercolor
{
   background-color: #6394bd;
}
.tborder
{
   border: 1px solid #6394bd;
}

/* Default font sizes. */
.smalltext
{
   font-size: x-small;
}
.normaltext
{
   font-size: small;
}
.largetext
{
   font-size: large;
}
/* No image should have a border when linked */
a img{
   border: 0;
}

/* The AJAX notifier */
#ajax_in_progress
{
   background: #32CD32;
   color: white;
   text-align: center;
   font-weight: bold;
   font-size: 18pt;
   padding: 3px;
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
}

[G6Cad]

You cant have the image take up the whole space if it's just one image, you will have to spli the image in atleast 3 parts so the left and right side of it can repete itself over the page and suit all browser widths.
On SMF forum you have the graphic forum there to guide you, just th other day i was reading a great how to with code and photoshop guide. I didnt save the link so i caant post it, but do a search there in that board and you will find it.
But just have one fixed image will not work with what you want to see.

[TGF_Ian]

Thanks..

This is a help,, But I have searched the SMF and I am not able to find the guide that you are refering to. Any thing else that could help me ??

[G6Cad]

Yes, the search function on various search strings like
"full width banner" "full width logo" "header logo" and so on. on SMF and i think there is a few topics on this site to for diffrent themes, but the task is the same.
And PLEASE do NOT PM for support.....