Ciao a tutti,
vorrei darvi qualche impressione sui CSS da parte mia, cioe' dal punto di vista di qualcuno che volendo iniziare a scrivere un sito s'è buttato senza tergiversare sui layout table less fornito dai CSS.
I fogli di stile sono davvero un meraviglioso strumento/modo di scrivere pagine web. Sono davvero potenti e rendendomi conto di essere un newbie sono sicuro che la portata di queste potenzialità neppure la immagino ancora.
E' bellissimo osservare esteticamente quante cose si possono fare senza l'utilizzo di tabelle, javascript ecc ecc. Purtroppo i lati negativi che vengono denunciati negli articoli di www.html.it esistono e la loro portata non immmaginavo che fosse così grande.
Ho iniziato subito costruendo il mio sito e tutto è andato bene (con le solite difficoltà nel far funzionare le cose all'inizio di un percorso di apprendimento) con il mio browser: Firefox.
Poi, senza immaginare quanto fosse importante provare con altri browser, ho fatto una veloce prova con explorer. Un disastro. Ho cercato di fare le modifiche al sito in modo da ottenere un layout che coincidesse con i due browser (ho lasciato perdere tutti gli altri). Ho provato di tutto ma nulla. Spostavo un margine e saltava da una parte lo ripristinavo e saltava dall'altra. Provavo con il padding e la filastrocca in modo diverso si ripeteva. Insomma, cr4edevo che la questione compatibilità si riferisse agli aspetti più avanzati, ma mi sbagliavo.
Allora ho deciso di radere al suolo tutto e ricominciare da capo. Un box per volta, un passo per volta e testare....
Ebbene mi sono fermato al secondo box. Vi posto il codice e vi chiedo di aiutarmi a capire come si possa venirne fuori.
Il mio scopo: realizzare un box centrato sul viewport, a larghezza e lunghezza fissa, con all'interno un altro box piu' piccolo di 4 pixel, a sua volta centrato dentro a quello più grande. Un footer in basso contenuto nel box interno.
Insomma, il minimo sindacale
#######Pagina HTML######
<html>
<head>
<title>PROVA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
@import url(stile.css);
</style>
</head>
<body>
<div id="external">
<div id="container">
<div id="footer">55</div>
</div>
</div>
</body>
</html>
#########STILE##########
html,body{margin:0;padding:0}
body{font-family: arial,sans-serif; font-size: 76%;text-align: center;background-color:#E1D2C6}
div#external{
position:absolute; left:50%; top:50%;margin-left:-380px;margin-top:-400px;padding:0px;
/*imposto la larghezza del box 4 pixel maggiore rispetto al box che conterra'in modo che centrandolo otterro' un bordo di 2 pixel tutto intorno*/
width:764px; height:800px;
background-color:white;
border-left: 1px solid #8E9425; border-right: 1px solid #8E9425; border-top: 1px solid #8E9425; border-bottom: 1px solid #8E9425}
div#container{
/*con il posizionamento assoluto ottengo la centratura voluta*/
position:absolute;left:2px; top:2px;
width:760px; height:796px;
div#footer{
position:absolute; bottom:0; left:0; width:760;background-color: #C7BD9C; height: 20px}
########commento#########
Finche' non metto i bordi al box external tutto fila liscio. Il footer appare con un bordino di 2 px tutt'intorno. Appena metto i bordi Firefox mantiene il risultato voluto mentre explorer salta annullando i 2 px sotto e a destra. Praticamente spinge il footer di un paio di pixel in basso e a destra fuori dal box contenitore???!!!!
Per favore, se avete tempo me lo testate e mi fornite una soluzione. Vi prego di dirmi che non ci sono da usare trucchi per ingannare un browser o l'altro per cose cosi' banali...maledetto explorer!
Rispondi quotando
