Css e javascript

**travecola** · 18-11-2010, 17:02

Ho messo la data con un codice javascript.
Però per modificare il carattere ho scritto

codice:

<p class="data">

prima del codice javascript. Poi ho cambiato il colore dei caratteri nel file css.

Problema:
1)Si è allargato in verticale il div dove c'è la data.
2)come faccio a centrarlo?

Potete vedere qui il risultato.

**Mich_** · 18-11-2010, 17:55

Nel CSS non vedo nessuna formattazione per la classe
.data
mentre vedo la formattazione per l'id
#data
che e` il <div> contenitore del tuo

Ritengo una pessima cosa attribuire due nomi uguali (alla classe e all'id): dal punto di vista HTML e CSS non ci sono impedimenti sintattici, ma se usi JS potrebbero nascere conflitti e sicuramente ti crea confusione ulteriore (non credo ne abbia bisogno).

Inoltre ci sono degli erorri di sintassi:
ad esempio vedo un

dove invece ci dovrebbe essere un </p>

A questo punto direi che prima di fare altri passi dovresti passare dai validatori (validatore HTML e validatore CSS) e correggere le cose che ti vengono segnalate.

**travecola** · 18-11-2010, 18:28

Ok. Corretto subito </p>

Ottimo il consiglio per il nome.
Ho quindi creato una classe "datacolore" da assegnare al codice JS nel div "data".

codice:

    
<body onload="MM_preloadImages('../images/graphics/homehov.png','../images/graphics/workhov.png')">

<div id="contenitore">

	<div id="header">[img]../images/graphics/portfolio.png[/img]</div>
    
    <div id="navigazione">
    
    
     <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage
...CONTINUA CON IL CODICE PER IL ROLLOVER...
....

  -->
    
    </div> 
    
  <div id="data">

<p class="datacolore">

<script type="text/javascript">
 <!--
  var data = new Date();
  var set, gg, mm, aaaa, h, m, s;
  //Crea la tabella dei mesi
  var mesi = new Array();
     mesi[0] = "GENNAIO";
     mesi[1] = "FEBBRAIO";
     mesi[2] = "MARZO";
     mesi[3] = "APRILE";
     mesi[4] = "MAGGIO";
     mesi[5] = "GIUGNO";
     mesi[6] = "LUGLIO";
     mesi[7] = "AGOSTO";
     mesi[8] = "SETTEMBRE";
     mesi[9] = "OTTOBRE";
     mesi[10] = "NOVEMBRE";
     mesi[11] = "DICEMBRE";
  //Crea la tabella dei giorni della settimana
  var giorni = new Array();
     giorni[0] = "DOMENICA";
     giorni[1] = "LUNEDI";
     giorni[2] = "MARTEDI";
     giorni[3] = "MERCOLEDI";
     giorni[4] = "GIOVEDI";
     giorni[5] = "VENERDI";
     giorni[6] = "SABATO";
        //Estrae dalla tabella il giorno della settimana
        set = giorni[data.getDay()] + " ";
        gg = data.getDate() + " ";
        //Estrae dalla tabella il mese
        mm = mesi[data.getMonth()] + " ";
		aaaa = data.getFullYear();
        h = data.getHours() + ":";
        m = data.getMinutes() + ":";
        s = data.getSeconds();
  document.write(" " + set + gg + mm +  aaaa + ", ore " + h + m + s);
 //-->

</script>

</p>
</div>

Poi nel master.css ho creato la regola:

codice:

...

#navigazione {
	height:25px;
	width: 978px;
	background-color: #CCC;
	background-image: none;
	
}

#data{
	height: 31px;
	background-image: url(../images/graphics/calendario.png);
	background-repeat: no-repeat;
	text-align: left;
	color: #000;
	text-transform: none;
	}
.datacolore {
	color: #FFF;
	font-size: 12px;
	font-weight: bolder;
}




#barradata {
	height: 30px;
	width: 400px;
	background-color: #969898;
}

DOMANDA:
1)come mai ho quello spazio tra la barra di navigazione e la barra della data? (sito qui)
E' forse sbagliato usare

per poi assegnargli una classe?
2)come faccio a centrare la scritta nella barra della data.

**Mich_** · 18-11-2010, 18:39

1)come mai ho quello spazio tra la barra di navigazione e la barra della data?

Non lo so. Occorre analizzare tutti gli elementi che ci stanno attorno.
In questi casi puo` essere molto utile la developer bar di FireFox, oppure qualche cosa equivalente per altri browser.

E' forse sbagliato usare

per poi assegnargli una classe?

No, e` una cosa che si fa quando si ha il problema di avere un

da formattare diverso dagli altri

2)come faccio a centrare la scritta nella barra della data.

Per centrare in verticale (quando si tratta di una sola riga come in questo caso) ti basta definire height e line-height di uguale altezza
Per centrare in orizzontale occorre dare dimensioni al contenitore, poi per centrare un testo (o altro elemento inline) puoi usare il text-align.
Quindi nel tuo caso diventerebbe:

codice:

#data{
	height: 31px;
	background-image: url(../images/graphics/calendario.png);
	background-repeat: no-repeat;
	text-align: left;
	color: #000;
	text-transform: none;
	width: 30em;
	}
.datacolore {
	line-height: 31px;
	color: #FFF;
	font-size: 12px;
	font-weight: bolder;
	width: 100%;
	text-align: center;
}

**travecola** · 18-11-2010, 19:13

Son riucito a centrarlo verticalmente.
Con un padding sinistro di 15px su .datacolore, ho spostato la data un po a destra.
Per togliere lo spazio sopra la barra data ho messo margin top 0 e si è magicamente attaccata sopra al menù di navigazione

Chissà perchè me la staccava. Mha..

Grazie mille per l'aiuto!
Ottimo anche il consiglio per la developerbar di firefox. Sembra utile. Devo solo imparare un po' ad usarla.

Visto l'argomento ne approfitto per chiederti un'altra cosa:
Come faccio a distanziare tra loro le 4 immagini che ho caricato con lightbox?

**Mich_** · 18-11-2010, 19:33

Da' un po' di margine ai contenitori delle immagini.

nel tuo caso potrebbe essere:

codice:

.gallerialight a {
  margin: 0 5px;
}

PS: non ho controllato se quei blocchi sono gia` formattati (probabilmente si`): dovrebbe comunque essere sufficiente aggiungere un po' di margine orizzontale. Per semplificare iolo ho aggiuinto a tutti i tag <a> sia a dx che a sin (ma potrebbe essere necessario qualche cosa piu` sofisticato)

Discussione: Css e javascript

Strumenti discussione

Ricerca discussione

Visualizza

Css e javascript

Permessi di invio