Photo Gallery combined with three column CSS

Hi, I am trying to implement your photo gallery into our
school site and I am having trouble with the layout. I am using a
three-column layout created with CSS and JS, and then placing the
photo gallery inside of this. What happens is when you pull up the
page the three column layout does not position everything correctly
until you resize the browser window (ever so slightly). Help, have
been staring at CSS and JS code now for about a month and cannot
get it to behave, any help would be greatly appreciated. Thanks.
HSPVA Photo
Gallery

"kjuliff" <[email protected]> wrote in message
news:eqij22$are$[email protected]..
>I can reproduce your problem, gnd4evr&evr. I have XP
an IE7 and FF2.
>It's fine
> in FF2 but not in IE7.
>
> I have a similar problem, and I think it's related. This
problem
> really needs
> addressing!
>
> Go to
http://www.coolabah.com/spry/demos/gallery/
and look at the
> bottom of
> the page (in either IE or FF). You will see a google
adsense div.
> Although it
> is specified in it's div tab as being 15 px in height,
it takes up
> much more
> than that.
>
> I HAD wanted to have these google links at the top of my
gallery, but
> cannot
> as I cannot force the div to be only 15px in height.
>
> I posted this problem a few weeks ago but no one
answered.
Your Google ads are in an iframe. This rule will get you
started
iframe {
height: 2em !important;
position: absolute;
top: 650px;
You can leave the position static if you like, and it will
move up and
down with your images - I found that a bit distracting,
though. If you
leave it static, use a top-margin to establish space between
your image
and the ads.
The !important notation is required for the height,
indicating either a
conflict somewhere in your markup or CSS, or poor Google code
(not
uncommon).
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

Similar Messages

  • Photo gallery built with adobe edge can not be seen on mobile devices.

    photo gallery built with adobe edge can not be seen on mobile devices.
    ps: I do not have any email attachment, I do not understand a thing of referring

    Hi, Stefano-
    This post might help you figure out how to post your files for us to review:
    http://forums.adobe.com/message/5935946#5935946
    It's very helpful for us to be able to look at your files to help you with your specific problem.
    Thanks,
    -Elaine

  • I'm having a problem with inserting a photo gallery created with Bridge

    I sure could use some help.
    Adobe Bridge - Why do I have a white bar on my page?
    I am using windows vista, Dreamweaver cs4 and Adobe bridge to insert a photo gallery.
    I am using an I-frame to embed a photo gallery that was created with Adobe Bridge CS4. Adobe Bridge instructed me to make the i-frame height = 75% of the width. The code is <iframe src="PhotoAlbum/index.html" width="900" height="675" frameborder="0"></iframe>
    my css places the album in #photoalbum.
    #photoAlbum contains the i-frame with the following properties:
    #photoAlbum {
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width: 900px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top-width: 2px;
    border-top-style: groove;
    border-top-color: #333;
    I tried changing the width to 960, 900, 850 etc with no success.
    I have tried making the background of #photoAlbum black with no success.
    The link to the photo album is http://www.gigharborrealestate.com/smith/PhotoAlbum/index.html and shows no white bar.
    The site that I am having problems with is http://www.gigharborrealestate.com/smith On the right side of the Point Richmond Photo Gallery is a white vertical bar.  If you go to /PhotoAlbum/index.html there is no white bar.
    Why does this bar show up when /PhotoAlbum/index.html is put into an I-frame? How can I get rid of the vertical bar?

    insert the following into your code,
    scrolling="no"
    it should look like this
    <div id="gallery"><iframe src="IMAGES/Adobe Web Gallery/index.html"  scrolling="no" width="730" height="555" frameborder="0" name="web_gallery" style="background-color: #D8D9B4"></iframe></div>
    hope it helps, good luck

  • Photo gallery intergration with web app

    I want to create a web app where If I create a new item, that automaticly will create a new photo gallery. Also this photo gallery will be automaticly linked in a field with the photo gallery code. Is this possible? Yes, How can I achieve this?

    Hey, I take it this was built in Muse considering the sherr gianmous amount of inline CSS and Scripts? Really hard to find the issues, lol.
    You have two errors, one is that prettyPhoto is not a function and that is a result of this:
    Timestamp: 5/05/13 8:57:06 PM
    Error: Error: Load timeout for modules: main
    http://requirejs.org/docs/errors.html#timeout
    Source File: http://pevronestate.vivovecompany.com/scripts/require-jquery.js
    Line: 159
    It is a common error luckily and I believe its only here:
    <script data-main="scripts/main.js" src="scripts/require-jquery.js"></script>
    When you reference BC scripts etc you need to tell BC to read from the root so when you go into things like a detail view of a web app which is a folder level down from the root where to find the code.
    Any script, image, css call etc needs to have a / in front of it.
    So ...
    scripts/require-jquery.js
    Would be...
    /scripts/require-jquery.js
    And so on.
    Hope that helps.

  • Urgent - Php photo gallery built with web standards?

    Hi All,
    can you point me out a very simple php gallery that use valid
    code and css?
    Something with or without MySql db but with an administration
    panel and
    ready for use without any particolar tweaking.
    Not necessarily free, the important points are simplicity and
    quality.
    Thank you in advance for any info.
    Best regards
    Nicola

    You can enter the descriptions using the "File Info" properties for each photo, using Adobe Bridge or Photoshop. I have encountered a similar problem in that my descriptions were not always showing up in the pages generated by the Web Photo Gallery.
    After some investigation, I found that the descriptions were disappearing only for photos that had a Return / Line Break in the description. If you go back and make sure all of your descriptions are a single line, it works fine. This is a bug in the Web Photo Gallery code...you can see it in the Javascript code that it generates for each page.

  • Help with three column layout please

    Hello All
    I have been struggling with a three column layout to incorporate inserted images on the right. Please see http://www.greenpatchwebsites.com/ridgeway/index2.html
    At the moment I have resorted to a background image but I am not happy with the quality and lack of positioning in relation to the text.
    I have looked at lots of sites re faux / three columns etc but I can't make it work. As you will see from the attached css there are lot of divs because of the expanding box and I am getting in a muddle.
    Expert help here would be very gratefully received and I thank you in advance.

    Hi There,
    You can refer to 3 column fixed template (with header and footer) provided by DW itself. For reference how to make a 3 column layout use following code. Just save the whole of this as .html file and preview. Go through the structure and css classes in the head to understand the layout.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body  {
         font: 100% Verdana, Arial, Helvetica, sans-serif;
         background: #666666;
         margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
         padding: 0;
         text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
         color: #000000;
    .thrColFixHdr #container {
         width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
         background: #FFFFFF;
         margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
         border: 1px solid #000000;
         text-align: left; /* this overrides the text-align: center on the body element. */
    .thrColFixHdr #header {
         background: #DDDDDD;
         padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    .thrColFixHdr #header h1 {
         margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
         padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    .thrColFixHdr #sidebar1 {
         float: left; /* since this element is floated, a width must be given */
         width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
         background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
         padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
    .thrColFixHdr #sidebar2 {
         float: right; /* since this element is floated, a width must be given */
         width: 160px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
         background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
         padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
    .thrColFixHdr #mainContent {
         margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
         padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    .thrColFixHdr #footer {
         padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
         background:#DDDDDD;
    .thrColFixHdr #footer p {
         margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
         padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
         float: right;
         margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page */
         float: left;
         margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
         clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    -->
    </style><!--[if IE 5]>
    <style type="text/css">
    /* place css box model fixes for IE 5* in this conditional comment */
    .thrColFixHdr #sidebar1 { width: 180px; }
    .thrColFixHdr #sidebar2 { width: 190px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
    .thrColFixHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]--></head>
    <body class="thrColFixHdr">
    <div id="container">
      <div id="header">
        <h1>Header</h1>
      <!-- end #header --></div>
      <div id="sidebar1">
      <h3>Sidebar1 Content</h3>
        <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
        <p> </p>
      <!-- end #sidebar1 --></div>
      <div id="sidebar2">
        <h3>Sidebar2 Content</h3>
        <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
        <p> </p>
      <!-- end #sidebar2 --></div>
      <div id="mainContent">
        <h1> Main Content </h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
        <h2> </h2>
        <!-- end #mainContent --></div>
         <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
      <div id="footer">
        <p>Footer</p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>
    Don't be overwhelmed as this is simple code only (much like your own page). You can then divide your background image and put one part in the center column (mainContent DIV) and the other in the right sidebar (sidebar2 DIV).
    Hope this helps.
    Regards,
    Vinay

  • How do I build a model calendar page with three columns and two or three lines per day?

    I am trying to build a Page that has three columns with lines in each column that will be numbered according to each month. Then each month I plan to type in the birth dates, anniversaries, special occasions of my family. There will be over 120 entries.Thus far when I take a blank page from Pages and begin to type in the event, it remove the underline I had put in. I imagine I should be able to build one model page and then replicate it as I go from month to month. Thus far I have been unsuccessful. Any help will be sincerely appreciated.
    Ken Melley

    You could use a Table to set up your information in Pages 5.2, unfortunately it has a bug that makes the table moire or less unusable after a few pages.
    Contacts stores all your Address Book information. NJust add all the name, telephone number, address etc and there is an additional field for birthdays, anniversaries etc. Anything else you can put in the notes:
    http://computers.tutsplus.com/tutorials/contacts-101-a-beginners-guide-to-contac ts-on-os-x--mac-51751
    Calendar lets you run separate sets of dates in a desktop calendar, which can include birthdays, anniversaries or any single or recurring events. Any names you use here will be cross referenced to Contacts.
    http://www.macworld.com/article/2057229/get-to-know-os-x-mavericks-calendar.html
    Peter

  • Photo gallery app with slider

    Hi,
    Is there any photo gallery in which we can scroll images just like we scroll music albums in landscape mode?
    Thanks

    Hey, I take it this was built in Muse considering the sherr gianmous amount of inline CSS and Scripts? Really hard to find the issues, lol.
    You have two errors, one is that prettyPhoto is not a function and that is a result of this:
    Timestamp: 5/05/13 8:57:06 PM
    Error: Error: Load timeout for modules: main
    http://requirejs.org/docs/errors.html#timeout
    Source File: http://pevronestate.vivovecompany.com/scripts/require-jquery.js
    Line: 159
    It is a common error luckily and I believe its only here:
    <script data-main="scripts/main.js" src="scripts/require-jquery.js"></script>
    When you reference BC scripts etc you need to tell BC to read from the root so when you go into things like a detail view of a web app which is a folder level down from the root where to find the code.
    Any script, image, css call etc needs to have a / in front of it.
    So ...
    scripts/require-jquery.js
    Would be...
    /scripts/require-jquery.js
    And so on.
    Hope that helps.

  • Is it possible to create a Photo Gallery DVD with downloadable content?

    I am looking for a way to create a photo gallery, distribute it via DVD, and have the end user be able to download the photos from within the photo gallery. This would function exactly like the iPhoto web galleries, but would be distributed on DVD rather than posted to the web. Is this possible? I am looking for a way for a user to download the photos, in low res and high res, from within the DVD player.

    My first suggestion is to use Apple's Pro apps (ie, DVDSP) if you plan to use this DVD commercially. You'll get far better results and you will also be able to meet nearly all of the above objectives.
    If on the other hand you don't have the time to learn apple's pro apps which does have a large learning curve compared to the i-apps, and you are currently working with a shoestring budget, then you can meet at least some of these objectives within iDvd by adding your content to the Dvd rom section of the Dvd. The app that one uses to play the slideshow from this data section of the Dvd depends largely on the available apps on the host computer system having access to this data in terms of what software is available to play its content. Hope this makes sense but if not, just come on back. Good luck.
    Btw ... I'll check back with you later tonight since I have a fair amount of editing to do this AM.

  • Spry Photo Gallery Widget with filmstrip

    The main image in the photo gallery doesn't appear but the thumbnails do.
    http://www.woodsphotography.org/AbstractSlideshow1.html
    I'm using Dreamweaver CS5 and everything works fine when previewed in firefox or safari but once uploaded to the server this happens.
    Any help would be greatly appreciated.
    Keith

    Hi,
    please have a look here to this thread, where we had a similar question (hope it's similar to your gallery):
    http://forums.adobe.com/message/3398072#3398072: "Spry Widget Slideshow works in Firefox/Safari but not in Explorer"
    Hans-G.'s demand:
    BUT I have to ask me/you why the same command, listed in the "SpryImageSlideShow.css" is not running.
    gramps answer:
    The red coloured lines are not included in the original; but will make it work for IE6/7
    <style>
    #ImageSlideShow .ISSSlide {
       position: absolute;
        top: 0;
         left: 0;
        text-align: center;
       width: 100%;
        height: 100%;
    </style>
    Hans-Günter

  • Photo Gallery Disappears with ICS

    Trying to use the Photo Gallery after my ICS upgrade today.  It will appear for a second or two, but if I try to create a slideshow or access Gallery Home, it reverts back to camera.  Anyone have an idea how to fix this?

    Try this :   Settings / Applications / Running  - scroll down to Media and click on it.. Select Clear Data ... this does NOT delete your pics, etc ..  It just allows for a 'refresh' of the directory of images .. It does this the 1st time you open the Gallery - which if you hve a lot of images can take a few mins .. be patient.
    let us know if that helped.

  • CSS with three columns- middle fixed, sides adjust?

    I am new to CSS. I am trying to produce a webpage that utilizes a 3 column structure. The center column will be a fixed size and will be always centered in the browser, however the left and right columns will need to automatically adjust themselves to appropriate sceen size/resolution. I would like to utilize DW's layout templates to do this as I am new to the CSS process, but I am unsure of which one to use.
    Thanks.

    I would like to utilize DW's layout templates to do this as I am new to the CSS process, but I am unsure of which one to use.
    None of them.    I think they're terribly bloated and hard to understand.
    Here's a basic 3-column liquid layout.  View Page Source to see the code.
    http://alt-web.com/TEMPLATES/3-col-liq-layout.shtml
    If this is your first project with CSS layouts, I think you will have a much easier time if you use a fixed-width centered layout.
    http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
    For more great CSS layouts, you can't go wrong with Project Seven's Page Packs or CSS Layout Magic.
    http://www.projectseven.com/products/templates/pagepacks/iq/index.htm
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb

  • IWeb photo gallery comparison with PicasaWeb

    How iWeb Photo Galleries are compared to say, PicasaWeb Albums ? or even PBase or Shutterfly ?
    In terms of attractive visual presentation?
    Worth investing $100?
    Thanks!

    You are missing a number of files from your website.  You can see which are missing by bringing up the Activity window (Command+Option+A) while viewing the Places page in Safari and looking at the list of files in the window.
    How are you publishing the site?  With iWeb?  If so then try using the File ➙ Publish Entire Site menu option to see if that will force those missing files to be uploaded. 
    If that doesn't work you can publish your site to a folder on your hard drive and use a 3rd party FTP client, like the free  Cyberduck, to upload the site files. If you have to continue to use Cyberduck this tutorial may help: #2 - Uploading Only Those Newly Published or Edited Files When Using a 3rd Party FTP Client.
    OT

  • Spry static gallery combined with Spry Effect Observers

    I have set up a Spry static gallery using the
    demo
    here.
    I would like to add a cross fade for the main image using the
    Spry Effect Observers shown at the bottom of
    this
    demo page.
    I like the thumbnail grow effect used in the first demo and
    like to add a cross fade for the main image when the thumbnail is
    clicked. Have someone built such an example or can someone show me
    how it is done? Typically I have 4 thumbnails/images per product
    page.

    Mr. Andersson wrote:
    > I thnik I know what's going on now...
    >
    > I tried Fireworks and it has a built in Slideshow
    creator. The setting that
    > dont use Flash uses Spry and looks like the Spry gallery
    demo. The settings
    > using Flash have cross fading images.
    >
    > From this I got the idea that Adobe maybe dont want us
    to cross fade with
    > Spry. They want to push Flash instead. It could explain
    the total silence from
    > Adobe in various threads where this question is asked.
    This is a user to user forum, Adobe will never reply to you.
    Also, Spry is still a pre-release framework, its nowhere near
    finished.
    Its the kind of framework where you take whats available and
    make
    something out of it, its very flexible if you know
    javascript.
    I am learning javascript just to understand the little bits
    that I am
    experimenting with, I think its the only way forward if you
    intend to do
    something outside the box.
    Dooza
    Posting Guidelines
    http://www.adobe.com/support/forums/guidelines.html
    How To Ask Smart Questions
    http://www.catb.org/esr/faqs/smart-questions.html

  • Web photo gallery won't open on internet... why?

    I hope someone can help me with this.
    I always made slideshows with Photoshop until I got Elements. The newest version of Photoshop does not have that option anymore.
    I made a web photo gallery with elements, put it up in Dreamweaver, made a link, tested it on three browsers and it all worked perfectly.
    I then uploaded it all to a server.
    When I go to the page on internet, the link takes me to the index of the photo gallery but the slideshow does not open. It seems like the index file does not open the resource folder.
    I have compared the site on my computer with the site on the server and everything is exactly the same. The photo gallery is on th server with the index file and resource folder.
    I can't understand why the photo gallery doesn't behave on internet like it does on my computer.
    Can anyone explain this to me?
    I really like the way the new photo gallery looks compared with the slideshow made with my older version of Photoshop and would like to use it. Plus the fact that I can control the speed of the slideshow on Elements is a real boon.
    Thanks.

    Thanks for your reply.
    I will try to be as explicate as possible.
    This is a site that I maintain for a marathon. This is the 10th year. The participants contribute a series of photos that I have always made into slide shows.
    I have a page that references slideshows from 2009 for example. I made these photos into slideshows using Photoshop CS3. The different folders are called "Slideshow xxx"  with the corresponding index file. When I link to the index file in a certain folder the slideshow opens in a blank page and wonderful.
    Now, this year, I have done the same thing using Element with the results I mention in my origiinal message: the photo gallery does not open in any browser  in spite of being linked to the index file in the web photo gallery I created with Element.
    What happens when I go to the index file is simply nothing. I do not get an error message.
    You can see for yourself by going to
    http://www.el-ocejon.com/fotos%202010.html
    and clicking on either of the two last options (the first links to a picasa page that is not a problem).
    The solution is simple: create a slideshow using Photoshop CS3 and forget the whole thing.  But I would like to know what the problem is here and why I cannot get the photo gallery created with Elements to work on the internet.
    Or is this a "two steps forward and one step back" issue with Photoshop?

Maybe you are looking for

  • Sent mail symbol missing

    Recently my Mail is acting up. I select e-mail press reply, do it, send it and most of the times that little symbol of e-mail answered will not show up!? It creates quite a bit of confusion since that is what I do all the time and always afraid that

  • Dialogue box critique

    Hi all, I've been trying (in vain) to create a good dialogue box that does some bounds checking on user inputs before allowing them to be sent to the main application. Ideally, when an input is out of range, it'll blink until it gets put into range.

  • Adobe flash player keeps crashing every few weeks?

    Every few days to weeks adobe flash player crashes I will try update adobe and fire fox but tnothing works or I already have the lastest versions. Sometimes it down hours, sometimes a week. Then it goes away and happesn starts all over agin in a few

  • ISE 3315 License needed for integration with PxGrid SealthWatch

    Hello Experts, i have ISE 3315 with Version 1.3 i want to integrate it with pxgrid and ordering Sealthwatch. Can anyone tell me do i need To have ISE Advance-License for this integration ? Or with ISE  Base-License it can work? Thanks

  • Anywhere access wizard issues

    Hi, I have set up anywhere access (specifically remote web access) on a 2012 R2 Essentials server. When I ran the wizard, it found the following issues: "Anywhere Access to your server is blocked. Some routers may not work properly with your server..