Results 1 to 3 of 3

Thread: Image gallary css

  1. #1
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image gallary css

    Hi, I have the following css and html code. This codes shows without problem in IE and Firefox. However when I put in Dreamweaver, it does not show what I can see in browsers. Can anyone tell me what is the problem?
    ------------------

    <style type="text/css">

    /* needed for IE to make :active state work first time */
    a, a:visited {color:#000;}

    /* common styling for all galleries */
    a.gallery, a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; float:left; margin:4px; z-index:50;}
    a.slidea {background:url(Hildephotos/pic10.jpg);}
    a.slideb {background:url(Hildephotos/pic11.jpg);}
    a.slidec {background:url(Hildephotos/pic2.jpg);}
    a.slided {background:url(Hildephotos/pic3.jpg);}
    a.slidee {background:url(Hildephotos/pic4.jpg);}
    a.slidef {background:url(Hildephotos/pic5.jpg);}
    a.slideg {background:url(Hildephotos/pic6.jpg);}
    a.slideh {background:url(Hildephotos/pic7.jpg);}
    a.slidei {background:url(Hildephotos/pic8.jpg);}
    a.slidej {background:url(Hildephotos/pic9.jpg);}
    a.gallery em, a.gallery span {display:none;}
    a.gallery:hover {border:1px solid #fff;}


    /* styling for LEFT gallery */
    #container_left {position:relative; width:600px; height:305px; background:#d1c8c3; border:1px solid #a49188; margin:1em auto;}
    #container_left img {border:0;}
    #container_left .thumbs {width:170px; position:absolute; left:0; top:0;}
    #container_left a.gallery:hover span {display:block; position:absolute; width:402px; height:50px; top:265px; left:175px; padding:5px; font-style:italic; color:#fff; z-index:100;}
    #container_left a.gallery:hover span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:#000;}
    #container_left a.gallery:active, #container_left a.gallery:focus {border:1px solid #000;}
    #container_left a.gallery:active em, #container_left a.gallery:focus em {display:block; position:absolute; width:402px; height:250px; top:5px; left:180px; padding:5px; color:#000; border:1px solid #3d330f; z-index:50;}
    #container_left h1 {clear:both; margin:0; padding-top:80px; padding-left:250px; width:300px; text-align:center; font-family: georgia, "times new roman", serif; font-size:3em; font-weight:normal; color:#fff;}
    #container_left h1 em {font-size:0.6em; color:#000;}


    </style>


    </head>

    <body>

    <div id="container_left">
    <div class="thumbs">
    <a class="gallery slidea" href="#nogo"><em><img src="Hildephotos/pic11.jpg" alt="LSE Square" title="LSE Square" /></em><span>Tower of London<br />Fly handbag</span></a>
    <a class="gallery slideb" href="#nogo"><em><img src="Hildephotos/pic10.jpg" alt="Buckingham Palace" title="Buckingham Palace" /></em><span>Tower of London<br />Fly handbag</span></a>
    <a class="gallery slidec" href="#nogo"><em><img src="Hildephotos/pic2.jpg" alt="Tower Bridge" title="Tower Bridge" /></em><span>Tower Bridge<br />Whales handbag</span></a>
    <a class="gallery slided" href="#nogo"><em><img src="Hildephotos/pic3.jpg" alt="Tower of London" title="Tower of London" /></em><span>Tower of London<br />Fly handbag</span></a>

    <a class="gallery slidee" href="#nogo"><em><img src="Hildephotos/pic4.jpg" alt="Houses of Parliament" title="Houses of Parliament" /></em><span>Houses of Parliament<br />Photographs courtesy of stock.xchng</span></a>
    <a class="gallery slidef" href="#nogo"><em><img src="Hildephotos/pic5.jpg" alt="St. Paul's Cathedral" title="St. Paul's Cathedral" /></em><span>St. Paul's Cathedral<br />Photographs courtesy of stock.xchng</span></a>
    <a class="gallery slideg" href="#nogo"><em><img src="Hildephotos/pic6.jpg" alt="The London Eye" title="The London Eye" /></em><span>The London Eye<br />Photographs courtesy of stock.xchng</span></a>
    <a class="gallery slideh" href="#nogo"><em><img src="Hildephotos/pic7.jpg" alt="Albert Hall" title="Albert Hall" /></em><span>Albert Hall<br />Photographs courtesy of stock.xchng</span></a>
    <a class="gallery slidei" href="#nogo"><em><img src="Hildephotos/pic8.jpg" alt="Wandsworth Common" title="Wandsworth Common" /></em><span>Wandsworth Common<br />Photographs courtesy of stock.xchng</span></a>
    <a class="gallery slidej" href="#nogo"><em><img src="Hildephotos/pic9.jpg" alt="London Taxi Cab" title="London Taxi Cab" /></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>

    </div>
    <h1>Collections<br />
    <em>of</em><br />
    Handbags</h1>
    </div>



    </body>
    </html>

  2. #2
    Join Date
    Apr 2006
    Posts
    205
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Default

    Hi,

    In my experience Dreamweaver isn't really much good for previewing code. Don't worry about how it looks in Dreamweaver, just preview your page in as many browsers as possible.

    Peace,
    dog

  3. #3
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    As Dog said, don't worry about this. People aren't using Dreamweaver as a browser...it's just a program. It isn't a big deal - as long as it works in the browsers.
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •