"Nifty", mi escono solo gli angoli TOP, why?

**Donovant** · 19-12-2007, 18:33

Salve gente, usando il CSS e Js per gli angoli tondi "Nifty" mi escono solo gli angoli di sopra...
HTML:

codice:

<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
    return;
Rounded("div#container","all","#FFF", "#EEF", "smooth");
}
<body>
      
         <div id="container">
                
                            <h1>CURRICULUM</h1>
                            <div id="box_ul">
                            <ul id="dati">[*]Nome : <span>Simone</span>[*]Cognome : <span>Rotella</span>[*]Citta' : <span>Catanzaro</span>[*]Data di nascita : <span>xx/xx/xxxx</span>[*]Residente : <span>S.Elia</span>     [/list]
                            
                          <div id="photo"></div>
                          </div>
         </div>
       
</body>

CSS:

codice:

*{ overflow:auto;margin:0;padding:0}

body{padding:0 11%;}

h1{font: bolder 24px Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align:center;width:100%; border:0px solid black;margin:10px 0;
}

div#container{background:#EEF;width:100%;margin:30px 0 0 0;padding:0px;}

div#box_ul{width:97%;float:left;padding:0px;display:inline;}

ul#dati{padding-bottom:2px;float:left;}

li span{font-weight: normal; border-bottom:1px dotted Gray;}

Senza parlare del fatto che se metto "div#box_ul:100%" in Firefox esce la scrollbar orizzontale.
Cmq il prob dgli angoli è questo:

IE

FF

Se lascio solo il "container" ed il titolo, funge....ma solo in questo modo.

**Donovant** · 20-12-2007, 16:15

Ho risolto tutto, sia i problemi dovuti alle differenze di interpretazione dei BOX model fra i vari brosware, grazie ad un link passato da "Myaku", e sia il prob degli angoli tondi, in specie quelli di una immagine da inserire.
Per chi avesse problemi nel farlo guardasse nel CSS #photo e img.
HTML:

codice:

<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
    return;
Rounded("div#container","all","#FFF", "#AAF", "smooth");
Rounded("div#photo","tl br","#AAF","transparent");
}
</script>

<body>
   <div id="container">
        <h1>CURRICULUM</h1>
        <ul id="dati">[*]Nome : <span>Simone</span>[*]Cognome : <span>Rotella</span>[*]Citta' : <span>Catanzaro</span>[*]Data di nascita : <span>xx/xx/xxxx</span>[*]Residente : <span>S.Elia</span>     [/list]
        <div id="photo">[img]simone.jpg[/img]</div>
                          
        <div id="testo">
             <div id="box_testo">
                  <h3>TITOLO1</h3>
                  <span class="txt">
                          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 
                  </span>
             </div>
             <div id="box_testo">
                  <h3>TITOLO1</h3>
                  <span class="txt">
                          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 
                  </span>
             </div>               
             <div id="box_testo">
                  <h3>TITOLO1</h3>
                  <span class="txt">
                          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 
                  </span>
             </div>
        </div>
              
  </div>
       
</body>

Da precisare che l'immagine inserita da me è da w:100 e h:130, infatti il div #photo ha queste dimensioni, ma per il tag img ho dovuto rimpicciolire di 10px in altezza, visto che il Niftyaggiunge (probabilmente) 5px sopra e sotto, dovuto all'aggiunta di 5 linee sopra e 5 linee sotto..., e poi ho messo (sempre in "img") w:0; infatti l'immagine che si vede è quella del background del "div #photo"....
Probabilmente si sarebbe potuto aggirare il tutto utilizzando l'image replacement, mettendo, anzichè caricare 2 immagini per una...se qualcuno sa come fare, mi aggiorni.
Grazie.
CSS:

codice:

<style type="text/css">

*{ overflow:auto; margin:0; padding:0}
body{padding:0 10px;}

div#container{background:#AAF;
width:100%;
margin:30px 0 0 0;
padding:0px;
border:0px solid red;
}

div#box{padding:0px;
border:0px solid Black;
float:left;
clear:right;
display:inline;
width:100%;
}

h1{font: bolder 24px Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align:center;
   width:100%;
   border:0px solid black;
   margin:10px 0;
}

ul#dati, ul#dati li{margin:0;
                    padding:0;
                    list-style:none;
                    font-weight: bolder;
}
ul#dati{
border:0px solid Black;
padding:1.5%;
float:left;
width:57%!important;
width /**/:60%;
}

li span{font-weight: normal; border-bottom:1px dotted Gray;}

#photo{
display:inline;
float:right;
background:url("simone.jpg") no-repeat top left;
margin-right:3%;
overflow:hidden;
width:100px;
height:130px;
}

img{
display:inline;
height:120px;
width:0;
}

#testo{
clear:both;
border:0px solid;
padding:1%;
width:98% !important;
width /**/:100%;

}
div#box_testo{
border:0px solid #666;
margin-top:20px; 
padding:0px;
float:left;
}

span.txt{font-size:14px;}

</style>

Discussione: "Nifty", mi escono solo gli angoli TOP, why?

Strumenti discussione

Ricerca discussione

Visualizza

"Nifty", mi escono solo gli angoli TOP, why?

Permessi di invio