• J
    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... :)
    0
  • massy
    Moderatore •

    http://www.html.it/articoli/nifty/index.html 🙂

    :ciauz:

    0
  • E
    Super User •

    Prova http://www.spiffycorners.com/

    0
  • J
    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! 🙂

    0
  • J
    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...

    0
  • J
    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! 😄

    0
Effettua l'accesso per rispondere