CSS MENU and CSS photo gallery

desjardins.daniel · Feb 19, 2006

Hi !

Excuse my english, i'm a french canadien... So here my message :

I have put on my site a photo gallery and at the right a nav menu. This
menu has a red dot visible want someone is passing over one item or
clickong one item.

I want to make two things in this page (the sameone
http://www.danieldesjardins.com/gallery/1202015) so it would be like a
want. If you can help a would appriciate. I'm a beginner i copy CSS
from exemple and put them in my page... But whent it comes to do simple
more with it ...i'm very limited.

The first thing is how can a get ride of the selection borber around
the photo a have clicked.

The second thing is : every photo is from from one itme of my nav menu
at the right. This menu as a When someboby select a picture in the
gallery, i would like to get the corresponding item menu hover a the
same time.

The third is ... i want to put the clickable mini photo under the big
photo.

Thank for any help.

Here the MENU CSS :

#menur {
font-family: 'Trebuchet MS', Verdana, Arial, sans-serif;
font-size: 8;
font-weight: bold;}
#menur {width:200px; margin-left:20px;}
#menur a, #menur a:visited {display:block; width:100%; height:25px;
line-height:25px; text-decoration:none; color:#fff;
background:url(http://www.smugmug.com/photos/56646389-L.gif);
background-repeat:no-repeat;}
#menur a span {padding-left:25px;}
#menur a:hover {display:block; width:100%; height:25px; cursor

ointer;
text-decoration:none; color:rgb(144,212,235);
background:url(http://www.smugmug.com/photos/56648202-L.gif);
background-repeat:no-repeat;}

Here is the gallery CSS :

/* Gallerie Des réalisations */

#container {position:relative; width:596px; height:525px;
background:url(http://danieldesjardins.smugmug.com/photos/56593780-L.jpg);
margin:0 auto;}
img {border:0;}

