[cssdesign] div ed immagine di sfondo

Matteo Rocco vanrock a libero.it
Mar 6 Dic 2005 21:56:39 CET 

GIANLUCA TROIANI wrote:

>Ci vorrebbe una pagina di prova col problema: spesso il problema non è
>(solo) nelle regole che noi immaginiamo.
>  
>
la pagina è quella che segue ..

La regola con cui posiziono il background è la seguente:
body#sectionthree #container
{
    background: #FFFFFF url(images/bkg.jpg) top right fixed no-repeat;
}

la mia immagine è 300 x 400, occupa praticamente tutta la parte di destra.
Con IE tutto OK
Con FF e una risoluzione 1024x768 se ne vede solo un pezzo sulla 
sinistra. Ho scoperto che se
ridimensionio il browser restringendelo l'immagine "esce" in modo 
proporzionale





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="keyword" content="" />
<meta name="description" content="" />
<style type="text/css">
body
{
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    text-align: center;        /* allinea la pagina al centro */
    padding: 0;
    margin: 0;
    padding: 0;
    background: #DAE8EE url(images/background.jpg) bottom left fixed 
repeat-x;
   
    scrollbar-face-color: #dddddd;
    scrollbar-shadow-color: #cccccc;
    scrollbar-highlight-color: #dddddd;
    scrollbar-3dlight-color: #cccccc;
    scrollbar-darkshadow-color: #ffffff;
    scrollbar-track-color: #ffffff;
    scrollbar-arrow-color: #666666;   
}

#headertop   
{       
    margin: 0px auto;
    border: 0;
    padding-right: 5px;
    width: 800px;
    color: #AAAAAA;
    background-color: #DAE8EE;
    text-align: right;
    voice-family: "\"}\"";
    voice-family:inherit;   
    width: 795px;   
}   

#main
{
    color: #333;
    margin: 0px auto;
    padding: 0;
    border: 1px solid #000000;
    width: 800px;
    background-color: #FFFFFF;
/* Here is the ugly brilliant hack that protects IE5/Win from its own 
stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing 
it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct 
value is
below. See http://glish.com/css/hacks.asp for details. */   
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 798px;
}

/* I've heard this called the "be nice to Opera 5" rule. Basically, it 
feeds correct
length values to user agents that exhibit the parsing error exploited 
above yet get
the CSS box model right and understand the CSS2 parent-child selector. 
ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack 
(above). */
html>body #main    
{
    width: 798px;
}
   
   
#header
{
    border: 0px;
    margin: 0px;
    padding: 0px;
    background: #CCCCCC;
    height: 93px;
    text-align: left;
}   

#header-bottom
{
    height: 3px;
    font-size: 1px;
    background: rgb(241, 143, 23) url(images/bkg-header2.jpg);
}   
   
#container   
{   
    margin: 0px;
    border: 0px solid #FF0000;
    padding-top: 25px;
    background-color: #FFFFFF;
    width: 100%;
    overflow: hidden;   
}   

body#sectionthree #container
{
    background: #FFFFFF url(images/bkg.jpg) top right fixed no-repeat;
}

#area-left   
{
    border: 0px solid #FFFF00;
    color: #666;
    background-color: #FFFFFF;
    float: left;
    width: 150px;
    text-align: left;
}   
   
   
#footer {
    clear: both;
    border: 0;
    color: #FFFFFF;
    background-color: #FFFF00;
    padding: 5px;
    text-align: right;   
    font-size: xx-small;
    voice-family: "\"}\"";
    voice-family:inherit;
    font-size: x-small;   
    }

html>#footer   
{
    font-size: x-small;
}
   
   
#area-center
{
    margin: 0px;
    border-left: 0px solid #999999;
    border-right: 0px solid #999999;   
    padding-right: 100px;
    color: #000000;
    background-color: transparent;
    text-align: justify;   
    width: 498px;
    float: left;
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 398px;       
}   


   
/* stili per definizione menu*/
#menu
{
    margin: 0px;
    padding: 0px;
    background-color: transparent;
    width: 140px;
}
   
#menu ul
{
    border: 0;
    margin: 0; padding: 0; /* elimino i rientri delle liste */
    list-style-type: none; /* elimino i punti elenco */
}   
   
#menu ul li
{
    margin: 0;
    border-bottom: 2px solid #08006B;
}       
   
#menu ul li a.lev1
{
    display: block;                        /* il link occupa tutto lo 
spazio orizzontale */
    background-color: transparent;
    border: 0px;
    padding: 5px 1em 5px 0px;
    color: #08006B;
    text-decoration: none;                /* elimino la sottolineatura, 
che si tratta di un link si capisce dalla struttura */
    text-align: right;
    height: 1.5em; line-height: 1.5em;     /* altezza del link: height e 
line-height devono avere il medesimo valore */
    font-weight: bold;
    letter-spacing: 1px;
    font-size:    x-small;     
    voice-family: "\"}\"";  
    voice-family: inherit;  
    font-size:    x-small;  
}   
   
#menu ul li a.lev1:hover
{
    color: #EEEEEE;
    /*border-right: 2px solid #08006B;*/
    background-color: #00FF00;
}
   
body#sectionthree #menu li#three a.lev1,
{
    border: 0px;
    color: #08006B;
    background: #FF0000;
}   


</style>
</head>
<body id="sectionthree">

<div id="headertop"><a href="/">Home</a>&nbsp;|&nbsp;<a 
href="contact.php">Contattaci</a></div>
<div id="main">
<!-- INIZIO BARRA HEADER -->
<div id="header">header</div>

<div id="header-bottom"></div>
<!--  FINE BARRA HEADER -->
<div id="container">
    <div id="area-left">
        <!-- INIZIO MENU LATERALE -->
        <div id="menu">
            <ul>
                <li id="three"><a class="lev1" 
href="index.php?action=Menu" title="Menu">Menu</a></li>
            </ul>
        </div>
        <!--  FINE MENU LATERALE -->
    </div>
    <!-- INIZIO CONTENUTO PRINCIPALE -->
    <div id="area-center">
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    testo testo testo testo testo testo testo testo testo testo
    </div>
    <!-- FINE CONTENUTO PRINCIPALE -->
</div>
<div id="footer"></div>
</div>
</html>

Maggiori informazioni sulla lista cssdesign