SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having a strange issues with some CSS tables...

    First I'll post a screen shot of my problem...



    My original problem was I couldn't get the images centered, but I fixed that, but now after I did that the captions are underneath the image and the image borders are gone. There is supposed to be a white border around the images and the caption should be at the top on mouse over. I'll post my CSS and HTML. It is affecting ULs. The CSS in question is the #main-content stuff.

    Thanks in advance.

    HTML:
    <!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" />

    <link rel="icon" href="siteimages/favicon.gif" type="image/gif">

    <link rel="stylesheet" href="CSS/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="CSS/navbar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.0.css" type="text/css" media="screen">

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.0.pack.js"></script>

    <title>Gilles Photography</title>

    </head>

    <body>

    <div id="home">
    <p>gillesphotography.com // <a href="index.html">home</a></p>
    </div>

    <div id="logo"><img src="siteimages/Banner_01_01.png" alt="Banner" width="450" height="144" />
    </div>

    <div id="navcontainer">
    <ul id="navlist">
    <li id="active">
    <a href="index.html" id="current">Home</a></li>
    <li><a href="galleries.html">Galleries</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="purchase.html">Purchase</a></li>
    </ul>
    </div>

    <div id="images">
    <div id="main-content">
    <ul>
    <li><a href="bw.html"><img src="galleries/galleryheaders/gallery-1.jpg" alt="The thumb" border="0" /><span>Black & Whtie</span></a></li>
    <li><a href="arch.html"><img src="galleries/galleryheaders/gallery-2.jpg" alt="The thumb" border="0" /><span>Architecture</span></a></li>
    <li><a href="auto.html"><img src="galleries/galleryheaders/gallery-3.jpg" alt="The thumb" border="0" /><span>Automobiles</span></a></li>
    <li><a href="fauna.html"><img src="galleries/galleryheaders/gallery-4.jpg" alt="The thumb" border="0" /><span>Fauna</span></a></li>
    <li><a href="people.html"><img src="galleries/galleryheaders/gallery-5.jpg" alt="The thumb" border="0" /><span>People</span></a></li>
    <li><a href="flora.html"><img src="galleries/galleryheaders/gallery-6.jpg" alt="The thumb" border="0" /><span>Flora</span></a></li>
    <li><a href="sports.html"><img src="galleries/galleryheaders/gallery-7.jpg" alt="The thumb" border="0" /><span>Sports</span></a></li>
    <li><a href="landscapes.html"><img src="galleries/galleryheaders/gallery-8.jpg" alt="The thumb" border="0" /><span>Landscapes</span></a></li>
    </ul>
    </div>
    </div>


    <div id="footer">&copy; Copyright 2010 Gilles Photography
    </div>

    </body>
    </html>
    CSS:
    @charset "utf-8";
    /* CSS Document */

    body{
    background-color:#000;
    color:#FFF;
    font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:medium;
    margin-top:0;
    }

    a:link {color: #227eb8; text-decoration: none;}
    a:visited {color: #227eb8; text-decoration: none;}
    a:hover {color: #d2ebff; text-decoration: none;}
    a:focus {color: #d2ebff; text-decoration: none;}
    a:active {color: #d2ebff; text-decoration: none;}

    #home {float:left;
    width:20%;
    position:absolute;top: 10px; left: 10px;
    }

    #logo{text-align: center;
    width:100%;
    margin:0 auto;
    background-image:url(../siteimages/topglow3.png);
    background-position:top;
    background-repeat:no-repeat;
    }

    #menu{width:90%;
    margin:0 auto;
    }

    #text{width:90%;
    margin:0 auto;
    }

    #images{
    width:90%;
    margin:0 auto;
    text-align:center;
    }

    #form{width:50%;
    margin:0 auto;
    }

    #footer{font-size-small;
    background-color:#171717;
    width:90%;
    margin:0 auto;
    clear:both;
    }

    #navcontainer{width:90%;
    margin:0 auto;
    }

    #main-content ul{
    text-align:center;
    }

    #main-content li{
    width:300px;
    border:solid #FFF;
    border-width:0 1px 1px 0;
    background:#FFF;
    padding:10px;
    text-align:center;
    position:relative;
    display:inline;
    margin:5px;
    text-align:center;
    }

    #main-content a span{
    position:absolute;
    left:-9999px;
    }

    #main-content a:hover span{
    top:10px;
    left:10px;
    width:300px;
    font-weight:bold;
    background:#FFF;
    color:#000;
    padding:5px 0 5px 0;
    text-transform:uppercase;
    font-size:80%;
    border:1px solid #FFF;
    border-width:0 0 2px 0;
    filter: alpha(opacity=100);
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, can you post a link to the site in question? It would make it much easier to debug
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have it on the net yet, however it will be in a couple days, I guess I will have to wait til then.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    1) If you want a white border around the images then place a border on the images
    2) When I create a local test case the captions are indeed appearing at the top
    Code:
    <!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" />
    
    <link rel="icon" href="siteimages/favicon.gif" type="image/gif"> 
    
    <link rel="stylesheet" href="CSS/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="CSS/navbar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.0.css" type="text/css" media="screen">
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.0.pack.js"></script>
    
    <title>Gilles Photography</title>
    <style>
    img{width:300px;height:300px;border:1px solid red;display:block}
    @charset "utf-8";
    /* CSS Document */
    
    body{
    background-color:#000;
    color:#FFF;
    font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:medium;
    margin-top:0;
    }
    
    a:link {color: #227eb8; text-decoration: none;}
    a:visited {color: #227eb8; text-decoration: none;}
    a:hover {color: #d2ebff; text-decoration: none;}
    a:focus {color: #d2ebff; text-decoration: none;}
    a:active {color: #d2ebff; text-decoration: none;}
    
    #home {float:left;
    width:20&#37;;
    position:absolute;top: 10px; left: 10px;
    }
    
    #logo{text-align: center;
    width:100%;
    margin:0 auto;
    background-image:url(../siteimages/topglow3.png);
    background-position:top;
    background-repeat:no-repeat;
    }
    
    #menu{width:90%;
    margin:0 auto;
    }
    
    #text{width:90%;
    margin:0 auto;
    }
    
    #images{
    width:90%;
    margin:0 auto;
    text-align:center;
    }
    
    #form{width:50%;
    margin:0 auto;
    }
    
    #footer{font-size-small;
    background-color:#171717;
    width:90%;
    margin:0 auto;
    clear:both;
    }
    
    #navcontainer{width:90%;
    margin:0 auto;
    }
    
    #main-content ul{
    text-align:center;
    }
    
    #main-content li{
    width:300px;
    border:solid #FFF;
    border-width:0 1px 1px 0;
    background:#FFF;
    padding:10px;
    text-align:center;
    position:relative;
    float:left
    margin:5px;
    text-align:center;
    }
    
    #main-content a span{
    position:absolute;
    left:-9999px;
    }
    
    #main-content a:hover span{ 
    bottom:-10px;
    left:10px;
    width:300px;
    font-weight:bold;
    background:#FFF;
    color:#000;
    padding:5px 0 5px 0;
    text-transform:uppercase;
    font-size:80%;
    border:1px solid #FFF;
    border-width:0 0 2px 0;
    filter: alpha(opacity=100);
    }
    </style>
    </head>
    
    <body>
    
    <div id="home">
    <p>gillesphotography.com // <a href="index.html">home</a></p>
    </div>
    
    <div id="logo"><img src="siteimages/Banner_01_01.png" alt="Banner" width="450" height="144" />
    </div>
    
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active">
    <a href="index.html" id="current">Home</a></li>
    <li><a href="galleries.html">Galleries</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="purchase.html">Purchase</a></li>
    </ul>
    </div>
    
    <div id="images">
    <div id="main-content"> 
    <ul> 
    <li><a href="bw.html"><img src="galleries/galleryheaders/gallery-1.jpg" alt="The thumb" border="0" 
    
    /><span>Black & Whtie</span></a></li> 
    <li><a href="arch.html"><img src="galleries/galleryheaders/gallery-2.jpg" alt="The thumb" 
    
    border="0" /><span>Architecture</span></a></li> 
    <li><a href="auto.html"><img src="galleries/galleryheaders/gallery-3.jpg" alt="The thumb" 
    
    border="0" /><span>Automobiles</span></a></li>
    <li><a href="fauna.html"><img src="galleries/galleryheaders/gallery-4.jpg" alt="The thumb" 
    
    border="0" /><span>Fauna</span></a></li> 
    <li><a href="people.html"><img src="galleries/galleryheaders/gallery-5.jpg" alt="The thumb" 
    
    border="0" /><span>People</span></a></li> 
    <li><a href="flora.html"><img src="galleries/galleryheaders/gallery-6.jpg" alt="The thumb" 
    
    border="0" /><span>Flora</span></a></li> 
    <li><a href="sports.html"><img src="galleries/galleryheaders/gallery-7.jpg" alt="The thumb" 
    
    border="0" /><span>Sports</span></a></li> 
    <li><a href="landscapes.html"><img src="galleries/galleryheaders/gallery-8.jpg" alt="The thumb" 
    
    border="0" /><span>Landscapes</span></a></li> 
    </ul> 
    </div> 
    </div>
    
    
    <div id="footer">&copy; Copyright 2010 Gilles Photography 
    </div>
    
    </body>
    </html>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan, it seems to be working now. The only problem is when I put a border on the images I get the color of links as the border because they are hyperlinked. What do I need to put in my CSS to fix that?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by wgilles View Post
    Thanks Ryan, it seems to be working now. The only problem is when I put a border on the images I get the color of links as the border because they are hyperlinked. What do I need to put in my CSS to fix that?
    Just define the border-color as follows:

    Code:
    #main-content li img{border:1px solid #000}/* set whatever color you want*/

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wgilles View Post
    Thanks Ryan, it seems to be working now. The only problem is when I put a border on the images I get the color of links as the border because they are hyperlinked. What do I need to put in my CSS to fix that?
    The ONLY change I made eto your page (well besides me setting the image to display:block (so it could accept width/height)) was that I floated the <li> instead of display:inline
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.

    Ryan,

    When I use your code, it goes back to being uncentered the the text appears at the bottom...not sure why...

  9. #9
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tried something and it worked. I change the top to -287 and left to 0 and it appears at the top now.

    #main-content a:hover span{
    top:-287px;
    left:0px;
    width:300px;
    font-weight:bold;
    background:#FFF;
    color:#000;
    padding:5px 0 5px 0;
    text-transform:uppercase;
    font-size:80&#37;;
    border:1px solid #FFF;
    border-width:0 0 0px 0;
    filter: alpha(opacity=100);

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Of course, because floating doesn't allow for centering (the way you were doing)

    Glad it is working, however you should be aware that using a top: value (with relative positioning) only moves an element visually but not physically
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Of course, because floating doesn't allow for centering (the way you were doing)

    Glad it is working, however you should be aware that using a top: value (with relative positioning) only moves an element visually but not physically
    Yeah, it's accomplishing what I want it to so as long as it works in all browsers, I'm at peace.

    Yet another small problem...
    I have my padding set to 10px on left and right, but for some reason no matter what I put in for top and bottom it won't move, any ideas?

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Because since the <li> is display:inline; it doesn't accept vertical margins/paddings/width/height.

    You could set it to display:inline-block, (see below on how to fully do that) or you could float it (no horizontal centering with that in your setup)

    To get inline-block IE6/7 must be either fed a conditional comment seting them to display:inline (or use a hack to target them)
    Code:
    li.classhere
    {
      display:-moz-inline-box;/*FF2 and under*/
      display:inline-block;
    }
    * html li.classhere
    {
      display:inline;/*IE6*/
    }
    *+html li.classhere
    {
      display:inline;/*IE7*/
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •