neonlights
asked on
Problem in Aligning Table:
Hi experts:
I am creating a page to place my intro flash file. I am using table. I created a page with bg = black and inserted a table with bg = red
3 rows and 3 cols
I would like to insert my flash in 2,2(middle)
I align table center and cell 2,2 valign - center
The problem is that table is not centering in the middle of the page. and also how come I see my background black infront of my table(left side and right side)
I hope I am clear...
Thanks all
I am creating a page to place my intro flash file. I am using table. I created a page with bg = black and inserted a table with bg = red
3 rows and 3 cols
I would like to insert my flash in 2,2(middle)
I align table center and cell 2,2 valign - center
The problem is that table is not centering in the middle of the page. and also how come I see my background black infront of my table(left side and right side)
I hope I am clear...
Thanks all
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I faced this problem several times.
I don't know the reason till the moment, but I could solve it only by setting the alignment using style sheet. Try this code in the <td> tag:
style="vertical-align:midd
I don't know the reason till the moment, but I could solve it only by setting the alignment using style sheet. Try this code in the <td> tag:
style="vertical-align:midd
Hi,
But I think using this simple HTML code would solve the problem.
This is how I do and its has always worked.
In this code I have specified the page bg as black and the column bg in which the flash would be as red and kept the other column bg blank (the left n right of the center cell)
Please try saving this html and place ur flash file where specified and see if it solves ur problem...
<html>
<head>
<title>Untitled Document</title>
</head>
<body bgcolor="#000000">
<table width="75%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td width="25%"> </td><td
<tr><td> </td><td bgcolor="#FF0000">Insert Flash file here!!</td><td> </td>
<tr><td> </td><td bgcolor="#FF0000"> </
</table>
</body>
</html>
But I think using this simple HTML code would solve the problem.
This is how I do and its has always worked.
In this code I have specified the page bg as black and the column bg in which the flash would be as red and kept the other column bg blank (the left n right of the center cell)
Please try saving this html and place ur flash file where specified and see if it solves ur problem...
<html>
<head>
<title>Untitled Document</title>
</head>
<body bgcolor="#000000">
<table width="75%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td width="25%"> </td><td
<tr><td> </td><td bgcolor="#FF0000">Insert Flash file here!!</td><td> </td>
<tr><td> </td><td bgcolor="#FF0000"> </
</table>
</body>
</html>
Hi,
Why so many tags when all can be done width clean xhtml and css?
html>
<head>
<title>Untitled Document</title>
<style>
body{margin:0;padding:0;te
#flash{
width:25%;margin-left:auto
margin-right:auto;margin-t
background-color:red
}
</style>
</head>
<body>
<div id="flash">
flash goes here
flash goes here
flash goes here
</div>
</body>
</html>
I tested in IE an Firefox,
I think this version is cleaner shorter and easier to maintain
Why so many tags when all can be done width clean xhtml and css?
html>
<head>
<title>Untitled Document</title>
<style>
body{margin:0;padding:0;te
#flash{
width:25%;margin-left:auto
margin-right:auto;margin-t
background-color:red
}
</style>
</head>
<body>
<div id="flash">
flash goes here
flash goes here
flash goes here
</div>
</body>
</html>
I tested in IE an Firefox,
I think this version is cleaner shorter and easier to maintain
If we are talking vertical centering on a webpage I'm sorry to say css isn't able to do it alone.
To solve the problem in a smoothly, do like this:
1) Add this style in your header repalcing "myFlashMovie" with the Id of
your flash movie (# should stay):
<style type="text/css">
html,body,table { margin:0px; padding:0px; width:100%; height:100%; border:none; }
td { vertical-align: middle; text-align: center; }
#myFlashMovie { position: relative; text-align: left; margin:auto; }
</style>
2) Create a table with one cell and place your flash movie here.
<body>
<table>
<tr>
<td>
.... Flash Goes Here ....
</td>
</tr>
</table>
</body>
That's it
Jakob E
To solve the problem in a smoothly, do like this:
1) Add this style in your header repalcing "myFlashMovie" with the Id of
your flash movie (# should stay):
<style type="text/css">
html,body,table { margin:0px; padding:0px; width:100%; height:100%; border:none; }
td { vertical-align: middle; text-align: center; }
#myFlashMovie { position: relative; text-align: left; margin:auto; }
</style>
2) Create a table with one cell and place your flash movie here.
<body>
<table>
<tr>
<td>
.... Flash Goes Here ....
</td>
</tr>
</table>
</body>
That's it
Jakob E
ASKER
Thanks for your all responses. Somehow, it is working now. But, now, I have your solutions.... for future ...
Thanks all..
Thanks all..
I vote for the DIV tag solution. It's clean. Nice post, hidran.
I know this post may make someone a bit annoyed but....
I very much disagree to the solution accapted. This has nothing to do with the choice Neonlights
made it's about some of the "expert" advices given.
I know we all have our own way of doing things so I normaly don't react if an advice differs
from what I would have suggested.
But when I see bad habits and outdated solutions thrown at someone asking for help... I get :(
Let me get to the point.
>>> You should allways try to seperate your content from your presentation!!! <<<
Even thoug the solution works it's an example of bad practice adding properties*
directly into content (<table><td> etc.):
* width="75%"
align="center"
bgcolor="#FF0000"
We now have css to do this (and it's not new invention)...
The reason not to do this may seem blurry now we are only talking of one page, but what if this
design were used on 100 pages and you wanted to change the background color on your "red td tags"
.... Then 300 tags needed to be changed
Using an included stylesheet and class names on your td's you would only have to change things
one place. By the way if it's only horizontal centering you want don't even use tables....
in that case Hidran's example is the one to pick.
Having css we are now able to build more flexible and maintainablesites all while making
less redundant code. Why not teach others to do the same!?
Take a look at http://www.csszengarden.com to see what can be done with css using the same content
but different styles. I think you'll get my point then.
Good vibes still, I hope :)
Jakob E
I very much disagree to the solution accapted. This has nothing to do with the choice Neonlights
made it's about some of the "expert" advices given.
I know we all have our own way of doing things so I normaly don't react if an advice differs
from what I would have suggested.
But when I see bad habits and outdated solutions thrown at someone asking for help... I get :(
Let me get to the point.
>>> You should allways try to seperate your content from your presentation!!! <<<
Even thoug the solution works it's an example of bad practice adding properties*
directly into content (<table><td> etc.):
* width="75%"
align="center"
bgcolor="#FF0000"
We now have css to do this (and it's not new invention)...
The reason not to do this may seem blurry now we are only talking of one page, but what if this
design were used on 100 pages and you wanted to change the background color on your "red td tags"
.... Then 300 tags needed to be changed
Using an included stylesheet and class names on your td's you would only have to change things
one place. By the way if it's only horizontal centering you want don't even use tables....
in that case Hidran's example is the one to pick.
Having css we are now able to build more flexible and maintainablesites all while making
less redundant code. Why not teach others to do the same!?
Take a look at http://www.csszengarden.com to see what can be done with css using the same content
but different styles. I think you'll get my point then.
Good vibes still, I hope :)
Jakob E
The idea is to offer a solution to one's question and by showing them how to go about solving their problem. Showing different ways of how to do something is perfectly alright and it allows the person asking the question to select what best suites what they are looking for. However I think at this point there's not too many more ways of doing the same exact thing.
I showed a basic HTML table, something easy for someone not very advanced with HTML or even has a knowledge of CSS.
Now if they know more, great! Maybe they want something that cuts down script and is a bit more difficult to understand for someone learning, but none the less more efficient.
Mine's just a suggestion as is everyone else's. Starting with the basics though... If they don't understand what it is they're doing, they're just doing it cause it looks cool or cause it's a CSS table or whatever an expert said, it doesn't help them understand the basics to the table, which is why they don't have it alligned correctly in the first place. Anyway no hard feelings.. :o)
~trail
I showed a basic HTML table, something easy for someone not very advanced with HTML or even has a knowledge of CSS.
Now if they know more, great! Maybe they want something that cuts down script and is a bit more difficult to understand for someone learning, but none the less more efficient.
Mine's just a suggestion as is everyone else's. Starting with the basics though... If they don't understand what it is they're doing, they're just doing it cause it looks cool or cause it's a CSS table or whatever an expert said, it doesn't help them understand the basics to the table, which is why they don't have it alligned correctly in the first place. Anyway no hard feelings.. :o)
~trail
You got a point I'll agree, one step at a time.
Sometimes I just feel like drugs are handed out, it takes away the pain but...
Though haven't been deemed outdated by w3.org. Tables (in my world) are allmost
only good at presenting tabular data or as substitute when css can't be used.
It's like the good old tags <isindex prompt="Name: "> and <menu></menu>
they still works but who would recommend them!?
Enough hickups from me and no hard feelings :)
Jakob E
Sometimes I just feel like drugs are handed out, it takes away the pain but...
Though haven't been deemed outdated by w3.org. Tables (in my world) are allmost
only good at presenting tabular data or as substitute when css can't be used.
It's like the good old tags <isindex prompt="Name: "> and <menu></menu>
they still works but who would recommend them!?
Enough hickups from me and no hard feelings :)
Jakob E
lol... :o) yep yep!
ASKER
Hi trailblazzyr55, and Jakob - I think I might have mad mistake in awarding the points. Since there are lots of suggestions, I was little confused. I am usually pretty good in awarding my points. I am sorry if I have made mistake in awarding points. In the future, I will read all the comments/code very carefully before I reward my points.
Thanks again all.
I am learning web devlopment. new to this side of the programming.
Thanks again all.
I am learning web devlopment. new to this side of the programming.
Hi all,
After eading all the comments, I guess everyone is right, its only how its implemented. As neonlights said "I am learning web development", its great to see so many people around to help.
One small point I would like to make here is, if we are using the old/basic methods quoted as "bad practice" we can use the feature known as templates in dreamweaver. so it will change any attribute of all the pages based on that template.
Also I think anyone who is at learning stage should go step by step from basics. I guess everyone would agree to that.
no sweat....peace!!
sangark
After eading all the comments, I guess everyone is right, its only how its implemented. As neonlights said "I am learning web development", its great to see so many people around to help.
One small point I would like to make here is, if we are using the old/basic methods quoted as "bad practice" we can use the feature known as templates in dreamweaver. so it will change any attribute of all the pages based on that template.
Also I think anyone who is at learning stage should go step by step from basics. I guess everyone would agree to that.
no sweat....peace!!
sangark
<style type="text/css">
<!--
body {
background-color: #000000;
}
.style1 {color: #FFFFFF}
-->
</style></head>
<body>
<table width="100%" border="0"> (*Put "1" in the place of "0" if you want the border*)
<tr>
<td width="33.3%"></td>
<td width="33.3%"></td>
<td width="33.3%"></td>
</tr>
<tr>
<td></td>
<td><div align="center">(*Flash files goes here*)</div></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<!--
body {
background-color: #000000;
}
.style1 {color: #FFFFFF}
-->
</style></head>
<body>
<table width="100%" border="0"> (*Put "1" in the place of "0" if you want the border*)
<tr>
<td width="33.3%"></td>
<td width="33.3%"></td>
<td width="33.3%"></td>
</tr>
<tr>
<td></td>
<td><div align="center">(*Flash files goes here*)</div></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<html>
<head>
</head>
<body>
<table width="700" height="400" align="center" valign="middle" bg="FF0000">
<tr>
<td> </td>
<td>
<table width="600" height="300" align="center" valign="middle" bg="000000">
<tr>
<td> </td>
<td align="center" valign="middle">Flash should go here </td>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
</body>
</html>