Click to See Complete Forum and Search --> : Centering Problem???
this is the code I am using:
<table border=0 cellpadding=0 width="100%" >
<tr>
<td style='align:center'>
<table>
<tr>
<td>
<a href="index1.html" border=0><img src="pictures\Picture1.png"></a>
<a href="index2.html" border=0><img src="pictures\Picture2.png"></a>
<a href="index3.html" border=0><img src="pictures\Picture3.png"></a>
<a href="index4.html" border=0><img src="pictures\Picture4.png"</a>
<a href="index5.html" border=0><img src="pictures\Picture5.png"</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
I am trying to groug the picture in the table then center the table so that the picture are always center to the page.
Can some tell me what i am doing wrong. I have been playing with this off and on for 2 day, and it is getting to the point I am going nuts.
Thanks in advance.
Add align="center" to the inner table tag
ok, now I feel stupid.
Thanks
spufi
08-13-2003, 10:46 AM
Is there any reason for the nested table because looking at what you posted, I don't see why you need it.
Yes, because I want to accommodate different resolutions. So I grouped them then the group is moved to the center of page.
This code will do what you need, and not use nested tables. For it to work in IE, you need to specify a valid doctype (http://www.webdevfaqs.com/html.php#doctype). Then, you just need to change the width of the container div to fit you pictures...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<div style="width: 200px; margin: auto;">
<a href="index1.html" border=0><img src="pictures\Picture1.png"></a>
<a href="index2.html" border=0><img src="pictures\Picture2.png"></a>
<a href="index3.html" border=0><img src="pictures\Picture3.png"></a>
<a href="index4.html" border=0><img src="pictures\Picture4.png"</a>
<a href="index5.html" border=0><img src="pictures\Picture5.png"</a>
</div>
</body>
</html>
nkaisare
08-13-2003, 12:10 PM
You should include alt attribute for all your images. Including height and width is also a good idea.
Important to use a proper doctype (see first line of Pyro's code) for this to work.
pyro
Is there a way to insure that it stays at the bottom of the page.
See this thread (http://forums.webdevelopers.com/showthread.php?threadid=15324) in the CSS forum to see the details.
Originally posted by nkaisare
You should include alt attribute for all your images.Didn't even look at that, but you are most definitly correct.
I feel as though I have to defend myself. So here is a copy/past of the actual code. The other code was what I typed out for the tread.
<div style="width: 207px; margin: auto">
<a href="website" border="0"><img src="pictures/violin.png" width="41" height="34" aline="top" border="0"></a>
<a href="website" border="0"><img src="pictures/sax_sh.png" width="27" height="34" aline="top" border="0"></a>
<a href="website" border="0"><img src="pictures/keyboard.png" width="42" height="34" aline="top" border="0"></a>
<a href="website" border="0"><img src="pictures/guitar.png" width="54" height="34" aline="top" border="0"></a>
<a href="website" border="0"><img src="pictures/bongo.png" width="43" height="34" aline="top" border="0"></a>
</div>
The div tags don't seem to work as well as the table, but the div tags can be expanded which is nice. Actual as it is now, the pictures are no longer align to each other, the last one is under the other four.
And don't worry about the href association because they are not made yet, so I don't have them labeled yet. I plan to use this page that I am working on as a template to create them.
Any suggestion as to what the problem could be.
Thanks
Ok, my bad, I forgot about the doctype. It center it just like that, but the last image is style under the other four.
???:confused: ???
DaveSW
08-14-2003, 03:48 AM
Try increasing the width of the div slightly
you were right. I did try that before I post the last message. It is suppostto be 207, so I put it up to 210, then,215, then 220, but still nothing.
I now put it to 230, and it worked, thanks.
Anyone suggest how I can combine these two codes
(you know what I was going to copy and past the code, as clean it up, but I would know where to start. So...)
Please visit this thread (http://forums.webdeveloper.com/showthread.php?s=&threadid=15324) and check out the code and the question.
Then maybe you can explain how I can incorporate it into the code above.
I tried:
<div id="d1" style="position: absolute; width: 230; bottom: 0px; text-align: bottom; margin: auto">
<a href="website"...
But as you can well guess it did not work.
Just a little more assistance would be great.
I do appreciate it immensely.
DaveSW
08-14-2003, 06:05 AM
can you give us the code for the the entire page? cut the contents if you like, but all the tags and css. It's hard to envisage exactly what you mean...
Thanks
The CSS script can be found on this thread (http://forums.webdeveloper.com/showthread.php?s=&threadid=15388)
As for the code on the page, well i don't mind sharing, but believe me that is a lot of code.
Not sure you want to look through all that.
Ok I have been playing with this since my second to last post. this is what i came up with.
from CSS file:
div.bottom
{
overflow: hidden;
position: absolute;
width: 220px;
margin: auto;
bottom: 0px;
text-align: bottom
}
from my page:
<div class="bottom">
<a href="website" border="0"><img src="pictures/violin.png" width="41" height="34" aline="top"
border="0"></a>
<a href="website" border="0"><img src="pictures/sax_sh.png" width="27" height="34" aline="top"
border="0"></a>
<a href="website" border="0"><img src="pictures/keyboard.png" width="42" height="34" aline="top"
border="0"></a>
<a href="website" border="0"><img src="pictures/guitar.png" width="54" height="34" aline="top"
border="0"></a>
<a href="website" border="0"><img src="pictures/bongo.png" width="43" height="34" aline="top"
border="0"></a>
</div>
<div style="width: 190px; margin: auto">
</div>
It works, it is always centered, and is always at the bottom, but if I remove the last "div" command, which is blank anyways, it stops working (remnants of a failed add on, did not look good).
???:confused: ??? What is up with that
DaveSW
08-14-2003, 07:08 AM
OK without seeing the entire thing it's hard to see what you mean. Which two do you wish to combine?
However, this is what I think you mean: you want the style tag on your d1 div in the main css file?
If so just add
#d1 {
position: absolute;
width: 230;
bottom: 0px;
text-align: bottom;
margin: auto
}
to the end of your css file.
However, if I could see your entire page I might be able to see an easier way to place it at the bottom.
DaveSW
08-14-2003, 07:09 AM
ok sorry you posted while I was writing. Hang on...
DaveSW
08-14-2003, 07:15 AM
hmm that code's not too good... there's a lot of invalid stuff in there which may confuse it...
try this
<div class="bottom">
<a href="website"><img src="pictures/violin.png" width="41" height="34" border="0" alt=""></a>
<a href="website"><img src="pictures/sax_sh.png" width="27" height="34" border="0" alt=""></a>
<a href="website"><img src="pictures/keyboard.png" width="42" height="34" border="0" alt=""></a>
<a href="website"><img src="pictures/guitar.png" width="54" height="34" border="0" alt=""></a>
<a href="website"><img src="pictures/bongo.png" width="43" height="34" border="0" alt=""></a>
</div>
And then learn to run your code through a validator:
http://www.htmlhelp.org/tools/validator/
or
http://validator.w3.org/
Ok, I'll try it, but the reason why I had border=0 in the action tags after href was because on the 3 MAC's here at the office, was coming up with a blue border around the image, because it is a button, not to mention the white border it was coming up with from the image tag.
Nope, the code you sugested is not centered. But I put the stupid <div style="width: 190px; margin: auto">
</div> back in after your code, and it worked.
???
As for the validation:
It came back with 49 points
But beside the fact I shouldn't use a "/" in my meta tag
and the "#" is not valid in bgcolor=#ffffff ???
and the ">" is not valid at the end if styles tag ???
Everything is hunky dory.
DaveSW
08-14-2003, 07:50 AM
what if you change text-align:bottom to center and add a height?
DaveSW
08-14-2003, 07:52 AM
btw bgcolor="#ffffff" - note the quotes
and like I said, without the whole code...
This is what I got:
div.bottom
{
overflow: hidden;
position: absolute;
width: 220px;
height: 34px
margin: auto;
bottom: 0px;
text-align: center
}
Which doesn't seem right because there is no auto "down" like there is in the margin category.
That and it did not work. :rolleyes:
Maybe I misunderstood your post.
DaveSW
08-14-2003, 08:02 AM
That was what I meant (although you haven't closed the text-align:center with a ; - don't know if it makes any difference on the last one)
maybe it would be easier if you emailed me the entire code?
I tried this:
div.bottom
{
overflow: hidden;
position: absolute;
width: 220px;
margin: auto;
bottom: 0px;
text-align: bottom
}
with this
<div class="bottom">
<div style="text-align:center;"
<a href="website"><img src="pictures/violin.png" width="41" height="34" border="0" alt=""></a>
<a href="website"><img src="pictures/sax_sh.png" width="27" height="34" border="0" alt=""></a>
<a href="website"><img src="pictures/keyboard.png" width="42" height="34" border="0" alt=""></a>
<a href="website"><img src="pictures/guitar.png" width="54" height="34" border="0" alt=""></a>
<a href="website"><img src="pictures/bongo.png" width="43" height="34" border="0" alt=""></a>
</div>
</div>
No good
I don't mean to be a pain in the butt, I mean the thing works with <div style="width: 190px; margin: auto">
</div> at the end. I just don't understand why. Your code is a lot cleaner, but....
DaveSW
08-14-2003, 09:04 AM
very strange. try width: 100%. no margin:auto.
div.bottom
{
overflow: hidden;
position: absolute;
width: 100%;
bottom: 0px;
text-align: bottom;
}
leave the center align inside
after that, give up and do it your way!!
:D
I works!!!
Yuppie!!!
Thanks