Newsgroup: it.comp.www.html
Titolo: [css] problema con box

Ciao a tutti,
sto cercando di fare un clone del mio sito (
http://www.thepixel.it
) ma 
senza l'uso delle tabelle.
Ieri sono partito gasato con l'idea di come avrei potuto realizzarlo, ma 
   ho incontrato subito i primi problemi.
Il layout è semplice, sono due colonne (menu e contenuti) a dimensione 
fissa centrati. Il problema è che sia Firefox che Netscape 7.1 non ne 
vogliono sapere di farmelo vedere come vorrei. In IE 6 e Opera 7 è 
invece tutto ok.
Potete vedere la prova del layuot qui: 
http://www.thepixel.it/tables/index.php
 e il CSS qui: 
http://www.thepixel.it/tables/advanced.css
Penso che il problema sia dato dal fatto che Firefox e Netscape non 
accettano i due <div> (menu e content) che hanno float: left, 
all'interno del <div> (mainbox) che mi serve per centrare il tutto.
Lo stesso problema si presenta col footer che è sempre un <div> centrato 
che racchiude dei <div> con float: left.
Come posso risolvere?
Grazie in anticipo!
-- 
BoloS
 > Perseverando, arrivi.

http://www.thepixel.it/pixel.php
 a me funziona. L'altro link non va.
-- 
:: Massimiliano Mattei
:: Project Leader
:: EVA Group :: 
www.evagroup.net
:: Soluzioni extranet :: e-business :: corporate portal

 
http://www.thepixel.it/pixel.php
 a me funziona. L'altro link non va.
Come non va? A me funzionano tutti i links (cliccandoli dal mio post).
-- 
BoloS
 > Perseverando, arrivi.

Un pò di lavoro... ;)
html {
 height: 100%;
}
body {
 margin: 0px;
 padding: 0px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #ccc;
 background-color: #333;
 height: 100%;
}
#mainbox {
 margin: auto;
 background: #000;
 width: 700px;
}
#menu {
 background-color: #000;
 width: 200px;
}
div#menu a{
 font: 9px Arial, Helvetica, sans-serif;
 font-weight: bold;
 letter-spacing: 8px;
 height:1px;
}
#content {
 float: right;
 padding: 10px;
 background-color: #000;
 width: 464px;
}
a:link {
 color: #F00;
 text-decoration: none;
}
a:visited {
 color: #F00;
 text-decoration: none;
}
a:hover {
 color: #FFF;
 text-decoration: none;
}
.active {
 font: 12px Arial, Helvetica, sans-serif;
 font-weight: bold;
}
.footer {
 margin-bottom: 0px;
 margin-left: auto;
 margin-right: auto;
 background: #900;
 width: 696px;
 padding: 2px;
}
.footeritem {
 display: inline;
 margin-left: 120px;
 background: #900;
}
#endborder {
 background-image: url(../img/layout_end.gif);
 background-repeat: repeat-x;
}
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
"><head><title>The Pixel CSS
Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="index_files/advanced.css" rel="stylesheet"
type="text/css"></head>
<body>
<div id="mainbox">
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
</div><!-- content -->
<div id="menu">
<img src="index_files/logo0101.gif" width="199" height="227"><br>
<img src="index_files/logo0202.gif" width="199" height="117">
<div align="center"><img src="index_files/menubar.gif" width="199"
height="8" alt=""><br>
<img src="index_files/menubar.gif" width="199" height="8" alt=""><br>
<a href="
http://www.thepixel.it/tables/pixel.php
">HOME PAGE</a><br>
<img src="index_files/menubar.gif" width="199" height="8" alt=""><br>
<a href="
http://www.thepixel.it/tables/pixel.php?section=about
">ABOUT
ME</a><br>
<img src="index_files/menubar.gif" width="199" height="8" alt=""><br>
<a href="
http://www.thepixel.it/tables/pixel.php?section=art
">DIGITAL
ART</a><br>
<img src="index_files/menubar.gif" width="199" height="8" alt=""><br>
<a
href="
http://www.thepixel.it/tables/pixel.php?section=portfolio
">PORTFOLIO</
a><br>
<img src="index_files/menubar.gif" width="199" height="8" alt=""><br>
<a
href="
http://www.thepixel.it/tables/pixel.php?section=tutorials
">TUTORIALS</
a><br>
<img src="index_files/menubar.gif" width="199" height="8" alt=""><br>
<a
href="
http://www.thepixel.it/tables/pixel.php?section=downloads
">DOWNLOADS</
a><br>
<img src="index_files/menubar.gif" width="199" height="8" alt=""><br>
<a href="
http://www.thepixel.it/tables/pixel.php?section=contact
">CONTACT
ME</a><br>
<img src="index_files/menubar.gif" width="199" height="8" alt=""><br>
<a
href="
http://www.thepixel.it/tables/pixel.php?section=awards
">AWARDS</a><br>
<img src="index_files/menubar.gif" width="199" height="8" alt=""><br>
<a
href="
http://www.thepixel.it/tables/pixel.php?section=links
">LINKS</a><br>
<img src="index_files/menubar.gif" width="199" height="8" alt=""><br>
<img src="index_files/menubar.gif" width="199" height="8" alt="">
</div><!-- center -->
</div><!-- menu -->
<div class="footer">
<div class="footeritem">TOP</div>
<div class="footeritem" align="center">XX USER ONLINE</div>
<div class="footeritem" align="right">VALID: XHTML | CSS</div>
</div><!-- footer -->
</div><!-- mainbox -->
</body></html>


 Un pň di lavoro... ;)
[...]
Sono commosso... grazie mille!
Adesso mi studio per bene il codice ;-)
Ciao
-- 
BoloS
 > Perseverando, arrivi.