- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- box css angoli arrotondati
-
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... :)
-
-
-
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!
-
purtroppo, guardano il sito con ie 5.5, i margini sono completamente sballati... ecco il risultato:
mentre dovrebbe essere così, naturalmente...
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:
mentre in mozilla è così:
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...
-
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!