Pagina 1 di 1

[Opera/IE] Errore di visualizzazione template

MessaggioInviato: mer ago 08, 2007 1:40 pm
da Xero
Da un paio di giorni sto tentando di creare un template da applicare ad un sito basato su Joomla.
Ora però ho un problema.
Il sito per il momento è basato su HTML e CSS, in seguito utilizzerò il codice HTML per implementare le chiamate al Php, ma questo si vedrà in seguito.

Attualmente nel creare il layout ho utilizzato solo ed esclusivamente le DIV, basandomi su un file css esterno.
Tuttavia mentre Firefox visualizza correttamente la pagina, Opera e Internet Explorer visualizzano solamente lo sfondo nero.

Internet Explorer 7
Immagine

Opera 9.20
Immagine

Firefox 2.0.0.6
Immagine

Per la cronaca, neppure Safari visualizza il layout.

Sinceramente non capisco da cosa possa dipendere, sono i primi passi che muovo e non ho grande esperienza.

Vi allego il codice HTML e il CSS.

Codice: Seleziona tutto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Make Some Noise</title>
<link href="css/template_css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
</style></head>

<body>
<center>
  <div class="container">
   <div class="header"></div>
    <div class="header_bottom"></div>
    <div class="top_menu">Top Menu</div>
    <div class="menu_left">
       <div class="menu_left_header"></div>
        <!--inserire qui il contenuto del menu-->
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua.    Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. Duis aute irure dolor in reprehenderit in  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur  sint occaecat cupidatat non proident, sunt in culpa qui officia  deserunt mollit anim id est laborum.
        <div class="menu_left_footer"></div>
        </div>
      <div class="menu_right_container">
       <div class="menu_right_header"></div>
        <div class="menu_right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. Duis aute irure dolor in reprehenderit in  voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </div>
        <div class="menu_right_footer"></div>   
    </div>
    <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. Duis aute irure dolor in reprehenderit in  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur  sint occaecat cupidatat non proident, sunt in culpa qui officia  deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. Duis aute irure dolor in reprehenderit in  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur  sint occaecat cupidatat non proident, sunt in culpa qui officia  deserunt mollit anim id est laborum.</div>
   <div class="footer"></div>
  </div>
</center>
</body>
</html>

Codice: Seleziona tutto
body {
   background-color: #000000;
   margin-top: 0px;
   font: Verdana, Arial, Helvetica, sans-serif;
   color:#FFFFFF;
   font-size:12px;
   }

a:link {
   color:orange;
   text-decoration:none;
}

a:hover {
   color:yellow;
   text-decoration:none;
}

a.mainlevel {
   text-align:right;
   color:#FFFFFF;
   
}

a.mainlevel:link {
   color:white;
   text-decoration:none;
   text-align:center;
}


.container {
   width:784px;
}

.header {
   width: 784px;
   height: 124px;
   background:url(../images/header_big.png) no-repeat;
   clear:both;
   }
   
.header_bottom {
   width:315px;
   height:98px;
   float:left;
   background:url(../images/header_small.png) no-repeat;
   }
   
.top_menu {
   width:469px;
   height:auto;
   float:right;
}

.top_menu a:link {
   font-size:14px;
   color:white;
   text-decoration:none;
   padding-left:5px;
   padding-right:5px;
   padding-bottom:3px;
   padding-top:3px;
}

.top_menu a:hover {
   font-size:14px;
   color:gray;
   text-decoration:none;
   }
   
.menu_left {
   text-align:center;
   padding-top:10px;
   width:160px;
   float:left;
   clear:left;
   }

.menu_left_header {
   width: 159px;
   height: 28px;
   background:url(../images/main_menu_header.jpg) no-repeat;
   clear:both;
}

.menu_left_footer {
   width: 159px;
   height: 28px;
   background:url(../images/main_menu_footer.jpg);
   clear:both;
}
.menu_right_container {
   margin-top:10px;
   width:161px;
   float: right;
   clear: right;
   background:url(../images/other_menu_pattern.jpg) repeat-y;
   }
   
.menu_right {
   font-size:12px;
   text-align:justify;
   width:135px;
   }
   
.menu_right_header {
   width: 161px;
   height: 43px;
   background:url(../images/other_menu_header.jpg) no-repeat;
   clear:both;
   padding-top:0px;
}

.menu_right_footer {
   width: 161px;
   height: 28px;
   background:url(../images/other_menu_footer.jpg);
   clear:both;
}

.footer {
   width:781px;
   height:170px;
   background:url(../images/footer.jpg) no-repeat;
   clear: both;
   padding-top:71px;
   font-size:10px;
   }
   
.content {
   width: 430px;
   height:auto;
   padding-top:120px;
   padding-bottom:20px;
   text-align:justify;
   }
   
.mainlevel -nav a {
   color:#FFFFFF;
}


Se avete bisogno dei files originali non c'è problema, purché mi diate una mano a risolvere questa piccola grande rogna [cry]

MessaggioInviato: mer ago 08, 2007 1:49 pm
da Mr.TFM
Facendo il controllo W3C vengono segnlati parecchi errori gravi....... [;)]

MessaggioInviato: mer ago 08, 2007 1:57 pm
da Xero
Mr.TFM ha scritto:Facendo il controllo W3C vengono segnlati parecchi errori gravi....... [;)]

Urka, vedi che vuol dire essere Noob [:-D]
Lo faccio subito, Grazie! [std]

MessaggioInviato: mer ago 08, 2007 2:22 pm
da Xero
Risolto, grazie ancora [std] [std]