...

View Full Version : How do I use multiple divs on a page.



effpeetee
12-12-2007, 01:38 PM
How do I use multiple divs on a page?
I have a page of thumbnails hyperlinked to html pages, and at present I am using tables to place them. How do I set about presenting say three rows of four thombs using css.

I don't have too much trouble with two or three divs, but it gets out of hand when I contemplate larger numbers. (Oh! for a young brain again.):)
Just a few hints for a starter will be useful.:D

Frank


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nine</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="atwo.css"> This css is only used for the typeface.
</head>

<body >
<span class="t15ac"><strong>
<A href="index.html">Home.</A><br>Click the picture for a larger image.


<table cellspacing="45 cellpadding="25>
<tr>
<td><A href="Steven2.html"><IMG height=100 alt="" src="steve-02.jpg" width=132 border=0 ></A><br> <span class="t15ac"><strong> A young Steve</strong></span></td>
<td><A href="Dad.html"><IMG height=132 alt="" src="grandad.jpg" width=132 border=0 ></A><br><span class="t15ac"><strong>My dad Sidney</strong></span></td>
<td><A href"HonW.html"&gt;><IMG height=132 alt="" src="clocktower.jpg" width=132 border=0 ></A><br><span class="t15ac"><strong>Hay on Wye.</strong></span></td>
<td><A href="Glider.html"><IMG height=132 alt="" src="Glider.jpg" width=132 border=0 ></A><br> <span class="t13ac"><strong>Frank in a glider</strong></span></td>

</tr>


<tr>
<td><A href="Mum.html"><IMG height=132 alt="" src="nan.jpg" width=100 border=0 ></A><br><span class="t15ac"><strong>&gt;<strong>My mum Madge</strong></strong></span></td>
<td><A href="Steve3.html"><IMG height=132 alt="" src="steve-01.jpg" width=100 border=0 ></A><br> <span class="t13ac"><strong>Another of Steve</strong></span></td>
<td><A href="FSIn.html"><IMG height=132 alt="" src="EdPortrait2.jpg" width=100 border=0 ></A><br> <span class="t13ac"><strong>My dear sister, Edna</strong></span></td>
<td><A href= "web19large.html"><IMG height=132 src="web19.jpg" width=100></A><br><span class="t13ac"><strong>Frank - 45 years ago.</strong></span></td>

</tr>

<tr>
<td><A href="bsgroup.html"><IMG height=100 src="Bettyandstevetr.jpg" width=138><br><span class="t13ac"><strong>Betty and Young Steven.</td>
<td><A href="web20large.html"><IMG height=100 src="Webpiano.jpg" width=132></A><br> <span class="t13ac"><strong>My keyboard.</strong></span></td>
<td><A href="SteveandPhil.html"><IMG height=100 src="SteveandPhil.jpg" width=132></A><br><span class="t13ac"><strong>Steve and Phil.</strong></span> </td>
<td><A href="famgroup.html"><IMG height=100 src="SteveBetFrank.jpg" width=138></A><br><span class="t13ac"><strong>Family group.</strong></span></td>
</tr>

</table>

</body>

</html>

ahallicks
12-12-2007, 02:37 PM
Give the images a class and uase something like:



img.gallery {
float: none;
padding: 1px;
width: 100px;
height: 100px;
border: 2px solid #98292B;
background-color: #000;
}


And I'm thinking that for semantic purposes you are going to be 'listing' the thumbnails so I would also suggest you put them in a list wioth something like the following:



ul.thumbs {
text-align: center;
list-style: none;
padding: 0;
padding-top: 6px;
margin: 0;
}

ul.thumbs li {
display: inline;
word-spacing: 0;
padding: 6px;
margin: 0;
margin-bottom: 6px;
}


I'm sure you can mark up the images. Change the colours to suit.

effpeetee
12-12-2007, 03:27 PM
Thanks a lot.

I'm just going to have a go. I'll post the result later.

Frank

RESULTS HERE!

http://www.exitfegs.co.uk/000.html

I have obviously still a way to go.

Frank

