Allargare quadro css

[lukissimo81]

Ciao ragazzi, sono un neofita di css, sto modificando un template (http://www.pclabstore.com/pizza/index.html), sono riuscito a mettere lo sfondo a tutta pagine, adesso non riesco ad allargare la parte centrale, mi date una mano?

html {
    background: url(../images/b_main.jpg) no-repeat center center fixed;
    -moz-background-size: cover;
        -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.clear {clear: both; margin: 0px; height:0}

p a{font:10px/14px Tahoma, sans-serif; color:#d50100; text-decoration:none;}
p a:hover{ color:#000; text-decoration:none;}

.headline{font:10px/14px Tahoma, Geneva, sans-serif; color:#8fbc34; font-weight:bold}

#incontainer{width:617px; position:relative; margin:0 auto; background:#fff; }


/* HEADER */

#header{width:617px; height:345px; background: url(../images/b_header.jpg) 0 0 no-repeat; position:relative;}

#header ul.menu{position:absolute; top:16px; left:19px; width:585px}
#header ul.menu li{height:16px; margin-right:19px; float:left}
#header ul.menu li a{height:16px; display:block; text-indent:-20000px; }
#header ul.menu li a:hover{height:16px;}

#header ul.menu li.btn_1 a{width:69px; background:url(../images/btn_1.gif) 0 0 no-repeat; }
#header ul.menu li.btn_1 a:hover{width:69px; background:url(../images/btn_1_over.gif) 0 0 no-repeat;}

#header ul.menu li.btn_2 a{width:62px; background:url(../images/btn_2.gif) 0 0 no-repeat; }
#header ul.menu li.btn_2 a:hover{width:62px; background:url(../images/btn_2_over.gif) 0 0 no-repeat;}

#header ul.menu li.btn_3 a{width:67px; background:url(../images/btn_3.gif) 0 0 no-repeat; }
#header ul.menu li.btn_3 a:hover{width:67px; background:url(../images/btn_3_over.gif) 0 0 no-repeat;}

#header ul.menu li.btn_4 a{width:96px; background:url(../images/btn_4.gif) 0 0 no-repeat; }
#header ul.menu li.btn_4 a:hover{width:96px; background:url(../images/btn_4_over.gif) 0 0 no-repeat;}

#header ul.menu li.btn_5{margin-right:0}
#header ul.menu li.btn_5 a{width:67px; background:url(../images/btn_5.gif) 0 0 no-repeat; }
#header ul.menu li.btn_5 a:hover{width:67px; background:url(../images/btn_5_over.gif) 0 0 no-repeat;}

#header ul.menu li.line{width:16px; background:url(../images/bullet_m.gif) 0 0 no-repeat}

#header img#logo{position:absolute; top:97px; left:323px}

/* content */

#content{width:617px; position:relative}

#leftPan{width:190px; float:left; margin:17px 26px 0 17px; display:inline}
#rightPan{width:346px; float:left; margin:17px 0 0 0;}

#welcome h2{height:45px; position:relative; background:url(../images/h_welcome.gif) 0 0 no-repeat; margin-bottom:5px}
#welcome p{margin-left:8px; margin-bottom:15px}
#welcome ul{width:180px; margin-left:10px}
#welcome ul li{font:10px/14px Tahoma, sans-serif; background:url(../images/arrow.gif) 0 3px no-repeat; padding-left:13px; height:20px;}
#welcome ul li a{color:#d50100; text-decoration:none;}
#welcome ul li a:hover{color:#000; text-decoration:underline;}

#special h2{height:64px; position:relative; background:url(../images/h_pizza.gif) 0 0 no-repeat; margin-bottom:5px}
.specialItem{width:340px; margin:0 0 16px 5px}
.specialItem img{float:left; margin-right:14px}
.specialItem p{float:left; width:250px}

.clear#end{height:20px}

Grazie

 

[Max 1]

Devi modificare il width di #content, poi la somma di width, margin e width di leftPan e rightPan deve essere uguale alla nuova impostazione del width di content

Chiaro?

 

[lukissimo81]

Si ci sono riuscito, adesso vorrei mettere in basso due loghi uno di fb a sx e l'altro di trip a dx!, qua mi è un pò difficile!!

 

[Max 1]

<div id="leftPan">
        <div id="logoLeft">
          <img src="logoleft.jpg" width="100" height="100" alt=""/>
        </div>
    </div>
    
	<div id="rightPan">
        <div id="logoright">
          <img src="logoright.jpg" width="100" height="100" alt=""/>
        </div>
    </div>

 

[lukissimo81]

Grazie per la celere risposta, in serata provo questo codice. Adesso ho notato che aprendo il sito su un monitor più grande il riquadro centrale è piccolo rispetto all immagine di sfondo. è complicato voler adattare il corpo centrale in base allo schermo?

 

[Max 1]

Si! Abbastanza! In primo luogo HTML non basta bisohna usare altri linguaggi, poi bisogna riconoscere il device che visita la pagina e la sua risoluzione, quindi attivare un CSS per quel tipo di device e risuluzione, bisogna anche tener conto del browser che viene usato e fare le opportune modifiche, sempre sottointeso che si sia in grado di programmare tutto ciò

 

[lukissimo81]

al momento troppo complicato per me!!! troppa programmazione nel codice!!

 

[Soulfearor]

Al div che contiene il blocco centrale dagli:

.divbloccocentrale {
display:block;
margin:auto;
width:80%;
}

In questo modo sarà sempre l'80% dello schermo e sarà centrato.

Ciau!