Allargare quadro css

lukissimo81 · 14 Set 2014

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?

Codice:

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 · 14 Set 2014

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 · 14 Set 2014

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 · 14 Set 2014

Codice:

<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 · 15 Set 2014

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 · 15 Set 2014

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 · 15 Set 2014

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

Soulfearor · 23 Set 2014

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!

Allargare quadro css

lukissimo81

Utente Attivo

Max 1

Super Moderatore

lukissimo81

Utente Attivo

Max 1

Super Moderatore

lukissimo81

Utente Attivo

Max 1

Super Moderatore

lukissimo81

Utente Attivo

Soulfearor

Utente Attivo

Discussioni simili

Allargare quadro css

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Utente Attivo

Discussioni simili

Privacy & Transparency

Privacy & Transparency