Vai al contenuto

Problema CSS

alfaconceptstudio

Messaggi raccomandati

alfaconceptstudio

alfaconceptstudio

Inviato
Inviato

Salve,

vorrei proporvi questo problema che da un paio di giorni mi sta assillando: ho questo codice html

<!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" xml:lang="it" lang="it">
<head>
   <title>Giovanni Mazzei sito web ufficiale</title>
   <link rel="stylesheet" type="text/css" href="css/firefox.css" media="screen" title="default" />
</head>
<body>
   <div id="container">
       <div id="header">
           <h1 class="nocss">Giovanni Mazzei sito web ufficiale</h1>
           <ul class="nocss">
               <li><a href="#center" title="Vai ai contenuti">Vai ai contenuti</a></li>
               <li><a href="#menu" title="Vai al menù di navigazione">Vai al menù di navigazione</a></li>
           </ul>
           <hr class="nocss" />
           <div id="menuLang">
               <ul>
                   <li id="it">
                       <span class="nocss">[i]</span>
                       <a class="active" href="" title="Italiano" accesskey="i">Italiano</a>                    
                   </li>
                   -
                   <li id="en" xml:lang="en" lang="en">
                       <span class="nocss">[E]</span>
                       <a href="" title="English" accesskey="e">English</a>                    
                   </li>
               </ul>
           </div>
             <hr class="nocss" />
           <h1 class="nocss">Menù principale</h1>
           <div id="menu">
               <ul class="menu">
                   <li class="menuA" xml:lang="en" lang="en">
                       <span class="nocss">[1]</span>
                       <a href="" title="Home Page" accesskey="1">Home</a>
                   </li>
                   -
                   <li class="menuB">
                       <span class="nocss">[2]</span>
                       <a class="active" href="" title="Biografia" accesskey="2">Biografia</a>
                   </li>
                   -
                   <li class="menuC">
                       <span class="nocss">[3]</span>
                       <a href="" title="Discografia" accesskey="3">Discografia</a>
                   </li>
                   -
                   <li class="menuD">
                       <span class="nocss">[4]</span>
                       <a href="" title="Carriera" accesskey="4">Carriera</a>
                   </li>
                   -
                   <li class="menuE" xml:lang="en" lang="en">
                       <span class="nocss">[5]</span>
                       <a href="" title="My space" accesskey="5">My space</a>
                   </li>
                   -
                   <li class="menuF">
                       <span class="nocss">[6]</span>
                       <a href="" title="Contatti" accesskey="6">Contatti</a>
                   </li>
               </ul>
           </div>
           <hr class="nocss" />
       </div>
       <div id="page" class="clearfix">
             <div id="left" class="clearfix">
               <div class="pageTitleLeft" class="clearfix">
                   <h1>Biografia</h1>
                   <p>asdfasdfs 
                   asdfadsfasd
                   sdfsad
                   fsadfsd
                   fsdf<br />
                   asdfsadf
                   <br />
                   asdfsadf
                   <br />asdfadsfasdasdfadsfasdasdfadsfasd
                   </p>
                   <div style="clear:both; display:inline-block;"> </div>
                    </div>
           </div>
           <div id="right">
               <div class="pageTitleRight">
                   <h1>Eventi e Novità</h1>
                   <p>asdfasdfs 
                   asdfadsfasd
                   sdfsad
                   fsadfsd
                   fsdf<br />
                   asdfsadf
                   <br />
                   </p>    
               </div>
           </div>
     </div>
   </div>
   <div id="footer">
        assdf      </div>
</body>
</html>

e questo codice css:

@charset "UTF-8";
html {
   height: 100%;
}

body {
   background: #222222;
   color: #cccccc;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   height: 100%;
   letter-spacing: 1px;
   margin: 0;
   padding: 0;
}


/**
*    Definizione regole div
*/

/* Container */
div#container {
   background-color: #000000;
   background-image: url(../img/pageBg.jpg);
   background-position: left top;
   background-repeat: repeat-y;
   margin-bottom: 0px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0px;
   padding-bottom: 0;
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
   width: 930px;
   min-height: 100%;
   }

/* Header */
div#header {
   background-color: #000000;
   background-image: url(../img/header.png);
   background-repeat: no-repeat;
   height: 300px;
   margin-bottom: 0px;
   margin-left: 16px;
   margin-right: auto;
   margin-top: 0px;
   padding: 0px;
   width: 900px;
}

