Modifiche tema "Concept"

[Neville]

Salve ragazzi
Mi rivolgo a voi perchè ho bisogno di una mano con la personalizzazione di un tema, appunto "Concept".
Modificando un po' i colori a caso (lo so, così il forum è orribile ma sto modificando i colori per avere un'idea di cosa precisamente vado a modificare), la pagina principale si presenta così:


Io vorrei modificarla in questo modo:


Ma diciamo che non ci sono riuscito al 100%.

Rendendo trasparente la barra marrone (bar) all'inizio della pagina, ho modificato l'altezza e la larghezza del logo (logo a; l'immagine ripetuta). E questo non mi dà problemi.
Ho poi modificato l'altezza e la larghezza della barra grigia (header). Pensavo che si posizionasse sotto il logo, invece si è posizionato all'estrema sinistra e in alto così ho dovuto mettere un margine sia a sinistra che sopra. (margin-left e margin-top).

Sono così arrivato a questa situazione:


Ma se zoomo:


L'header si sposta. Tecnicamente non è un problema se mantengo uno zoom al 100% ma per chi volesse visualizzare il forum con uno zoom differente non sarebbe molto bello da vedere. Decisamente.
Inoltre vorrei spostare al centro i pulsanti Indice, Home, etc. ma non riesco e posizionare la barra di ricerca come nella seconda immagine. Ma modificando i valori, di pixel in pixel, di margin-top e margin-left, la barra non si muove in modo corretto. O rimane ferma o ad esempio invece di muoversi di un pixel verso il basso, si muove, per esempio, di 50 pixel sballando la pagina e finendo sopra la news box. 

Codice penultima immagine (tema personalizzato):

Codice Seleziona Espandi

#header {
background: #333333;
height: 205px;
width: 870px;
margin-left: 357px;
margin-top: 270px
}
#logo a {
float: left;
display: block;
width: 870px;
height: 350px;
background: #7b4a12 url(http://i58.tinypic.com/azfo2b.png) repeat;


................

#bar {
/* background: #7b4a12; */
height: 80px;
 
position: relative;
 
z-index: 10;
  box-shadow: #cccccc;

..............

#search {
float: right;
margin-top: 35px;
height: 28px;
width: 200px;
background: #ffffff;
overflow: hidden;
}
#search .inputbox {
background: none;
color: #444;
padding: 5px 7px;
border: none;
outline: none;
margin: 2px 0 0;
width: 200px;
height: 14px;
font-size: 12px;


Codice prima immagine (tema originale):

Codice Seleziona Espandi

#header {
   background: #333333;
   height: 115px;
}
#logo a {
   float: left;
   display: block;
   width: 200px;
   height: 80px;
   background: #7b4a12 url(http://i58.tinypic.com/azfo2b.png) no-repeat;

..................

#bar {
   background: #7b4a12;
   height: 80px;
        position: relative;
        z-index: 10;
        box-shadow: #cccccc;

.......................

#search {
   float: right;
   margin-top: 35px;
   height: 28px;
   width: 200px;
   background: #ffffff;
   overflow: hidden;
}
#search .inputbox {
   background: none;
   color: #444;
   padding: 5px 7px;
   border: none;
   outline: none;
   margin: 2px 0 0;
   width: 200px;
   height: 14px;
   font-size: 12px;


Spero mi possiate dare una mano  Grazie mille 

[Filippo]

Un link al forum?

[Neville]

Sì, scusate  Ecco qui

[Neville]

Scusate il doppio post 
Penso di aver risolto perchè ho trovato un tema migliore già impostato come desideravo 

[Filippo]

Meglio così

[Flavio93Zena]

Non male il tema! Ti raccomando solo caldamente di rendere visibili i post anche agli ospiti altrimenti il sito non verrà indicizzato dai motori di ricerca (Google, Yahoo etc..) e nessuno riuscirà a trovarlo :/