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
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    images and title next to each other

    I've written the code below, which gives me two titles and two images next to each other. Well not exactly next to each other, there is a gap above the second image :S How can I alter the code so that the images and text will be next to each other? The idea is to get 4/5 of these images next to each other.

    Hope someone can help

    <style type="text/css">
    img {border:1px solid #ff69b4;}
    .articleImages {height:190px;width:190px;float:left;margin-right:20px;}
    </style>


    <h3 class="small-gap-down">title1&nbsp;</h3>
    <div class="articleImages"><img src="thefirst.jpg"></div>

    <h3 class="small-gap-down">title2&nbsp;</h3>
    <div class="articleImages"><img src="thesecond.jpg"></div>




  • #2
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    you will want to surround

    <h3 class="small-gap-down">title1&nbsp;</h3>
    <div class="articleImages"><img src="thefirst.jpg"></div>


    each one of those with a div. and give that div some width and height properties

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmm, i tried but it then puts the images and text beneath each other :S

    <style type="text/css">
    img {border:1px solid #ff69b4;}
    .articleImages {height:190px;width:190px;float:left;margin-right:20px;}
    </style>


    <div style="width:200px;height:190px;"><h3 class="small-gap-down">title1&nbsp;</h3></div>
    <div style="width:200px;height:190px;"><div class="articleImages"><img src="thefirst.jpg"></div></div>

    <div style="width:200px;height:190px;"><h3 class="small-gap-down">title2&nbsp;</h3></div>
    <div style="width:200px;height:190px;"><div class="articleImages"><img src="thesecond.jpg"></div></div>



  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello santaclaus,
    seco is right, to control your image and it's caption together they need to be enclosed in a div. Your image however does not.
    Have a look at this -
    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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100.1% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    .article {
    	width: 192px;
    	float: left;
    	margin: 0 20px 0;
    	background: #ccc;
    }
    .articleImages {
    	height: 190px;
    	width: 190px;
    	background: #0f0; /*for testing since I don't have your images*/
    }
    img {border:1px solid #ff69b4;}
    </style>
    </head>
    <body>
        <div id="container">
        	<div class="article">
                <h3 class="small-gap-down">title1&nbsp;</h3> 
                <img src="thefirst.jpg" alt="description" class="articleImages" />
            <!--end article--></div>
                <div class="article">
                    <h3 class="small-gap-down">title2&nbsp;</h3> 
                    <img src="thesecond.jpg" alt="description" class="articleImages" />
                <!--end article--></div>
        <!--end container--></div>
    </body>
    </html>
    More image caption examples here.
    A photo presentation method you may like.


    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    yeah just 1 div to surround all this


    <div id="new div">
    <h3 class="small-gap-down">title1&nbsp;</h3>
    <div class="articleImages"><img src="thefirst.jpg"></div>
    </div>


  •  

    Posting Permissions

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