I hate css!!!

[Davegod75]

All I want to do is make a 400px by 400px box using divs and have it centered in the screen.

I dunno why this positioning thing is so hard for me to get....tables are so much easier.

any help here?

 

[imported_LoKe]

<div style="width:400px; height:400px; text-align:center;"></div>

Try that?

 

[Rage187]

is it just not displaying or what?

if it's just not displaying verify it has a lower ordinal then other graphics on the screen.

 

[screw3d]

Try this

 

[sandorski]

Use a P90! 😉


😀


🙁


sorry.....

 

[FeuerFrei]

Originally posted by: LoKe
<div style="width:400px; height:400px; text-align:center;"> </div>

Try that?

That doesn't center it.
Use <div style="text-align:center"><div style="width:400px; height:400px; "> </div></div>

 

[jjones]

You need to use margin: auto; to center a div without a containing box.

Edit: well I was just thinking centered horizontally, not horizontally and vertically. If you want it centered both, then what screw3d posted is the way to go.

 

[Davegod75]

Originally posted by: FeuerFrei

Originally posted by: LoKe
<div style="width:400px; height:400px; text-align:center;"> </div>

Try that?

That doesn't center it.
Use <div style="text-align:center"><div style="width:400px; height:400px; "> </div></div>

this doesn't work either...the box stays in the upper left of the screen.

 

[Davegod75]

Originally posted by: screw3d
Try this

this works...although I need someone to explain this to me. are their any good visual tutorials out there that show the positioning elements and how they all work???

 

[LanceM]

Search for "negative margins." It's one of the three or so centering methods.

Aside from centering, there aren't really any "tricks" needed to position elements. Try any random CSS tutorials site (http://www.w3schools.com for example) for general info on absolute, relative, and static positioning.

 

[Sunday Ironfoot]

Nicked from 'screw3d'...

div#centered
{
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin: -200px 0 0 -200px;
background: #eed;
}

Explanation: If you absolutely position a div it's positioned relative to the parent container element, provided that the container has "position: relative" set on it, otherwise it positions relative to the document body (the actual browser screen area itself), which is what's happening in screw3d's example.

top: 50%;
left: 50%;

Explanation: The div is being placing with the top left corner directly in the center of the screen. This is dynamic so that if you resize the window, the position changes accordingly.

margin: -200px 0 0 -200px;

Explanation: Tricky to explain. The margin numbers refer to 'top, right, bottom, and left margin sides in that order, so in this example the top and left margins are being set. Setting them to -200 each offsets them in a way so that the div appears exactly in the center of the screen based on the div width and height attributes. So if you set width and height to 600px, you'd need to set the margin to 'margin: -300px 0 0 -300px'

Hope that helps!

 

[FeuerFrei]

Originally posted by: Davegod75

Originally posted by: FeuerFrei

Originally posted by: LoKe
<div style="width:400px; height:400px; text-align:center;"> </div>

Try that?

That doesn't center it.
Use <div style="text-align:center"><div style="width:400px; height:400px; "> </div></div>

this doesn't work either...the box stays in the upper left of the screen.

Erg. It works in IE anyway.
A cross browser solution would be to make the containing div have an "align=center" parameter.

Unfortunately the margin:auto setting doesn't work in IE.

 

[Red Squirrel]

Lot of people may disagree, but I still find tables much better for layout, with CSS used for colors/background/font. But for positioning stuff: Tables ftw.

 

[LanceM]

The problem with tables is that a site redesign involves tearing down every single table on every single page. With CSS, you simply change a few items in the external .css file.

Tables are meant for tabled data. Not aesthetic layout. It doesn't make sense from a compliant usability standpoint.

 

[Sunday Ironfoot]

Tables are most robust way to layout pages, but as LanceM says they're a nightmare to maintain, whereas CSS just lets you modify an external stylesheet. A lot of the CSS layout issues come from CSS incompatibilities between different browsers (or should that be IE browsers and all the rest), which is why many sites still use table based layouts.

 

[xtknight]

I don't think you're going to be able to redesign your website's layout without tons of modifications to the css either if you have positioning code in there. I love using tables. CSS and div tags were a nightmare.

 

[Sunday Ironfoot]

Originally posted by: xtknight
I don't think you're going to be able to redesign your website's layout without tons of modifications to the css either if you have positioning code in there.

But the point is those modifications only need to be made in ONE place, the 'external' CSS stylesheet, as opposed to hundreds of HTML documents.

 

[xtknight]

Originally posted by: Sunday Ironfoot

Originally posted by: xtknight
I don't think you're going to be able to redesign your website's layout without tons of modifications to the css either if you have positioning code in there.

But the point is those modifications only need to be made in ONE place, the 'external' CSS stylesheet, as opposed to hundreds of HTML documents.

Ah, yes, that's true. But you can do the same thing with HTML (use server-side scripts).

 

[Alienwho]

css ftw. Once you figure it out you can never go back to tables...except for tabular data.

 

[imported_LoKe]

Originally posted by: xtknight

Originally posted by: Sunday Ironfoot

Originally posted by: xtknight
I don't think you're going to be able to redesign your website's layout without tons of modifications to the css either if you have positioning code in there.

But the point is those modifications only need to be made in ONE place, the 'external' CSS stylesheet, as opposed to hundreds of HTML documents.

Ah, yes, that's true. But you can do the same thing with HTML (use server-side scripts).

Personally, I enjoy being able to change "float:left;" to "float:right;" and have my navbar move to the right instantly.

 

[jjones]

Originally posted by: Alienwho
css ftw. Once you figure it out you can never go back to tables...except for tabular data.

Agreed. I designed with tables for years but switched to layouts using CSS about a year ago. Wouldn't think of going back to tables. It's also kind of cool turning CSS off in the browser for that old-school (before tables took over) look.

 

[HeroOfPellinor]

Originally posted by: Alienwho
css ftw. Once you figure it out you can never go back to tables...except for tabular data.

All I use are tables for production sites. Quicker and easier. I tinker with CSS for my personal sites.

Only drawback to tables, other than not being l33t, is making big layout modifications, but even that is minimal if you do it right.