ExperimentWeb Home page
Home > Esempi con i CSS
Seleziona
il tuo style:


Seleziona
il tuo Font:
Georgia | Verdana

1 user online!
1 user viewing this page!
Locations of visitors to this page


Centratura di un banner testuale in JS con i CSS

Gli utenti che utilizzano browser piuttosto datati che non supportano pienamente il DOM possono ugualmente leggere il contenuto del sito senza avere un supporto grafico.

Per questo esempio utilizziamo il codice js bannerrotation.js .
L'esempio prima espone il codice CSS utilizzato con 2 esempi, poi viene mostrato come utilizzarlo in una pagina HTML. Il codice utilizzato é il seguente:

#banner{

width : 468px; /* larghezza del banner */
height : 60px; /* altezza del banner */
display: block;
position : fixed;
background : #FeA; /* colore dello sfondo del banner */
font-weight : bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin-left: 130px; /* centratura Sinistra */
margin-right: 130px; /* centratura Destra */
border:1px solid orange;
text-align : center;

}

Utilizzando questo codice si ottiene questo.

Esempio 1

Come si vede dall'esempio il testo non é centrato ma risulta posizionato verso il "top" del box in cui é stato inserito.

Per centrare il testo si utilizza questo codice CSS insieme a quello precedente.

.testo {

display : block;
width : 100%;
height : 20px;
font-size: 20px;
margin-top : 1px;
padding-top : 18px;

}

Utilizzando i due codici insieme si ottiene questo.

Esempio 2


Posizione del codice CSS

Il codice sopra descritto deve essere inserito utilizzando i tag <style> </style> direttamente tra i due tag <head> </head> del codice HTML

<html>

<head>

<title>Esempio centratura testo</title>

<style>

#banner{

width : 468px; /* larghezza del banner */
height : 60px; /* altezza del banner */
display: block;
position : fixed;
background : #FeA; /* colore dello sfondo del banner */
font-weight : bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin-left: 130px; /* centratura Sinistra */
margin-right: 130px; /* centratura Destra */
border:1px solid orange;
text-align : center;

}

.testo {

display : block;
width : 100%;
height : 20px;
font-size: 20px;
margin-top : 1px;
padding-top : 18px;

}

</style>

</head>

<body>

<span> id="banner">

<span> class="testo">

<script> language="JavaScript 1.2" type="text/javascript" src="JS/bannerrotation.js">

</script>

</span>

</span>

Continua >>








Ultima modifica :3/01/08 alle ore 14:31