bordi arrotondati

[jerry6565]

Scusate ragazzi... forse qualcuno di voi sa darmi la giusta mano!

E' da qualche ora che ci smanetto ma ancora non ci sono riuscito completamente, sarà che sono quasi le 5 o qualsiasi altro problema problema... io non ci riesco !

Ho creato un foglio di stile che mi (dovrebbe) permettere di aggiungere sia bordi che angoli di un div tramite immagini png ( xke ho un background eterogeneo e non sarebbe bello vedere quelle linguette negli angoli ).

<style type="text/css">
    body {
        background: url(images/background-image.gif);
        
        font: 10px lighter Verdana, Arial, Helvetica, sans-serif;
        
        color:#D6D6D6;    
    }

    .window-top-left {
            background: url(images/window-top-left.png)top left no-repeat;
    }    
    .window-top-center {
            background: url(images/window-top-center.png)top repeat-x;

    }         
    .window-top-right {
            background: url(images/window-top-right.png)top right no-repeat;
    }
              
    .window-middle-left {
            background: url(images/window-middle-left.png)top left repeat-y;
    }
    .window-middle-right {
              background: url(images/window-middle-right.png)top right repeat-y;
    }
    .window-bottom-center {
            background: url(images/window-bottom-center.png)bottom repeat-x;
    }    
    .window-bottom-left {
            background: url(images/window-bottom-left.png)bottom left no-repeat;
    }
    .window-bottom-right {
          background: url(images/window-bottom-right.png)bottom right no-repeat;
    }
    .window-middle-left {
          background: url(images/window-middle-left.png)top left repeat-y;
    }
    .window-middle-right {
          background: url(images/window-middle-right.png)bottom right repeat-y;
    }
    
    /*div { border: 1px solid black; }*/

</style> 

il piccolo codice html sarebbe questo:

    <div class="window" style="width:300px;">
        <div class="window-top-left">
            <div class="window-top-right">
                <div class="window-top-center" style="margin-left: 13px; margin-right:13px; height:13px;"></div>
                <div class="window-middle-left" style="margin:0;">
                    <div class="window-middle-right" style="width:100%; height:100%;">
                    
                        <div style="background:#214f95;margin:0 13px 0 13px;">
                            

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut tellus.  Nullam consectetuer posuere felis. Nam mollis. Ut ac nunc et eros  euismod porttitor. Mauris non ante. Curabitur enim lectus, placerat eu,  sagittis sit amet, mattis id, pede. Suspendisse ac dui. Nulla facilisi.  Sed at massa eget quam tincidunt commodo. Donec orci. </p>
                        </div>
                    
                    </div>
                </div>
            
                <div class="window-bottom-left">
                    <div class="window-bottom-right">
                        <div class="window-bottom-center" style="margin-left: 13px; margin-right:13px; height:13px;"></div>
                    </div>
                </div>        
            </div>
        </div>
     </div> 

scusate se metà css è in un file e metà nell'altro ma stavo provando continuamente!


allego il file di come si vede questa cosa in firefox in IE ancora peggio... non mostra nemmeno le immagini ed io non so proprio x quale motivo (le img sono salvata con photoshop cs3 in formato png24)



se ci sono soluzione molto piu semplic o anche sintatticamente piu corte... vi prego... fatemi sapere!

[Myaku]

Originariamente inviato da jerry6565
in IE ancora peggio... non mostra nemmeno le immagini ed io non so proprio x quale motivo (le img sono salvata con photoshop cs3 in formato png24)

se per IE intendi la versione 6, di suo non supporta la trasparenza png. Fai una ricerca che abbiamo già parlato di come risolvere

per il distacco tra gli elementi, azzera margini e padding a tutti gli elementi (usa il selettore *), al limite li andrai a ridefinire dove ti serve.

[jerry6565]

grazie della risp ma io uso ie 7 e come al solito non funziona!

[jerry6565]

grazie mille dei consigli :P per farlo funzionare anche su ie ho dovuto solamente fare qualche modifica al css! (background solamente non lo riconosceva bene ho dovuto spezzarlo in tutti i suoi sottoselettori.... grazie mille ora funziona