Center slice table vertically

This is a discussion on "Center slice table vertically" within the Web Page Design section. This forum, and the thread "Center slice table vertically are both part of the Design Your Website category.



 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1  
Old May 3rd, 2006, 11:18
Highly Reputable Member
Join Date: Aug 2005
Location: 3rd Branch Up, Old Oak.
Age: 48
Posts: 658
Thanks: 0
Thanked 0 Times in 0 Posts
Center slice table vertically

Could someone have a look at this for me and advise how to center this table vertically so all the component slices line up correctly within it please?
I have it working in HTML already but I'm trying to use CSS and can't figure it out.
I'm a CSS total n00b.

Last edited by Legacy_Staff; May 5th, 2006 at 14:40.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old May 3rd, 2006, 16:25
New Member
Join Date: Apr 2006
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Center slice table vertically

if you ment horrizontaly, add margin: 0px auto;
into your style for #table_01

and if you did mean verticly, add margin-top: 50%; instead.

Should do the trick.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old May 3rd, 2006, 16:36
Highly Reputable Member
Join Date: Aug 2005
Location: 3rd Branch Up, Old Oak.
Age: 48
Posts: 658
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Center slice table vertically

Thx for reply.
I'm trying to align the table to the centre, instead of the left.
Tried both of those suggestions but the first didn't seem to do anything, and the second aligns the table to the bottom, but still on the left (actually, this would be useful for something I'm trying to achieve elsewhere ).
*sigh*
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old May 3rd, 2006, 17:24
herkalees's Avatar
Highly Reputable Member
Join Date: Jul 2005
Location: Massachusetts, USA
Age: 87
Posts: 576
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Center slice table vertically

This is what I do:

div#box {
width: 800px; <-- must declare a width
height: 600px; <-- must declare a height
position: relative;
top: 50%; <-- this puts the top edge half way down the page
left: 50%; <-- this puts the left edge half way across the page
margin-top: -300px; <-- this pulls the box up by half of it's own height
margin-left: -400px; <-- this pulls the box back to the left by half of it's own width
}


That should do ya.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old May 4th, 2006, 11:25
Highly Reputable Member
Join Date: Aug 2005
Location: 3rd Branch Up, Old Oak.
Age: 48
Posts: 658
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Center slice table vertically

Thanx Herk',
I used part of your suggestion and it's fixed it up a treat.


Original code:
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:850px;
height:170px;

Ammended code:
#Table_01 {
position:absolute;
left:50%;
top:0px;
width:850px;
margin-left: -425px;
height:170px;

Many thx for assists guys.
Maybe back later, heheh.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old May 4th, 2006, 12:40
herkalees's Avatar
Highly Reputable Member
Join Date: Jul 2005
Location: Massachusetts, USA
Age: 87
Posts: 576
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Center slice table vertically

Quote:
Originally Posted by RedSkwirrell
#Table_01 {
position:absolute;
left:50%;
top:0px;
width:850px;
margin-left: -425px;
height:170px;
I'm not 100% sure of this, but the choice of using 'absolute' as your value for the 'position' property might mess up anything you put below that div 'Table_01'

Of course, if you haven't mentioned it, I'm probably wrong
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old May 4th, 2006, 15:35
masonbarge's Avatar
Highly Reputable Member
Join Date: Jan 2006
Location: Atlanta GA
Posts: 631
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Center slice table vertically

Yeah, I agree, but relative positioning has its own drawbacks sometimes. I think we've all been through "why the heck won't this go into that empty space"
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old May 5th, 2006, 14:40
Highly Reputable Member
Join Date: Aug 2005
Location: 3rd Branch Up, Old Oak.
Age: 48
Posts: 658
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Center slice table vertically

I had noticed you'd used the relative tag but the image centres okay and it appears as it's meant to... I ain't doing nuttin else unless it's broke!


(Will let you know later if it breaks)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #9  
Old May 5th, 2006, 18:47
New Member
Join Date: May 2006
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Center slice table vertically

Thank you Herkelees I will try that.
well done
Colin
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #10  
Old May 5th, 2006, 18:48
New Member
Join Date: May 2006
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Center slice table vertically

Thank you
Colin
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
center, slice, table, vertically

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Slice it, or float it? Inkers Web Page Design 2 Nov 13th, 2007 18:03
[SOLVED] background img center in table robertl Web Page Design 9 Oct 1st, 2007 05:27
vertically center text alexgeek Web Page Design 2 Aug 14th, 2007 12:47
How to center a page without use of a table pdk Web Page Design 23 Jan 31st, 2007 11:28
Help with Button dropping slice! gnarlysurfer JavaScript Forum 6 Jun 22nd, 2006 21:18


All times are GMT. The time now is 03:10.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42