Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Ciao a tutti.
Poichè il mio problema riguarda un po' tutto tra javascript, css e html, scrivo in questa sezione sperando di non sbagliare.
Nel mio sito ho bisogno di creare una sorta di bacheca per le comunicazioni.
Ogni item della bacheca sarà composto da Titolo, mittente, data, testo del messaggio Utilizzo un Accordio di jQuery UI per gestire ogni comunicazione, e ho fatto in modo che Titolo, mittente e data siano tutti visualizzati nell'header dell'accordion, mentre il testo farà parte del contenuto.
<span class="mittente" title="Autore del messaggio">
<strong>Prova prova</strong>
</span>
</div>
<!-- FINE ACCORDION HEADER -->
<!-- INIZIO ACCORDION CONTENT -->
<div class="accordion-content">
<p>
Testo del messaggio
<br />
<input title="Elimina questo messaggio" type="submit" value="" name="elimina_" class="elimina" />
</p>
</div>
<!-- FINE ACCORDION CONTENT -->
<!-- STESSA IDENTICA SINTASSI PER LE ALTRE COMUNICAZIONI -->
<!-- Fine Bacheca -->
</div>
ho utilizzato il seguente CSS per la gestione dei vari titolo, date, ecc....:
Codice sorgente - presumibilmente Plain Text
.data, .mittente {
display: block;
position: relative;
float: right;
top: -10px;
color: grey;
font-weight: bold;
font-size: 12px;
}
.titolo-com {
color: blue;
font-weight: bold;
}
.header-titolo {
display: block;
width: 80%;
}
.accordion-content {
display: block;
}
I problemi che riscontro sono due:
1) Il titolo è al di sopra dell'icona quando dovrebbe essere centrato (Non molto importante) 2) Il riquadro del contenuto dell'accordion è tagliato a metà dell'intero div (lo potete vedere nell'immagine allegata)!! Molto Importante
In javascript per far partire l'accordion ho il seguente codice:
Codice sorgente - presumibilmente HTML / CSS
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$('#group_com').accordion({
header: "div.accordion-header",
collapsible: true,
icons: icons,
active: index // me lo sono calcolato altrove
});
Allego l'immagine del risultato finale.
Non riesco a capire da cosa dipenda quell'errore
Spero di essere stato chiaro e vi ringrazio anticipatamente.
Cosi ad occhio non è facile determinare da cosa dipenda l'errore. Impostare semplicemente la larghezza a 100%? Se no non avresti una pagina di esempio, ci semplifichi di molto il lavoro.