...

View Full Version : images and title next to each other



santaclaus
11-19-2009, 02:36 PM
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>

seco
11-19-2009, 02:41 PM
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

santaclaus
11-19-2009, 03:11 PM
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>

Excavator
11-19-2009, 03:35 PM
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 -
<!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. (http://nopeople.com/CSS/image%20captions/index.html)
A photo presentation method you may like. (http://nopeople.com/CSS/thumbnail%20presentation/index.html)


.

seco
11-19-2009, 04:00 PM
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum