I know my semantics are not good except for the form, need some help on centering caption and Link to live site
First of all: you should not be using HTML attributes for your layout.
In order to center captions on an image, you need a parent div that contains both the caption and the image.
Do the following things to make it work:
- Remove the align=“left” from all images
- Remove the css margins from the images and captions
- Give the ‘a’ containing the images and captions a text-align:center;
If you want to have space in between the images, give the parent ‘a’ a margin, not the images.
the parent id for to center the caption on the image would go inside the ul and li tags like
<ul><li><a><div id="someid"><p></p><img> /></div></a></li></ul>
The above will make it?
You already have a parent, the ‘a’.
I did block in the style.css sheet like
#someid p {
margin: 0 auto 0 auto;
padding: 0;
}
To center the caption on the image inside the id #someid but so far has work any takes on that. maybe I am not being to specific in the css block
it is true I can use a I was thinking about that, thanks for confirm that. I will take the div id from there
not avail on centering the caption I have use this block
#navigator ul li a {
float:left;
padding: 0 0 0 0;
margin:0 auto 0 1em;
}
#navigator ul li a p{
padding: 0 0 0 0;
margin:0 auto 0 auto;
}
This is the link to the css and HTML where you guys can edit it…
Hi,
You can’t nest a p element inside an a element (unless you are using html5 and even then you shouldnt because some browsers don’t like it).
Do something simpler like this.
#navigator {
width:604px;
border:#006;
}
#navigator li img {
margin: 0 auto;
display:block;
border:1px solid #000;
}
#navigator ul {
margin: 0;
padding: 0;
border:1px solid #009;
list-style-type: none;
overflow:hidden;
}
#navigator ul li {
display:inline;
}
#navigator li a {
float:left;
display:inline;
text-align:center;
margin:0 0 0 1em;
}
<td class"unordered" width="289"><div id="navigator">
<ul>
<li><a href="children.php?category_id=4&ids=3&name=Tube">Tube<img src="images/profileimages/4.jpg" alt="Category 9" width="100" height="130" /></a></li>
<li><a href="children.php?category_id=4&ids=3&name=LCD">LCD<img src="images/profileimages/4.jpg" alt="Category 9" width="100" height="130" /></a></li>
<li><a href="children.php?category_id=4&ids=3&name=Plasma">Plasma<img src="images/profileimages/4.jpg" alt="Category 9" width="100" height="130" /></a></li>
<li><a href="children.php?category_id=4&ids=3&name=TV-DVD Combinations">TV-DVD Combinations<img src="images/profileimages/4.jpg" alt="Category 9"width="100" height="130" /></a></li>
</ul>
</div></td>
Text-align center is set on the parent to center the text and then the image is put onto a new line by using display:block and then auto margins to center the images as well.