Website layout using CSS - Page 2

Brian · 10-21-2003, 02:02 PM

Quote:

Originally Posted by JohnScott

Quote:

Originally Posted by LazyJim

Perhaps eddie could give us some tips cos he's such a nice guy!

Or at least show us what he has achieved?

Is www.xaraya.com done using css?

http://www.xaraya.com/themes/xaraya_...tyle/style.css

I also want to point out (it's a neat little fact) that CSSZenGarden (linked in one of the firsts posts) has the same HTML code for every design, just a different CSS.

**LazyJim** · 10-21-2003, 02:10 PM

Yeah I know, the CSS zen garden is great, I'm gonna do a theme for it when I sort out CSS-P!

Brian · 10-21-2003, 02:14 PM

Quote:

Originally Posted by LazyJim

Yeah I know, the CSS zen garden is great, I'm gonna do a theme for it when I sort out CSS-P!

I'm hoping to do a theme for it, also.

Just need to give myself an idea.

**LazyJim** · 10-21-2003, 02:22 PM

Quote:

Originally Posted by Brian

http://www.xaraya.com/themes/xaraya_...tyle/style.css

Yes xaraya is very nice and all, but not the kind of layout I want.

Looking through thier CSS I can see a lot of direct pixel manipulation and margins are still being used to move things around, whereas I think margins should be for ensuring space between neighbouring elements.

Correct me if I'm wrong on the xaraya CSS.

And don't you think that setting a margin-left: 200px; is a round about way of positioning something?

Perhaps I'll have to look to absolute positioning using relative units and %'s.

There's still the mixup of the IE box-model though

- I saw the box-model hack used in the xaraya css a few times, I hate using hacks!

Brian · 10-21-2003, 02:24 PM

Something along the lines of:

position:absolute;
top:200px;
left:200px;

Blah, Blah.. & Blah

**LazyJim** · 10-21-2003, 02:50 PM

It's not helping though.

Why don't I give you a simpe example that is just one of the things I want to do...

[Exercise1]
Center a <div> on the page horizontally and vertically.
We'll use a solid black 1px border so we can see it and fix it's dimensions to 500px hight and width.

**LazyJim** · 10-21-2003, 02:53 PM

(If we get it working I'll compile it into a tutorial)

Brian · 10-21-2003, 03:01 PM

Quote:

Originally Posted by LazyJim

It's not helping though.

Why don't I give you a simpe example that is just one of the things I want to do...

[Exercise1]
Center a <div> on the page horizontally and vertically.
We'll use a solid black 1px border so we can see it and fix it's dimensions to 500px hight and width.

Oh, sorry. I was referring to your "margin-left" question.

I know how to get a background center both horiz. and vertically.

[code:1:638a73e31c] background-image: url(/imagesets/image.jpg);
background-repeat: no-repeat;
background-position: center center;[/code:1:638a73e31c]

(note: center center). Although, I don't know how to get a div to do so. Only reason being is I've never had too.

We'll have to wait for Eddie to tell us how

**LazyJim** · 10-21-2003, 03:17 PM

Yeah I know backgrounds are easy to do like that.
Why oh why is there not an equivalent to the background-position for block-level elements?

<edit>
This is one of those 'missing' CSS properties I was talking about. I would call it something like block-align or block-position and have the top|center|bottom and left|center|bottom like background-position does.

niceguyeddie · 10-21-2003, 04:59 PM

Quote:

Originally Posted by LazyJim

This is one of those 'missing' CSS properties I was talking about. I would call it something like block-align or block-position and have the top|center|bottom and left|center|bottom like background-position does.

I don't quite understand what you are getting at. You can float an element, etc, you can pad an element, you can position an element. I just don't understand why you are having a problem with the positioning.

I tell an element to load at an x - y coordinate. Inside that element I can pad it or float it. Why are you using margins for element positioning? Margins are useful for adding space outside of an element, but they aren't intended to be used for the position of block level events.

http://www.georgehernandez.com/xWebs...Attributes.htm

Might help you in your struggles. BTW, I didn't do the xaraya.com theme, that's all Andy V's work. He's much better at CSS than I, but I tend to work a bit simpler. The wyome theme is entirely CSS, and is based on some of the work of csszengardens because it fits well with the Xaraya mark-up.

I prefer simplicity over complicated designs, as less is more in my book. Perhaps that is why I don't necessarily see the problems that you are conjuring up, but that said, I have seen a ton of layouts done that are fully CSS for the positioning that are more complicated than any tabular layout will allow. Besides, tables are a hack for layouts, and are used outside of their original intent of displaying tabular data. Doesn't make it wrong, but I prefer to use the correct tools for the job, rather than messing around with tables which are limited, and are often a mess to validate and make cross browser.

niceguyeddie · 10-21-2003, 05:10 PM

Quote:

Originally Posted by LazyJim

[Exercise1]
Center a <div> on the page horizontally and vertically.
We'll use a solid black 1px border so we can see it and fix it's dimensions to 500px hight and width.

OK, missed this, so I missed what you are trying to do.

http://www.thenoodleincident.com/tut..._centered.html

When you are just using one element, then use the margin, because it is just easier that way. Just like using a word processor, in that fashion.

Distorted · 10-21-2003, 05:37 PM

To align it vertically with css you could use the vertical-alignment attribut, which doesn't work too well, or you could do it like this:

[code:1:9b338bdf76]
<html>
<head>
<title>Aligning with CSS</title>
<style type="text/css">
.aligned
{
position: absolute;
margins: auto auto;
top: 50%;
bottom: 50%;
height: 500px;
width: 500px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div class="aligned">
Blah
</div>
</body>
</html>
[/code:1:9b338bdf76]

To do this, I just used absolute positioning to put it 50% from the top and bottom.

I've only tested it in IE 6, so I'll test it else where now.

I've also noticed that text-align: center; only applies to whatever is inside of the div, while the margins affect the entire div.

So, maybe you could use text-align: center; with other browsers, besides IE, if you nest divs.

*Goes off to experiment*

GEWbert · 10-21-2003, 07:31 PM

Quote:

Originally Posted by LazyJim

Good luck

why? is it a pain in the neck?

Distorted · 10-22-2003, 05:49 AM

There is a problem with what I posted. It just aligns everything via the top-left corner of the div.

**LazyJim** · 10-22-2003, 06:23 AM

Distorted: text-align is only for inline elements, and vertical-align is too I think.
niceguyeddie: I don't think using margins to align is using the correct tool for the job.
The box_lessons site doesn't have any vertically aligned boxes.

I didn't just want to find out how to do the things, I've seen a lot of it, and what I see dissapointed me, not in terms of what can be achieved, but in terms of they way it is achived (as well as things that still cant be done).

Don't get me wrong, CSS is brilliant! It's a modern renaisance!
It's great that CSS is making cool and sexy visual designs possible while keeping structure/content seperate from style, but I can't see CSS doing all the things that were trivial with a table or two. And where people have used CSS to it's fullest, they've often had to use a lot of work-arounds, which is better than abusing tables, but highlights the current limits of CSS.