13 replies [Last post]
humbleCSS
humbleCSS's picture
Offline
Regular
Last seen: 11 years 8 weeks ago
Timezone: GMT-4
Joined: 2009-03-12
Posts: 30
Points: 2

I need some help on what would be the best way to create rounded corner cells that can stretch vertically and horizontally.

What is happening;
The following code below allows me to stretch them both vertically and horizontally just fine, but they do not grow together. What I mean, is that the corners are before and after content, so if the cell on right has more content then, the cell on left does grow, but the corners are not positioned on the cell, so the corners do not stretch vertically with the cell, only with content.

How can I make this work?
I tired position relative on cell and then a position absolute on a div, and that did not work. Tried some vertical aligns, also tried 100% height, and min-height, so I'm not sure what to do at this point.

Copy and Paste this code into your html software and you'll see what I mean.

Thanks!

CSS

<style type="text/css">
 
	td.round:before{
		background:url(images/top_right.jpg) no-repeat top right;
		display:block;
		content:url(images/top_left.jpg);
 
	}
 
	td.round:after{
		background:url(images/bottom_right.jpg) no-repeat bottom right;
		display:block;
		content:url(images/bottom_left.jpg);
	}
 
	td.round{
		background:#f9f7f7;
 
	}
		#calendar_content{
			padding:5px;
			font-family:Verdana, Geneva, sans-serif;
			font-size:10px;
		}
 
</style>

Table

<table cellpadding="0" cellspacing="1" border="0" width="100%" style="background:#e2e2e2">
	<tr>
    	<td height="100%" class="round" >
 
        	<div id="calendar_content">
            	<a href="javascript:void(0)" class="calendar_link">Hello World</a>
            </div>
 
		</td>
        <td height="100%" class="round" >
        	<div id="calendar_content">
                <a href="javascript:void(0)" class="calendar_link">Hello World</a> <br />
                <a href="javascript:void(0)" class="calendar_link">Hello World</a> <br />
            </div>
        </td>
 
	</tr>
</table> 

I am back Smile

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 35 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Using tables to lay out your

Using tables to lay out your site like that went out of date ten years ago! Tables are a valid part of modern markup when used purely for their semantic purpose, namely to mark up tabular information, which you aren't doing.

Given that we espouse modern methods you are rather unlikely to find a lot of help around here unless you are willing to relearn your approach to web design.

Also, if you want to take the time to read our posting guidelines, you'll find out that we need rather more detail about your site than you have provided. I am sorry to sound snooty if I do, but I'm continually amazed at how many people post here without even reading our guidelines.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

humbleCSS
humbleCSS's picture
Offline
Regular
Last seen: 11 years 8 weeks ago
Timezone: GMT-4
Joined: 2009-03-12
Posts: 30
Points: 2

Ed Seedhouse wrote:Using

Ed Seedhouse wrote:

Using tables to lay out your site like that went out of date ten years ago! Tables are a valid part of modern markup when used purely for their semantic purpose, namely to mark up tabular information, which you aren't doing.

Given that we espouse modern methods you are rather unlikely to find a lot of help around here unless you are willing to relearn your approach to web design.

Also, if you want to take the time to read our posting guidelines, you'll find out that we need rather more detail about your site than you have provided. I am sorry to sound snooty if I do, but I'm continually amazed at how many people post here without even reading our guidelines.

Ed Seedhouse, definitely snooty, but i forgive you. =P. This is for a calendar, thus is why I need to know if it's possible to auto stretch the cells with the corners. It's my fault I did not mention, it was for tabular information. I tried using divs for this, and failed, also tried making tables with in the cells, that also failed, and I ran out of ideas.

I am back Smile

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 35 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

How about not worrying about

Crotchety please, not snooty. I am old and curmudgeonly as befits my advanced years, sonny.

How about not worrying about the flashy curved corners which people seem to think sexy but are really, in my opinion, rather 1990's. How do they help people use your site?

I'll agree that tables are appropriate markup for calendars, though.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

humbleCSS
humbleCSS's picture
Offline
Regular
Last seen: 11 years 8 weeks ago
Timezone: GMT-4
Joined: 2009-03-12
Posts: 30
Points: 2

Ed Seedhouse wrote:Crotchety

Ed Seedhouse wrote:

Crotchety please, not snooty. I am old and curmudgeonly as befits my advanced years, sonny.

How about not worrying about the flashy curved corners which people seem to think sexy but are really, in my opinion, rather 1990's. How do they help people use your site?

I'll agree that tables are appropriate markup for calendars, though.

lol. Well I'm really curious if this is even possible through css. I also tried relative and absolute but relative dose not work between cells and divs... I'm not to worried about the round corners, but this would be great. Every one likes flashy and shiny it makes the world go round.