ahallicks
12-12-2007, 04:12 PM
Ah Frank... you need to mark up all the images as:



<ul class="thumbs">
<li><a href="Steven2.html"><img height="100" alt="" src="steve-02.jpg" width="132" class="gallery" /></a>
<strong>A young Steve</strong></li>

Your other images...

</ul>


My point was that you don't need to use divs to do this... should be done with the correct tags. We'll work on the caption later

effpeetee
12-12-2007, 04:50 PM
The latest try.

http://www.exitfegs.co.uk/000.html

It now validates CSS and Markup.

Frank

We're getting there. (Apologies to British Rail.)

ahallicks
12-12-2007, 05:10 PM
You can take off the centering if you wish as it was only there for my benefit. Where do you want those captions?

effpeetee
12-12-2007, 05:42 PM
You can take off the centering if you wish as it was only there for my benefit. Where do you want those captions?
For consistancy with the rest of the site - under the pictures.

I have just realised that one of the modules on my site is-

http://www.exitfegs.co.uk/Picchoosea.html

Almost seems ready made. Fancy forgetting my own site!
I must be getting old!

Frank

Excavator
12-12-2007, 05:48 PM
Goodmorning effpeetee,
I made this for you:
<!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=iso-8859-1" />
<title>Centered thumbnails</title>
<meta name="" content="authored by http://nopeople.com/Design" />
<style type="text/css">
html, body {
display: block;
background-color:#060;
color:#fff;
}
* {
margin: 0;
padding: 0;
}
.wrapper {
text-align: center;
background-color: #999999;
padding: 20px 150px;
margin-top: 100px;
}
.wrapper p {
display: inline;
margin: 0 10px; /*space around each image/caption*/
}
.wrapper span {
vertical-align: top;
width: 110px; /*container size of image/caption*/
height: 200px; /*container size of image/caption*/
display: table-cell;
display: inline-table;
display: inline-block;
}
.wrapper p img {
margin-bottom: 5px;
border: none;
margin-top: 5px;
}
.wrapper a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="wrapper">
<p><span><a href="http://www.exitfegs.co.uk/Steven2.html"><img src="http://www.exitfegs.co.uk/steve-02.jpg" alt="Steve" width="100" height="100" /> a young Steve</a></span></p>
<p><span><a href="http://www.exitfegs.co.uk/Grandad.html"><img src="http://www.exitfegs.co.uk/Grandad.jpg" alt="Grandad" width="100" height="100" /> My dad, Sydney</a></span></p>
<p><span><a href="http://www.exitfegs.co.uk/HonW.html"><img src="http://www.exitfegs.co.uk/clocktower.jpg" alt="Hay on Wye" width="100" height="100" /> Hay on Wye</a></span></p>
<p><span><a href="http://www.exitfegs.co.uk/Glider.html"><img src="http://www.exitfegs.co.uk/Glider.jpg" alt="Frank in a glider" width="100" height="100" /> Frank in a glider</a></span></p>
<p><span><a href="http://www.exitfegs.co.uk/Mum.html"><img src="http://www.exitfegs.co.uk/nan.jpg" alt="Madge" width="100" height="100" /> my Mum, Madge</a></span></p>
<p><span><a href="http://www.exitfegs.co.uk/Steve3.html"><img src="http://www.exitfegs.co.uk/steve-01.jpg" alt="Steve" width="100" height="100" /> another of Steve</a></span></p>
<p><span><a href="http://www.exitfegs.co.uk/FSIn.html"><img src="http://www.exitfegs.co.uk/EdPortrait2.jpg" alt="Edna" width="100" height="100" /> My dear sister, Edna</a></span></p>
<p><span><a href="http://www.exitfegs.co.uk/web19large.html"><img src="http://www.exitfegs.co.uk/web19.jpg" alt="Frank" width="100" height="100" /> Frank - 45 years ago</a></span></p>
<p><span><a href="http://www.exitfegs.co.uk/bsgroup.html"><img src="http://www.exitfegs.co.uk/Bettyandstevetr.jpg" alt="Betty and Young Steven" width="100" height="100" /> Betty and Young Steven</a></span></p>
<p><span><a href="http://www.exitfegs.co.uk/web20large.html"><img src="http://www.exitfegs.co.uk/Cus10006.jpg" alt="Samantha and Philip" width="100" height="100" /> Samantha and Philip</a></span></p>
<p><span><a href="http://www.exitfegs.co.uk/SteveandPhil.html"><img src="http://www.exitfegs.co.uk/SteveandPhil.jpg" alt="Frank in a glider" width="100" height="100" /> Steve and Phil</a></span></p>
<p><span><a href="http://www.exitfegs.co.uk/famgroup.html"><img src="http://www.exitfegs.co.uk/SteveBetFrank.jpg" alt="Family group" width="100" height="100" /> Family group</a></span></p>
</body>
</html>

