SitePoint Sponsor

User Tag List

Results 1 to 24 of 24

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text above an image

    I have 3 images side by side

    image - image - image

    I want text above each image but each time I try it I mess it up.

    The images are 170x255 and the width of everything cant be more then 580 as It then overlaps and I need each row to have 3 images.

    The code I use is

    Code:
    <div style="text-align: center;"><a href="urlhere" target="_blank"> <img src="urlhere" alt="" border="0"></a> - <a href="urlhere" target="_blank"><img src="urlhere" alt="" border="0"></a> - <a href="urlhere" target="_blank"><img src="urlhere" alt="" border="0"><br></a>&nbsp; </div>
    Thnx

  2. #2
    SitePoint Member zackc's Avatar
    Join Date
    Sep 2006
    Location
    USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make a couple of divs or a table with three cells above the image. For a table you could use...

    HTML Code:
    <table border="0px" cellpadding="2" cellspacing="0"><tr><td width="image width here">text text text</td> ... repeat 2 more times ... </tr></table><br />Your image code here.
    Zack
    zc | the portfolio of zack curl out soon!

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put each image and text pair inside a container and then float all the containers left.

  4. #4
    SitePoint Member zackc's Avatar
    Join Date
    Sep 2006
    Location
    USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are not sure how to do what Tyssen said here is what you need to do...

    CSS:
    HTML Code:
    <style type="text/css">
    #textcontain {
    width: 500px;
    text-align: center;
    }
    
    #container1 {
    float: left;
    width: width px;
    text-align: center;
    }
    
    #container2 {
    float: left;
    width: width px;
    text-align: center;
    }
    
    #container3 {
    float: left;
    width: width px;
    text-align: center;
    }
    </style>
    The HTML:
    HTML Code:
    <div id="1">text</div><div id="2">text</div><div id="3">text</div>
    This is what I think... The css is right, but it is either that html or reversed - div 3, div 2, div 1.
    Zack
    zc | the portfolio of zack curl out soon!

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Except that you could cut down on code by making it a class instead of repeating the code for different IDs which are essentially the same. I'd actually use an unordered list and just style the list items.

  6. #6
    SitePoint Member zackc's Avatar
    Join Date
    Sep 2006
    Location
    USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot about that .classid method of doing the task. An unordered list would probably be extra code, wouldn't it? The class method you proposed would be perfect, and is what I would do. Anway in order to do that for your website, Ross, use this code...

    CSS:
    HTML Code:
    <style type="text/css">
    .div1 {
    float: left;
    text-align: center;
    width: your width;
    }
    </style>
    And just use span, or div class in your html to use the class method.
    Zack
    zc | the portfolio of zack curl out soon!

  7. #7
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zackc
    An unordered list would probably be extra code, wouldn't it?
    Not really. Instead of:

    Code:
     <div class="image"></div>
     <div class="image"></div>
     <div class="image"></div>
    you'd have:

    Code:
     <ul class="images">
     <li></li>
     <li></li>
     <li></li>
     </ul>
    OK, so you have two extra lines of code, but you don't have to specify a class for each list item.
    But it's not all just about saving code; if you have a list of images/caption pairs, then the correct semantic choice of tag is an unordered list. Using divs imparts no semantic meaning for your content.

  8. #8
    SitePoint Member zackc's Avatar
    Join Date
    Sep 2006
    Location
    USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very true, that will definately work, and divs may not be the semantic way, but it just goes to show that you can complete these kinds of tasks with lots of seperate possibilities! And 2 lines of extra code put in perspective is practically nothing, so the class method will work with divs and ul's equally.
    Zack
    zc | the portfolio of zack curl out soon!

  9. #9
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I cant seem to get this to work

    I do what you say and the text is above the image for one image but when I add the other 2 images instead of staying side by side they go below each other.

  10. #10
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,264
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ross19821982
    I cant seem to get this to work

    I do what you say and the text is above the image for one image but when I add the other 2 images instead of staying side by side they go below each other.
    It would probably help greatly if you'd post the html and the css code you're using. That way no one is guessing.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  11. #11
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The ones they posted, it happened on all there examples as I tried them all, the images wouldnt stay side by side but always went underneath each other instead.

  12. #12
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like Dave says, we need to see your code. What's been suggested should work and if it's not it means there's something wrong with your implementation.

  13. #13
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div id="1">text</div><a href="urlhere" target="_blank"> <img src="test.jpg" alt="" border="0"></a> - <div id="2">text</div> <a href="urlhere" target="_blank"><img src="test.jpg" alt="" border="0"></a> - <div id="3">text</div><a href="urlhere" target="_blank"><img src="test.jpg" alt="" border="0"><br></a></div>

  14. #14
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The image/text pairs are s'posed to go in the same div.

  15. #15
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm really not good at this as you can see, I just tried this as thats what I thought you meant but it didnt work

    Code:
    <div id="1">text<a href="test" target="_blank"> <img src="test.jpg" alt="" border="0"></a></div> - <div id="2">text<a href="urlhere" target="_blank"><img src="test.jpg" alt="" border="0"></a></div>- <div id="3">text<a href="urlhere" target="_blank"><img src="test.jpg" alt="" border="0"></div>
    Obviously completely wrong.

  16. #16
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Two things:
    1. we need to see the CSS
    2. you need to explain how it's not working

  17. #17
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The css is

    Code:
    /* CSS Document */
    *
    {
    	margin:0;
    	padding:0;
    }
    body
    {
    	background:#FFF;
    	font-family:Trebuchet MS;
    }
    #container
    {
    	margin:5px;
    	width:auto;
    	width:1000px;
    	margin:0px auto;
    }
    .banner
    {
    	width:441px;
    	height:150px;
    	background-image:url('images/banner.gif');
    	float:left;
    }
    .bannerRight
    {
    	width:74px;
    	height:150px;
    	float:left;
    	background-image:url('images/banner_right.gif');
    }
    .adsTop
    {
    	width:466px;
    	height:150px;
    	float:left;
    }
    .adsTop img
    {
    	border:0;
    	margin-top:35px;
    }
    .divider
    {
    	height:6px;
    	background:url('images/divider.gif');
    	background-repeat:repeat-x;
    	margin-bottom:10px;
    	font-size:0;
    }
    .sidebar
    {
    	width:203px;
    	float:left;
    	background:#FFD3E7;
    }
    .sidebar h1
    {
    	background:url('images/h1_white.gif');
    }
    .sidebar h2
    {
    	background:url('images/h1.gif');
    }
    .sidebar h1,
    .sidebar h2
    {
    	width:198px;
    	background-repeat:no-repeat;
    	background-color:#FFD3E7;
    	color:#FD1D81;
    	padding-left:5px;
    	padding-top:5px;
    	font-style:italic;
    	font-size:12px;
    	clear:both;
    }
    .sidebar ul
    {
    	padding:3px;
    }
    .sidebar li
    {
    	font-size:12px;
    	background:url('images/fade_dots.gif') no-repeat left bottom;
    	color:#FD0171;
    	list-style:none;
    }
    .sidebar a
    {
    	text-decoration:none;
    	color:#FD0171;
    	font-size:12px;
    }
    .sidebar img
    {
    	border:2px solid #FFA1CC;
    	margin:3px;
    }
    
    #middle
    {
    	float:left;
    	margin:7px;
    }
    #middle .roundbox
    {
    	background:#FFEDF5;
    	width:570px;
    	text-align:center;
    }
    #middle .roundtop,
    #middle .roundbottom
    {
    	height:5px;
    	width:570px;
    	font-size:0px;
    }
    #middle .roundtop
    {
    	background:url('images/roundTop.gif') no-repeat;
    }
    #middle .roundbottom
    {
    	background:url('images/roundBottom.gif') no-repeat;
    	margin-bottom:10px;
    }
    #middle .girl
    {
    	margin:0px;
    	padding:0px;
    }
    #middle .girl img
    {
    	border:2px solid #DCDCDC;
    }
    .footer
    {
    	border-top:2px solid #FF6CAD;
    	background:#FFD3E7;
    	margin-top:10px;
    	color:#FD0171;
    	font-size:12px;
    }
    .footer a
    {
    	text-decoration:none;
    	padding:2px;
    	color:#FD0171;
    }
    .footer i
    {
    	font-style:normal;
    	float:left;
    }
    .footer em
    {
    	float:right;
    	font-style:normal;
    	margin-right:10px;
    }
    #middle h1
    {
    	color:#9F9F9F;
    	font-family:Tahoma;
    	font-size:18pt;
    	font-weight:bold;
    }
    #middle h1 em
    {
    	color:#FD0171;
    	font-style:normal;
    }
    #middle p
    {
    	font-family:Tahoma;
    	font-size:12px;
    	margin:0px;
    	padding:0px;
    	float:left;
    	width:570px;
    }
    #middle p a,
    #middle p a:hover
    {
    	color:#FD0171;
    	text-decoration:underline;
    }
    #textcontain {
    width: 500px;
    text-align: center;
    }
    
    #container1 {
    float: left;
    width: width px;
    text-align: center;
    }
    
    #container2 {
    float: left;
    width: width px;
    text-align: center;
    }
    
    #container3 {
    float: left;
    width: width px;
    text-align: center;
    }
    And its not working because the images don't stay side by side, instead they go underneath each other.

    So instead of image-image-image its

    image
    image
    image

    Thanks for the help

  18. #18
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     #container1 {
     float: left;
     width: width px;
     text-align: center;
     }
     
     #container2 {
     float: left;
     width: width px;
     text-align: center;
     }
     
     #container3 {
     float: left;
     width: width px;
     text-align: center;
     }
    Two main problems:
    1. your CSS has #container1, #container2 and #container3 but your HTML IDs are 1, 2 & 3 (incidentally, you can't start ID or class names with a numeral). The IDs in the HTML need to match up with those in the CSS.
    2. width: width px - you're actually s'posed to replace the width in bold with a number of your own choosing, e.g. 100px.

  19. #19
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry yeah I did replace the width, I just copy and pasted what Zack wrote so you knew what one I was doing.

    As for the 'your CSS has #container1, #container2 and #container3 but your HTML IDs are 1, 2 & 3' - Isn't that what he told me to do?

    So how do I fix it?

    Thnx

  20. #20
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've already told you - if you have #container1 in your CSS, then you have to have a div in your HTML with an ID of #container1.
    You're right that's what Zack had originally but I guess he didn't think you'd take it so literally.

  21. #21
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    I've already told you - if you have #container1 in your CSS, then you have to have a div in your HTML with an ID of #container1.
    <pedant>Not quite. If you have #container1 in your css, your HTML element should have id="container1"</pedant>
    Olly Hodgson
    thinkdrastic.net

  22. #22
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So can you tell me what the html should be exactly pls? Knowing me I will just mess it up.

    Thanks.

  23. #23
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, to go with my original suggestion:
    Code:
     <ul id="containers">
     <li>text<a href="test" target="_blank"> <img src="test.jpg" alt=""></a></li>
       <li>text<a href="urlhere" target="_blank"><img src="test.jpg" alt=""></a></li>
     <li>text<a href="urlhere" target="_blank"><img src="test.jpg" alt=""></li>
     </ul>
     
     /* CSS */
     ul#containers { text-align: center; overflow: hidden; }
    ul#containers li { float: left; width: 100px; /* you can change the width to whatever you want, but should probably equal the width of your images */ }

  24. #24
    SitePoint Member zackc's Avatar
    Join Date
    Sep 2006
    Location
    USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I am sorry for the confusion, I guess I didn't explain it well enough. Tyssen just gave you the exact code you need to implement in your code. Good luck with your site!
    Zack
    zc | the portfolio of zack curl out soon!


Bookmarks

Posting Permissions

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