Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation How do I use multiple divs on a page.

    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.

    Frank

    Code:
    <!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>
    Last edited by effpeetee; 12-12-2007 at 12:41 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Give the images a class and uase something like:

    Code:
    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:

    Code:
    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.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 12-12-2007 at 03:01 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Ah Frank... you need to mark up all the images as:

    Code:
    <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
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.)
    Last edited by effpeetee; 12-12-2007 at 03:55 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    You can take off the centering if you wish as it was only there for my benefit. Where do you want those captions?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by ahallicks View Post
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Goodmorning effpeetee,
    I made this for you:
    Code:
    <!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
    Thought you might could use this anyway, I commented the CSS a little bit.


    --Wow, Edna was a beautiful young lady in that picture!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.

    I am being spoiled for choice.

    Kindest regards and seasons greetings.

    Frank
    Last edited by effpeetee; 12-12-2007 at 05:08 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by ahallicks View Post
    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. 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.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    I was responding to you there Frank, sorry! On this page 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
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 12-12-2007 at 05:52 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    Code:
    <div> <a href="index.html"><img src="home.jpg" alt="Home page." width="85" height="42"></a></div>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #15
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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!
    Code:
    <div> <a href="index.html"><img src="home.jpg" alt="Home page." width="85" height="42"></a></div>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •