SitePoint Sponsor |
|
User Tag List
Results 1 to 24 of 24
Thread: Text above an image
-
Sep 19, 2006, 14:38 #1
- 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> </div>
-
Sep 19, 2006, 16:44 #2
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.
zc | the portfolio of zack curl out soon!
-
Sep 19, 2006, 16:48 #3
- 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.
-
Sep 19, 2006, 17:19 #4
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>
HTML Code:<div id="1">text</div><div id="2">text</div><div id="3">text</div>
Zackzc | the portfolio of zack curl out soon!
-
Sep 19, 2006, 17:40 #5
- 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.
-
Sep 19, 2006, 17:55 #6
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>
Zackzc | the portfolio of zack curl out soon!
-
Sep 19, 2006, 18:06 #7
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by zackc
Code:<div class="image"></div> <div class="image"></div> <div class="image"></div>
Code:<ul class="images"> <li></li> <li></li> <li></li> </ul>
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.
-
Sep 19, 2006, 18:10 #8
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.
Zackzc | the portfolio of zack curl out soon!
-
Sep 20, 2006, 09:15 #9
- 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.
-
Sep 20, 2006, 09:28 #10
- Join Date
- Nov 1999
- Location
- Mechanicsburg, PA
- Posts
- 7,294
- Mentioned
- 123 Post(s)
- Tagged
- 1 Thread(s)
Originally Posted by Ross19821982
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
-
Sep 20, 2006, 09:39 #11
- 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.
-
Sep 20, 2006, 13:55 #12
- 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.
-
Sep 20, 2006, 14:46 #13
- 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>
-
Sep 20, 2006, 16:18 #14
- 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.
-
Sep 21, 2006, 04:28 #15
- 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>
-
Sep 21, 2006, 05:13 #16
- 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
-
Sep 21, 2006, 05:26 #17
- 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; }
So instead of image-image-image its
image
image
image
Thanks for the help
-
Sep 21, 2006, 05:31 #18
- 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; }
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.
-
Sep 21, 2006, 05:34 #19
- 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
-
Sep 21, 2006, 05:38 #20
- 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.
-
Sep 21, 2006, 07:04 #21
- Join Date
- Dec 2003
- Location
- Cheltenham, United Kingdom
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Tyssen
Olly Hodgson
thinkdrastic.net
-
Sep 21, 2006, 07:14 #22
- 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.
-
Sep 21, 2006, 15:53 #23
- 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 */ }
-
Sep 21, 2006, 18:17 #24
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!
Zackzc | the portfolio of zack curl out soon!
Bookmarks