Resolved Position text under image [Archive]

...

View Full Version : Resolved Position text under image

claire_t

06-06-2012, 03:34 PM

Now I am sure this is really simple and I have googled it and looked on here but still can't find the answer.

Simply I have some thumbnail images and I want the corresponding text to sit underneath.

Found some solutions but people seem to mostly suggest tables, which I obviously don't want to do. Other solution is below.

HTML

<div id="main">
<div id="top" class="top"><p>Here are some of the projects we have completed at Noiz Electronics.<br/>
To view project descriptions and images click on the links below.</p>
</div>

<div class="thumb"><a href="stockley.html"><img src="images/completed/stockley.jpg" height="150" width="150" alt="Stockley Acedemy" class="imgfloatleft"/></a></div>
<div class="imgtext">Stockley Academy</div>
</div>

CSS

#top {
position:relative;
width:900px;
height:auto;
padding:5px;
float:left;
margin:10px 40px auto 40px;
text-align:center;
}

#main {
position:relative;
width:900px;
height:auto;
padding:5px;
float:left;
margin:10px 40px auto 40px;
}

.top {
font-size:18px;
}

.thumb {
height:150px;
width:150px;
float:left;
}

.imgtext {
float:left;
position:relative;
}

But the text sits to the right of the image.

GAHHHH!!!

Thanks in advance for help.

C

SeattleMicah

06-06-2012, 05:02 PM

1. move your text (div id top) below the images html
2. take out the position relatives.
3. put a clear:left on the div id top, which works with the float.

<!DOCTYPE HTML>
<html>
<head>
<title>PI Map</title>

<style>
#main {
width:900px;
height:auto;
padding:5px;
float:left;
margin:10px 40px auto 40px;
}
#top {
float:left;
width:900px;
height:auto;
padding:5px;
clear:left;
font-size:18px;
}
.thumb {
height:150px;
width:150px;
float:left;
}

.imgtext {
float:left;
}

</style>
</head>
<body>
<div id="main">

<div class="thumb"><a href="stockley.html"><img src="images/completed/stockley.jpg" height="150" width="150" alt="Stockley Acedemy" class="imgfloatleft"/></a></div>
<div class="imgtext">Stockley Academy</div>

<div id="top"><p>Here are some of the projects we have completed at Noiz Electronics.<br/>
To view project descriptions and images click on the links below.</p>
</div>

</div>

</body>
</html>

claire_t

06-06-2012, 05:09 PM

Hi SeattleMicah

Thanks for your reply.

Its actually the text "Stockley Academy" that I need under the image. I am planning to have a row of thumbnail images all with the titles underneath.

Your example worked in moving the main bulk of font underneath but thats ok where it is.

Any ideas?

Thanks again for help so far.

C

SeattleMicah

06-06-2012, 05:12 PM

Ah ok sorry...well same thing

.imgtext {
float:left;
clear:left;

}

Remove that position relative, and use the clear

claire_t

06-06-2012, 05:15 PM

I have actually solved it by putting the imgtext div within the thumb div.

But will try your way to SeattleMicah.

Thanks again.....see I knew it would be simple ha!:thumbsup:

C

edit: Yep that works too....ta muchly! :)

SeattleMicah

06-06-2012, 05:18 PM

good call!

<!DOCTYPE HTML>
<html>
<head>
<title>PI Map</title>

<style>
#top {
width:900px;
height:auto;
padding:5px;
float:left;
margin:10px 40px auto 40px;
text-align:center;
}

#main {
width:900px;
height:auto;
padding:5px;
float:left;
margin:10px 40px auto 40px;
}

.top {
font-size:18px;
}

.thumb {
height:150px;
width:150px;
float:left;

}

.imgtext {
float:left;
clear:left;
}
</style>
</head>
<body>
<div id="main">
<div id="top" class="top"><p>Here are some of the projects we have completed at Noiz Electronics.<br/>
To view project descriptions and images click on the links below.</p>
</div>

<div class="thumb"><a href="stockley.html"><img src="images/completed/stockley.jpg" height="150" width="150" alt="Stockley Acedemy" class="imgfloatleft"/></a><div class="imgtext">Stockley Academy</div></div>

<div class="thumb"><a href="stockley.html"><img src="images/completed/stockley.jpg" height="150" width="150" alt="Stockley Acedemy" class="imgfloatleft"/></a><div class="imgtext">Stockley Academy</div></div>

<div class="thumb"><a href="stockley.html"><img src="images/completed/stockley.jpg" height="150" width="150" alt="Stockley Acedemy" class="imgfloatleft"/></a><div class="imgtext">Stockley Academy</div></div>

</div>

</body>