a.toto, a.toto:visited {display:block; display:inline-block;
color:#000; text-decoration:none; border:1px solid #ffffff; width:75px;
height:47px; float:left; margin:4px; z-index:50;}
a.slidea
{background:url(http://www.danieldesjardins.com/photos/56747038-L.jpg);}
a.slideb
{background:url(http://www.danieldesjardins.com/photos/56747077-L.jpg);}
a.slidec
{background:url(http://www.danieldesjardins.com/photos/56747060-L.jpg);}
a.slided
{background:url(http://www.danieldesjardins.com/photos/56747073-L.jpg);}
a.slidee
{background:url(http://www.danieldesjardins.com/photos/56747032-L.jpg);}
a.slidef
{background:url(http://www.danieldesjardins.com/photos/56747034-L.jpg);}
a.slideg
{background:url(http://www.danieldesjardins.com/photos/56746968-L.jpg);}
a.slideh
{background:url(http://www.danieldesjardins.com/photos/56747076-L.jpg);}
a.slidei
{background:url(http://www.danieldesjardins.com/photos/56747069-L.jpg);}
a.slidej
{background:url(http://www.danieldesjardins.com/photos/56747033-L.jpg);}
a.slidek
{background:url(http://www.danieldesjardins.com/photos/56747067-L.jpg);}
a.slidel
{background:url(http://www.danieldesjardins.com/photos/56747065-L.jpg);}
a.slidem
{background:url(http://www.danieldesjardins.com/photos/56747020-L.jpg);}
a.sliden
{background:url(http://www.danieldesjardins.com/photos/56747072-L.jpg);}

a.toto em, a.toto span {display:none;}

a.toto:hover {border:1px solid #DD0000;}

a.totoactive, a.toto:active, a.toto:focus {outline: none; border:1px
solid #DD0000;}

a.totoactive em, a.toto:active em, a.toto:focus em {display:block;
position:absolute; width:590px; height:356px; top:150px; left:2px;
color:#fff;}

a.totoactive span, a.toto:active span, a.toto:focus span {
display:block; position:absolute; width:350px; height:50 px; top:125px;
left:2px; color:#fff; }
a.totoactive span, a.toto:active span {font-style:normal;
font-weight:bold; font-size:1.1em; color:#fff;}

Here the html of that gallery and that menu :

<html>

<div id="le tous" style="margin-left:-25px;margin-top:-25px" >

<table width="800" border="0" cellspacing="2" cellpadding="0">
<tr>
<td width="600">

<div id="container">
<a class="toto slidea" onclick="totoactive(this);"
href="#nogo">Visitez la galerie Portraits de
demoiselle</a>
<a class="toto slideb" onclick="totoactive(this);"
href="#nogo"><img
src="http://www.danieldesjardins.com/photos/56855153-L.jpg"
/>Visitez la galerie Portraits de demoiselle</a>
<a class="toto slidec" onclick="totoactive(this);"
href="#nogo"><img
src="http://www.danieldesjardins.com/photos/56855148-L.jpg"
/>Visitez la galerie Sur le vif</a>
<a class="toto slided" onclick="totoactive(this);"
href="#nogo"><img
src="http://www.danieldesjardins.com/photos/56855165-L.jpg"
/>Visitez la galerie Sur le vif</a>
<a class="toto slidee" onclick="totoactive(this);"
href="#nogo"><img
src="http://www.danieldesjardins.com/photos/56855159-L.jpg"
/>Visitez la galerie Mariages</a>
<a class="toto slidef" onclick="totoactive(this);"
href="#nogo"><img
src="http://www.danieldesjardins.com/photos/56855140-L.jpg"
/>Visitez la galerie Mariages</a>
<a class="toto slideg" onclick="totoactive(this);"
href="#nogo"><img
src="http://www.danieldesjardins.com/photos/56855158-L.jpg"/>Visitez
la galerie Sur le vif</a>
<a class="toto slideh" onclick="totoactive(this);"
href="#nogo"><img
src="http://www.danieldesjardins.com/photos/56855146-L.jpg"/>Visitez
la galerie Portraits familles et enfants</a>
<a class="toto slidei" onclick="totoactive(this);"
href="#nogo"><img
src="http://www.danieldesjardins.com/photos/56855155-L.jpg"/>Visitez
la galerie Portraits familles et enfants</a>
<a class="toto slidej" onclick="totoactive(this);"
href="#nogo"><img
src="http://www.danieldesjardins.com/photos/56855144-L.jpg"/>Visitez
la galerie Portraits familles et enfants</a>
<a class="toto slidek" onclick="totoactive(this);"
href="#nogo"><img
src="http://www.danieldesjardins.com/photos/56855162-L.jpg"/>Visitez
la galerie Images urbaines</a>
<a class="toto slidel" onclick="totoactive(this);"
href="#nogo"><img
src="http://www.danieldesjardins.com/photos/56855157-L.jpg"/>Visitez
la galerie Images urbaines</a>
<a class="toto slidem" onclick="totoactive(this);"
href="#nogo"><img
src="http://www.danieldesjardins.com/photos/56855150-L.jpg"/>Visitez
la galerie Nature</a>
<a class="toto sliden" onclick="totoactive(this);"
href="#nogo"><img
src="http://www.danieldesjardins.com/photos/56855142-L.jpg"/>Visitez
la galerie Essais...</a>

</div></td>
<td valign="top" width="200">

<div id="menur" style="padding-top:55px">
<a
href="http://www.danieldesjardins.com/Realisations/158775">Portraits
de demoiselles</a>
<a
href="http://www.danieldesjardins.com/Realisations/158758">Portraits
familles et enfants</a>
<a
href="http://www.danieldesjardins.com/Realisations/158759">Mariages</a>
<a
href="http://www.danieldesjardins.com/Realisations/158763">Images
urbaines</a>
<a
href="http://www.danieldesjardins.com/Realisations/158762">Nature</a>
<a href="http://www.danieldesjardins.com/Realisations/158772">Sur
le vif</a>
<a
href="http://www.danieldesjardins.com/Realisations/158769">Essais..</a>
</div>

</td>
</tr>
</table>
</div>

</html>

Randy Webb · Feb 19, 2006

(e-mail address removed) said the following on 2/19/2006 1:02 PM:

Hi !

Excuse my english, i'm a french canadien... So here my message :

Forgiven on the english, but post your CSS questions in a CSS newsgroup.

news:comp.infosystems.authoring.www.stylesheets is that way =====>

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Gallery - mosiac/grid layout with filtering and information page popup	1	Apr 13, 2020
CSS: How can I stop overflow on the y-axis?	2	Dec 24, 2022
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
Buttons lining up	1	Feb 6, 2022
Stuck with html and css	25	Dec 14, 2022
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Help with Visual Lightbox: Scripts	2	May 3, 2023

CSS MENU and CSS photo gallery

desjardins.daniel

Randy Webb

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads