Esportazione grafica in html

[JonnyFara]

http://img299.imageshack.us/my.php?image=dhssitexj7.jpg

Vlevo discutere di come realizzare questa espostazioni di immagini in html e quale funzione ritenete che debba usare per realizzare un buon codice.
Io avevo pensato a ciò ma non so se è un ottimo sistema.
-creo un div conteiner ,allineato al centro .
-all'interno ci creo altri tag div su bordi per impostarci le immagini che hanno i bordi con le sfumature come vedete nell'immagine che ho fatto i rettangoli quelli corrisponderebbero ai tag div.
secondo voi è un buon sistema ?
ne esistono migliori ?

[Hobby]

Il tuo scopo è ottenere un layer con angoli arrotondati?

[ricman]

Originariamente inviato da JonnyFara
Vlevo discutere di come realizzare questa espostazioni di immagini in html e quale funzione ritenete che debba usare per realizzare un buon codice.

Butto lì uno spunto... magari ti è utile...
Gli angoli arrotondati li puoi fare coi "nifty corners" (cerca su gooogle trovi milioni di risultati e codice) così te la cavi con due div (uno sopra per il contenuto e uno sotto per il riflesso). All'inizio può sembrarti difficile a poi è di una comodità elevata.
Per il "buon codice" basta non utilizzare editor WYSIWYG come FP ed altri...

[JonnyFara]

gia ho visto di cosa si trattano i nifty corners , ma per me è molto difficle non ho capito come realizzarli , ci vuole molta conoscenza css , mipare.
cmq mettiamo caso , che riesca a fare i nifty corners dopo cosa dovrei fare 2 angolini in alto come ho fatto io nel disegno ?e poi come continuo , voglio leggere qualcosa che mi insegni a costruire una grafica del genere in un sito ,come faccio ?voglio conoscere le tecniche per farlo per bene.

[Hobby]

Codice CSS

/* CONTENITORI DEI BORDI E DEL CONTENUTO DEL BOX */

div.BORDI {width: 120px;}

div.CONTENUTO{background-color: #b1d6a7;
color: #000000;
width: 110px;
padding: 5px;}

/* CREAZIONE DEGLI ANGOLI SMUSSATI */

span.TOP, span.BOTTOM{display: Block;
background-color: #FFFFFF;}

span.TOP span, span.BOTTOM span{display: Block;
overflow: Hidden;
background-color: #b1d6a7;
height: 1px;}

span.RIGA1{margin: 0 5px;}

span.RIGA2{margin: 0 3px;}

span.RIGA3{margin: 0 2px;}

span.TOP span.RIGA4, span.BOTTOM span.RIGA4{margin: 0 1px;
height: 2px;}

Codice HTML

<div class="BORDI">
<span class="TOP">
<span class="RIGA1"></span>
<span class="RIGA2"></span>
<span class="RIGA3"></span>
<span class="RIGA4"></span>
</span>
</div>

<div class="CONTENUTO">
XHTML con Style

 Corso gratuito e completo per principianti e non

</div>

<div class="BORDI">
<span class="BOTTOM">
<span class="RIGA4"></span>
<span class="RIGA3"></span>
<span class="RIGA2"></span>
<span class="RIGA1"></span>
</span>
</div>

[ricman]

Originariamente inviato da JonnyFara
cmq mettiamo caso , che riesca a fare i nifty corners dopo cosa dovrei fare 2 angolini in alto come ho fatto io nel disegno ?e poi come continuo , voglio leggere qualcosa che mi insegni a costruire una grafica del genere in un sito ,come faccio ?voglio conoscere le tecniche per farlo per bene.

Gli angoli "vengono da se" una volta che hai messo in piedi la cosa...
Qui trovi l'articolo completo e gli esempi di codice spiegati punto per punto...

[JonnyFara]

Originariamente inviato da Hobby
Codice CSS

/* CONTENITORI DEI BORDI E DEL CONTENUTO DEL BOX */

div.BORDI {width: 120px;}

div.CONTENUTO{background-color: #b1d6a7;
color: #000000;
width: 110px;
padding: 5px;}

/* CREAZIONE DEGLI ANGOLI SMUSSATI */

span.TOP, span.BOTTOM{display: Block;
background-color: #FFFFFF;}

span.TOP span, span.BOTTOM span{display: Block;
overflow: Hidden;
background-color: #b1d6a7;
height: 1px;}

span.RIGA1{margin: 0 5px;}

span.RIGA2{margin: 0 3px;}

span.RIGA3{margin: 0 2px;}

span.TOP span.RIGA4, span.BOTTOM span.RIGA4{margin: 0 1px;
height: 2px;}

Codice HTML

<div class="BORDI">
<span class="TOP">
<span class="RIGA1"></span>
<span class="RIGA2"></span>
<span class="RIGA3"></span>
<span class="RIGA4"></span>
</span>
</div>

<div class="CONTENUTO">
XHTML con Style

 Corso gratuito e completo per principianti e non

</div>

<div class="BORDI">
<span class="BOTTOM">
<span class="RIGA4"></span>
<span class="RIGA3"></span>
<span class="RIGA2"></span>
<span class="RIGA1"></span>
</span>
</div>

ok ho provato funziona.Ma è un piccolo quadratino mi serve 996 pixel per 1195pixel ,come faccio ?
ho povato ad ingrandire il div , ma escono dei quadrettoni e si perde la rotondanza.

[JonnyFara]

Originariamente inviato da Hobby
Codice CSS

/* CONTENITORI DEI BORDI E DEL CONTENUTO DEL BOX */

div.BORDI {width: 120px;}

div.CONTENUTO{background-color: #b1d6a7;
color: #000000;
width: 110px;
padding: 5px;}

/* CREAZIONE DEGLI ANGOLI SMUSSATI */

span.TOP, span.BOTTOM{display: Block;
background-color: #FFFFFF;}

span.TOP span, span.BOTTOM span{display: Block;
overflow: Hidden;
background-color: #b1d6a7;
height: 1px;}

span.RIGA1{margin: 0 5px;}

span.RIGA2{margin: 0 3px;}

span.RIGA3{margin: 0 2px;}

span.TOP span.RIGA4, span.BOTTOM span.RIGA4{margin: 0 1px;
height: 2px;}

Codice HTML

<div class="BORDI">
<span class="TOP">
<span class="RIGA1"></span>
<span class="RIGA2"></span>
<span class="RIGA3"></span>
<span class="RIGA4"></span>
</span>
</div>

<div class="CONTENUTO">
XHTML con Style

 Corso gratuito e completo per principianti e non

</div>

<div class="BORDI">
<span class="BOTTOM">
<span class="RIGA4"></span>
<span class="RIGA3"></span>
<span class="RIGA2"></span>
<span class="RIGA1"></span>
</span>
</div>

ho usato questo codice e va bene , ma come faccio per amntenere i lati rotondo al variare della grandezza , devo cambiare quali paramentri ? e in che modo ? ci ho provato ma nn danno un effetto perfetto si tratta di stare a giocare un pò , tu cosa mi consigli di consigli di cmabiare ?

[Hobby]

Va da se che tutti i parametri di ampiezza vanno adattati alla misura che vuoi ottenere