Ho 4 div che mi compongono un Header
collegati ai rispettivi id nel css dove setto l'immagine di background
Il sito è stato creato da Photoshop e quindi l'esportazione in html ha prodotto immagini con position absolute
Vorrei Centrare la pagina creata e di conseguenza ancorare i DIV in modo tale che non scappino e coincidano
Purtroppo questa operazione nella maggior parte dei casi crea del codice fatto male, che non a niente a che vedere con il markup semantico pulito e accessibile.Il sito è stato creato da Photoshop e quindi l'esportazione in html ha prodotto immagini con position absolute...
Ti trovi di conseguenza ad avere delle pagine piene di problemi e con dei risultati visivi diversi nei differenti browser.
Il mio consiglio è quello di creare la bozza in strumenti grafici (come photoshop) e successivamente di creare codice a mano con l'aiuto di strumenti che per comodità velocizzano la produzione.
Prova eventualmente a postare il codice.
Anche a volerlo fare a mano, potresti farmi un esempio di CSS con DIV per comporre un banner
DIV1 - DIV2
DIV3 - DIV4
in modo tale da poterlo centrare
grazie per la collaborazione
Centrarlo in base a cosa?? Ad un div contenitore? è molto generico quello che mi chiedi.Anche a volerlo fare a mano, potresti farmi un esempio di CSS con DIV per comporre un banner
DIV1 - DIV2
DIV3 - DIV4
in modo tale da poterlo centrar
Se mi posti il tuo codice ho degli elementi per aiutarti meglio.
Questo è un esempio puramente inventato perchè non ho basi per fare altro:
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it"> <head> <title></title> <meta name="description" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> * { margin:0; padding:0; } body { text-align:center; } #container { margin:auto; width:800px;/*esempio*/ height:600px;/*esempio*/ border:solid 1px #000; } #header { margin:auto; width:400px;/*esempio*/ height:100px;/*esempio*/ border:solid 1px #000; } #header div { float:left; width:50%; height:50%; background:red; } #header .color { background:green; } </style> </head> <body> <div id="container"> <div id="header"> <div class="color"></div> <div></div> <div></div> <div class="color"></div> </div> </div> </body> </html>
Grazie per la disponibilità, ho risolto facendo tutto a mano inserendo DIV a monte per contenere i contenuti
Permessi di invio
Rispondi quotando