and then you posted that link. haha:o
Thought you might could use this anyway, I commented the CSS a little bit.


--Wow, Edna was a beautiful young lady in that picture!

ahallicks
12-12-2007, 05:51 PM
Also, on that page you have a bit of a validation issue in that you use a capital letter for the first href, which is not recognised, or part of, the XHTML specification :)

effpeetee
12-12-2007, 06:06 PM
Thank you both. I really started out to try to learn what is behind the design. I have always cut and pasted somebody else's code and so have not learned very much. I am beginning to see the wood for the trees, I think.


--Wow, Edna was a beautiful young lady in that picture! by Excavator

My sister was indeed a very lovely lady. A pity I didn't take after her.
I am 82 and she was three years younger than I, so you can see it was many years ago.
She died several years ago.

Thank you Excavator for your code. I shall continue with the present one until with ahallicks help, I might understand a little more.:rolleyes:

I am being spoiled for choice.:D

Kindest regards and seasons greetings.

Frank

effpeetee
12-12-2007, 06:18 PM
Also, on that page you have a bit of a validation issue in that you use a capital letter for the first href, which is not recognised, or part of, the XHTML specification :)


Hi! I wasn't sure who you were responding to. Is it me? or Excavator.
I am still a little hazy about the css.:confused: Class - Span or ID. They seem to me to have blurred boundaries, or have I mis-understood. I'll have to get my brain out of pawn.:D

Frank

ahallicks
12-12-2007, 06:22 PM
I was responding to you there Frank, sorry! On this page (http://www.exitfegs.co.uk/Picchoosea.html) the first <a href=... is in capitals, and XHTML just doesn't like it. 11 errors come up on my SGML Parser because of it :)

effpeetee
12-12-2007, 06:32 PM
Hi there.

This is one of the results of doing a blanket change of doctype. I originally intnded to go in and put the markup right. It's still on the waiting list. I had intended to return to html 4.01 strict. There is so much conflicting advice around; I sometimes can't make up my mind. I'll put this one right anyway.


Line 10, Column 22: document type does not allow element "A" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag.

<a href="index.html"><img src="home.jpg" alt="Home page." width="85" height="42"></a>

Can anyone explain this from W3 validator.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Frank

abduraooft
12-13-2007, 08:20 AM
Yes, it won't allow to place an inline element (like a,span etc) inside the body without enclosing them by some block elements (like div,p etc). The same thing happens when we place some text in body without any enclosing block element.

<div> <a href="index.html"><img src="home.jpg" alt="Home page." width="85" height="42"></a></div>

abduraooft
12-13-2007, 08:20 AM
Yes, it won't allow to place an inline element (like a,span etc) inside the body without enclosing them by some block elements (like div,p etc). The same thing happens when we place some text in body without any enclosing block element.
The following will work!

<div> <a href="index.html"><img src="home.jpg" alt="Home page." width="85" height="42"></a></div>

effpeetee
12-13-2007, 10:21 AM
Yes, it won't allow to place an inline element (like a,span etc) inside the body without enclosing them by some block elements (like div,p etc). The same thing happens when we place some text in body without any enclosing block element.
The following will work!

<div> <a href="index.html"><img src="home.jpg" alt="Home page." width="85" height="42"></a></div>
Many thanks. I didn't know that you could use a div like that.
Always something new.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum