-
1. Re: I would like to be able to line up 4 images in a row along with their corresponding h2 tags
martcol Feb 21, 2012 12:26 AM (in response to broomeGirl)Take a look here: martcol.co.uk/test/trialbabypic.html
OK, so it's six images but the principle is the same.
View source in your browser to see the code.
Martin
-
2. Re: I would like to be able to line up 4 images in a row along with their corresponding h2 tags
martcol Feb 21, 2012 12:30 AM (in response to martcol)One thing to mention. When you use float the element must have a width declared.
div {
float: left;
width: 600px;
}
Images are a bit different because the width is implicit but nonetheless, I thought I'd say it.
Martin
-
3. Re: I would like to be able to line up 4 images in a row along with their corresponding h2 tags
osgood_ Feb 21, 2012 12:32 AM (in response to broomeGirl)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
#wrapper {
width: 860px;
margin: 0 auto;
padding: 0;
background-color:#669933;
overflow: hidden;
}
.imageWrapper {
float:left;
width: 215px;
}
#wrapper h2 {
font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="imageWrapper">
<h2>??</h2>
<a href="??.html"><img src="??" /></a>
</div><!-- end imageWrapper -->
<div class="imageWrapper">
<h2>??</h2>
<a href="??.html"><img src="??" /></a>
</div><!-- end imageWrapper -->
<div class="imageWrapper">
<h2>??</h2>
<a href="??.html"><img src="??" /></a>
</div><!-- end imageWrapper -->
<div class="imageWrapper">
<h2>??</h2>
<a href="??.html"><img src="??" /></a>
</div><!-- end imageWrapper -->
</div><!--END of wrapper-->
</body>
</html>
-
4. Re: I would like to be able to line up 4 images in a row along with their corresponding h2 tags
broomeGirl Feb 21, 2012 3:13 AM (in response to osgood_)Thanks to you all .. worked like a dream. For all those that come after me .. i wrapped each image in a div, because links and images are inline elements and will naturally sit side by side, headings such as h2 are block level elements and have by default line breaks that precede and follow them.
I made a css class that floated the images to the left, applied the width to the containing div of the image divs applied the class to each of the image divs and they all lined up beautifully.
-
5. Re: I would like to be able to line up 4 images in a row along with their corresponding h2 tags
martcol Feb 21, 2012 10:07 AM (in response to broomeGirl)OhDer wrote:
...and they all lined up beautifully.Doesn't that feel good?
Martin
-
6. Re: I would like to be able to line up 4 images in a row along with their corresponding h2 tags
broomeGirl Feb 21, 2012 3:27 PM (in response to martcol)Oh Yeah! Thx





