|
| |
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
 |
How Do I Add Captions to Adjacent Images? - 8/1/2007 17:11:02
I'm making the switch from HTML to css and replacing a heavy table layout. I've got two basic layouts that I will use :
http://soccer-europe.com/newreview.html
http://soccer-europe.com/newindex.html
I know there are some validation errors, I will fix them later (apart from the java in the 2nd link, I have no idea how to fix that) and ignore the css menu.
How do I add captions under each image? and add a space between each image, I tried the margin tag but it didn't work :
http://soccer-europe.com/newindex.html
here's the relevant html :
<div id="imageadjacent">
<img src="Graphics/Photos/flickr/2_April_2007_Milan_by_superleague_formula_thebeautifulrace.jpg" width="500" height="334" />
<img src="Graphics/Photos/flickr/5_July_2007_Carlos_Tevez_by_dentough.jpg" width="300" height="410" />
</div>
and the css :
* {
margin: 0;
padding: 0;
}
body {
background-color: #cc0033;
color: #000000;
font-family: Trebuchet MS, Arial, sans-serif;
font-size: 14px;
line-height: 19px;
}
a {
color: #41a1dc;
}
a:hover {
text-decoration: none;
}
p {
margin-bottom: 8px;
}
#imageadjacent img {
float:left;
}
#cap {
clear:both;
}
#image1 {
float: left;
padding-right: 10px;
}
#image2 {
float: right;
padding-left: 10px;
}
#center{
height:20px;
width: 200px;
margin-left:auto;
margin-right:auto;
}
#container {
background-color: #fff;
width: 900px;
padding: 30px;
margin: 30px auto 30px auto;
border: 1px solid #999999;
}
#banner {
margin: 0 auto 10px auto;
}
#header {
margin-top: 30px;
margin-bottom: 24px;
}
#header a {
margin-right: 25px;
color: #2b2b2b;
text-decoration: none;
position: relative; top: -9px; left: 8px;
}
#header a:hover {
text-decoration: underline;
}
#content {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #999;
width: 900px;
}
#footer {
color: #626262;
margin-top: -10px;
margin-bottom: -13px;
}
#footer p {
font-size: 11px;
}
There's a problem with the banner tag as well but first I want to get this caption problem fixed.
|
|
|
|
Tailslide
Posts: 6295
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: How Do I Add Captions to Adjacent Images? - 8/2/2007 3:11:34
There are a few ways to do this - what I'd do personally is to stick each photo and caption in a div with the caption in a paragraph. You can then float the divs next to each other so they'll line up horizontally.
Like this:
HTML:
<div class="photos">
<img alt="football photo" src="Graphics/Photos/flickr/2_April_2007_Milan_by_superleague_formula_thebeautifulrace.jpg" height="334" width="500" />
<p>This is photo 1</p>
</div>
<div class="photos">
<img alt="Football photo 2" src="Graphics/Photos/flickr/5_July_2007_Carlos_Tevez_by_dentough.jpg" height="410" width="300" />
<p>This is photo 2</p>
</div>
CSS:
div.photos {float:left; margin:10px;}
div.photos p {text-align:center;}
You can then mess with the margins to position them as you want.
I should add that all floats should have a width (except images which implicitly already have widths) specified in the CSS. Generally you'd give the width of the div as the width of your landscape images or a bit wider - but in this case the divs will wrap if you do that. Could I suggest that you make the photos a bit smaller, then add the width of the widest photo as the width of the div?
< Message edited by Tailslide -- 8/2/2007 3:25:29 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
|
RE: How Do I Add Captions to Adjacent Images? - 8/2/2007 9:33:00
Thanks but there's a problem when I add a margin :
div.photos
{float:left;
margin-right:70px;
}
Am I right in thinking this adds a 70px margin to both images? If I increase this to 80px the 2nd image is displayed underneath the first so how do I set a margin for the first image only?
Also the addition of the new tag messes up the footer :
http://soccer-europe.com/newindex.html
here's the revised css :
* {
margin: 0;
padding: 0;
}
body {
background-color: #cc0033;
color: #000000;
font-family: Trebuchet MS, Verdana, Tahoma, Arial, sans-serif;
font-size: 13px;
line-height: 19px;
}
a {
color: #41a1dc;
}
a:hover {
text-decoration: none;
}
p {
margin-bottom: 8px;
}
#imageadjacent img {
float:left;
}
#cap {
clear:both;
}
#image1 {
float: left;
padding-right: 10px;
}
#image2 {
float: right;
padding-left: 10px;
}
div.photos
{float:left;
margin-right:70px;
}
div.photos p
{
text-align : left; margin-left: 5px;
}
#center{
height:20px;
width: 200px;
margin-left:auto;
margin-right:auto;
}
#container {
background-color: #fff;
width: 900px;
padding: 30px;
margin: 30px auto 30px auto;
border: 1px solid #999999;
}
#banner {
margin: 0 auto 10px auto;
}
#header {
margin-top: 30px;
margin-bottom: 24px;
}
#header a {
margin-right: 25px;
color: #2b2b2b;
text-decoration: none;
position: relative; top: -9px; left: 8px;
}
#header a:hover {
text-decoration: underline;
}
#content {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #999;
width: 900px;
}
#footer {
color: #626262;
margin-top: 10px;
margin-bottom: -13px;
}
#footer p {
font-size: 10px;
}
| |
|
|
|
c1sissy
Posts: 5086
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: How Do I Add Captions to Adjacent Images? - 8/2/2007 10:05:29
give your first image a class. then assign the values that you wish to the style for the margin.
div.photos
{float:left;
margin-right:70px;
}
div.floatphoto
{
float: left;
margin-right: 70px;
clear: both;
}
In your (X)html then all you need to do is give your image the class of floatphoto. The rest of the photos that you don't wish, or do wish to float you can also assign a class to those and give them different margins if you wish to do so.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Tailslide
Posts: 6295
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: How Do I Add Captions to Adjacent Images? - 8/2/2007 10:10:21
You've got quite a few errors in there which you'll need to fix to ensure everything works right. Check it out at the http://validator.w3.org/
Once you've got those errors fixed you should be ok.
As far as the margins go - yes that would have the effect you describe. You've got a couple of choices of ways to fix this.
What I'd do, bearing in mind that you REALLY need to give the floats a width is to limit the width of the photos to say 400px. Then you can, allowing for margins etc, give the photo divs a width. I'd stick the lot in another div which I'd centre to make it neat. Then, because you could get portrait photos next to landscape photos (which would look untidy) I'd give the photo divs a background colour which will unite the divs, making them look the same width no matter what format the photos inside them are.
Here's a simplified test version: http://www.littleblueplane.com/test/football-photos.html
You will need to fix those other HTML errors though...
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6295
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: How Do I Add Captions to Adjacent Images? - 8/2/2007 10:17:29
To ensure that the photos fit no matter what their format (landscape/portrait) we need to have a set width for the divs and a set maximum for the photos - then you can just float them left and add an extra class to the first div to give you the margin between the two.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
|
RE: How Do I Add Captions to Adjacent Images? - 8/2/2007 10:52:49
quote:
ORIGINAL: Tailslide
You've got quite a few errors in there which you'll need to fix to ensure everything works right. Check it out at the http://validator.w3.org/
Once you've got those errors fixed you should be ok.
As far as the margins go - yes that would have the effect you describe. You've got a couple of choices of ways to fix this.
What I'd do, bearing in mind that you REALLY need to give the floats a width is to limit the width of the photos to say 400px. Then you can, allowing for margins etc, give the photo divs a width. I'd stick the lot in another div which I'd centre to make it neat. Then, because you could get portrait photos next to landscape photos (which would look untidy) I'd give the photo divs a background colour which will unite the divs, making them look the same width no matter what format the photos inside them are.
Here's a simplified test version: http://www.littleblueplane.com/test/football-photos.html
You will need to fix those other HTML errors though...
I've tidied up the code as best I can but keep getting the same errors :
If I change <script =JavaScript> to : <script type="JavaScript"> the script doesn't work and I have no idea how to fix the other errors, I've played around with moving the tags but it screws up the formatting :
Line 147, Column 8: an attribute specification must start with a name or name token.
<script =JavaScript>
Line 255, Column 6: end tag for "div" omitted, but OMITTAG NO was specified.
</body>
Line 236, Column 0: start tag was here.
<div id="content">
Line 255, Column 6: end tag for "div" omitted, but OMITTAG NO was specified.
</body>
Line 144, Column 0: start tag was here.
<div id="container">
Line 147, Column 8: XML Parsing Error: error parsing attribute name.
<script =JavaScript>
Line 147, Column 8: XML Parsing Error: attributes construct error.
<script =JavaScript>
Line 147, Column 8: XML Parsing Error: Couldn't find end of Start Tag script line 147.
<script =JavaScript>
Line 185, Column 9: XML Parsing Error: Opening and ending tag mismatch: div line 145 and script.
</script>
Line 255, Column 7: XML Parsing Error: Opening and ending tag mismatch: div line 236 and body.
</body>
Line 256, Column 7: XML Parsing Error: Opening and ending tag mismatch: body line 143 and html.
</html>
Line 256, Column 7: XML Parsing Error: Premature end of data in tag html line 3.
</html>
As for what I'm trying to achieve :
http://soccer-europe.com/
Ignore the css menu on the left, scroll to the bottom of the page and you'll see two images next to each other with text underneath. I want to switch from tables to css.
I'll try everyone's suggestions and post back if I have further problems. I've only been working with css for about two days so sorry for all the basic errors, I don't really know what I'm doing!
| |
|
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
|
RE: How Do I Add Captions to Adjacent Images? - 8/2/2007 10:59:50
I better explain why I'm using this javascript. I want a banner that rotates gifs and jpegs at a set time period e.g. 2 seconds (and this is the only one I could find) not one that rotates on a page refresh. An animated gif is out of the question because when I change the second image to a gif it screws up the colours of the gradient.
| |
|
|
|
Tailslide
Posts: 6295
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: How Do I Add Captions to Adjacent Images? - 8/2/2007 11:10:53
It should be:
<script type="text/javascript" >
Fix that and see if it helps.
Edit: the bottom of the page should look like this:
</div> <!-- end content -->
<div id="footer">
<p>© Copyright 2007 soccer-europe.com</p>
</div> <!-- end footer -->
</div> <!-- end container -->
</body>
</html>
You need to add overflow:hidden to the container div. Remove the border-bottom from the content div. Add border-top rule to the footer plus clear:both.
< Message edited by Tailslide -- 8/2/2007 11:23:49 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6295
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: How Do I Add Captions to Adjacent Images? - 8/2/2007 12:01:35
Right ok - (can't believe I've done this!!) here's your page minus all the errors: http://www.littleblueplane.com/test/football.html
The only errors left are the Google ads ones and you're stuck with them.
I've added in a div to hold the photos plus several style rules in the document head. I've labelled the new style rules so that you can move them back to the appropriate place in the stylesheet rather than leave them where they are. You'll want to shift those style rules for the menu into the stylesheet too.
I've moved the javascript to an external file called rotator.js to remove some of the errors.
Check carefully as I've added closing div tags in the correct place.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
|
RE: How Do I Add Captions to Adjacent Images? - 8/2/2007 18:31:19
Thanks Donkey that worked a treat. I've added a third photo. It's a total mess in Firefox but I'll look into that much later.
http://soccer-europe.com/newindex.html
I've resized the images to a height of 300px. I'll work on the css menu next and maybe add a few more colour schemes. I know it doesn't validate. I'll fix that later but I do want to know why is the alt tag necessary?
< Message edited by Mehdi -- 8/2/2007 18:39:41 >
| |
|
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
|
RE: How Do I Add Captions to Adjacent Images? - 8/2/2007 18:37:53
quote:
ORIGINAL: Tailslide
Right ok - (can't believe I've done this!!) here's your page minus all the errors: http://www.littleblueplane.com/test/football.html
The only errors left are the Google ads ones and you're stuck with them.
I've added in a div to hold the photos plus several style rules in the document head. I've labelled the new style rules so that you can move them back to the appropriate place in the stylesheet rather than leave them where they are. You'll want to shift those style rules for the menu into the stylesheet too.
I've moved the javascript to an external file called rotator.js to remove some of the errors.
Check carefully as I've added closing div tags in the correct place.
That wasn't necessary but much appreciated. I'll look the code later. I want to get this css menu fixed and add the links before fiddling with the rest of the code.
| |
|
|
|
Tailslide
Posts: 6295
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: How Do I Add Captions to Adjacent Images? - 8/3/2007 3:32:45
quote:
ORIGINAL: Mehdi
but I do want to know why is the alt tag necessary?
Alt attributes are required for all images for the code to validate. They act as a replacement for the image should the image not be visible for some reason and add information for those people using screenreaders rather than visual browsers.
If you leave off the alt attribute altogether then when someone's reading your site with a screenreader they'll be informed of the image (and I believe the image title) but nothing else - it could be quite annoying and confusing especially when people are using old-style spacer images!
If the image is non-informational (e.g. something purely presentational), or if the alt text would just be a repetition of a caption, then have no text in the Alt attribute like this:
alt=""
That way, the image is ignored by screenreaders.
If the image is informational then you need to have text within the alt attribute which will act as a replacement for the image should the image not be visible for some reason and for those people using screenreaders.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
|
RE: How Do I Add Captions to Adjacent Images? - 8/3/2007 10:00:31
Thanks for the explanation. I've been using alt="" to get around it but after reading your post I'll use the tag properly!
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