I am back Smile

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 35 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

humbleCSS wrote:lol. Well

humbleCSS wrote:

lol. Well I'm really curious if this is even possible through css. I also tried relative and absolute but relative dose not work between cells and divs... I'm not to worried about the round corners, but this would be great. Every one likes flashy and shiny it makes the world go round.

No, everyone doesn't. Actually style has almost nothing to do with how much a site is used. Content decides almost all of that.

In general pretty well anything that can be done with html and old style markup can be done faster and more flexibly with valid semantic html styled by CSS. What can't be done with that (mightly little) can be done with a judicious use of javascript.

The CSS specification tells you how tables are supposed to behave. I would consult that.

At this point I must admit that I'm not even sure what you mean by the "this" in "if this is even possible". Re-reading your original post doesn't help me, but it is early here and I haven't had my coffee yet.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

humbleCSS
humbleCSS's picture
Offline
Regular
Last seen: 11 years 8 weeks ago
Timezone: GMT-4
Joined: 2009-03-12
Posts: 30
Points: 2

You are most definitely

You are most definitely correct, content is king. I just really strive to present content in a very polished manner.

Well the problem is that using the pesudo in css for round corners in cells works if the cells have a fixed height and, the content with in the cells of the table did not grow vertically.

Since you are a Guru I'm sure you know better than any one that the pseduo goes before and after content.

The Problem is; I'm going to use this square to simulate corners ->[]

Cell 1 Cell 2 Cell 3
[]////[]__[]////[]_[]////[]
_content__content___content
[]////[]__[]////[]__content
___________________[]////[]

Excuse the underscores, I'm just using them for spacing.

Cell 1 and 2 grow vertically as they should because cell 3 grows vertically, but cell 1 and 2 have the corner right after the content and not at the bottom of the cell.

Also I've thought of doing fixed, but then the image would not grow horizontally.

Also did tables with in the cells, and divs, and end up with same problem.

I think I might have to use javascript.

I am back Smile

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Ed Seedhouse wrote: Actually

Ed Seedhouse wrote:

Actually style has almost nothing to do with how much a site is used. Content decides almost all of that.

I'd have to disagree with you seed and agree with humble. Content is king, but if that content isnt organized on the page where it is easy to read and scan, I will not be coming back. eye candy is a huge aid when it comes to returning users. If was was given a choice of two sites that have the same exact content, one boring and the other fun and inviting, which one do you think most people would come back too?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 35 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

CupidsToejam wrote: I'd have

CupidsToejam wrote:

I'd have to disagree with you seed and agree with humble. Content is king, but if that content isnt organized on the page where it is easy to read and scan, I will not be coming back. eye candy is a huge aid when it comes to returning users. If was was given a choice of two sites that have the same exact content, one boring and the other fun and inviting, which one do you think most people would come back too?

I am willing and frequently do go to some horribly designed sites because they have content I want and need. They are a pain but I go back again and again. A lot of chess sites are just terribly designed, but they have chess content and I want that so I go back.

I'll agree that bad design can make decent content inaccessible and drive users away. But without decent content the best design in the world is pointless. Contrawise in my experience people will put up with bad design to get the content they really want.

Sites rarely have the same content, except perhaps newspaper sites but they are uniformly awful.

You cited no evidence for your claim that "eye candy is a huge aid when it comes to returning users" and in it's absence I continue to assume that most people are a lot like me as users and think your claim is just wrong.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

You missed my point

You missed my point completely, no surprise. We are all entitled to own opinions.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 35 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Of course you are always

Of course you are always welcome to disagree and to say so. I've read your article again and if that wasn't the point I can't really understand what your point was.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

(No subject)

humbleCSS
humbleCSS's picture
Offline
Regular
Last seen: 11 years 8 weeks ago
Timezone: GMT-4
Joined: 2009-03-12
Posts: 30
Points: 2

lol, love the baby crying,

lol, love the baby crying, and I love ed's signature (I'm with you on that). But honestly, can this be done with out using javascrtipt?

I am back Smile

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 35 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

humbleCSS wrote:lol, love

humbleCSS wrote:

lol, love the baby crying, and I love ed's signature (I'm with you on that). But honestly, can this be done with out using javascrtipt?

Rounded corners is expected to be part of CSS3 I believe, but most browsers don't implement it except as platform specific properties such as -moz-border-radius for firefox. Camino and Opera provide one too, I believe, but each is different. And I'm petty sure IE doesn't.

Really I think it's best considered a behaviour and best done with javaxcript myself. It can be a progressive enhancement since folks who have JS turned off abd don't see rounded corners will probably never miss them.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.