menù scorrimento orizzontale

**Buzzz** · 24-05-2009, 23:22

ma hai utilizzato solo questo codice senza aggiungere altro? perchè ho riguardato il link e mi pare che ci sia dell'altro da aggiungere..
io vedo solo la a nel div viola e niente altro.. non vedo nessun tasto che mi scorre..

ora riprovo creando altre pagine e vediamo ..

**lambrusco999** · 24-05-2009, 23:25

SOLO il codice da te postato.
Vedo il div viola con le lettere e i link next e preview per scorrere.

E per realizzare questo effetto è necessario SOLO il codice che ti ho postato prima

**Buzzz** · 24-05-2009, 23:26

xD

ora funziona..
come sempre mi sbaglio nei collegamenti.. non avevo messo i tre file nella cartella js come era scritto nel codice

gia che ci siamo, puoi spiegarmi che codici devo utilizzare per fare questo:

http://cssglobe.com/lab/easyslider1.5/02.html

ci sono due codici sotto..
l'usage lo inserisco tra l' head normalmente o lo sovrappongo a qualcosa?
e il css lo inserisco tra l' head normalmente o lo sovrappongo a qualcosa?

grazie!

**lambrusco999** · 24-05-2009, 23:31

Identico caso di prima.
L'usage lo inserisci nell'head mentre il css puoi inserirlo nella stessa pagina inserendolo sempre nel tag head in questa maniera:

codice:

<head>
<script type="text/javascript" src="js/jquery.js"></script> 
     <script type="text/javascript" src="js/easySlider.packed.js">
     </script> <script type="text/javascript"> 	
       $(document).ready(function(){	 		
            $("#slider").easySlider(); 	
        });
      </script> 

   <style>
       .
       . qui inserisci il css
       .
       .
  </style>
</head>

oppure creare un file .css ed importarlo sempre nell'head.
e cosi via inserendo il div nel body.

**Buzzz** · 25-05-2009, 18:46

ho provato ad inserire i codici dal link sulla pagina.. così:

HTML

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />

<head> 
     <script type="text/javascript" src="js/jquery.js"></script> 
     <script type="text/javascript" src="js/easySlider.packed.js">
     </script> <script type="text/javascript"> 	
$(document).ready(function(){	
	$("#slider").easySlider();
});
      </script>  
</head>



</head>
<body>

<div id="container"> 
	<div id="top">
<div id="top_">

<div id="logo">logo</div>
<div id="other_top">other top</div>

</div>
	</div>
	<div id="center">
	center
	</div>
	<div id="center_">




<div id="slider"> 		   
    <ul>				 		
   	[*]a      [*]b        [*]c        [*]d 				 		[/list]	
 </div>





<script type="text/javascript" src="/js/jquery.js"> </script>
<script type="text/javascript" src="/js/easySlider.js"></script>





	</div>
	<div id="bottom">
		<div id="bottom_">
		<div class="copyright"><copyright>Copyright &copy; 2000 - 2009</copyright> Cuaxo</div>
		<div class="other_bottom">
		homepubblicit&agrave;privacycondizioniinfohelp
		</div>
		</div>
	</div>
</div> 

</body>
</html>

CSS

codice:


html, body {
width:100%;
height:100%;
margin:0;
padding:0;
background:;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#container {
overflow:0 auto;
width:100%;
height:;
}

#top {
overflow:0 auto;
width:100%;
height:100px;
background:#F0F0F0;
background-image:url('../img/bg/bg_top.PNG') ;
background-position:bottom;
background-repeat:repeat-x;
}

#top_{
overflow:0 auto;
margin:0 auto;
width:950px;
height:;
background:#000000;
}
#logo{
float:left;
width:200px;
height:80px;
background:#1AFF05;
}
#other_top{
float:right;
width:400px;
height:;
font-family:arial;
font-size:14px;
background:#FFFCC4;
}
#other_top a{
text-decoration:none;
color:#505050;
}
#other_top a:hover{
color:#448fa6;
}

#center{
overflow:0 auto;
width:100%;
height:400px;
background:#FF0004;
}

#center_{
overflow:0 auto;
width:100%;
height:600px;
background:#B922FF;
}

#bottom{
overflow:0 auto;
width:100%;
height:44px;
background:url('../img/bg/bg_bottom.PNG');
}

#bottom_{
overflow:0 auto;
margin:0 auto;
padding-top:14px;
width:950px;
height:;
background:url('../img/bg/bg_bottom.PNG');
}
.copyright{
overflow:0 auto;
float:left;
width:;
height:;
font-family:arial;
font-size:13px;
color:#B4B4B4;
}
.copyright a{
text-decoration:none;
color:#B4B4B4;
}
.copyright a:hover{
color:#FFFFFF;
}
copyright{
color:#B4B4B4;
}

.other_bottom{
overflow:0 auto;
float:right;
width:;
height:;
font-family:arial;
font-size:13px;
color:#B4B4B4;
}
.other_bottom a{
text-decoration:none;
color:#B4B4B4;
}
.other_bottom a:hover{
color:#FFFFFF;
}




#slider ul, #slider li{ 		margin:0; 		padding:0; 		list-style:none; 		} 	#slider, #slider li{  		/*  			define width and height of container element and list item (slide) 			list items must be the same size as the slider area 		*/  		width:696px; 		height:241px; 		overflow:hidden;  		} 	span#prevBtn{} 	span#nextBtn{}	




#slider{}	
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider li{ 
	width:696px;
	height:241px;
	overflow:hidden; 
	}	
#prevBtn, #nextBtn{ 
	display:block;
	width:30px;
	height:77px;
	position:absolute;
	left:-30px;
	top:71px;
	}	
#nextBtn{ 
	left:696px;
	}														
#prevBtn a, #nextBtn a{  
	display:block;
	width:30px;
	height:77px;
	background:url(images/btn_prev.gif) no-repeat 0 0;	
	}	
#nextBtn a{ 
	background:url(images/btn_next.gif) no-repeat 0 0;	
	}

l'uncia cosa che mi cambia è che NEXT e PREVIOUS mi appaiono nel div top "più o meno", perchè previous è tagliato a metà... xD

comunque penso che si possa fare lo stesso effetto cambiando un po il codice originale.. penso...

**Buzzz** · 25-05-2009, 21:03

non ho capito due cose:

1) per inserire più immagini e far si che ogni volta che clicco ne scorra solo una e non tutte 4 per esempio, come faccio?

2) per modificare la posizione di next e previous uso due div che li posiziono uno left e uno right... ma dovè il testo NEXT e PREVIOUS?? ho fatto una ricerca sulla index e sulle altre 3 pagine che ho scaricato ma non ho trovato nessuna parola

possibile?

grazie!

**Buzzz** · 26-05-2009, 14:17

piccolo up

**bacris11** · 18-06-2009, 12:55

come si può fare per renderlo automatico lo scorrimento?

ma lo posso inserire in un sistema open cms?

grazie
ciao

**Buzzz** · 03-07-2009, 22:28

up

Discussione: menù scorrimento orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio