Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Incorporating a Photo Gallery into Layout

Bottom of Page

1 to 9 of 9

  1.  
  1.  permalink
    Hi there,
    This is ambitious for me, but I am trying to incorporate a photo gallery into a site. I'm having trouble (in IE5) with getting the gallery to not be pushed over to the right. It's div id/container I changed to a div class and now it drops down in Firefox, but not IE. Also, there is a H2 and p tag that won't drop down, no matter what I do. I tried adding a class and floating left, but it did not work.

    Also, what is the best approach to center the photo gallery?

    link to site:
    http://www.katielovedesign.com/helenkaufman_htm/painting.htm

    There are 3 style sheets for this site-

    link to picture gallery style sheet:
    http://www.katielovedesign.com/helenkaufman_htm/css/picture-slides.css

    and also http://www.katielovedesign.com/helenkaufman_htm/styles.css

    The third is just for IE8...
    • CommentAuthorSpittelau
    • CommentTimeJun 5th 2008
     permalink
    Try removing the float and increase the width of #picture-slides-frame to 100%.
  3.  permalink
    The H2 and P tags will drop if you add clear:both; to their properties. The gallery should center if you remove the relative positioning and instead of floating it use a margin: 0 auto;. That'll work on IE if you are using a strict doctype.
    • CommentAuthorsoft_brick
    • CommentTimeJun 11th 2008 edited
     permalink
    Thank you both.
    I decided to change the gallery orientation so the thumbnails sit on the right, not below. I floated the
    large image container to the left, and the thumbnail container to the right. It seems to be working ok, so far. I really like this photo gallery- found out about it on this forum. I'm sure I will be back here with more questions for you all. I am such a novice...wish I started this long ago!

    I did view the site in IE7 and on the gallery page, each nav bar link stepped down lower. Does anyone know what this is from?
  5.  permalink
    The #nav li-elements are probably missing a width:auto property.
    • CommentAuthorsoft_brick
    • CommentTimeJun 11th 2008
     permalink
    hi there!

    they do have a width:auto property...hmmm.

    here is the css for the nav bar:

    #nav li a {
    font: small;
    display:inline;
    float:left;
    width:auto;
    padding:0px 5px 0px 35px;
    margin-left:10px;
    color:#660066;
    background: url(images/gallery_spirals.png) top left no-repeat;
    text-decoration: none;
    line-height:35px;
    }

    #nav li a:visited {
    color: #CCC;
    text-decoration: none;
    }

    #nav li a:hover {
    color: #66CCCC;
    background-position:0 -35px;
    text-decoration: none;
    }

    #nav li a:active {
    color:#FFF;
    background-position:0 -35px;
    text-decoration: none;
    }
  7.  permalink
    It's the #nav li a that has width:auto. This is what I meant:

    #nav li {
    width:auto;
    }
    • CommentAuthorsoft_brick
    • CommentTimeJun 16th 2008
     permalink
    Thanks for that. I think it helped.

    I am still trying to get the thumbnail gallery to sit to the right of the large image. I've floated each div id for the 2 columns(containers) to the left, but it only works in Firefox. In IE5 and Safari, the thumbnail container gets pushed down or sits directly underneath. Is there a general tip I should know about floating div's and Internet Explorer? Or some sites dedicated to issues w/ IE?

    link to site: http://www.katielovedesign.com/helenkaufman_htm/painting.htm

    There are 3 style sheets for this site-link to picture gallery style sheet:
    http://www.katielovedesign.com/helenkaufman_htm/css/picture-slides.css and also http://www.katielovedesign.com/helenkaufman_htm/styles.css

    CSS snippet:

    /* General */
    #container{
    overflow: hidden;
    width:auto;
    margin: 0 auto;
    padding-bottom: 4em;
    clear:both;
    }

    #picture-slides-container{
    /* Width HAS to be here for IE to render the filter */
    width: 100%;
    }

    #picture-slides-frame{
    float:left;
    width: 500px;
    text-align: center;
    background: #F5F5DE;
    margin: 10px 20px;
    padding: 10px;
    border: 0;
    }

    #picture-slides-thumbnails{
    float: left;
    width: 200px;
    margin-top: 1em;
    margin-right:40px;
    background: #F5F5DE;
    border: 0;
    }
  9.  permalink
    It looks fine on my Safari. Floats in IE need to be display: inline as well, or the margins will double.

    Position is everything is a great reference for all sorts of browser bugs.

1 to 9 of 9

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page