[Photogallery] disabilitare scorrimento :target

[michmammo93]

Salve a tutti come da titolo mi chiedevo se fosse possibile disattivare lo scorrimento della pagina che viene avviato quando clicco su un link àncora.. premetto che non mi va di utilizzare javascript, ma solo il css. Se fossi obbligato ad utilizzare il javascript mi arrendo e lo uso

in pratica ho una barra laterale verticale di navigazione e nella sezione "immagini" si aprono i link àncora che a loro volta, al click, visualizzano dei div a comparsa dentro ad un altro div affiancato.

andando a cliccare sul link àncora la pagina ovviamente scrolla verso il basso tagliandomi il top (cosa bruttissima perchè va giù di botto!) e va verso l'inizio del div contenente le immagini (sotto al top). come si puo' ovviare?

io avevo semi-risolto assegnando ad ogni div quanto segue:

margin-top: -200px;
padding-top:200px;

in modo che i div restassero al top e che la pagina non avesse scorso più.. Però prima avevo un inconveniente:
assegnando queste proprietà, il div delle icone dei social network non era in primo piano e quindi non potevo cliccare le immagini che re-indirizzavano! Ho risolto con un z-index.. però adesso la struttura è sporchissima! il codice così non mi piace mi sa di incapace. Qualche soluzione? Va bene anche javascript se non c'è soluzione tramite html e css.

non voglio caricare foto sul vostro server quindi ho semi-disegnato la struttura così si capisce meglio:

__________________________________________________________
                                  | ICONE SOCIAL NETWORK |
                                  |______________________|

__________________________________________________________
|  NAVIGAZIONE |    __________________________________   |
|              |    |               DIV A COMPARSA    |  |
| Immagini     |    |     CON LE FOTO DA VISUALIZZARE |  |
|       Album1 |    |_________________________________|  |
|       Album2 |                                         |
|______________|_________________________________________| 

[Mich_]

Ho l'impressione che un minimo di JS lo stai usando, perche` quello che dici avviene quando nel link c'e`
href="#"
e questo ha senso se c'e` un JS associato che apre il link al posto dell'HTML

Posta il codice HTML del tuo link (ed eventualmente il JS associato).

[michmammo93]

No, non uso javascript..
HTML:

<div class="wrapper_middle">

<div class="sidebar">
<ul class="nav">
	[*]CHI SONO
	<li class="y">IMMAGINI
		<ul>
		[*]Album1
		[*]Album2
		[*]Album3
		[*]Album4
		[/list]
	
	[*]MUSICA
	[*]VIDEO
	[*]EVENTI
	[*]PRESS
	[*]CONTATTO
	[*]COMMENTI[/list]
</div>

<div class="content">
<div class="photobrowse">

    <div id="album1">
	ALBUM1
        <ul>[*][img]../img/photos/prova.jpg[/img][/list]
    </div>

    <div id="album2">
        ALBUM2
	<ul>
       	[*][img]../img/photos/prova.jpg[/img][/list]
    </div>

    <div id="album3">
        ALBUM 3

        <ul>[*][img]../img/photos/prova.jpg[/img][/list]

    </div>

    <div id="album4">
	ALBUM 4
        <ul>
        		[*][img]../img/photos/prova.jpg[/img][/list]
    </div>

</div>
</div>
</div>

CSS:

div.photobrowse {
    display: table;
    width: 783px;
}

div.photobrowse div {
    z-index: -1;
    position: absolute;
    width: 783px; 
    opacity:0;
}

div.photobrowse div:target {
    visibility: visible;
    position: relative;
    z-index: 1;
    width: 783px;
    opacity: 1;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    padding-top: 200px;
    margin-top: -200px;
}

div.photobrowse div:target ul {
    display: table;
    width: 728px;
    margin: 0px auto;
}

div.photobrowse div:target ul li {
    width: 100px;
    height: 80px;
    padding: 2px;
    float: left;
}

div.photobrowse div:target ul li img {
    width: 100px;
    height: 80px;
    opacity: 0.6;
    border: 1px solid white;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.5s;
}

div.photobrowse div:target ul li img:hover {
    opacity:1;
    width: 120px;
    height: 100px;
    margin: -10px;
    z-index: 1;
    position: relative;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.5s;
}

Ecco qui

EDIT: ho modificato la barra di navigazione in quanto erano sbagliati i nomi delle ancore, ho editato il codice prima di upparlo quindi qualche dimenticanza c'è stata ^^

[Mich_]

Ci sono tre tipi di link in quel codice:
- primo livello del menu
- secondo livello del menu
- link all'interno dei <div>

In quali hai lo spostamento?

Esiste in quella pagina un tag <a name="album1"> </a> e simili per gli altri link interni alla pagina?

[michmammo93]

<a name='#'> qualcosa </a>

non esiste in questo codice, l'ho scritto a mano e non ho usato dreamweaver e robacce simili..

Ho solo messo delle ancore a dei link con degli id che tramite la proprietà :target si visualizzano e scompaiono in base a cosa si clicca.

Con <a name=''>link</a> non credo si possa avere la personalizzazione tramite css con la pseudo-classe :target... credo... se si, correggimi...

lo spostamento della pagina (lo scorrimento generale che effettua il browser) avviene quando clicco su un link àncora dentro alla sidebar, proprio come se fosse un:<a name=''>qualcosa</a>, e mi "rimanda" all'inizio del div contenente le foto...