[RISOLTO] Problema realizzazione angoli arrotondati

[skybluetux]

Salve. Come anticipato in questa discussione sto creando un nuovo template per il mio sito.

Il mio problema attuale è nella realizzazione degli angoli arrotondati per i moduli.
Attualmente sto facendo dei tentativi con le immagini prese dal template predefinito di joomla 1.5 poi successivamente, quando avrò sistemato e capito bene il funzionamento sostituirò le immagini con altre create da me per il sito.

Il sito in oggetto è: http://www.napoletanosinasc.altervista.org

Seguendo le varie guide ho inserito nel css il seguente codice per realizzare un box con degli angoli arrotondati con il metodo dei 4 div annidati e relative immagini:

Codice: [Seleziona]

div.module {
background: url(../images/mw_box_tl.png) 0 0 no-repeat;
padding: -10px;
}
div.module div {
  background: url(../images/mw_box_bl.png) 0 100% no-repeat;
  margin: 0;
  border: 0;
}
div.module div div{
  background: url(../images/mw_box_tr.png) 100% 0 no-repeat;
}
 
div.module div div div {
  background: url(../images/mw_box_br.png) 100% 100% no-repeat;
}

div.module div div div div{
  background: none;
}
Purtroppo, sembra che le immagini dei div successivi si sovrappongano alle altre facendole sparire, e non riesco a trovare soluzione. Ho tentato di modificare valori di padding e margin, ricompaiono, ma manca sempre qualcosa.

Spero di riuscire a risolvere e capire anche questo problema con il vostro aiuto
Grazie

[conti1]

ciao
hai fatto un macello con i  le immagini
e manca un poco di  css

partimo col primo div e cosi via fino a comporre il tutto

Codice: [Seleziona]

div.module {
    background: url("../images/mw_box_br.png") no-repeat scroll 100% 100% transparent;
    margin: 0 0 15px;
    padding: 0;
}
div.module div {
    background: url("../images/mw_box_bl.png") no-repeat scroll 0 100% transparent;
}
div.module div div {
    background: url("../images/mw_box_tr.png") no-repeat scroll 100% 0 transparent;
}

div.module div div div {
    background: url("../images/mw_box_tl.png") no-repeat scroll 0 0 transparent;
}

div.module div div div {
    padding: 30px 10px 15px;
    width: auto;
}


in questo mpdp io da qui lo composto e funziona

[skybluetux]

Ciao conti ancora una volta ti ringrazio per il preziosissimo aiuto. Finalmente il puzzle si è composto.
 Ora dovrò analizzare come hai fatto a trovare i parametri giusti

Eventualmente userò questo topic per chiedere ulteriori chiarimenti sull'argomento

[skybluetux]

Rieccomi di nuovo
Sono ancora alle prese con gli ancoli arrotondati, dopo aver risolto il problema del "puzzle" ora faccio un altra domanda, dopo aver creato delle immagini personalmente e sostituite a quelle che avevo usato prima.

Allora il box da me disegnato presenta un difetto vorrei sapere se è eliminabile. Avendo una parte trasparente il mio file png, sotto "bottom right" si vede il prolungamento del "bottom right" che non dovrebbe vedersi.

Si può risolvere ?
Ecco il link
www.napoletanosinasc.altervista.org

[conti1]

ciao
fai una prova non son sicuro ma tentare si può
riduci la larghezza a 359
di questa immagine
mw_box_br.png"
uguale su questa
mw_box_tr.png
ora sono 367
falle di 359

[skybluetux]

Niente non funziona...
Potrei ridimensionare alla dimensione precisa del box, solo che poi non si può modificare più la larghezza della colonna destra / sinistra. Giusto ?

[Postedit] Ho provato a farla 174px  cioè la dimensione precisa di come viene mostrata e così va bene, se è l'unica soluzione possibile userò questa, però in questo non funzionerebbe un eventuale template fluido... [/Postedit]

[conti1]

si in questo modo funziona ma un rattoppo se allarghi so solo un px hai il vuoto.
ricontrolla il tutto deve funzionare se funzionava quelle precedenti rifai  il tutto
rimetti quelle vecchie funzionanti e  come ti fatto l'esempio ieri
idem tutti i css che ti ho postato e poi ricambia solo le immagini
cosi facendo trovi il punto che non funziona.

[skybluetux]

si in questo modo funziona ma un rattoppo se allarghi so solo un px hai il vuoto.
ricontrolla il tutto deve funzionare se funzionava quelle precedenti rifai  il tutto
rimetti quelle vecchie funzionanti e  come ti fatto l'esempio ieri
idem tutti i css che ti ho postato e poi ricambia solo le immagini
cosi facendo trovi il punto che non funziona.

Il fatto è che c'è una differenza importante. Cioè le immagini mie hanno una parte trasparente. Quelle immagini che avevamo usato per l'esempio per il problema di cui sopra invece non erano trasparenti.

[conti1]

ciao
 si e la trasparenza che danno ho colori il trasparente del colore del tuo sfondo oh rifai l'immagine sx e sx alto
prova queste

[skybluetux]

Grazie conti ho scaricato l'archivio. Per ora lascio così poi se dovessi cambiare le dimensioni del template utilizzerò quello
Metto risolto