div arrotondati dinamici

[moribura]

Ciao,

è possibile creare dei div con i bordi arrotondati dinamici al contenuto, inmodo che la larghezza del div non sia fissa e si adatti al contenuto?

Grazie

[Mich_]

Io spezzerei il quesito cosi`:

1. E` possibile creare dei blocchi le cui dimensioni si adattano al contenuto?
Risposta: Si`, e` il comportamento di default dei blocchi, quando non e` specificata la dimensione

2. E` possibile creare angoli arrotondati quando non e` nota la dimensione del blocco?
Risposta: Si`: sono state proposte soluzioni diverse, alcune basate solo su HTML+CSS che pero` fanno uso di marcatura supplementare (ad es. "spiffy corners"), altre che fanno uso di JS (non intrusivo) ma non richiedono marcatura supplementare (es: "nifty corners").

Tra i "link utili" del forum trovi riferimenti ad ambedue queste tecniche.

[moribura]

Ciao,

grazie per la completa risposta.
Io ho provato a usare nifty e questo è il codice usato.

<style type="text/css">
body{padding: 20px;background-color: #DDD;
font: 76% Verdana,Arial,sans-serif}
div#minipics ul{list-style-type: none;margin:0 15px;padding:0}
div#minipics li{float:left;width:100px;margin: 10px 10px 10px 0;background-color: #FFF}
div#minipics li img{display: block;width: 80px;height: 80px;margin:5px 10px;border: 0px}
</style>
<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div#minipics li","#DDD","#FFF");
}
</script>


<div id="minipics">
<ul>[*]prov aprov aprova[/list]
</div>




ma non funziona. Sai aiutarmi a capire cosa devo cambiare..Ho provato a mettere le dimensioni in % ma nulla non cambia nulla di nulla va sempre accapo.

Grazie
M

[moribura]

Nessuno può aiutarmi? Sono due giorni che ci provo..che cerco su google ma non trovo nulla di nulla che faccia al caso mio e mi risolva questo problema..

[Mich_]

Non me ne intendo molto di JS, ma mi pare che nel tuo codice hai messo lo script con l'onload nella head, mentre va invece inserito in fondo al body

Non ho capito cosa intendi con "Ho provato a mettere le dimensioni in % ma nulla non cambia nulla di nulla va sempre accapo."

Per i "nifty", deviprima avere un layout corretto, con i blocchi normali (senza arrotondamenti).
Poi puoi applicare i JS necessari.

Se ci sono problemi di layout, devi risolverli prima: tra l'altro il JS complica un po' la struttura e quindi se ci sono erorri non riesci poi a correggerli.

[moribura]

ma il problema è che il codice che ho incollato è la mia pagina, non ho biaogno di altro mi serve solo un div semplice con bordi arrotondati e ridimensionabile ma non riesco a farlo..

[rickystra]

Rounded("div#minipics li","#DDD","#FFF");

Prova a togliere il "li"

[Mich_]

I "Nifty corners" sono una tecnica che utilizza JS, per cui ti sposto nel forum JS.

[artorius]

Io li uso abbastanza da sapere una cosa: quando lo script non fa niente è perchè uno dei file non è caricato correttamente (gli CSS o lo script), controlla quelli per prima cosa.

In secondo luogo quel selettore non fa il round del div ma del LI e manca l'indicazione di dove fare il round (all, top, bottom, left, right, bl, tl, br, bl)

Se posso suggerirti una soluzione molto più plain:
CSS

<style type="text/css">
    body{
        background-color: #000000;
    }
    
    ul{
        list-style: none;
    }
    
    li{
        padding: 0px; 
        margin: 0px;
        width: 150px;
    }
    
    li div{
        height: 100px;
        margin: 0px;
        padding: 0px;
        background-color: #FFFFFF;
    }
</style> 

JS

window.onload=function(){
if(!NiftyCheck())
    return;
Rounded("div#minipics li", "all", "#000","#FFF");
} 

X html

<div id="minipics">
<ul>[*]
    <div>prov aprov aprova</div>    
[/list]
</div>