Help realizzare una struttura simile in CSS di quella vista in un sito

**lallettaseve** · 24-08-2009, 18:26

ciao a tutti,
chi mi aiuta a capire le istruzioni (magari dettagliate... non è male

) in CSS che stanno dietro a questa struttura che ho visto in questo sito web?
il sito web è il seguente:
http://www.nonsolofitness.it/campionato-calcio
sulla destra quasi all'inizio trovate 3 box sovrapposti che si evidenziano a seconda di quello che clicco: risultati, classifica e prossimo turno....
come riesco a realizzare qualcosa di simile?
mi piacerebbe molto inserire dei box così nella homepage del sito che sto realizzando ma non sono ancora molto pratica del settore...
potreste aiutarmi?
grazie mille in anticipo!
ciao a tutti

**simotenax** · 24-08-2009, 20:18

basta che usi dei tag a in display block così puoi dargli immagini di sfondo ed eventuali margini e farli flottare come div ma in più puoi utilizzare le pseudoclassi come :hover o :active

**lallettaseve** · 24-08-2009, 22:35

ti ringrazio tantissimo per il suggerimento, ma sono nuova del campo e sono affascinata da quello che vedo nei siti ma non sono pratica del linguaggio...quindi dicamo pure che non ho capito quasi nulla. Mi documento su internet...ma se avessi qualche ulteriore spiegazione...sarebbe gradita...perdonami!

grazie ancora...
ciaooo

**simotenax** · 24-08-2009, 23:18

non ti preoccupare il forum è fatto per questo..

tuttavia ti consglio di seguire le guide in questo sito.. io ora sono web designer (in crescita :P) e mentre studiavo a scuola mi facevano seguire le guide HTML.IT..

allora ti riassumo un po' in un paio di pillole
parto dalle basi più elementari visto che non so quale sia il tuo livello

i vari link in html si definiscono così

codice:

testo linkato

questo elemento è per defaul inline cioè se ne definisci due o più di seguito li vedrai visualizzati dal browser uno di seguito all'altro..

i fogli di stile permettono però di modificare questo comportamento attraverso la clausola display, impostandola a block quindi avremo dei link che si comportano come dei contenitori, dei div ad esempio..

le pseudoclassi :hover :active sono quelle che regolano lo stile rispettivamente al passaggio sopra del mouse e della pagina che si sta visitando..
queste pseudoclassi vengono interpretate da tutti i browser nel tag <a> da altri anche in altri tag come[*]

quindi per darti un idea di quello che hai visto in quel sito come si può fare ti metto questo codice.. prova a creare una pagina html dove fare delle prove così da capir meglio..

codice:

<html>
	<head>
		<style>
			body{
				background:#59ACE2;
			}
			
			a{
				/*
					definizione generica di stile per i link
				*/
				display:block;
				background:#aaa;
				width:150px;
				height:25px;
				text-decoration:none;
				text-align:center;
				padding:0px;
				font-size:16px;
				font-family:arial;
				color:#eee;
			}
			a:hover{
				/*
					definizione stile per i link al passaggio del mouse
					qui non ripeto il display:block inquanto questa definizione eredita tutte le clausole di quella prima
				*/
				background:#fff;
				color:#00f;
			}
		</style>
	</head>
	<body>
		vai a google
		HTML.IT
		vai a google
		HTML.IT
		vai a google
		HTML.IT
	</body>
</html>

**lallettaseve** · 24-08-2009, 23:32

