Ragazzi sto diventando pazzo....

Ho installato STS come motore grafico e sto lavorando sul template freeosc_061.

Devo mettere un banner 1052x300px sopra alla home page, peccato però che è impossibile.

Il banner principale della home page è un jpg di 1052x200px.
Non è proprio un banner perchè fa da cornice ad un altro banner del menu nella home page.

Avevo pensato di ricreare l'immagine 1052x300 e metterci il mio banner sopra ad esso, tanto lo sfondo è completamente nero.
Infatti cosi ho fatto, eh poi mi sono andato a modificare il css, apportando le modifiche all'height di 300px.

Vi posto qui il css:

body { margin: 0px; padding: 0px; background: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify; } div#wrapper1 { position: relative; width: 100%; min-height: 500px; margin: 30px 0px 0px 0px; overflow: auto; } div#wrapper2 { z-index: 3; position: relative; left: 50%; width: 949px; padding: 94px 0px 94px 0px; margin-left: -474px; min-height: 300px; } div#header_wrapper { position: relative; width: 949px; min-height: 79px; background: url(images/footer_header_middle.jpg) top center repeat-y; overflow: auto; } div#header_top { z-index: 3; position: absolute; top: 0px; width: 949px; height: 52px; background: url(images/footer_header_top.jpg) top center no-repeat; } div#header_bottom { z-index: 3; position: absolute; bottom: 0px; width: 949px; height: 26px; background: url(images/footer_header_bottom.jpg) top center no-repeat; } div#menu { z-index: 4; position: relative; width: 949px; padding-top: 28px; color: #ffffff; font-size: 16px; text-align: center; font-weight: bold; } div#menu span { margin: 0px 25px 0px 25px; } div#wrapper3 { z-index: 3; position: relative; width: 966px; padding: 10px 0px 10px 0px; min-height: 300px; overflow: auto; } div#column_left { position: relative; float: left; width: 190px; padding: 0px 0px 10px 0px; min-height: 300px; overflow: hidden; } div#column_middle { position: relative; float: left; width: 526px; min-height: 300px; padding: 10px 20px 10px 20px; overflow: auto; } div#column_right { position: relative; float: left; width: 190px; padding: 0px 0px 10px 0px; min-height: 300px; overflow: hidden; } div#footer_wrapper { position: relative; width: 949px; min-height: 79px; background: url(images/footer_header_middle.jpg) top center repeat-y; overflow: auto; } div#footer_top { z-index: 3; position: absolute; top: 0px; width: 949px; height: 52px; background: url(images/footer_header_top.jpg) top center no-repeat; } div#footer_bottom { z-index: 3; position: absolute; bottom: 0px; width: 949px; height: 26px; background: url(images/footer_header_bottom.jpg) top center no-repeat; } div#footer { z-index: 4; position: relative; width: 919px; padding: 15px; color:; text-align: center; } div#background_middle { z-index: 1; position: absolute; width: 100%; top: 0px; height: 100%; background: url(images/main_middle.jpg) top center repeat-y; } div#background_top { <----banner z-index: 2; position: absolute; width: 100%; top: 0px; height: 300px; background: url(images/**main_top.jpg**) top center repeat-y; <----questo è il jpg del banner !! } div#background_bottom { z-index: 2; position: absolute; width: 100%; bottom: 0px; height: 200px; background: url(images/main_bottom.jpg) bottom center repeat-y; } a:link { color: #145989; text-decoration: none; } a:visited { color:; text-decoration: none; } a:hover { color:; text-decoration: none; } a:active { color:; text-decoration: none; } #menu a:link { color:; text-decoration: none; } a:visited { color:; text-decoration: none; } a:hover { color:; text-decoration: none; } a:active { color:; text-decoration: none; } /* Hide icons in page headings */ #pageIcon, td.pageHeading img { display: none; } h1 { font-size: 14px; font-weight: bold; } h2 { font-size: 13px; font-weight: bold; } h3 { font-size: 12px; font-weight: bold; } h4 { font-size: 12px; } h5 { font-size: 12px; } h6 { font-size: 12px; } div#column_middle td.infoBoxHeading { padding-top: 10px; padding-bottom: 0px; font-size: 15px; font-weight: bold; } td.pageHeading { padding: 0px; font-size: 20px; font-weight: bold; } div#navigation { margin-top: 0px; margin-bottom: 15px; color:; } div.side_column div.infobox { position: relative; width: 190px; min-height: 109px; margin: 0px 0px 10px 0px; background: url(images/sidebar_middle.jpg) top center repeat-y; } div.side_column div.infobox_top { z-index: 3; position: absolute; top: 0px; width: 190px; height: 77px; background: url(images/sidebar_top.jpg) top center no-repeat; } div.side_column div.infobox_bottom { z-index: 3; position: absolute; bottom: 0px; width: 190px; height: 31px; background: url(images/sidebar_bottom.jpg) top center no-repeat; } div.side_column div.infobox_heading { z-index: 4; position: relative; width: 150px; height: 17px; padding: 15px 10px 5px 10px; margin: 0px 10px 0px 10px; background: url(images/sidebar_heading.jpg) bottom center no-repeat; color:; font-weight: bold; } div.side_column div.infobox_content { z-index: 4; position: relative; width: 170px; padding: 10px 10px 10px 10px; } div.side_column div.infobox_heading a:link { color:; text-decoration: none; } div.side_column div.infobox_heading a:visited { color:; text-decoration: none; } div.side_column div.infobox_heading a:hover { color:; text-decoration: none; } div.side_column div.infobox_heading a:active { color:; text-decoration: none; } div.side_column table.infoBox { width: 170px; overflow: hidden; } td.infoBoxHeading img, td.infoBoxHeading img { display: none; } td.infoBoxHeading a img, td.infoBoxHeading a img { display: inline; } div#column_middle td.infoBoxHeading { padding: 0px 0px 10px 0px; } td.main textarea { height: 200px; width: 370px; }

Cosi facendo però non ho ottenuto buoni risultati perchè si l'immagine mi veniva caricata ma veniva sovrapposta al menu sottostante, eh anche rimodificando i css del menu niente, non c'è verso di farla andare, come se il sito fosse inchiodato a quella misura e niente lo può mandare più in fondo di 100px

Se aggiungo dei <br> nell'index mi saltano i font eh altri parametri !!

Allora avevo pensato, magari di mettere dei <br> nella home a modo tale che mi creavo quei 100px necessari e poi attraverso i css mi posizionavo l'immagine nella posizione che io desideravo.
NIENTE !!! Nulla da fare....xxxxx

Avete consigli o qualcosa su come provare?