Duplicate this CSS!
January 20, 2004 9:18 PM Subscribe
I'm very fond of the "staggered" content layout of this site, but I can't figure out how to reasonably duplicate it in CSS (with text instead of images). Any suggestions? [more inside]
Specifically, I'd like to develop a style sheet such that H1s are normal page headings, but h2s show up on the far left and h3s on the middle left. How could I make:
[h2]XYZ[/h2]
[h3]abc[/h3]
[p]Some text here[/p]
Show up as:
XYZ abc Some text here
as they (sort of) do on the site to which I linked?
Specifically, I'd like to develop a style sheet such that H1s are normal page headings, but h2s show up on the far left and h3s on the middle left. How could I make:
[h2]XYZ[/h2]
[h3]abc[/h3]
[p]Some text here[/p]
Show up as:
XYZ abc Some text here
as they (sort of) do on the site to which I linked?
You'll want to use float:left, or perhaps negative left-margins (or left-paddings).
posted by kickingtheground at 10:45 PM on January 20, 2004
posted by kickingtheground at 10:45 PM on January 20, 2004
Been playing around with different schemes, how about this:
h2 {
position:absolute;
left:10px;
width: 140px;
font-size:medium;}
h3 {
position:absolute;
left:150px;
font-size:medium;
width:150px;}
p {
margin-left:300px;}
I had tried using float:left but it only worked for me in ie and not mozilla, I'll look at my code later in the morning. This should give you a start, you should use em's instead of px or use percentages or something.
posted by bobo123 at 11:39 PM on January 20, 2004
h2 {
position:absolute;
left:10px;
width: 140px;
font-size:medium;}
h3 {
position:absolute;
left:150px;
font-size:medium;
width:150px;}
p {
margin-left:300px;}
I had tried using float:left but it only worked for me in ie and not mozilla, I'll look at my code later in the morning. This should give you a start, you should use em's instead of px or use percentages or something.
posted by bobo123 at 11:39 PM on January 20, 2004
Float works at least as well in Moz as IE. The problem is understanding it. Try this and this.
As for recreating that specific layout in CSS, you're going to have a fun time. It doesn't seem too hard, but it's going to take some thought. In the content area box try using padding-left to create the reserved gutter on the left (you're going to need to learn about the box model differences in IE5/ IE6 in quirks mode and how to adjust*). Set this box to position: relative and then give your H2/ H3 tags position: absolute and a left position of negative whatever will get them back to the left.
* Use a full XHTML DOCTYPE to put IE6 in strict mode so it will work like Moz. All you have to do is declare the width once incorrectly and then redeclare it with a hack to get things proper like. It should look like this:
#contentBox {
padding-left: 100px;
width: 500px;
w\idth: 400px;
}
Of course, putting that slash in any stylesheet Netscape 4 can see will cause NS4 to stop rendering CSS, so you may want to split things into two stylesheets and use @import to bring in the one with the advanced info you want to hide from NS4. My advice is to develop in Moz and look at it in IE on a regular basis to make adjustments.
As always, this CSS hacks guide from a fellow MetaFiltarian is your friend.
posted by yerfatma at 5:05 AM on January 21, 2004
As for recreating that specific layout in CSS, you're going to have a fun time. It doesn't seem too hard, but it's going to take some thought. In the content area box try using padding-left to create the reserved gutter on the left (you're going to need to learn about the box model differences in IE5/ IE6 in quirks mode and how to adjust*). Set this box to position: relative and then give your H2/ H3 tags position: absolute and a left position of negative whatever will get them back to the left.
* Use a full XHTML DOCTYPE to put IE6 in strict mode so it will work like Moz. All you have to do is declare the width once incorrectly and then redeclare it with a hack to get things proper like. It should look like this:
#contentBox {
padding-left: 100px;
width: 500px;
w\idth: 400px;
}
Of course, putting that slash in any stylesheet Netscape 4 can see will cause NS4 to stop rendering CSS, so you may want to split things into two stylesheets and use @import to bring in the one with the advanced info you want to hide from NS4. My advice is to develop in Moz and look at it in IE on a regular basis to make adjustments.
As always, this CSS hacks guide from a fellow MetaFiltarian is your friend.
posted by yerfatma at 5:05 AM on January 21, 2004
I don't know. That layout seems like the perfect candidate for abandoning CSS positioning and going back to a simple table layout. There would be very little nesting (if you did a six-column table, only the bulletted items in the middle would need to be in their own nested table).
Silly (though admittedly useful and sometimes necessary) hacks like bogus properties ("w\idth") IMO defeat the whole purpose of creating valid documents. Table layouts are still kosher, if antiquated. I think it's best to use accepted practices--even if they're outdated--before using less orthodox hacks.
posted by jpoulos at 8:26 AM on January 21, 2004
Silly (though admittedly useful and sometimes necessary) hacks like bogus properties ("w\idth") IMO defeat the whole purpose of creating valid documents. Table layouts are still kosher, if antiquated. I think it's best to use accepted practices--even if they're outdated--before using less orthodox hacks.
posted by jpoulos at 8:26 AM on January 21, 2004
FWIW, "w\idth" is a perfectly valid CSS property. The parser is supposed to interpret escaped characters as their literal values, so the browser should treat that as "width".
(Un?)fortunately, IE <6.0 chokes on them, which is why we can use that trick to serve different rules to different version of that browser.
posted by ksmith at 9:48 AM on January 21, 2004
(Un?)fortunately, IE <6.0 chokes on them, which is why we can use that trick to serve different rules to different version of that browser.
posted by ksmith at 9:48 AM on January 21, 2004
Response by poster: The reason I want to do it in CSS is that I often change site layouts, so develop pure (unstyled, unfonted, untabled) HTML and then use CSS to style and format it.
It's a piece of cake to do that layout with tables, but then when you've got 1,000 pages of content and change your mind about the layout, you're up poop creek. That's where CSS excels, though.
posted by oissubke at 11:57 AM on January 21, 2004
It's a piece of cake to do that layout with tables, but then when you've got 1,000 pages of content and change your mind about the layout, you're up poop creek. That's where CSS excels, though.
posted by oissubke at 11:57 AM on January 21, 2004
« Older What kind of camera is best for digital... | Is it really worth the effort to learn CSS and... Newer »
This thread is closed to new comments.
EntrepreneurFilter?
posted by bshort at 10:15 PM on January 20, 2004