CSS MENU and CSS photo gallery

Discussion in 'Javascript' started by desjardins.daniel@gmail.com, Feb 19, 2006.

  1. Guest

    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/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"><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, 2006
    #1
    1. Advertising

  2. Randy Webb Guest

    Randy Webb, Feb 19, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. bob garbados

    database driven photo gallery with upload

    bob garbados, Oct 29, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    610
    bob garbados
    Oct 29, 2004
  2. bob garbados

    Photo Gallery

    bob garbados, Nov 2, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    670
    Steve C. Orr [MVP, MCSD]
    Nov 2, 2004
  3. msnews
    Replies:
    4
    Views:
    1,855
  4. Robert S.

    photo gallery css or html

    Robert S., Oct 15, 2006, in forum: HTML
    Replies:
    3
    Views:
    881
    Andy Dingley
    Oct 16, 2006
  5. Replies:
    0
    Views:
    267
Loading...

Share This Page