[Risolto] Angoli arrotondati in box a larghezza fissa

[Ale_joomla]

Ciao a tutti!
Scrivo perché ho questo problema:
Nella creazione di un box con gli angoli arrotondati succede che l'immagine "top.png" si posizioni sopra l'immagine dei contenuti del box "media.png" così facendo il box prende la forma rettangolare dell'immagine "media.png".
La colonna è impostata su Style="rounded".
Posto uno screen del menu e il CSS del box.


div.module h3 {
      margin: 0;
      font-size: 1em;
      margin-top: 5px;
      margin-bottom: 20px;
      color: #FFF;
   
   }


div.module div {
      width: 195px;
      background: url(../images/media.png) repeat-y;
      color: #b94e00;
      margin-bottom: 2px;
      margin-right: 15px;
  }


div.module div div  {
      background: url(../images/bottom.png) no-repeat;
      background-position:  bottom left;
  }

div.module div div div {
      background: url(../images/top1.png) top left no-repeat;
      padding: 7px 10px 15px 12px;
      border: 0px;
  }

div.module div div div div {
      background: none;
      padding:0;
      width: auto;
      width:100%;
  }

Sapreste aiutarmi a impostare bene il tutto??
Vi ringrazio in anticipo,

[conti1]

serve il link del sito  altrimenti non si capisce che ti succede dalle immagini sembra che ci sia un'altra immagine che si sovrappone  .
ma scusa
se hai creato un'immagine unica  xche fai tutto quel casino ?
 hai gia un'immagine  sostituisci quella con la tua  e hai fatto il box con angoli tondi , anche se  un box ad angoli tondi non si fa mai di dimensioni fissi ma  deve essere  fluido  , nel senso che allarghi ho stringi la colonna la tua immagine non va piu bene.

[Ale_joomla]

Il sito non è on-line, per quello ho postato solo uno screen e il codice del box grafico. Comunque ti posso dire che è l'immagine media.png che, invece di posizionarsi sotto l'immagine top.png, si posiziona dietro.
Non riesco proprio a metterlo a posto.
Spero che almeno concettualmente il CSS sia corretto...
io ho fatto 3 immagini: il top (top.png, il contenitore "media.png e infine il bottom.png (che in questo caso sò che poteva non esserci perchè non ha gli angolo arrotondati)

[conti1]

ma xche usi 2 immagini?
tigli quella gia esistente e usa solo quella nuova
comunque se  l'immagine resta sotto e perche non hai messo
position:relative;
z-index:0; aumentando il numero l'immagine si porta davanti
idem x l immagine che hai ora davanti diminuendo  finisce dietro
i tag vano su tutte e due le immagini

[Ale_joomla]

Uso due immagini perchè semplicemente ho imparato così.
Sono alle prime armi nella creazione di template... e sto sperimentando.
Potresti dirmi per favore come si fa nella maniera più semplice rispetto a questa??

P.s intanto provo ciò che mi hai detto... e poi riporto. Grazie

[conti1]

allora ti faccio un  esempio banale
prendiamo il caso che il template che usi abbia gia una sua immagine  e il suo css e questo

Codice: [Seleziona]

div.module div {
      width: 195px;
      background: url(../images/media.png) repeat-y;
      color: #b94e00;
      margin-bottom: 2px;
      margin-right: 15px;
  }tu ora crei la tua immagine con angoli tondi
e la chiami pippo.png
non fai altro che sostituire quella esistente  in questo modo

Codice: [Seleziona]

div.module div {
      width: 195px;
      background: url(../images/pippo.png) repeat-y;
      color: #b94e00;
      margin-bottom: 2px;
      margin-right: 15px;
  }cosi facendo hai la tua al posto di quella originale del template.

in alternativa c'è un metodo molto piu semplice  per fare gli angoli tondi sensa impazzire con le immagini 
qui trovi tutta la descrisione
http://www.contiweb.altervista.org/index.php?option=com_content&view=article&id=67&Itemid=27

e qui un bel esempio di tutti i box con angoli tondi
http://www.webconti.altervista.org/

[Ale_joomla]

anche con quelle due dichiarazioni in più niente..

Il template lo sto scrivendo io.. quindi non ho la possibilità di modificare.
Io per quel che sò, dovendo creare un box con la larghezza fissa, ho creato tre immagini: una per l'intestazione con gli angoli arrotondati, una per il contenuto che si ripete verticalmente e poi un bottom che chiude il tutto al fondo.
ed ho scritto il css (primo post).
A questo punto cosa posso fare?

Non avevo visto l'aggiunta... scusa

[Ale_joomla]

Il link è molto interessante e l'ho salvato in preferiti per studiarmelo per bene..
Però nel caso concreto, trattandosi di sfumature non sò quanto possa servirmi quel metodo..

[conti1]

prova a rileggere? quanto hai scritto

Il template lo sto scrivendo io.. quindi non ho la possibilità di modificare.

[Ale_joomla]

Il mio "non ho la possibilità di modificare" era legato al sostituire le immagini di un template già fatto, seguendo quello che avevi detto tu.
Molto probabilmente l'errore è nella scrittura del css ed è o logico o di sintassi. (non può essere altrimenti)
Se è un errore di sintassi può essere che non lo sto vedendo.. e magari un occhio esperto, notandolo subito, mi può correggere.
Se è un errore logico lo stesso occhio esperto potrà dirmi che il mio approccio logico è errato e saprà dirmi qual'è il procedimento giusto.

P.s Mi scuso per gli errori di battitura dei precedenti post, ma ero di fretta.

[conti1]

fai una cosa posta il tuo template zippato con la tua immagine da cambiare.

[Ale_joomla]

Sbattendo la testa e andando anche un pò per tentativi sono riuscito a risolvere il problema.
Grazie mille a Conti1 per la disponibilità!!

E' bastato tagliare dall'immagine del "contenuto" del modulo una striscia di circa 10px di altezza e aumentare della stessa misura l'immagine del bottom.
In questo modo gli angoli rimangono arrotondati e la striscia vuota causata dal repeat-y dell'immagine dei contenuti è coperta dall'immagine del bottom.
Posto il css del box:

Codice: [Seleziona]

div.module h3 {
margin: 0;
font-size: 1em;
margin-top: 5px;
margin-bottom: 20px;
color: #FFF;
   
   }


div.module {
width: 195px;
background: url(../images/module.png) 0 0 repeat-y;
color: #b94e00;
margin-bottom: 2px;
margin-right: 15px;
  }


div.module div div  {
background: url(../images/bottom.png) 0 100% no-repeat;
background-position:  bottom left;
  }

div.module div div div {
background: url(../images/top1.png) top left no-repeat;
padding: 7px 10px 15px 0px;
border: 0px;
  }

div.module div div div div {
background: none;
padding:0;
width: auto !important;
width:100%;
  }