<figure> problem

Hi

Please don’t laugh! I’m trying to work out a skeleton for a new page and am having problems with <figure>,

i cannot get the captions under each image and wonder what will happen to the captions as the screen narrows

http://pintotours.net/CCC/Photo.html

Thanks

Hi there qim,

why are you putting the images within the block figure element and then floating them left?

What are you trying to achieve?

Have you fully read up on the figure element?

coothead

Hi,

You are floating the image but not the figure element so the image floats out of the container because it is not containing the floats. You would be better off floating the figure and not the image (or better still use inline-block so that they don’t snag when they wrap.

e.g.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Photographic album</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" href="Photo.css">
<style>
body {
	margin:0;
	padding:0;
	font: 100%/1.3 arial, helvetica, sans-serif;
	background:yellow;
}
#wrap {
	width:100%;
	max-width:1200px;
	margin:0 auto;
	/*temporary text styles below*/
    text-align:center;
	font-family: 'Noto Serif', serif;
	font-weight:bold;
	color:white;
}
#header {
	width:100%;
	height:140px;
	background-color:#910000;
	overflow: hidden;
	margin:5px auto 10px;
}
#header #clock {
	float:left;
	width: 180px;
	height:140px;
	background-color:#910000;
	margin-top:-10px;
	margin-left:60px;
}
#header #clock #position {
	float:left;
	text-align:center;
	margin-top:10px;
	margin-left:20px;
	color:white;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.cityTimeDate span {
	display:block;
}
#city {
	font-size:16px;
	color:white;
}
#time {
	font-size:36px;
	color:#CDCD5C;
}
#London #date {
	font-size:15px;
	color:white;
}
#header #title {
	height:140px;
	background-color:#910000;
	color:#E1E19D;
	font-size:250%;
	line-height:60px;
	margin:0 auto;
	white-space:nowrap;
	font-weight:400;
}
#title h1 {
	font-size:40px;
	font-family:Times New Roman;
}
#main {
	display:table;
	width:100%;/*IE6 haslayout (contain floats)*/
	overflow:hidden;/*contain child floats in modern browsers*/
}
#sidebar {
	display:table-cell;
	vertical-align:top;
	width:15%;
	max-width:15%;
	background:red
}
#gallery {
	display:table-cell;
	vertical-align:top;
	margin:0 auto;
	width:85%;
	background:green;
}
.img-container{text-align:left}
.img-container img {
	border:0;
	width:100%;
	height:auto;
}
.clear {
	clear:both;
}
#footer {
	max-width:1200px;
	margin:10px auto;
	min-height:50px;
	background:#910000;
	text-align:center;
}
figure {
	display:inline-block;
	vertical-align:top;
	margin:10px 1%;
	max-width:22%;
}
</style>
</head>
<body>
<div id="wrap">
		<div id="header">
				<div id="clock">
						<div id="position">
								<div id="London" class="cityTimeDate"></div>
						</div>
				</div>
				<!-- close clock -->
				
				<div id="title">
						<h1>Photo Gallery</h1>
				</div>
				<!-- close title --> 
				
		</div>
		<!-- close header -->
		
		<div id="main">
				<div id="sidebar"> hello </div>
				<div id="gallery">
						<p>Thumbnails</p>
						<div class="img-container">
								<figure> <img src="http://pintotours.net/Pinto/images/logo.jpg" alt="The Pulpit Rock" width="240" height="160">
										<figcaption>A view of the pulpit rock in Norway.</figcaption>
								</figure>
								<figure> <img title="Logo" alt="Logo" width="240" height="160" src="http://pintotours.net/Pinto/images/logo.jpg">
										<figcaption>A view of the pulpit rock in Norway.</figcaption>
								</figure>
								<figure> <img title="Logo" alt="Logo" width="240" height="160" src="http://pintotours.net/Pinto/images/logo.jpg">
										<figcaption>A view of the pulpit rock in Norway.</figcaption>
								</figure>
								<figure> <img title="Logo" alt="Logo" width="240" height="160" src="http://pintotours.net/Pinto/images/logo.jpg">
										<figcaption>A view of the pulpit rock in Norway.</figcaption>
								</figure>
								<figure> <img title="Logo" alt="Logo" width="240" height="160" src="http://pintotours.net/Pinto/images/logo.jpg">
										<figcaption>A view of the pulpit rock in Norway.</figcaption>
								</figure>
								<figure> <img title="Logo" alt="Logo" width="240" height="160" src="http://pintotours.net/Pinto/images/logo.jpg">
										<figcaption>A view of the pulpit rock in Norway.</figcaption>
								</figure>
								<figure> <img title="Logo" alt="Logo" width="240" height="160" src="http://pintotours.net/Pinto/images/logo.jpg">
										<figcaption>A view of the pulpit rock in Norway.</figcaption>
								</figure>
						</div>
				</div>
				<!-- close gallery --> 
				
		</div>
		<!-- close main --> 
		
</div>
<!-- close wrap -->
<div class="clear"></div>
<div id="footer">Footer</div>
<script type="text/javascript">
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "/Pinto/scripts/googleanalytics.js";
 document.body.appendChild(element); 
 
 }
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
 </script>
</body>
</html>

if I don’t float them left, I get this: see again

Hi

Many thanks Paul

I’ll work on that.

Regards

Hi there qim,

just in case you do not fully read up on these two
new elements, here are their default CSS settings…

figure { display: block; margin-top: 1em; margin-right: 40px; margin-bottom: 1em; margin-left: 40px; } figcaption { display: block; }

…which you should always bear in mind. :smiley:

coothead

Hi Paul

Perfect! Thanks

I overwrote my earlier attempt and now cannot see exactly where the changes were made.

Was this the only code you added to the css ?

.img-container{text-align:left}

figure {
	display:inline-block;
	vertical-align:top;
	margin:10px 1%;
	max-width:22%;
}

The html seems to be the same. Is that right?

Sorry! Don’t worry if you don’t have the previous version any longer.

The page is now at http://pintotours.net/CCC/Paul.html

I didn’t change your html but if I remember correctly I removed the floats from your images and applied inline-block to the figure element instead. Your online code doesn’t have the floated images so it looks ok to me.

You may want to add media queries and go form 4 across to 3 across and so on at suitable widths.

Hi

problems still…

First the gallery has sunk below the sidebar, and second, strangest of all (for me…) is that I apllied a colour to the sidebar and it is displayed in the main body! I made it red now to be more easily understood

New url http://pintotours.net/CCC/MMM.html

I want the sidebar to behave like the #left in http://pintotours.net/Pinto/insurance.html ,i.e. fixed until removed in the queries (that later)

If you have a minute…

this page…

http://pintotours.net/CCC/MMM.html

…has coding errors…

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fpintotours.net%2FCCC%2FMMM.html

…which may be causing problems. :confused:

Hi coothead

I’m blushing… I check the validation often but this time I guess I did not believe in what I as doing anyway…

Validation problem solved but has not helped the two issues.

Do you have any ideas?

PROBLEM SOLVED

for the time being, anyway…

many thanks!

Well, I do think that you have a problem with your coding methodology.

You do not appear to code document sections one step at time, making
sure that that everything is working correctly at each step.

I would humbly suggest that “less haste more speed” will provide more
reliable results.

coothead.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.