div#page {
   /*background-color: #000000;*/
   /*background-image: url(../img/pageBg.png);*/
   background-repeat: repeat-y;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0;
   margin-bottom: 0;
   padding: 0;
   width: 900px;
   padding-bottom: 115px;
}

div#left {
   float: left;
   width: 648px;
   margin-bottom: 5px;
}

div#right {
   float: right;
   width: 249px;
}

div#footer {
   position: relative;
   background-color: #000000;
   background-image: url(../img/footer.jpg);
   background-repeat: no-repeat;
   height: 111px;
   margin-bottom: 0px;
   margin-left: auto;
   margin-right: auto;
   margin-top: -111px;
   padding: 0px;
   width: 930px;
}




div.pageTitleLeft {
   background-image: url(../img/titleLeftBg.png);
   background-repeat: no-repeat;
   height: 32px;
   margin-left: 4px;
   margin-top: 4px;
   padding-left: 7px;
   padding-top: 6px;
   width: 642px;
}

div.pageTitleLeft h1 {
   font-size: 14pt;
   font-weight: normal;
   margin: 0;
   padding: 0;

}

div.pageTitleRight {
   background-image: url(../img/titleRightBg.png);
   background-repeat: no-repeat;
   height: 32px;
   margin-left: 4px;
   margin-top: 4px;
   padding-left: 7px;
   padding-top: 6px;
   width: 242px;
}

div.pageTitleRight h1 {
   font-size: 14pt;
   font-weight: normal;
   margin: 0;
   padding: 0;
}

div.clearer {
   clear: both;
   font-size: 0;
   line-height: 0;
}

.nocss {
   display: none;
}



/**
*    Definizione stili
*/
h1 {
   margin: 0;
   padding: 0;
}
div#menuLang {
   left: 2px;
   margin: 0px;
   padding: 0px;
   position: relative;
   top: 1px;
}
div#menuLang ul li {
   display: inline;
   margin-left: 3px;
   margin-right: 3px;
}
div#menuLang ul {
   position: relative;
   left: 10px;
   top: 10px;
   display: inline;
   margin: 0px;
   padding: 0px;
}
div#menuLang ul li a {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-transform: uppercase;
   color: #FFFFFF;
   text-decoration: none;
}
div#menuLang ul li a:hover {
   color: #FF9933;
   text-decoration: underline;
}
div#menuLang ul li a.active {
   color: #FF9933;
}

div#menuLang ul li a.active:hover {
   color: #FF9933;
   text-decoration: none;
}
div#menu {
   margin: 0px;
   padding: 0px;
   top: 255px;
   position: relative;
   left: 10px;
}
div#menu ul li a {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #FFFFFF;
   text-transform: uppercase;
   text-decoration: none;
}
div#menu ul {
   display: inline;
   margin: 0px;
   padding: 0px;
}
div#menu ul li {
   display: inline;
   margin-right: 3px;
   margin-left: 3px;
}
div#menu ul li a:hover {
   color: #FF9933;
   text-decoration: underline;
}
div#menu ul li a.active {
   color: #FF9933;
}
div#menu ul li a.active:hover {
   color: #FF9933;
   text-decoration: none;
}
.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

Ho provato e riprovato ma non riesco a evitare che il contenuto delle due colonne centrali finiscano sopra il footer. Ho utilizzato clear: both e altri trucchetti, ma sembra non voler funzionare. Qualche suggerimento?

-----------------------------------------------------

My Apple: Mac Pro 8-Core 3,2 Ghz - 16GB ram - 2TB hd - Leopard; Macbook Pro Core 2 Duo 2,33 Ghz 17'' - 3GB ram - 250GB hd - Leopard; Ipod 5G 80GB Bianco; 2 Iphone 8GB 1.1.2 OOTB portato a 1.1.3

Link al commento
Condividi su altri siti
sonik

sonik

Inviato
Inviato

Non ho capito... vorresti mettere dove le due colonne centrali? sotto il footer?

io vedo cosi, è sbagliato? se si cosa vorresti che andasse dove?

Screenshot1c63jpg.jpg

Big power, sticky tyres, no neons, and suspension harder than multiplying in roman numerals ....PMSL =D

Link al commento
Condividi su altri siti

Archiviato

Questa discussione è archiviata e chiusa a future risposte.

Vai alla lista discussioni
×
×
  • Crea Nuovo...