How to place 'caption' text underneath div's

Discussion in 'Web Design and Development' started by Dal123, Aug 26, 2009.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    I've got two issues:
    Another silly layout question:eek::
    I'm referring to picture attached the padding between the top of the image and the black border line of the page_content.
    I'm setting up my gallery page which at the moment has 3 'slideshows' classed as <div> with the neccessary java text under my gallery html.
    There is my first external css sheet which is called layout.css (placed at top so lowest priority) then bottom I have gallery.css which is specifically for the layout of my gallery slideshows. In short I don't know why padding is occuring top of the slideshows and between border line of page_content. I have used the developer toolbar and the actual img of the slideshow comes up different but no mention of this in css :confused:. Sorry if this is hard to understand.

    Also the next thing I want to do is have some text directly underneath the slideshows as a brief description of each slideshow (e.g. Peri Construction system used at Heat-Efficient Roofing 'Bubbledeck System'. I have tried entering a paragraph of text but it just places it behind the slideshow (obviously no good as cannot see it). I'm going to have about 20 of these on the page; so it's important that I learn how the layout works. These slideshows will perform the link (hopefully :p) then I will have loads of pictures on each project in the form of a lightbox gallery.

    Any input appreciated :).
    Here is my html for gallery.html:
    HTML:
    <!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" xml:lang="en" lang="en">
    <head>
    <link rel='stylesheet' media="screen" type='text/css' href='layout.css' />
    <title></title>
    <link rel='stylesheet' media="screen" type='text/css' href='gallery.css' />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    
    <body>
    <script src="http://www.google.com/jsapi"
        type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
        type="text/javascript"></script>
    <div id="container">
    <div id="masterhead"></div>
    <div id="navbar">
    <ul>
    	<li>home</li>
    	<li>services</li>
    	<li>previous jobs</li>
    	<li>guarantee</li>
    	<li>contact us</li>
    </ul>
    </div>
    <div class="spacer"></div>
    <div id="page_content">
    
    <div id="slideShow1">Welwyn Garden City Loading...
    <script type="text/javascript">
      //<![CDATA[
      function LoadSlideShow() {
        var feed  = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5373904009294790593?alt=rss&kind=photo&hl=en_GB";
        var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
        var ss = new GFslideShow(feed, "slideShow1", options);scaleImages :true;}
      /**
       * Use google.load() to load the AJAX Feeds API
       * Use google.setOnLoadCallback() to call LoadSlideShow once the page loads
       */
      google.load("feeds", "1");
      google.setOnLoadCallback(LoadSlideShow);
      //]]>
    </script>
    </div>
    
    
    
    
    <div id="slideShow2">Bubbledeck Loading...
    <script type="text/javascript">
      //<![CDATA[
      function LoadSlideShow() {
        var feed  = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5373908300495958129?alt=rss&kind=photo&hl=en_GB";
        var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
        var ss = new GFslideShow(feed, "slideShow2", options);scaleImages :true;}
        google.load("feeds", "1");
      	google.setOnLoadCallback(LoadSlideShow);
      	//]]>
    </script>
    </div> 
    
     
    <div id="slideShow3">Two Flight Staircase Loading...
    <script type="text/javascript">
      //<![CDATA[
      function LoadSlideShow() {
        var feed  = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5373929580803791473?alt=rss&kind=photo&hl=en_GB";
        var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
        var ss = new GFslideShow(feed, "slideShow3", options);scaleImages :true;}
        google.load("feeds", "1");
      	google.setOnLoadCallback(LoadSlideShow);
      	//]]>
    </script>
    </div>
    
    <div class="spacer"></div>
    
    
    </div>
    
    <div id="sidebar">
    <ul>
      <li>RC Staircases
          <li>3 Flight Mirror Concrete Staircase</li>
          <li>Cast-in-situ Concrete Staircase</li>
          <li>Concrete Staircase</li>
          <li>2 Flight Staircase</li>
          <li>Gutter Staircase</li>
          <li>Concrete Frames</li>
          <li>Caltite Basement</li>
          <li>Waterproof Concrete Basement</li>
          <li>Angle Formwork</li>
          <li>Heat-Efficient Roof</li>
    </div>
    <div class="spacer"></div>
    <div class="footer">
    <ul>
      <li>Precise Formwork Limited</li>
      <li>Office:	01708 736500</li>
      <li>Mobile:	07590 657295</li>
      <li>Email:	email@preciseformwork.co.uk</li>
    </ul>
    </div>
    </div>
    </body>
    </html>
    Css for gallery.css:
    HTML:
    #slideShow1 {
      width:220px;
      height:170px;
      padding:0px;
      margin:0px;
      float:left;
    }
    
    #slideShow2 {
      width: 220px;
      height: 170px;
      padding-left:10px;
      padding-right:10px;
      padding-top:0px;
      margin:0px;
      float:left;
      
    }
    
    #slideShow3 {
      width:220px;
      height:170px;
      clear:none;
      float:left;
      margin:0px;
      padding:0px;
    }
    
    .clearboth {
    clear:both;
    }
    Css for layout.css:
    HTML:
    body {
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    background-color:#FEFFD9;
    }
    
    #container {
    position:relative;
    width:900px;
    height:100%;
    margin:0px;
    padding:0px;
    margin-left:auto;
    margin-right:auto;
    border:0px;
    background-color:#FEFFD9;
    }
    
    #masterhead {
    background-image:url(Images/Graphics/logo_web.gif);
    width:900px;
    height:118px;
    padding:0px 0px 0px 0px;
    margin:0px;
    }
    #masterhead {
    margin-left:auto;
    margin-right:auto;
    }
    #navbar ul{
    list-style:none;
    font:1.5em "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    margin:0px;
    padding:0px;
    padding-bottom:15px;
    }
    #navbar li {
    display:inline;
    width:150px;
    padding:25px;
    }
    .spacer {
    clear:both;
    }
    /* Slideshow */
    #slideShow {
      width : 510px;
      height : 300px;
      padding : 5px;
      margin-left: 80px;
      margin-top: 10px;
      border: 2px solid #CCC;
    }
    
    #sidebar ul {
    list-style-type:none;
    font:1em "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    margin:0px;
    padding:0px;
    border:1px solid #000;
    float:right;
    }
    
    #sidebar li {
    background: #CCC;
    width:200px;
    padding-top:0.5em;
    padding-bottom:0.5em;
    padding-right:0.3em;
    border-bottom:0.1em solid#666;
    text-align:right;
    }
    #footer {
    padding:0px;
    margin:0px;
    }
    #page_content {
    width:680px;
    padding:0px;
    float:left;
    border:1px solid #000;
    }
     

    Attached Files:

  2. zlinuk macrumors member

    Joined:
    Jul 8, 2008
    Location:
    UK
    #2
    Dal, try this


    Html
    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" xml:lang="en" lang="en">
    <head>
    <link rel='stylesheet' media="screen" type='text/css' href='layout.css' />
    <title></title>
    <link rel='stylesheet' media="screen" type='text/css' href='gallery.css' />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    
    <body>
    <script src="http://www.google.com/jsapi"
        type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
        type="text/javascript"></script>
    <div id="container">
    <div id="masterhead"></div>
    <div id="navbar">
    <ul>
    <li>home</li>		               [COLOR="Red"]<!--closing tag added-->[/COLOR]
    	<li>services</li>
    	<li>previous jobs</li>
    	<li>guarantee</li>
    	<li>contact us</li>		[COLOR="Red"]<!--closing tag added-->[/COLOR]
    </ul>		                                [COLOR="Red"]<!--closing tag added-->[/COLOR]
    </div>
    <div class="spacer"></div>
    <div id="page_content">
    
    <div id="slideShow1">Welwyn Garden City Loading...
    <script type="text/javascript">
      //<![CDATA[
      function LoadSlideShow() {
        var feed  = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5373904009294790593?alt=rss&kind=photo&hl=en_GB";
        var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
        var ss = new GFslideShow(feed, "slideShow1", options);scaleImages :true;}
      /**
       * Use google.load() to load the AJAX Feeds API
       * Use google.setOnLoadCallback() to call LoadSlideShow once the page loads
       */
      google.load("feeds", "1");
      google.setOnLoadCallback(LoadSlideShow);
      //]]>
    </script>
    </div>
    
    
    
    
    <div id="slideShow2">Bubbledeck Loading...
    <script type="text/javascript">
      //<![CDATA[
      function LoadSlideShow() {
        var feed  = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5373908300495958129?alt=rss&kind=photo&hl=en_GB";
        var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
        var ss = new GFslideShow(feed, "slideShow2", options);scaleImages :true;}
        google.load("feeds", "1");
      	google.setOnLoadCallback(LoadSlideShow);
      	//]]>
    </script>
    </div> 
    
     
    <div id="slideShow3">Two Flight Staircase Loading...
    <script type="text/javascript">
      //<![CDATA[
      function LoadSlideShow() {
        var feed  = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5373929580803791473?alt=rss&kind=photo&hl=en_GB";
        var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
        var ss = new GFslideShow(feed, "slideShow3", options);scaleImages :true;}
        google.load("feeds", "1");
      	google.setOnLoadCallback(LoadSlideShow);
      	//]]>
    </script>
    </div>
    <div class="sometext">some text</div>		                        [COLOR="Red"]<!--div added-->[/COLOR]
    <div class="sometext" id="sometext1">some text</div>		[COLOR="Red"]<!--div added-->[/COLOR]
    <div class="sometext">some text</div>		                        [COLOR="Red"]<!--div added-->[/COLOR]
    <div class="spacer"></div>
    
    
    </div>
    
    <div id="sidebar">
    <ul>
      <li>RC Staircases</li>
          <li>3 Flight Mirror Concrete Staircase</li>
          <li>Cast-in-situ Concrete Staircase</li>
          <li>Concrete Staircase</li>
          <li>2 Flight Staircase</li>
          <li>Gutter Staircase</li>
          <li>Concrete Frames</li>
          <li>Caltite Basement</li>
          <li>Waterproof Concrete Basement</li>
          <li>Angle Formwork</li>
          <li>Heat-Efficient Roof</li>
    </ul>
    </div>
    <div class="spacer"></div>
    <div class="footer">
    <ul>
      <li>Precise Formwork Limited</li>
      <li>Office:	01708 736500</li>
      <li>Mobile:	07590 657295</li>
      <li>Email:	email@preciseformwork.co.uk</li>
    </ul>
    </div>
    </div>
    </body>
    </html>
    
    layout.css
    Code:
    @charset "utf-8";   [COLOR="Red"]/*character set declaration added*/[/COLOR]
    
    body {
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    background-color:#FEFFD9;
    }
    
    #container {
    position:relative;
    width:900px;
    height:100%;
    margin:0px;
    padding:0px;
    margin-left:auto;
    margin-right:auto;
    border:0px;
    background-color:#FEFFD9;
    }
    
    #masterhead {
    background-image:url(Images/Graphics/logo_web.gif);
    width:900px;
    height:118px;
    padding:0px 0px 0px 0px;
    margin:0px;
    }
    #masterhead {
    margin-left:auto;
    margin-right:auto;
    }
    #navbar ul{
    list-style:none;
    font:1.5em "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    margin:0px;
    padding:0px;
    padding-bottom:15px;
    }
    #navbar li {
    display:inline;
    width:150px;
    padding:25px;
    }
    .spacer {
    clear:both;
    }
    /* Slideshow */
    #slideShow {
      width : 510px;
      height : 300px;
      padding : 5px;
      margin-left: 80px;
      margin-top: 10px;
      border: 2px solid #CCC;
    }
    
    #sidebar ul {
    list-style-type:none;
    font:1em "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    margin:0px;
    padding:0px;
    border:1px solid #000;
    float:right;
    }
    
    #sidebar li {
    background: #CCC;
    width:200px;
    padding-top:0.5em;
    padding-bottom:0.5em;
    padding-right:0.3em;
    border-bottom:0.1em solid#666;
    text-align:right;
    }
    #footer {
    padding:0px;
    margin:0px;
    }
    #page_content {
    	width:680px;
    	padding:0px;
    	float:left;
    	border:1px solid #000;
    }
    
    #sometext1   {                                    [COLOR="Red"] /*new id added*/[/COLOR]
    	padding-right: 10px;
    	padding-left: 10px;
    }
    .sometext   {                                      [COLOR="Red"]/*new class added*/[/COLOR]
    	float: left;
    	width: 220px;
    	text-align: center;
    }
    
    
    gallery.css

    Code:
    @charset "utf-8";           [COLOR="Red"]/*character set declaration added*/[/COLOR]
    #slideShow1 {
      width:220px;
      height:129px;              [COLOR="Red"] /*reduced height from 170px*/[/COLOR]
      padding:0px;
      margin:0px;
      float:left;
    }
    
    #slideShow2 {
      width: 220px;
      height: 129px;             [COLOR="Red"] /*reduced height from 170px*/[/COLOR]
      padding-left:10px;
      padding-right:10px;
      padding-top:0px;
      margin:0px;
      float:left;
      
    }
    
    #slideShow3 {
      width:220px;
      height:129px;              [COLOR="Red"] /*reduced height from 170px*/[/COLOR]
      clear:none;
      float:left;
      margin:0px;
      padding:0px;
    }
    
    .clearboth {
    clear:both;
    }
    
    compare this to yours and the changes should be obvious, I also found three unclosed tags......attention to detail mate.

    cheers
     
  3. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #3
    Thanks zlinuk;
    I'm still at the very beginning learning stage, and I'm very greatful for your help.
    I keep making mistakes with my list and still do not properly understand <li> tags in xhtml strict. Obviously a lot more learning needed.
    Thanks again much appreciated :D
    I'm going through it now.
     
  4. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #4
    I notice this:
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    It looks like a stylesheet specifically for slideshow. I'm going to look into this, also
    HTML:
    @charset "utf-8";
    
    I looked it up and found advanced stuff "variable length character encoding" which I don't understand. I think it's like a stylesheet for certain languages, I'm looking at more stuff about it, but for those like myself anyone want to explain basically what it is::D
     
  5. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #5
    Also would it be possible to use class instead of id for my slideshow as I'll have about 10 of them.
    I recon I'll only need two different ones, one for left as it has no padding, one for the .middle as it has 10px padding right and left. Thought it would be very simple but sure enough I'm doing somehting wrong:eek:.
    I have it like this but it's not working anyone got any ideas:
    HTML:
    <!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" xml:lang="en" lang="en">
    <head>
    <link rel='stylesheet' media="screen" type='text/css' href='layout.css' />
    <title></title>
    <link rel='stylesheet' media="screen" type='text/css' href='gallery.css' />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    
    <body>
    <script src="http://www.google.com/jsapi"
        type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
        type="text/javascript"></script>
    <div id="container">
    <div id="masterhead"></div>
    <div id="navbar">
    <ul>
    	<li>home</li>
    	<li>services</li>
    	<li>previous jobs</li>
    	<li>guarantee</li>
    	<li>contact us</li>
    </ul>
    </div>
    <div class="spacer"></div>
    <div id="page_content">
    
    <div class="slideShow_left">Welwyn Garden City Loading...
    <script type="text/javascript">
      //<![CDATA[
      function LoadSlideShow() {
        var feed  = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5373904009294790593?alt=rss&kind=photo&hl=en_GB";
        var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
        var ss = new GFslideShow(feed, "slideShow_left", options);scaleImages :true;}
      google.load("feeds", "1");
      google.setOnLoadCallback(LoadSlideShow);
      //]]>
    </script>
    </div>
    
    
    
    
    <div class="slideShow_middle">Bubbledeck Loading...
    <script type="text/javascript">
      //<![CDATA[
      function LoadSlideShow() {
        var feed  = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5373908300495958129?alt=rss&kind=photo&hl=en_GB";
        var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
        var ss = new GFslideShow(feed, "slideShow_middle", options);scaleImages :true;}
        google.load("feeds", "1");
      	google.setOnLoadCallback(LoadSlideShow);
      	//]]>
    </script>
    </div> 
    
     
    <div class="slideShow_left">Two Flight Staircase Loading...
    <script type="text/javascript">
      //<![CDATA[
      function LoadSlideShow() {
        var feed  = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5373929580803791473?alt=rss&kind=photo&hl=en_GB";
        var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
        var ss = new GFslideShow(feed, "slideShow_left", options);scaleImages :true;}
        google.load("feeds", "1");
      	google.setOnLoadCallback(LoadSlideShow);
      	//]]>
    </script>
    </div>
    
    <div class="spacer"></div>
    
    
    </div>
    
    <div id="sidebar">
    <ul>
      <li>RC Staircases</li>
          <li>3 Flight Mirror Concrete Staircase</li>
          <li>Cast-in-situ Concrete Staircase</li>
          <li>Concrete Staircase</li>
          <li>2 Flight Staircase</li>
          <li>Gutter Staircase</li>
          <li>Concrete Frames</li>
          <li>Caltite Basement</li>
          <li>Waterproof Concrete Basement</li>
          <li>Angle Formwork</li>
          <li>Heat-Efficient Roof</li>
    </ul>
    </div>
    <div class="spacer"></div>
    <div class="footer">
    <ul>
      <li>Precise Formwork Limited</li>
      <li>Office:	01708 736500</li>
      <li>Mobile:	07590 657295</li>
      <li>Email:	email@preciseformwork.co.uk</li>
    </ul>
    </div>
    </div>
    </body>
    </html>
    CSS:
    HTML:
    .slideShow_left {
      width:220px;
      height:170px;
      padding:0px;
      margin:0px;
      float:left;
    }
    
    .slideShow_middle {
      width: 220px;
      height: 170px;
      padding-left:10px;
      padding-right:10px;
      padding-top:0px;
      margin:0px;
      float:left;
      
    }
    
    
    
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    It depends if the script allows using class names. The script may only support one instance per page. I recently had to rework some JavaScript to allow multiple instances on a page and it takes a bit of rework to do. You'll need to check the script's documentation to see if it allows what you want.
     
  7. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #7
    Excellent cheers angelwatt, I thought I was doing it correctly, that makes sense now.
    Thanks :).
     
  8. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #8
    I now want two slideshows on my main page and am trying to understand the changes you made "@utf-8;" See these changes are already made on both of my stylesheets and would've thought that this has done it. I understand that in my layout.css I have the width set far too big but don't know exactly what size to change it to as don't know the size of the slideshow now (This is because I have turned 'scaleimages:false,' in javascript of the slideshow.:confused:
     
  9. zlinuk macrumors member

    Joined:
    Jul 8, 2008
    Location:
    UK
    #9
    Dal,

    I wouldn't get too hung up on the @UTF-8, this does nothing more than tell your browser which character set it should use to ensure that your pages are displayed correctly - http://www.w3chools.com/TAGS/ref_charactersets.asp should get you going on the topic.

    With the slideshows, if you leave 'scaleimages:' set to true, then the only thing you should need to do to change the size of the slideshow, is to change width and height properties of the relevent Div in your CSS.

    Cheers
     
  10. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #10
    Thanks zlinuk, I'm just trying to understand how you solved it, thanks for the link, I'm reading up on it now.
    Thanks again :).
     
  11. zlinuk macrumors member

    Joined:
    Jul 8, 2008
    Location:
    UK
    #11
    which bit?
     
  12. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #12
    That @charset utf-8 sorted the padding problem out and really contains the slideshows better and makes layout easier. I presume different types of media needs different codes, what language/skill is it?
    Wonder if it over-rides my slidesheets.
    Would I be correct in saying that it's 'advanced', seems like it's for specific types of media, am I wrong? :confused:
    Cheers bud :).
     
  13. zlinuk macrumors member

    Joined:
    Jul 8, 2008
    Location:
    UK
    #13
    Dal,

    the addition of the @charset wouldn't have affected your padding, the changes were made to your actual css and html. I'll go back and annotate the changes that were made to make them easier to identify (which I should of done in the first place)
     
  14. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #14
    Thanks :eek: can't believe I didn't notice that :eek:.
    Thanks again zlinuk :).
     

Share This Page