I am trying to slowly move from table layout to css layout. I want to create a button bar with html links looking like buttons and right aligned. How can I do this with css? I am not currently worried about making link look like a button but am more concerned about right alignment within a div.
css right align
Hi,
I'm not sure, if I really got what you are looking for, but this
is a div with right alignment.
I'm not sure, if I really got what you are looking for, but this
| Code: |
| <div style="text-align:right"> |
is a div with right alignment.
Tried it. Didn't work.
This is what I am looking for.
I have several button-looking links like this
Right now I am putting them inside a div tag with algin=right. Still, They align to left. I want these links to align to right. Also I don't want these links to wrap. All of them should appear in same line. Any help appreciated.
This is what I am looking for.
I have several button-looking links like this
| Code: |
|
<table class='actionbutton'><tr><td nowrap='yes'><a href='upload.php'>Add photos</a></td></tr></table> <table class='actionbutton'><tr><td nowrap='yes'><a href='gotofile.php'>Goto photo</a></td></tr></table> |
Right now I am putting them inside a div tag with algin=right. Still, They align to left. I want these links to align to right. Also I don't want these links to wrap. All of them should appear in same line. Any help appreciated.
Not sure if this will be what you want, but did you try floating to the right. You might have to give each button a class id=XXXXX. I'm learning myself, but figured I would give you a suggestion.
you need to define the alignment of the table in the table tag:
| Code: |
| <table align="right" border=1 class='actionbutton'><tr><td nowrap='yes'><a href='upload.php'>Add photos</a></td></tr></table> |
I think you may also use <li> to create the 'button' effect and set its CSS style to be something like 'float: right; width: 100px; background-color: blue;' to right-align the button.
| kv wrote: |
| I am trying to slowly move from table layout to css layout. I want to create a button bar with html links looking like buttons and right aligned. How can I do this with css? I am not currently worried about making link look like a button but am more concerned about right alignment within a div. |
Umm, one thing I'm not getting is that you say you are trying to move away from table layout, yrt in this code you submitted here:
| Code: |
| <table class='actionbutton'><tr><td nowrap='yes'><a href='upload.php'>Add photos</a></td></tr></table>
<table class='actionbutton'><tr><td nowrap='yes'><a href='gotofile.php'>Goto photo</a></td></tr></table> |
Here is a good article about how a basic numder of divs can be positioned differently with CSS without any tables what so ever. http://www.tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
Of course as always the main problem is getting around the haphazard way IE works with CSS. Luckily the site has lots of good articles including how to fix the problems with IE.
I was "slowly" moving from tables to css 
. So, I wanted to first eliminate outer table first while keeping the button table as is. But thanks to Tex_Arcana's reply. Now my button code with alignment is reduced to this.
. So, I wanted to first eliminate outer table first while keeping the button table as is. But thanks to Tex_Arcana's reply. Now my button code with alignment is reduced to this.
| Code: |
|
<div class="bigbox"> <span><a href="upload.php" class="actionbutton">Add photos</a></span> <br> </div> |
| kv wrote: | ||
I was "slowly" moving from tables to css . So, I wanted to first eliminate outer table first while keeping the button table as is. But thanks to Tex_Arcana's reply. Now my button code with alignment is reduced to this.
|
Hey, no prob. I always say, "In for a penny, in for a pound." If you're going to go tableless might as well do it. Seems getting rid of the nav bar table first would have been the easier step. That is why I was confused by your post.
I'm glad I could help. I'm always trying out new things and sometimes doing it bass ackwards myself though so I can relate.
It's one of the reasons I chose to do a personal web page on Frihost so I can experiment with different things as I learn them. That's why I like that site I gave you the link to. That guy has a lot of good tutorials and links that explain a lot of fairly advanced concepts.
Now that you have your nav bar problem solved, maybe you would like to see his CSS dropdown menu tutorial at http://www.tjkdesign.com/articles/dropdown/default.asp. It's a really nice one.
 |