SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Using CSS, lists and images

    Hello,

    I am trying to achieve the following layout (please, see gallery.jpeg attached) using lightbox and css, however, the following happens:

    1. when I click www.LINK_1.com and www.LINK_1.com, Header 2 (below those links) gets pushed to the left side.

    2.when I click www.LINK_4.com and www.LINK_5.com, they push images and links further down.

    I was wondering if it is possible to layout this page so images and links don't move when clicked.

    Layout image, html and css file are attached for your convenience.


    Thank you
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    What you describe doesn't happen with the code you supplied—but certainly, nothing should move. Could you past a live example of this so we can test it online?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    In your css on lines 280 and 281, delete the change of font-size:
    Code:
    .subscribe a:link, a:visited, a:active {color:#336633;font-size: 1.1em;}
    .subscribe a:hover {color:#336633;background-color:#CEDACE;font-size: 1.1em;}

  5. #5
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I guess this rule was in conflict with the previous one

    Code:
    a.pagelink, a.pagelink:visited, a.pagelink:active {color:#336633;}
    a.pagelink:hover {color:#336633;background-color:#CEDACE;}
    as well as navigation font size....

    It works now.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Glad it's working. Thanks for the feedback.

  7. #7
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    132
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for catching this one for me, ronpat

    Thanks for your time,ralph.m


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
  •