SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Photo Gallery Css Images expanding

    http://www.blakeanthonydesign.com/thumbplate.html

    Here is the Css

    Code CSS:
    [size=3]*{
        margin:0;
        padding:0;
        font-size:100%;
     
    }
     
    body{
        font:80%/110% Verdana, Helvetica, sans-serif;
        color:#666;
        margin-top:20px;
        background:#F6F5F0;
        text-align:center;
    }
     
    a{
        color:#666;
        text-decoration:none;
    }
     
    p,
    h2{
        margin:15px 5px;
    }
     
    h2{
        color:#999;
    }
     
    #wrap{
        width:720px;
        margin:0 auto;
        position:relative;
    }
     
    #header{
        margin-bottom:20px;
    }
     
    #header a{
        text-decoration:underline;
    }
     
     
     
    #main-content li{
        width:200px;
        border:solid #CCC;
        border-width:0 1px 1px 0;
    /* uncomment and adjust this if you want a rounded frame in Mozilla browsers
        -moz-border-radius:20px;
     */
        background:#FFF;
        padding:10px;
        text-align:center;
        position:relative;
        float:left;
        display:inline;
        margin:5px;
    }
     
    #fullplate-navigation{
        list-style:none;
        margin:5px 0 0 45px;
     
    }
     
    #fullplate-navigation li{
        display:block;
        float:left;
        width:210px;
     
    }
     
    #previous{
        text-align:left;
    }
     
    #next{
        text-align:right;
    }
     
     
    #fullplate-navigation li a{
        display:block;
        width:190px;
        padding:10px;
    }
     
    #fullplate-navigation li a:hover{
        color:#333;
    }
     
     
     
    #fullplate-photo{
        border:solid #EEE;
        border-width:0 1px 1px 0;
    /* uncomment and adjust this if you want a rounded frame in Mozilla browsers
        -moz-border-radius:20px;
     */
        background:#FFF;
        padding:5px 15px 15px 15px;
        margin:0 auto;
        width:600px;
    }
     
     
     
     
    #main-content  a span{
    /*\*/
        position:absolute;
        left:-9999px;
     
    }
     
    #main-content a:hover span{    
        top:10px;
        left:10px;
        width:202px;
        font-weight:bold;
        background:#FFF;
        color:#999;
        padding:5px 0 5px 0;
        text-transform:uppercase;
        font-size:80%;
        border:1px solid #EEE;
        border-width:0 0 10px 0;
        filter: alpha(opacity=100);
        /*-moz-opacity:.8;
            opacity:.80;*/
    /**/
    } 
     
     
    img{
        border:1px solid #EEE;
    /* delete line above and uncomment this for an inset effect
        border:1px solid;
        border-color:#666 #EEE #EEE #666;
     */
    }
     
    #foot{
        padding-top:10px;
        margin-bottom:20px;
        clear:left;[/size]
    }
    Here is the html
    Code HTML4Strict:
    <title>BlakeAnthony Photos</title>
     
    [size=3]</head>
    <body> 
    <div id="wrap"> 
      <div id="header"> 
        <h1>BlakeAnthony Photos</h1> 
        <p></p> 
        <!--[if gte IE 5.5]>
    <p>Internet Explorer users should <a href="#">CLICK HERE</a> to activate the image rollovers.</p>
    <![endif]--> 
      </div>
    [/size][size=3]  <h2>Coming soon</h2>
      <div id="main-content"> 
        <ul> 
          <li><a href="fullplate.htm"><img src="http://i35.tinypic.com/5yhwnl.png" alt="The thumb" /><span>image description</span></a></li> 
          <li><a href="fullplate.htm"><img src="thumbhold.png" alt="The thumb" /><span>image description</span></a></li> 
          <li><a href="fullplate.htm"><img src="thumbhold.png" alt="The thumb"  /><span>a somewhat longer image description</span></a></li>
          <li><a href="fullplate.htm"><img src="thumbhold.png" alt="The thumb"  /><span>image description</span></a></li> 
          <li><a href="fullplate.htm"><img src="thumbhold.png" alt="The thumb"  /><span>image description</span></a></li> 
          <li><a href="fullplate.htm"><img src="thumbhold.png" alt="The thumb"  /><span>image description</span></a></li> 
          <li><a href="fullplate.htm"><img src="thumbhold.png" alt="The thumb"  /><span>image description</span></a></li> 
          <li><a href="fullplate.htm"><img src="thumbhold.png" alt="The thumb"  /><span>image description</span></a></li> 
          <li><a href="fullplate.htm"><img src="thumbhold.png" alt="The thumb"  /><span>image description</span></a></li> 
          <li><a href="fullplate.htm"><img src="thumbhold.png" alt="The thumb"  /><span>image description</span></a></li> 
          <li><a href="fullplate.htm"><img src="thumbhold.png" alt="The thumb"  /><span>image description</span></a></li> 
          <li><a href="fullplate.htm"><img src="thumbhold.png" alt="The thumb"  /><span>image description</span></a></li> 
        </ul> 
      </div> 
      <div id="foot"> 
        <p></p> 
      </div> 
     
    [/size][size=3]</div> 
    </body>
    </html>[/size]


    Im trying to make The image containers be able to have the image inside the box so even though the image is big the image container keeps all the images the same size without having them expand over it or make it to small. How can i do this without having to resize every image I put in my gallery? If you click on any of the boxes the user gets sent to a new link and the box displays a bigger image with a caption.


    so, basically i need to know how i can make my images appear to be the same height and width throughtout all the boxes. How can i do this?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #main-content ul img {
    	width: 200px;
    	height: 140px;
    }

  3. #3
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    wow, thank you Centauri. Can you explain to me what you wrote to do this? It worked perfectly. Good helpful post
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All that does is target images within <ul>s within #main-content, and sets the width and height of them.


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
  •