Ciao a tutti!
Allora vi spiego il mio problema. Ho iniziato da un pò di mesi a imparare l'html e i css e ho provato a fare una prima pagina di prova seguendo le guide di html.it. Come editor uso ACEhtml e preciso che il codice lo scrivo non uso l'editor visuale. Il problema è che nell'anteprima di ACEhtml e con Internet Explorer (per la precisione le versione che uso io è il 7) si vede benissimo, ma se uso qualsiasi altro browser (opera, firefox, chrome) si vede in maniera completamente diversa, cioè, non è centrato, il testo si dispone sopra l'immagine, la colonna di sinistra appare sfasata... Non riesco a capire cosa sbaglio. Ho letto qualcosa sui commenti condizionali ma non ho capito molto.
Adesso posto il codice HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Unregistered User">
<meta name="generator" content="AceHTML Freeware">
<link rel="stylesheet" type="text/css" href="stilesito.css">
</head>
<body>
<div id="container">
<div id="header">
[img]immagini/logo.gif[/img]</div>
<div id="navigation">
<div id="boxcercaup">
<div id="imgcerca">[img]immagini/cerca.gif[/img]
</div>
</div>
<div id="boxcercadown">
</div>
<div id="boxletti">
</div>
<div id="boxart1"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart2"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart1"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart2"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart1"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart2"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart1"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart2"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart1"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart2"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart1"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart2"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart1"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart2"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart1"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart2"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart1"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
<div id="boxart2"><p class="textart">Titolo dell'articolo: argomento</p>
</div>
</div>
<div id="content">
<div id="primopiano">[img]immagini/primopiano.gif[/img]</div>
<div id="boxnews">
<div id="boximmagine"><p class="text10pxwhite">[img]immagini/case.gif[/img]
Leggi il tutorial</p></div>
<div id="boxtext">
<p class="titolopar">Ottenere thumbnail belle e nitide
<span class="textpar">Quante volte vi sarà capitato di ridurre le dimensioni di un’immagine, ad
esempio per realizzare una thumbnail, e vi siete ritrovati con un francobollo sfocato? La bellezza
e la pulizia di una pagina web dipendono anche dalla qualità di piccoli dettagli e in questo
tutorial scoprirete come fare.</span></p>
</div>
</div>
<div id="strisciaverde">
<div id="immagine">[img]immagini/sceltivoi.gif[/img]
</div>
</div>
<div id="boxnews2">
<div id="boximg2">[img]immagini/barca.gif[/img]
</div>
<div id="textbox2">
<p class="titolopar">Eliminare i difetti delle immagini scansite (e non) con i Livelli.
<span class="textpar">Uno dei problemi più comuni delle immagini acquisite con lo
scanner è una sorta di patina che leva contrasto e dettaglio</span></p>
</div>
</div>
<div id="boxnews3">
<div id="boximg3">[img]immagini/mucca.gif[/img]
</div>
<div id="textbox3">
<p class="titolopar">Rumore digitale
<span class="textpar">Problemi di rumore digitale? Ecco come eliminarlo dalle vostre
fotografie senza rovinare l’immagine.</span></p>
</div>
</div>
<div id="boxnews3">
<div id="boximg3">[img]immagini/porta.gif[/img]
</div>
<div id="textbox3">
<p class="titolopar">Cambiare il colore ad una sola parte dell'immagine
<span class="textpar">Photoshop offre funzionalità molto pratiche e rapide che
consentono di modificare con precisione il colore. </span></p>
</div>
</div>
<div id="boxnews3">
<div id="boximg3">[img]immagini/cammello.gif[/img]
</div>
<p class="titolopar">Ridimensionare le immagini
<span class="textpar">Un excursus tra le dimensioni in pixel, il ricampionamento
e la risoluzione delle immagini </span></p>
</div>
</div>
<div id="lineafooter"></div>
<div id="textfooter">Copyright - WebDesign è un sito creato per</div>
</div>
</body>
</html>
Adesso posto il CSS
@charset "windows-1252";
/*stili per il layout*/
html, body{margin: 0; padding: 0;}
body{font-family: arial, sans-serif; font-size: 76%; text-align: center;}
div#container {width: 760px; margin: 0; text-align: center;} /*bordi border-left: 2px solid #36C;
border-right: 2px solid #36C;*/
/*stili generici su header e footer*/
div#header {background-image: url(immagini/sfondo.gif); background-repeat: repeat-x; height:85px;}
div#lineafooter {background-color: #666666; height: 17px; clear: left; margin: 0px;}
div#textfooter {text-align: center; font-size: 10px;}
/*stili specifici per il layout*/
div#navigation {float: left; width: 18em; background-color: #7ca64e; }
div#content {margin-left: 18em; text-align: left;}
/*stili specifici per navigation*/
div#boxcercaup {width: 18em; height: 32px; background-color: #7ca64e; text-align:left;}
div#imgcerca {margin-top: 16px; margin-left: 2em;}
div#boxcercadown {width: 18em; height: 100px; background-color: #f4f4eb;}
div#boxletti {width: 18em; height: 32px; background-color: #7ca64e;}
div#boxart1 {width: 18em; height: 20px; background-color: #e9e9d9; margin: 0px;}
div#boxart2 {width: 18em; height: 20px; background-color: #f4f4eb; margin: 0px;}
/*stili per la navigazione*/
div#navigation a { }
div#navigation a:hover { }
div#navigation a#activelink { }
/*elementi della navigazione*/
div#primopiano {margin-top: 20px; padding: 0px; margin-left: 36px;}
div#boxnews {width: 480px; background-color: f4f4eb; text-align: left; padding: 5px;
margin-top: 7px; margin-left: 30px; padding top: 11px;}
div#boximmagine {width: 95px; text-align: justify; background-color: #8c957c;
float: left; padding: 2px; margin: 0px;}
div#boxtext {text-align: justify; margin-left: 100px;}
div#strisciaverde {background-color: 7ca64e; height: 20px; margin: 32 30 32 30;}
div#immagine {margin-left: 5px;}
/*box immagine scelti da voi*/
div#boxnews2 {text-align: justify; width: 452px; margin-left: 44px;}
div#boximg2 {float: left; width: 80px; margin: 0px;}
div#textbox2 {padding: 0px; margin-left: 80px;}
div#boxnews3 {text-align: justify; width: 452px; margin-left: 44px; margin-top: 20px; margin-bottom: 20px;}
div#boximg3 {float: left; width: 80px; margin: 0px;}
div#textbox3 {padding: 0px; margin-left: 80px;}
/*stili di scrittura*/
.titolopar {color: #468206; font-family: arial; font-weight: bold;}
.textpar {font-family: arial; font-weight: normal; color: #000000;}
.text10pxwhite {font-family: arial; color: #ffffff; font-size: 10px;}
.textart {font-family: arial; color: #468206; font-size: 10px;}
Se volete segnalarmi qualsiasi errore che ho fatto scrivendo il codice sarei molto riconoscente così almeno imparo qualcosa!
Ringrazio anticipatamenti a quelli che potranno darmi una mano!
Rispondi quotando
