Welcome to WebmasterWorld Guest from 54.144.68.27

Forum Moderators: not2easy

Message Too Old, No Replies

nested center table

css div

     

cdcaveman

6:57 pm on Aug 7, 2008 (gmt 0)

5+ Year Member



i'm new to css and i don't get how to get the same thing accomplished as i did in creating tables. I've always had a pixel based table nested in a percentage based table and just center it and it always stays in best view. how do i do this with Css div ?

Xapti

1:15 am on Aug 8, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



To center an (block) element, just set the left and right margins to auto: "div.class{margin:0 auto;}". You must also set the width to a value (either relative or absolute), since they take up full width by default.
If you want percentage based widths inside, just set the widths accordingly by percent. Realize that if you are using padding or margins though, those are NOT included in the widths! because of this, you may want to consider just calculating the widths and paddings, instead of using percent. Note: if your padding is in percent as well, then it's not an issue (generally they are done in px or em though)

If you didn't know, to emulate the columns of a table (get block elements beside eachother), one uses the float property. Floats are more flexible than table cells, so it can be quite useful once you understand how to use them. Another method is using display:inline-block, but that is still not entirely supported perfectly.

cdcaveman

1:39 am on Aug 8, 2008 (gmt 0)

5+ Year Member



ok obviously by the verbage your using i need to verse myself a little more. is there a good resource somewhere i can get totally schooled on divs? i understand the auto margin bit. but these other float property and inline block statments you've made i'm going to research

Marshall

6:17 am on Aug 8, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If you are going to continue to use tables and just want to make the table center, assign the table a specific width and add to the css margin: 0 auto;

CSS -
#table1 { /* centers outer table */
width: 800px; /* or whatever works for you */
margin: 0 auto;
}
#table2 { /*center nested table */
width: 200px;
margin: 0 auto;
}

HTML -
<table id="table1">
<tr>
<td>
<table id="table2">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>

Of course, this is very simplified.

Marshall

cdcaveman

2:42 pm on Aug 8, 2008 (gmt 0)

5+ Year Member



i was messing with it last night. and i think i just wanted to knwo to much before i started messing with it. i think when i'm done converting it over from tables to css. i'll show ya what it looks like

csuguy

4:40 am on Aug 10, 2008 (gmt 0)

5+ Year Member



I got myself "CSS Mastery" recently. It's a good reference book and will definately help you advance your CSS. It goes over the basics but is more concerned with the application of CSS in different contexts and it is very sensitive to cross-browser compatibility. It will teach you several hacks and filters if you don't know them. Just go to Amazon and do a search for it!

cdcaveman

10:43 pm on Aug 10, 2008 (gmt 0)

5+ Year Member



i just bought that book. i'm already subscribed to lynda.com as well. conceptional i understand most everything about css. i just am still having a problem with what kinda of div tags to use, when to use them etc.! like floating , static, all that stuff. Anyone Can put these in laymens terms? Static, relative, absolute, and fixed = anyone for a breif explanation and exmaple of when to use them?

Marshall

11:07 pm on Aug 10, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You should look at the source code for lynda.com. Might solve that table vs. css argument.

Marshall

csuguy

11:18 pm on Aug 10, 2008 (gmt 0)

5+ Year Member



I like to use tables but they just went crazy with em...

But, then again, all of these big websites tend to have horrible source code. I'm pretty sure they all use programs to make their sites :/

Of course, they probably wanted those different blocks to be vertically expandable - and that would have been much more of a pain with divs. Of course, they could have just made a table with several rows and only 1 column and made the columns with divs. That would have been the best way. But, w/e...

HYBRIDS FTW!

csuguy

11:33 pm on Aug 10, 2008 (gmt 0)

5+ Year Member



Static, relative, absolute, and fixed = anyone for a breif explanation and exmaple of when to use them?

Well, I've never used static so I don't know about that. But I can cover the others.

Relative:
when you use this positioning, the object takes up space in the normal flow of the page as if nothing had changed. However, by specifying its left and top attributes, you can move it around from wherever it normally would be positioned. Moving it won't effect the normal flow of the document, and everything else will act as if it hadn't moved - still leaving space for where it would normally be. Objects that are moved will cover up other objects that happen to fall underneath it.
IMPORTANT: objects with an absolute positioning that are inside of objects with a relative positioning will use the top left corner of the relative object as their origin point - (0,0).

Absolute:
Objects that have an absolute position are taken out of the normal flow of the document. They will cover up objects in the normal flow of the document and absolutely positioned objects that were defined before themselves. Using the left and top attributes you can place them wherever you want. This is especially useful when you place absolute objects inside of relative objects - as described above. For example, you can have a main container that it centered withing the document. Then you use absolute positioned objects to setup the different areas of the page (like header, link bar, content area, etc). Because the these absolutely positioned objects are within the relative object - you don't have to use javascript or anything like that to center them within the page.

Fixed
This is very similar to absolute positioning EXCEPT that they NEVER MOVE. If you scroll the page - these objects will remain in on the screen wherever you put them. You've probably seen these before - though rare. These objects will follow the you up and down the page - often link bars. While highly useful and amusing, they are not well supported. They are ways to make fixed objects without using the fixed positioning, but that's another topic. I don't suggest using these as they are not supported well.

cdcaveman

1:34 am on Aug 11, 2008 (gmt 0)

5+ Year Member



so what i hear you saying is FIXED is rarely used. and a combination of Relative and absolute are typically used. i'm getting the hang of things as i read and watch. i am trying to create in divs, what i used to in tables. which was a pixel based centered table inside a percentage based table. which i am now doing in divs by creating a 780 wide div with auto margin. (which within dreamweaver i had no selection as to wiether it is a relative or absolute.) An then all the other divs inside that main one are all relative.

csuguy

12:46 am on Aug 12, 2008 (gmt 0)

5+ Year Member



you should still use a table as your outer element - with 100% width and height. Then you can easily center your content div both horizontally AND vertically. Of course, if you just want horizontal centering then there's no need for an outer layer.

Anyways, while learning to use div's is good you should learn how to combine tables and divs to create hybrids. There is some stuff which tables just plain out do better. For example - if you want to have a content area that has dynamic content and could expand vertically - it is much easier to move any elements underneath this area with tables (which does it automatically) vs divs which would require javascript.

It all depends upon what your doing really.

cdcaveman

2:02 am on Aug 12, 2008 (gmt 0)

5+ Year Member



wouldn't using a auto height on the div tag work if you have dynamic content that sometimes needs more vertical space?

csuguy

1:17 am on Aug 13, 2008 (gmt 0)

5+ Year Member



not if the div tag has position:absolute
 

Featured Threads

Hot Threads This Week

Hot Threads This Month