40 users online (0 members and 40 guests)  


  Results 1 to 2 of 2

Related

  1. picture help    Forum: Myspace Forum
    Replies: 1
  2. Picture & picture underneath    Forum: Myspace Forum
    Replies: 1
  3. Picture help    Forum: HTML Forum
    Replies: 5
  4. add a picture at the top    Forum: HTML Forum
    Replies: 5
  1. #1
    bnm's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2010
    Posts
    1

    Exclamation Help with picture grid

    I really need help for my wordpress blog

    I need it to have a front page..
    and i want to link images from it to the new categories...
    but the problem is that I want it to be like a grid and don't want all the images in the same sizes..
    so here goes this is how it is.. each color is a separate picture to of the exact size.. I need them to be like how this image shows and linked too
    pls can someone provide me the CSS code for it ???


    http://tinypic.com/r/32zjjpd/4

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Help with picture grid

    Hi there bnm,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <base href="http://www.coothead.co.uk/images/">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    #container {
        width:776px;
        height:656px;
        margin:auto;
    }
    #container img {
        border:0;
     }
    #tl {
        float:left;
        width:192px;
        height:400px;
     }
    #center-images {
        float:left;
        display:inline;
        width:384px;
        height:400px;
        margin:0 4px 4px;
     }
    #ct {
        float:left;
        width:384px;
        height:160px;
        margin-bottom:4px;
     }
    #cl {
        float:left;
        width:190px;
        height:236px;
     }
    #cr {
        float:right;
        width:190px;
        height:236px;
     }
    #tr {
        float:left;
        width:192px;
        height:400px;
     }
    #bt {
        clear:both;
        display:block;
        width:776px;
        height:252px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
     <a href="#"><img id="tl" src="blood.jpg" alt=""></a>
    
    <div id="center-images">
     <a href="#"><img id="ct" src="blood.jpg" alt=""></a>
     <a href="#"><img id="cl" src="blood.jpg" alt=""></a>
     <a href="#"><img id="cr" src="blood.jpg" alt=""></a>
    </div>
    
     <a href="#"><img id="tr" src="blood.jpg" alt=""></a>
    
     <a href="#"><img id="bt" src="blood.jpg" alt=""></a>
    
    </div><!-- end #container -->
    
    </body>
    </html>