All postsPrendo spunto da un post su WebDesignerWall, nel quale viene spiegato come creare un box espandibile in larghezza e altezza all’ aumentare o diminuire della grandezza del testo che non mi ha sopreso più di tanto visto che gia c’ era qualcosa di simile, per descrivervi un’ altra tecnica più semplice e veloce che ho utilizzato di recente. La differenza è che l’ altezza sarà variabile ma la larghezza fissa, cosa che può evitare problemi in molte situazioni.
Disegniamo in photoshop con lo strumento rettangolo arrotondato un box con un colore a vostro piacimento e cliccando due volte sul livello aggiungiamo un bordo ad esempio di 2pixel al rettangolo con un colore più scuro, ora con lo strumento sezione tagliamo la parte superiore e inferiore dei bordi arrotondati della stessa altezza e salviamoli come .gif:
Questo sarà il codice xhtml del box:
<p CLASS="corner"><img SRC="corner_top.gif" /></p>
<p CLASS="txt">il vostro testo.. www.deswign.com
<p CLASS="corner"><img SRC="corner_down.gif" /></p>
mentre questo sarà il codice css:
width:350px; /* larghezza dell' immagini */
margin:0 auto; /* in questo modo sarà centrato */
}
.mybox .corner {
float:left;
width:350px; /* larghezza dell' immagini */
height:15px; /* altezza delle immagini */
}
.mybox .txt {
float:left;
width:346px !important; /* = (larghezza totale - somma larghezza bordi) */
width /**/: 350px; /* hack per IE5 */
background:#e5eff9; /* lo stesso colore dello sfondo delle immagini */
border:2px solid #afd0fa; /* lo stesso colore dei bordi delle immagini */
border-width:0 2px; /* visualizza solo i bordi laterali */
}
.mybox p {
padding:5px;
font:normal 100%/1.4 Verdana;
margin:0;
}
questo è una demo, mi sembra un metodo semplice e veloce ma se cercate qualcosa di più complesso vi consiglio:
Come posso creare POST espandibili in modo facilissimo? x favore……
cosa intendi per ‘post espandibile’? fammi un esempio o posta direttamente il link al codice. a presto