div block with curves (img curves), need help

Slydice

Here's what i made so far:

<div style="background: #006699; color: #FFFFFF; width:125px;">
<div style="vertical-align: top; width: auto; height: auto; float: left;"><img src="images/corner_left.gif" /></div>
<div><h3>Site Map</h3></div>
<div style="vertical-align: top; width: auto; height: auto; float: right;"><img src="images/corner_right.gif" /></div>
</div>

How come it doesn't look like this:

Site Map

Instead, it looks like this:

Site Map

Anyone?

Slydice

does anyone have a suggestion about doing this differently even?

Enygma

Use tables to put the divs on the same row.

Slydice

I really would like to avoid tables...
I keep getting ranted and ranted and ranted and ranted at about not using them for stuff like this.

cgarvey

Check out the "float" CSS attribute.

e.g.

test{
  background-color: #FF0000;
  float: left;
}

You're right .. using tables for positioning content is a no-no!!
.cg

Slydice

Originally posted by cgarvey
Check out the "float" CSS attribute.

e.g.

test{
  background-color: #FF0000;
  float: left;
}

You're right .. using tables for positioning content is a no-no!!
.cg

I did, look at my first post, it's in the code i used.

JustHalf

http://www.alistapart.com/articles/customcorners/
http://www.alistapart.com/articles/customcorners2/

cgarvey

Originally posted by Slydice
I did, look at my first post, it's in the code i used.

Check it out a little more then!

One solution is to ...
- Add a style="float: left;" to your center <div>
- Drop the H3 tags in favour of styles.

e.g.
[PHP]
<div style="float: left; background-color: #006699;">Site Map</div>
[/PHP]

.cg

Enygma

Pardon my ignorance but what's the problem with tables? Aren't they used all over the place for layout?

Just view->source here and mostly all you see are tables.

Not that that makes it ok or anything

cgarvey

Just that its not technically correct. Tables are used to present tabular data, not to enforce presentation. It can also make alternative browsers (text-to-speech browsers, for e.g.) have difficulties rendering the page properly.

Checkout last paragraph in 11.1 of this W£C article.

But you're right a lot of sites do still use tables for presentation.

.cg

pork99

Originally posted by cgarvey
Just that its not technically correct. Tables are used to present tabular data, not to enforce presentation. It can also make alternative browsers (text-to-speech browsers, for e.g.) have difficulties rendering the page properly.

Checkout last paragraph in 11.1 of this W£C article.

But you're right a lot of sites do still use tables for presentation.

.cg

CSSP support is still a bit inconsistent between between browsers so you have to use tables to some extent. CSSP allows you to use much simpler table structures though (goodbye to nested tables thank fornication! ) and as long the table's contents make sense when linearised they are ok. A Lynx browser emulator is handy for testing this.

JustHalf

Support for presentation using CSS is quite broad. My site, for example, should work fine in IE5+, NS6+, Mozilla (and Firefox of course), Opera and Safari. And there's not a table in sight. The inconsistencies are nothing you can't work around.

The cases where tables must be used for layout at all are few and far between. You're really looking at those cases where you are genuinely stuck with Netscape 4.

JustHalf

Originally posted by cgarvey
Check it out a little more then!

One solution is to ...
- Add a style="float: left;" to your center <div>
- Drop the H3 tags in favour of styles.

e.g.
[PHP]
<div style="float: left; background-color: #006699;">Site Map</div>
[/PHP]

.cg

That's a terrible idea. You should avoid putting presentational markup into your XHTML, even if it is using CSS through the "style" attribute.

cgarvey

Originally posted by JustHalf
That's a terrible idea. You should avoid putting presentational markup into your XHTML, even if it is using CSS through the "style" attribute.

Terrible is a bit harsh, but, yes, I agree that presentation should be extracted. I was simply working with the given example.

.cg

JustHalf

I've come up with a technique using negative margins that works in Firefox and Safari, but not IE5 (it may work in IE6, I haven't had a chance to test it out).

Here's the markup:

[php]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>CSS Test 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="1.css" type="text/css" media="screen" />
</head>
<body>

<div id="Sidebar">
<div class="heading">The case for standards compliance on Boards.ie</div>
<p>Blah blah, you know I'm just testing fool, why you flippin'?</p>

<div class="heading">The case for standards compliance on Boards.ie</div>
<p>Blah blah, you know I'm just testing fool, why you flippin'?</p>

</div>

</body>
</html>[/php]

And here's the CSS:

[php]body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 18px;
color: #333;
}

div#Sidebar {
width: 181px;
padding: 1px 5px 5px;
background-color: #f4f5f6;
border: 1px solid #c9cdd2;
float: left;
/* Box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 169px;
}

div#Sidebar div.heading:first-child {
background: transparent url(images/sidebar-top.gif) top left no-repeat;
margin: -2px -6px 0px;
padding: 2px 6px;
}[/php]

Now, obviously those div.heading's should be h2's or h3's, but you get my point. I've attached the image. You can see it running on my site (though don't peek at the CSS unless you want to be scarred for life, it's manky).

pork99

Originally posted by JustHalf
Support for presentation using CSS is quite broad. My site, for example, should work fine in IE5+, NS6+, Mozilla (and Firefox of course), Opera and Safari. And there's not a table in sight. The inconsistencies are nothing you can't work around.

The cases where tables must be used for layout at all are few and far between. You're really looking at those cases where you are genuinely stuck with Netscape 4.

You are absolutely right. If you can do without tables for presentational markup its highly desirable to do so.

However what if you are requred to do a layout with more than 2 columns which is required to scale to fit the screen? I have found that table-less layouts where you need more than 2 columns work nicely where everything can be a fixed width. Where one or more columns have to scale I've found that the old browser incompatiblities come back to haunt one.

I've had this problem I could only solve it by using a very simple 1 row table as a top level container. It was a compromise. I felt unclean for a couple of weeks but I got over it.

JustHalf

You can get around that problem

pork99

Originally posted by JustHalf
You can get around that problem

tell me more, I'm all ears

as far as I remember I got everthing ok without tables in IE 5+, NN and Mozilla but it just didn't fly in Opera 6 and IE5 Mac

leeroybrown

I prefer to use purely CSS based layout when I'm doing HTML but having implemented a fairly complicated design without a single table I have to say that it can be a right pain in the ass to get working perfectly. I use Firefox as my primary browser but generally resort to using IE when doing design. The biggest annoyance I find is the difference in interpretation of the box model (All other browsers v.s IE) and the unnecessary work it causes.