ho provato subito in HTML (considera che sto lavorando con dreamweaver) compare un box con link a google e html che si evidenziano e cambiano stile al passaggio del mouse (se non erro è la proprietà hover)...per realizzare una struttura simile a quella del sito che ho ti ho fatto vedere dovrei inserire al posto dei link, dei box con una parte scritta,...giusto? (forse ho scritto in una maniera poco chiara...)...ti spiego...sono proprio alle prime armi e mi sono cimentata nella costruzione di un sito amatoriale di una squadra di calcio della mia città...non posso tirarmi più indietro...ma mi affascina e nel frattempo mi rendo sempre più conto che on è acile per niente...ora mi sono fissata...(l'ariete ha di questi "problemini") e vorrei capire bene...comunque provo ancora....tutti i tuoi suggerimenti sono oro! già questo...è un gran passo avanti! grazieee

**lallettaseve** · 24-08-2009, 23:40

se non ho capito male è un menu a cascata verticale...
ma nel sito che prendevo ad esempio sotto al menu a cascata veritcale ci sono quei 3 box sovrapposti...l'istruzione z-index è proprio fuori luogo per la realizzazione? se non ho capito male, l'istruzione serve per applicare immagini sovrapposte....che non passano in primo o sendo piano al cliccare del mouse...qui si tratta di finestre di testo (risultati, classifica, prossimo turno) che posso creare da DB (in modo che si aggiornino in automatico) ma che non riesco a posizionare in modo sovrapposto...anche perchè hanno dimensioni (di lunghezza) diverse...il box non è lo stesso per tutte e tre...

**simotenax** · 25-08-2009, 00:03

scusami avevo capito male io, intendevi quello sotto :P:P

quello sotto è un po' più complesso e serve un po' di script js..

ecco un esempio banalotto e poco funzionale fatto di fretta

codice:

<html>
	<head>
		<style>
			*{
				margin:0px;
				padding:0px;
				font-size:16px;
				font-family:arial;
			}
			ul{
				margin:0 auto;/*serve a centrare un block element*/
				margin-top:20px;
				width:300px;
				border-bottom:1px solid #00f;
			}
			ul li{
				text-align:center;
				display:inline;
				border:1px solid #00f;
				padding-left:5px;
				padding-right:5px;
				cursor:pointer;
			}
			ul li.active{
				padding-top:3px;
			}
			#contenitore{
				width:300px;
				margin:0 auto;
			}
			#contenitore div{
				border:1px solid #00f;
				border-top:0px;
			}
			#contenitore div.hide{
				display:none;
			}
			#contenitore div.show{
				display:block;
			}
		</style>
		<script>
			function display_box(i){
				for(j=1;j<4;j++){
					document.getElementById('contenitore_'+j).className='hide';
					if(i==j)
						document.getElementById('contenitore_'+j).className='show';
				}
			}
		</script>
	</head>
	<body>
		<ul>
			<li class="active" onClick="display_box(1,this)">pagina 1
			<li onClick="display_box(2,this)">pagina 2
			<li onClick="display_box(3,this)">pagina 3
		[/list]
		<div id="contenitore">
			<div id="contenitore_1" class="show">
				questo è il contenuto della pagina 1

				questo è il contenuto della pagina 1

				questo è il contenuto della pagina 1

				questo è il contenuto della pagina 1

				questo è il contenuto della pagina 1

				questo è il contenuto della pagina 1

				questo è il contenuto della pagina 1

				questo è il contenuto della pagina 1

				questo è il contenuto della pagina 1

				questo è il contenuto della pagina 1

			</div>
			<div id="contenitore_2" class="hide">
				questo è il contenuto della pagina 2

				questo è il contenuto della pagina 2

				questo è il contenuto della pagina 2

				questo è il contenuto della pagina 2

			</div>
			<div id="contenitore_3" class="hide">
				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

				questo è il contenuto della pagina 3

			</div>
		</div>
	</body>
</html>

**lallettaseve** · 25-08-2009, 07:33

veramente GRANDE!!!!!!
non ti preoccupare poi mi sistemo i bordi etc etc....
è vero funziona!!!!!!
GRAZIE GRAZIE....
inizio a pensare alla struttura del sito e a mano a mano che mi vengono dubbi...
beh...faccio un fischio!
PER ORA GRAZIE!!!! fantastico!!!
Buona giornata!
lalla

Discussione: Help realizzare una struttura simile in CSS di quella vista in un sito

Strumenti discussione

Ricerca discussione

Visualizza

Help realizzare una struttura simile in CSS di quella vista in un sito

Permessi di invio