Salve a tutti
Sono un novizio della programmazione di siti web, e ho un problema che non riesco a risolvere.
Il mio intento sarebbe quello di creare un layout su background fisso composto da una box e il menù.
Ho scaricato un template e ho cominciato ad adattarlo arrivando a questo risultato http://www.dittafaraoni.altervista.org/sito/index.html
Dento a questo box avrei intenzione di fare due file da 3 immagini più il logo che porteranno alle varie sezioni.
Il problema principale è che non riesco ad impedire che visualizzandolo con differenti risoluzioni, mi si stiri anche il box e tutto il suo contenuto.
C'è un modo per mantenere il box e quello che contiene FISSO e centrato e lasciare allargare solo lo sfondo?
Questo è il CSS
codice:body { font-family: arial, verdana, sans-serif; font-size: 10px; color: #fff; background-image: url(images/Background2.jpg); background-repeat: repeat; } #box { width: 900px; height: 600px; margin: auto; } #nav { width:900px; height:44px; background-color:#333; opacity:0.7; margin:-26px auto; } #nav #logo { display:inline; float:left; } #nav #logo h1 { padding:0; margin: 14px 0 0 10px; font-size:13px; color:#FFFFFF; text-transform:uppercase; } #nav #logo h1 a{ color:#FFFFFF; text-decoration:none; } #nav #logo h1 span{ color:#999; } #nav #menu { display:inline; float:left; } #nav #menu ul{ padding:0; margin:25px 10px 0 0; font-size:12px; } #nav #menu ul li{ list-style-type:none; display:inline; font-weight:bolder; margin-left: 10px; text-transform:uppercase; } #nav #menu ul li a{ text-decoration:none; color:#FFFFFF; } #nav #menu ul li a:hover{ color: #FFFFFF; font-style: italic; font-weight: bold; } #main_img { width:900px; height:600px; background-image:url(images/main2_img.jpg); background-repeat:no-repeat; margin:0 auto; } #logo{ width:300px; height:160px; position:absolute; top:50%; left:50%; margin-left:-150px; margin-top: -400px; padding:0; } #main_text h2 { margin:0; padding:0; color:#CCCCCC; font-size:14px; } #footer { text-align:center; color:#333; clear:both; } #footer a{ text-decoration:none; color:#333; }

Rispondi quotando