SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Problem getting images to stagger properly

    I am currently designing my first web site using CSS and am stuck as to how to get 4 images in my sidebar to stagger properly. Currently they are showing up side by side. See this link - http://www.freewebs.com/foxdencreations/

    Now the images should show up as shown on attached file.

    I have tried using ul li float left and float right. I believe that I will have to use position:absolute but am not sure how to code the HTML or the CSS.

    Here is my code for each:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="foxden_home.css" />
    <title>Foxden Creations</title>
    </head>
    <body>
    <div id="border-top">
    </div>
    <div id="header">
    <h1>Foxden Creations and Jewelry</h1>
    </div>
    <div id="necklace">
    </div>
    <div id="middle">
    <ul id="nav">
    <li id="nav-home"><a href="#">Home</a></li>
    <li id="nav-about"><a href="about.html">About Us</a></li>
    <li id="nav-necklaces"><a href="necklaces.html">Necklaces</a></li>
    <li id="nav-earrings"><a href="earrings.html">Earrings</a></li>
    <li id="nav-bracelets"><a href="bracelets.html">Bracelets</a></li>
    <li id="nav-lanyards"><a href="lanyards.html">Lanyards</a></li>
    <li id="nav-bookmarks"><a href="bookmarks.html">Bookmarks</a></li>
    <li id="nav-request"><a href="request.html">By Special Request</a></li>
    </ul>
    <div id="sidebar">
    <img src="images/blk_slvr_necklace.png" />
    <img src="images/pnk_blk_lanyard.png" />
    <img src="images/pnk_blk_bookmark.png" />
    <img src="images/slvr_wht_cross_necklace.png" />
    </div>
    <div id="content">
    <h2>Welcome to Foxden Creations</h2>
    <p>Here you will find unique, hand-crafted beaded jewelry that will set you apart from the crowd.</p>
    <p>Please come in and look around, I am sure there is something that will catch your eye.</p>
    <p>I also take special orders if you don't find what you are looking for! Just fill out the form on the <a href="request.html">"By Special Request"</a> page.</p>
    </div>
    </div>
    <!-- end "middle" div -->
    <div id="footer">
    <p>Copyright &copy; 2007 Foxden Creations - All Rights Reserved.</p>
    <p>Site design by Foxden Web Solutions</p>
    </div>
    <div id="border-bottom">
    </div>
    </body>
    </html>

    CSS:

    html {
    background: #18222E;
    }
    body {
    width: 767px;
    margin: 2em auto;
    position: relative;
    }
    #header {
    background: url(images/border/header.gif);
    }
    h1, h2
    {
    margin-top: 0;
    }
    h1 {
    background: url(images/foxden_creations_logo.png) no-repeat 2em 0;
    height:147px;
    text-indent: -9999em;
    margin: 0;
    }
    #middle {
    background: url(images/border/middle.gif);
    overflow: hidden;
    }
    #content {
    margin: 0 100px;
    }
    #sidebar {
    float: right;
    width: 300px;
    margin: 30px;
    padding: 0;
    background: yellow;
    display: inline;
    }

    #footer {
    clear: both;
    background: url(images/border/footer.gif);
    font: bold x-small Arial, Helvetica, sans-serif;
    color: #FFF;
    text-align: center;
    }
    #footer p {
    margin: 0;
    }

    /* Let's get some images on the nav buttons! */
    ul#nav {
    background: yellow;
    float: left;
    width: 175px;
    margin: 0 0 0 15px;
    padding: 0;
    list-style: none;
    text-align: center;
    display: inline;
    }
    ul#nav li {
    width: 85%;
    margin: 1em auto;
    }
    ul li a {
    display: block;
    height: 39px;
    text-indent: -999em;
    }
    ul li#nav-home a {
    background: url(images/buttons/home.png);
    }
    ul li#nav-about a {
    background: url(images/buttons/aboutus.png);
    }ul li#nav-necklaces a {
    background: url(images/buttons/necklaces.png);
    }
    ul li#nav-earrings a {
    background: url(images/buttons/earrings.png);
    }
    ul li#nav-bracelets a {
    background: url(images/buttons/bracelets.png);
    }
    ul li#nav-lanyards a {
    background: url(images/buttons/lanyards.png);
    }
    ul li#nav-bookmarks a {
    background: url(images/buttons/bookmarks.png);
    }
    ul li#nav-request a {
    background: url(images/buttons/request.png);
    }
    #necklace {
    position: absolute;
    top: 30px;
    right: 1em;
    background: transparent url(images/jewelry.png) no-repeat;
    height: 324px;
    width: 158px;
    left: 574px;
    }
    #border-top {
    background: url(images/border/top.gif);
    height: 41px;
    }
    #border-bottom {
    background: url(images/border/bottom.gif);
    height: 39px;
    }

    Could someone please correct my code so that the effect I want works?

    Thanks.
    Attached Images Attached Images
    Last edited by cgacfox; May 22, 2007 at 18:12. Reason: Need to remove link to Csscreator.com

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Firefox can't find the server at www.csscreator.com
    They seem staggered nicely in Firefox (first and third on the left, second and fourth on the right). You shouldn't need to use position:absolute - they work fine as they are floated at the moment.

  3. #3
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    But they should be first top left, second drop down and right, third drop down and left, and fourth drop down and right. Are you seeing it this way or like this:
    image image
    image image

  4. #4
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Never mind I just tried it in Firefox and it does work. Why won't it work in IE7 though?

  5. #5
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    BTW, the ugle yellow is just so I know where the nav and sidebar are sitting. It will go away after this is all fixed.

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry, I don't have IE7, but I suspect that IE7 is rendering these differently so that there is enough space for them to appear side by side (but not in Firefox). You need to clear the floats. Add clear:left for li.right and clear:right for li.left.

  7. #7
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Well I am totally frustrated!

    If I can't get the page to show the same way in the 3 top used browsers then I just don't know what to do. They all seem to handle CSS differently. I just did some minor adjustments in Firefox and the images are one on top of the other again. I put the adjustments back but it didn't help. I cleared my cache and it still didn't help.

  8. #8
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Now it's working again. I also tested in Netscape 8.1 and there are wierd blue lines running through the middle area of my page. They seemed to be going right through each button on the left and running all the way to the right. There are 8 of them but they stop showing after the last button. This is just too frustrating getting the CSS to work with all browsers. Any ideas how to overcome this problem and get all browsers to show the same thing?

  9. #9
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I don't have NS 8.1 so I can't test it... I suspect it might be the default image borders. Try adding this at the top of your stylesheet:
    Code CSS:
    img {border:0}
    Also, there is a blank line before your doctype. You must remove absolutely everything before the doctype in order to put IE6 in standards mode (i.e. it will render slightly more like good browsers).

  10. #10
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Well I am totally frustrated!
    If I can't get the page to show the same way in the 3 top used browsers then I just don't know what to do. They all seem to handle CSS differently. I just did some minor adjustments in Firefox and the images are one on top of the other again. I put the adjustments back but it didn't help. I cleared my cache and it still didn't help.
    These types of problems are always the same when you first start with CSS, keep at it - it will get much simpler and easier to work with as you go along. It's frustrating because you're used to one way of doing things and you know that it works. Trust me, mastering this way of doing is much much better that the old table based layouts. Never give up, never surrender, and all that..

  11. #11
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Added line but...

    it didn't work, Raffles. Blue lines are still there. I did try something and changed the rendering engine to IE, which of course caused the right hand images to screw up and be side by side as in IE7. So I went back to the Firefox rendering engine and the blue lines are back. I also run the latest version of Firefox and there are no blue lines when I view directly on Firefox so NS must run an older version.

    I also checked my code and it seems to be just a wierd thing caused by freewebs.com. That is where I am testing the site. There is no blank line at the top of my code when I go to edit it.

  12. #12
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Have you tried clearing the floats like I suggested? Another alternative is not to float the LI blocks but to float the IMG elements inside them (left, right, left and right).

    They certainly should not be appearing side by side in IE7 since you have added a clear:both to #albumlist li. Very odd.

    As for the blue lines, since there are eight it seems like it's something to do with the buttons on the left. Have you tried it locally? Maybe freewebs is messing that up too. In any case, I wouldn't worry much about Netscape since practically nobody uses it.

    It would be best to fine tune this once it is at some decent hosting which doesn't play about with your HTML.

  13. #13
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Have you tried clearing the floats like I suggested? Another alternative is not to float the LI blocks but to float the IMG elements inside them (left, right, left and right).

    They certainly should not be appearing side by side in IE7 since you have added a clear:both to #albumlist li. Very odd.

    As for the blue lines, since there are eight it seems like it's something to do with the buttons on the left. Have you tried it locally? Maybe freewebs is messing that up too. In any case, I wouldn't worry much about Netscape since practically nobody uses it.

    It would be best to fine tune this once it is at some decent hosting which doesn't play about with your HTML.
    The guys over at CSSCreator.com actually got me through it. Here is my new code.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="foxden_home.css" />
    <title>Foxden Creations</title>
    </head>
    <body>
    <div id="border-top">
    </div>
    <div id="header">
    <h1>Foxden Creations and Jewelry</h1>
    </div>
    <div id="necklace">
    </div>
    <div id="middle">
    <ul id="nav">
    <li id="nav-home"><a href="#">Home</a></li>
    <li id="nav-about"><a href="about.html">About Us</a></li>
    <li id="nav-necklaces"><a href="necklaces.html">Necklaces</a></li>
    <li id="nav-earrings"><a href="earrings.html">Earrings</a></li>
    <li id="nav-bracelets"><a href="bracelets.html">Bracelets</a></li>
    <li id="nav-lanyards"><a href="lanyards.html">Lanyards</a></li>
    <li id="nav-bookmarks"><a href="bookmarks.html">Bookmarks</a></li>
    <li id="nav-request"><a href="request.html">By Special Request</a></li>
    </ul>
    <div id="sidebar">
    <ul id="albumlist">
    <li class="left"><img src="images/blk_slvr_necklace.png" alt="Black &amp; Silver Necklace" /></li>
    <li class="right"><img src="images/pnk_blk_lanyard.png" alt="Pink &amp; Black Lanyard" /></li>
    <li class="left"><img src="images/pnk_blk_bookmark.png" alt="Pink &amp; Black Beaded Bookmark" /></li>
    <li class="right"><img src="images/slvr_wht_cross_necklace.png" alt="Silver &amp; White Cross Necklace" /></li>
    </ul>
    </div>
    <div id="content">
    <h2>Welcome to Foxden Creations</h2>
    <p>Here you will find unique, hand-crafted beaded jewelry that will set you apart from the crowd.</p>
    <p>Please come in and look around, I am sure there is something that will catch your eye.</p>
    <p>I also take special orders if you don't find what you are looking for! Just fill out the form on the <a href="request.html">"By Special Request"</a> page.</p>
    </div>
    </div>
    <!-- end "middle" div -->
    <div id="footer">
    <p>Copyright &copy; 2007 Foxden Creations - All Rights Reserved.</p>
    <p>Site design by Foxden Web Solutions</p>
    </div>
    <div id="border-bottom">
    </div>
    <center>
    <table width="90%%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><center>
    <font size="2" face="Arial, Helvetica, sans-serif">This site is hosted
    for FREE by <a href="http://members.freewebs.com/" rel="nofollow"><img style="border:0px; width:71px; height:16px;" src="http://images.freewebs.com/Images/logo-tm.gif" alt="Freewebs.com" align="absmiddle"></a>. <a href="http://members.freewebs.com/" target="_blank"><font color="#000000">Click here to get your own Free Website!</font></a></font>
    </center></td>
    </tr>
    </table></center>
    </body>
    </html>

    CSS:

    img {
    border: 0;
    }
    html {
    background: #18222E;
    }
    body {
    width: 767px;
    margin: 2em auto;
    position: relative;

    }
    #header {
    background: url(images/border/header.gif);
    }
    h1, h2
    {
    margin-top: 0;
    }
    h1 {
    background: url(images/foxden_creations_logo.png) no-repeat 2em 0;
    height:147px;
    text-indent: -9999em;
    margin: 0;
    }
    #middle {
    background: url(images/border/middle.gif);
    overflow: hidden;
    }
    #content {
    margin: 0 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: bold;
    }
    #sidebar {
    float: right;
    width: 278px;
    margin: 30px;
    padding: 0;
    display: inline;
    }

    #albumlist {
    margin-left:5;
    padding-left:0;
    list-style:none;
    margin-top: 2px;
    padding-top: 2px;
    }
    #albumlist li {
    /* width not strictly
    required but may keep
    IE happy */
    width:235px;

    }
    #albumlist li.left {
    /*properties removed*/
    }
    #albumlist li.right {
    text-align:right;
    }
    #footer {
    clear: both;
    background: url(images/border/footer.gif);
    font: bold x-small Arial, Helvetica, sans-serif;
    color: #FFF;
    text-align: center;
    }
    #footer p {
    margin: 0;
    }

    /* Let's get some images on the nav buttons! */
    ul#nav {
    float: left;
    width: 177px;
    margin: 0 0 0 15px;
    padding: 0;
    list-style: none;
    text-align: center;
    display: inline;
    }
    ul#nav li {
    width: 85%;
    margin: 1em auto;
    }
    ul li a {
    display: block;
    height: 39px;
    text-indent: -999em;
    text-decoration: none;
    }
    ul li#nav-home a {
    background: url(images/buttons/home.png);
    }
    ul li#nav-about a {
    background: url(images/buttons/aboutus.png);
    }
    ul li#nav-necklaces a {
    background: url(images/buttons/necklaces.png);
    }
    ul li#nav-earrings a {
    background: url(images/buttons/earrings.png);
    }
    ul li#nav-bracelets a {
    background: url(images/buttons/bracelets.png);
    }
    ul li#nav-lanyards a {
    background: url(images/buttons/lanyards.png);
    }
    ul li#nav-bookmarks a {
    background: url(images/buttons/bookmarks.png);
    }
    ul li#nav-request a {
    background: url(images/buttons/request.png);
    }
    #necklace {
    position: absolute;
    top: 30px;
    right: 1em;
    background: transparent url(images/jewelry.png) no-repeat;
    height: 324px;
    width: 158px;
    left: 574px;
    }
    #border-top {
    background: url(images/border/top.gif);
    height: 41px;
    }
    #border-bottom {
    background: url(images/border/bottom.gif);
    height: 39px;
    }



    The only remaining problem is IE6. My pngs are not showing transparent. Gifs won't work unless I re-slice the page to include the background of each image that is currently png because they all have a drop shadow effect. So I am still working on getthing this part resolved. Once that is done, I can finally move on to doing the rest of the site.


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
  •