Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 18
  1. #1

    posizionamento al centro (orizzontale),ma con altezza da me definita.

    salve a tutti, grazie innanzitutto per l'attenzione. Ho bisogno di un aiutino, avendo scaricato un esempio dalla rete, che mi permette personalizzandolo,di avere un effetto a scorrimento delle immagini,dopo aver cliccato sull'apposito link, ho delle serie difficolta ad inserirlo nella pagina come vorrei. Vi espongo brevemente come lo vorrei inserito nel layout :
    1)Dovrebbe essere centrato (solo orizzontalmente),quindi da qualsiasi schermo,con qualsiasi risoluzione ,lo vorrei vedere sempre al centro.
    2) Come gia' specificato sopra,essendo sempre al centro orizzontalmente,avrei bisogno anche che fosse ad una altezza precisa (top),per metterlo sotto il logo e links ecc...


    Non vi sto' a spiegare,ma ho fatto molteplici modifiche per farlo risultare al centro orizzontalmente ed a una certa altezza,ma senza risultati,ecco perche' chiedo umilmente aiuto a voi. Addirittura,avevo inserito i div in una tabella per poterlo far stare in centro.... ho detto tutto...

    Vado ad incollarvi il codice html e css originali,sono sicuro che basterebbe aggiungere una piccola istruzione per farlo risultare come voglio,ma non so' quale.....

    codice:
    <title>Untitled Document</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.tools.min.js"></script> <link href="css/vertical.css" rel="stylesheet" type="text/css" /> <script> // execute your scripts when the DOM is ready. this is a good habit $(function() { // main vertical scroll $("#main").scrollable({ // basic settings vertical: true, size: 1, clickable: false, // main navigator (thumbnail images) }).navigator("#navigazione"); }); </script> </head> <body> <div id="contenitore"> <ul id="navigazione">[*][img]ima/img004-tumb.jpg[/img][link #1][*][img]ima/img004-tumb.jpg[/img][link #2][*][img]ima/img004-tumb.jpg[/img][link #3][*][img]ima/img004-tumb.jpg[/img][link #4][/list]<div id="main">  <div id="pages"> <div class="page">[img]ima/img004.jpg[/img]</div> <div class="page">[img]ima/img004.jpg[/img]</div> <div class="page">[img]ima/img004.jpg[/img]</div> <div class="page">[img]ima/img004.jpg[/img]</div> </div> </div> </div>
    ed ecco il codice css :
    codice:
    @charset "utf-8"; /* CSS Document */ #contenitore { width: 750px; height: 450px; background-color: #333; } /* main vertical scroll */ #main { position: relative; overflow: hidden; height: 450px; width: 540px; } /* root element for pages */ #pages { position: absolute; height: 20000em; } #pages .page { padding: 10px; height: 430px; background-color: #222; width: 520px; } /* main navigator */ #navigazione { float: left; padding: 0px !important; margin: 0px !important; } #navigazione li { background-color: #333; border-bottom: 1px solid #666; clear: both; color: #FFF; font-size: 12px; height: 75px; line-height: 75px; /**/ list-style-type: none; padding: 10px; width: 190px; cursor: pointer; } #navigazione li img { border: 1px solid #666; margin-right: 1em; vertical-align: top; } #navigazione li:hover { background-color: #444; } #navigazione li.active { background: #555 url(../ima/freccia.gif) no-repeat center right; }
    Grazie a tutti per l'attenzione

  2. #2
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Ciao, puoi inserire un link alla tua pagina?

  3. #3
    ecco il link

    Come potete vedere i link e l'effetto jquery a scorrimento,sono posizionati in alto a sinistra.
    Mentre avrei la necessita' di inserirli cosi come sono la centro (solo orizzontalmente ), e ad una certa altezza dall'alto (top) ,che scegliero' io in base al layout, appunto sotto il logo e menu' .

    Non vi sto' a postare la schifezza che ho creato, in cui il tutto è inserito a sinistra ,sotto il menu',ma comunque a forza di modificarlo,ha anche cambiato la sua composizione originale..
    Grazie a tutti e buona giornata.

  4. #4
    Comunque in parole povere ecco la pagina ove vorrei inserire l'oggetto in questione, al centro orizzontalmente ,che stia sotto il menu' che vedete...

    Ecco la pagina in cui vorrei inserirlo : http://www.cleoprive.it/p/bo.html

  5. #5
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    il codice html (ho tolto le tabelle e usato solo div, ricontrolla i link delle immagini, dei file js e dei css, per testare avevo scaricato i file in un'unica cartella e non so se ho reinserendo il percorso originale su tutti o qualcosa mi è sfuggito)
    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" xml:lang="en" lang="en"><head>
    <title>omesso</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="css/vertical.css" rel="stylesheet" type="text/css" />
    
    <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.tools.min.js"></script>
    
    <script> 
    // execute your scripts when the DOM is ready. this is a good habit 
    $(function() {
    // main vertical scroll
    $("#main").scrollable({
    	// basic settings
    	vertical: true,
    	size: 1,
    	clickable: false,
    
    // main navigator (thumbnail images)
    }).navigator("#navigazione");
    
    }); 
    </script>
    
    		
    </head>
    <body>
    <div id="wrapper">
    	<div id="iscrizione">[img]iscrizione.png[/img]</div>
    	<div>[img]club-prive.png[/img]</div>
    		<div id="menu">[img]home.png[/img][img]eventi.png[/img][img]party.png[/img][img]location.png[/img][img]netiquette.png[/img][img]contact.png[/img]</div>
    	<div id="contenitore">
        <ul id="navigazione"> [*][img]ima/img004-tumb.jpg[/img][link #1] [*][img]ima/img004-tumb.jpg[/img][link #2] [*][img]ima/img004-tumb.jpg[/img][link #3][*][img]ima/img004-tumb.jpg[/img][link #4] [/list]
    
        <div id="main">
          
          <div id="pages">
            <div class="page"><ima/img src="img004.jpg" alt="" /></div>
            <div class="page"><ima/img src="img004.jpg" alt="" /></div>
            <div class="page"><ima/img src="img004.jpg" alt="" /></div>
            <div class="page"><ima/img src="img004.jpg" alt="" /></div>
          </div>
        </div>      
    	</div>       
    	</div>       
    		<div id="footer">Cleò Glamour Club omesso </div>
    		
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>
    		
    <script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
    <script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
    		
    <script type="text/javascript">
    			
    			jQuery(function($){
    				
    				$.supersized({
    				
    					
    					slideshow               :   1,			
    					autoplay				:	1,			
    					start_slide             :   0,			
    					stop_loop				:	0,			
    					random					: 	0,			
    					slide_interval          :   3000,		
    					transition              :   6, 			
    					transition_speed		:	1000,		
    					new_window				:	1,			
    					pause_hover             :   0,			
    					keyboard_nav            :   1,			
    					performance				:	1,			
    					image_protect			:	1,			
    															   
    					
    					min_width		        :   0,			
    					min_height		        :   0,			
    					vertical_center         :   1,			
    					horizontal_center       :   1,			
    					fit_always				:	0,			
    					fit_portrait         	:   1,			
    					fit_landscape			:   0,			
    															   
    					
    					slide_links				:	'blank',	
    					thumb_links				:	1,			
    					thumbnail_navigation    :   0,			
    					slides 					:  	[			
    														{image : 'img/1.jpg'},
    														{image : 'img/2.jpg'},  
    														{image : 'img/4.jpg'},
    											
    												],
    												
    					
    					progress_bar			:	1,			
    					mouse_scrub				:	0
    					
    				});
    		    });
    		    
    		</script>
    
    </body>
    
    </html>

  6. #6
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    La parte di css modificata:

    codice:
    *{
    	margin:0;
    	padding:0;
    	border:0;
    }
    #wrapper {
    	width:1079px;
    	margin:auto;
    	}
    #iscrizione {
    	text-align:right;
    	}
    #menu {
    	text-align:center;
    	}
    #contenitore {
    	width: 750px;
    	height: 450px;
    	background-color: #333;
    	margin:0 auto;
    	}
    #footer {
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:16px;
    	text-align:center; color:#fff;
    	background-color:#141414;
    }

  7. #7
    Grazie molte,sicuramente il codice è giusto,tuttavia anche correggendo il percorso delle immaggini(non tutte) e del css, il risultato è il seguente : Ecco il risultato

    Il file .htm corretto :
    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" xml:lang="en" lang="en"><head> <title>omesso</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link href="/css/vertical.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="/css/supersized.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/theme/supersized.shutter.css" type="text/css" media="screen" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.tools.min.js"></script> <script> // execute your scripts when the DOM is ready. this is a good habit $(function() { // main vertical scroll $("#main").scrollable({ // basic settings vertical: true, size: 1, clickable: false, // main navigator (thumbnail images) }).navigator("#navigazione"); }); </script> </head> <body> <div id="wrapper"> <div id="iscrizione"> [img]img/iscrizione.png[/img]</div> <div> [img]club-prive.png[/img]</div> <div id="menu"> [img]img/home.png[/img][img]../../../Desktop/esempi/eventi.png[/img][img]../../../Desktop/esempi/party.png[/img][img]../../../Desktop/esempi/location.png[/img][img]../../../Desktop/esempi/netiquette.png[/img][img]../../../Desktop/esempi/contact.png[/img]</div> <div id="contenitore"> <ul id="navigazione">[*][img]../../../Desktop/esempi/ima/img004-tumb.jpg[/img][link #1][*][img]../../../Desktop/esempi/ima/img004-tumb.jpg[/img][link #2][*][img]../../../Desktop/esempi/ima/img004-tumb.jpg[/img][link #3][*][img]../../../Desktop/esempi/ima/img004-tumb.jpg[/img][link #4][/list]<div id="main">  <div id="pages"> <div class="page"><ima/img src="img004.jpg" alt="" /></div> <div class="page"><ima/img src="img004.jpg" alt="" /></div> <div class="page"><ima/img src="img004.jpg" alt="" /></div> <div class="page"><ima/img src="img004.jpg" alt="" /></div> </div> </div>  </div>  </div>  <div id="footer">Cleò Glamour Club omesso </div> <script type="text/javascript" src="/js/jquery.easing.min.js"></script> <script type="text/javascript" src="/js/supersized.3.2.7.min.js"></script> <script type="text/javascript" src="/theme/supersized.shutter.min.js"></script> <script type="text/javascript"> jQuery(function($){ $.supersized({ slideshow : 1, autoplay : 1, start_slide : 0, stop_loop : 0, random : 0, slide_interval : 3000, transition : 6, transition_speed : 1000, new_window : 1, pause_hover : 0, keyboard_nav : 1, performance : 1, image_protect : 1, min_width : 0, min_height : 0, vertical_center : 1, horizontal_center : 1, fit_always : 0, fit_portrait : 1, fit_landscape : 0, slide_links : 'blank', thumb_links : 1, thumbnail_navigation : 0, slides : [ {image : 'img/1.jpg'}, {image : 'img/2.jpg'}, {image : 'img/4.jpg'}, ], progress_bar : 1, mouse_scrub : 0 }); }); </script> </body> </html>
    Why..??????????????

  8. #8
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Ti garantisco che coi collegamenti giusti si vede bene, nel codice che ti ho indicato sicuramente la maggior parte dei percorsi era corretta, ma non ho avevo il tempo di ricontrollarli attentamente e ricopiarli dalla tua pagina originale. Nel tuo codice ora si trovano cose del tipo ../../../Desktop/esempi/eventi.png . Se non risolvi ti invio link da cui scaricare il tutto nella giusta posizione

  9. #9
    Ok per le immagini mancanti,ma il collegamento al css fatto da te è corretto... ,qualcosa non va', grazie comunque....

  10. #10
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    ti ho inviato privato con link a cartella zippata con tutti i file

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.