Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Box with title and image inside

    Hello,
    I have a question, if somebody could help me,
    see this link for picture http://postimg.org/image/xbo41n4dd/ ,
    my question is, does anybody know how to write the html and css code to get three identical grey boxes around my three different images with a different title around? Thanks

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    837
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Something like this?:
    Code:
    <!DOCTYPE html>
    <html lang="en"><head>
        <meta charset="utf-8">
        <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
        <meta name="dcterms.created" content="Mon, 30 Sep 2013 17:18:03 GMT">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title></title>
    <style>
    #wrapper {
    width: 500px; min-height: 500px;
    margin: 1em auto;
    }
    
    h3 { text-align: center; }
    
    p {
    padding: .15em;
    text-align: justify;
    }
    
    .grayBox {
    width: 100px; min-height: 300px;
    border: 1em ridge #c0c0c0;
    }
    
    #boxOne {
    float: left;
    }
    
    #boxTwo {
    margin: 0 auto;
    }
    
    #boxThree {
    float: right;
    }
    
    img {
    display: block; margin: 0.5em auto; 
    }
    </style>    
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head><body>
    
    <div id="wrapper">
    <div class="grayBox" id="boxOne"><h3>Text Here</h3><img src="http://i.imgur.com/T76nY.jpg" width="64" height="64" alt="Image 1" title="Image 1"><p>Comments Here</p></div>
    
    <div class="grayBox" id="boxThree"><h3>Text Here</h3><img src="http://i.imgur.com/T76nY.jpg" width="64" height="64" alt="Image 3" title="Image 3"><p>Comments Here</p></div>
    
    <div class="grayBox" id="boxTwo"><h3>Text Here</h3><img src="http://i.imgur.com/T76nY.jpg" width="64" height="64" alt="Image 2" title="Image 2"><p>Comments Here</p></div>
    
    </div>
    
    </body></html>
    ☠ ☠RON☠ ☠

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Major Payne, i'm relatively new to HTML & CSS... what's the difference between

    #styleclass {

    and

    .styclass {

    By the way, great movie!

  • #4
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    #styleclass is an id. An ID should only be used once per page.

    .styleclass is a class. This can be used multiple times on one page.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    837
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Quote Originally Posted by HarrieW View Post
    Major Payne, i'm relatively new to HTML & CSS... what's the difference between

    #styleclass {

    and

    .styeclass {

    By the way, great movie!
    Correctly answered by L0adOpt1c. See: The Difference Between ID and Class
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •