471,310 Members | 1,702 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,310 software developers and data experts.

CSS MENU and CSS photo gallery

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:pointer;
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/...593780-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"><em></em><span>Visitez la galerie Portraits de
demoiselle</span></a>
<a class="toto slideb" onclick="totoactive(this);"
href="#nogo"><em><img
src="http://www.danieldesjardins.com/photos/56855153-L.jpg"
/></em><span>Visitez la galerie Portraits de demoiselle</span></a>
<a class="toto slidec" onclick="totoactive(this);"
href="#nogo"><em><img
src="http://www.danieldesjardins.com/photos/56855148-L.jpg"
/></em><span>Visitez la galerie Sur le vif</span></a>
<a class="toto slided" onclick="totoactive(this);"
href="#nogo"><em><img
src="http://www.danieldesjardins.com/photos/56855165-L.jpg"
/></em><span>Visitez la galerie Sur le vif</span></a>
<a class="toto slidee" onclick="totoactive(this);"
href="#nogo"><em><img
src="http://www.danieldesjardins.com/photos/56855159-L.jpg"
/></em><span>Visitez la galerie Mariages</span></a>
<a class="toto slidef" onclick="totoactive(this);"
href="#nogo"><em><img
src="http://www.danieldesjardins.com/photos/56855140-L.jpg"
/></em><span>Visitez la galerie Mariages</span></a>
<a class="toto slideg" onclick="totoactive(this);"
href="#nogo"><em><img
src="http://www.danieldesjardins.com/photos/56855158-L.jpg"/></em><span>Visitez
la galerie Sur le vif</span></a>
<a class="toto slideh" onclick="totoactive(this);"
href="#nogo"><em><img
src="http://www.danieldesjardins.com/photos/56855146-L.jpg"/></em><span>Visitez
la galerie Portraits familles et enfants</span></a>
<a class="toto slidei" onclick="totoactive(this);"
href="#nogo"><em><img
src="http://www.danieldesjardins.com/photos/56855155-L.jpg"/></em><span>Visitez
la galerie Portraits familles et enfants</span></a>
<a class="toto slidej" onclick="totoactive(this);"
href="#nogo"><em><img
src="http://www.danieldesjardins.com/photos/56855144-L.jpg"/></em><span>Visitez
la galerie Portraits familles et enfants</span></a>
<a class="toto slidek" onclick="totoactive(this);"
href="#nogo"><em><img
src="http://www.danieldesjardins.com/photos/56855162-L.jpg"/></em><span>Visitez
la galerie Images urbaines</span></a>
<a class="toto slidel" onclick="totoactive(this);"
href="#nogo"><em><img
src="http://www.danieldesjardins.com/photos/56855157-L.jpg"/></em><span>Visitez
la galerie Images urbaines</span></a>
<a class="toto slidem" onclick="totoactive(this);"
href="#nogo"><em><img
src="http://www.danieldesjardins.com/photos/56855150-L.jpg"/></em><span>Visitez
la galerie Nature</span></a>
<a class="toto sliden" onclick="totoactive(this);"
href="#nogo"><em><img
src="http://www.danieldesjardins.com/photos/56855142-L.jpg"/></em><span>Visitez
la galerie Essais...</span></a>
</div></td>
<td valign="top" width="200">
<div id="menur" style="padding-top:55px">
<a
href="http://www.danieldesjardins.com/Realisations/158775"><span>Portraits
de demoiselles</span></a>
<a
href="http://www.danieldesjardins.com/Realisations/158758"><span>Portraits
familles et enfants</span></a>
<a
href="http://www.danieldesjardins.com/Realisations/158759"><span>Mariages</span></a>
<a
href="http://www.danieldesjardins.com/Realisations/158763"><span>Images
urbaines</span></a>
<a
href="http://www.danieldesjardins.com/Realisations/158762"><span>Nature</span></a>
<a href="http://www.danieldesjardins.com/Realisations/158772"><span>Sur
le vif</span></a>
<a
href="http://www.danieldesjardins.com/Realisations/158769"><span>Essais..</span></a>
</div>
</td>
</tr>
</table>
</div>

</html>

Feb 19 '06 #1
1 2688
de***************@gmail.com 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 =====>

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Feb 19 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Daniel Kelly \(AKA Jack\) | last post: by
10 posts views Thread by matt | last post: by
7 posts views Thread by Eric Lindsay | last post: by
13 posts views Thread by Viken Karaguesian | last post: by
1 post views Thread by popotz | last post: by
reply views Thread by rosydwin | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.