• User Attivo

    box css angoli arrotondati

    ciao a tutti...

    penserete che da solo non so fare proprio niente... è così. ho provato almeno tre tutorial per creare un box con angoli arrotondati e non c'è stato niente da fare... seguendo l'articolo di html.it angoli arrotondati con i css, questo è il codice xhtml

    <div id='boxBottom'><div id='boxTop'>
    <p class='benvenutoNav'><strong>benvenuto,  Federico </strong>
    <a href='logout.php'>logout</a> 
    <a href='modifica.php'>modifica iscrizione</a>
     <a href='preCancella.php'>cancella l'iscrizione</a></p>
    </div></div>
    

    e questo il css

    .benvenutoNav{
        border:0;
        background-color:transparent;
        font-size:0.8em;
        line-height:1.5em;
        padding:5px 0 5px 10px;
    }
    div#boxBottom{
        width:195px;
        margin-left:5px;
        **background-color: #FFF;**
        background-image:url("boxBottom.png");
        background-repeat: no-repeat;
            background-position: bottom left;
    }
    div#boxTop{
        margin:0;
        padding:0;
            background-image: url("boxTop.png");
            background-repeat: no-repeat;
    }
    
    ``` il problema è questo: se inserisco il colore di sfondo a #boxBottom, questo mi va a coprire gli angoli arrotondati... se non lo inserisco, il box non è naturalmente completo. Ho anche provato ad usare un'immagine molto alta per il #boxTop, in modo da usare una tecnica simile a quella delle sliding doors, ma in quel caso non riesco ad evitare che l'immagine della parte superiore del box vada a coprire quella inferiore... insomma, non so più che pesci prendere! :x
    avete qualche consiglio su come fare 'sto benedetto box, please?
    
    grazie mille... :)

  • Moderatore

  • Super User

  • User Attivo

    grazie mille! 🙂

    improvvisamente ho avuto un'illuminazione e sono riuscito a farlo col sistema sliding doors... ma il metodo che avete linkato è molto interessante.
    aspetto con ansia il css2, le immagini multiple come sfondo risolveranno tutto! 🙂

    se volete vedere il risultato: http://utenti.lycos.it/oliverclaims/agrivillar/home.php

    grazie mille! 🙂


  • User Attivo

    purtroppo, guardano il sito con ie 5.5, i margini sono completamente sballati... ecco il risultato:
    image
    mentre dovrebbe essere così, naturalmente...
    image
    ecco il css:

    #boxTop{
        background: url("topTrasp.png") no-repeat 5px 0%;
        padding-top:15px;/*sposta in basso la seconda immagine, sliding doors*/
        font-size:0.8em;
        line-height:1.5em;
    }
    #boxBottom{
        margin-left:5px;
        background: url("bottomTrasp.png") no-repeat left bottom;
    } fieldset, p{
        background-color:transparent;
        margin:0;
        padding:0 0 15px 15px;
    } legend{
        color:red;
        font-weight:bold;
    } input{
        max-width: 179px;
    }
    

    e l'xhtml:

    
    <div id='boxTop'><div id='boxBottom'>
    <form method='post' action='riconoscimento.php' id='registrazione'>
    <fieldset><legend>login al sito</legend>
    <label for='e-mail'>e-mail:<br/><input id='e-mail' type='text' value='e-mail' name='indirizzoMail' tabindex='10' /></label><br/>
    <label for='password'>password:<br/><input id='password' type='password' value='password' name='password' tabindex='20' /></label><br/>
     <input type='submit' value='entra' />
    </fieldset>
    </form></div></div>
    
    

    un problema simile capita con la stessa versione di ie per un menu a tabs:
    image
    mentre in mozilla è così:
    image
    che fare?? Oltretutto mi sembra stranissimo che in ie 5.0 funzioni tutto senza problemi! 😄 Googleando in giro non ho trovato nessun bug significativo per il sistema delle sliding doors...


  • User Attivo

    gotcha! 🙂

    sono riuscito a risolvere tutti e due i problemi, non mi sembra vero! 😄
    la questione del box era dovuta al fatto che IE raddoppia i margini di alcuni elementi... quindi si risolve in questo modo. L'elemento è definito flottante a sx ed il display:inline risolve il problema pur non avendo alcuna influenza, perché gli elementi flottanti sono SEMPRE elementi di blocco.

    
    #boxTop{
        background: url("topTrasp.png") no-repeat;
        background-position:  5px 0%;
        padding-top:15px;/*sposta in basso la seconda immagine, sliding doors*/
        font-size:0.8em;
        line-height:1.5em;
    **    float:left;
        display:inline;**
        width:200px;
    }
    
    

    il problema delle tabs della lista era semplicemente uno spazio mancante... IE è proprio INFIDO! 😄