I'm looking at complimenting my BS in CSc with a BA (or MFA, if I have to) in Graphic Design, but that's just me and what I love to do (web development, with a passion for CSS-design). I wouldn't think a degree in Graphic Design is any kind of income enhancing achievement.
I am sure there is a solution out there, there's pretty much a CSS alternative to every table-based layout I've seen.
There is stuff like http://www.bluerobot.com/web/layouts/, or http://www.csscreator.com/version2/pagelayout.php (which I've never used).
Basically, the key to a CSS based layout is liberal use of floats or absolute positioning. I tend to prefer floats because the render better across a wider range of browsers.
The problem you desribe of having the column with the most content determine the height of all columns is a common one. From my experience, I have found that using floats within floats will solve your problems.
<div id="container"> <div id="sidebar"><p>this is content, it could be long or short</p> </div> <div id="content"> <h2>This is the main area</h2> <p>This is my content area, it could be longer the side column or shorter</p> </div> </div>
This hasn't been tested and isn't guaranteed to work, I just know that I've done something similar to the above. IE5 actually renders floats and stuff pretty well, that's why I like them so much.
Sorry to break it to you, but there are thousands of web developers who can create table-less layouts. It's just a matter of learning how to do it. I will admit it is a difficult transition to make coming from a table-centric background (we all have come from that background), but once you learn the methods to create a 2-column or 3-column layout exclusively with containers (div) and CSS, you will not want to touch a table-based layout again.
> then you're either too young or too naive to remember what old table based layouts used to look like
Actually I used to create layouts exclusively with tables, it was the norm and it was what worked. I just happen to think table based layouts create bloated HTML and end up binding your content to a specific layout. With a CSS based layout, you can change the entire look and feel of your site with one file.
> I also needed it to work back to IE5
All my CSS based layouts look the same in IE5 as they do in IE6, Mozilla, etc. All you need to know is the hacks to put in your CSS to get it looking good.
Re:Good review, but...
on
The CSS Anthology
·
· Score: 2, Insightful
Yeah, but 2/3 of those sites are built on table-based layouts (old school methods). If you're reading a CSS book or already know CSS (for creating layouts), then you're not doing table-based layout.
Not to raise the hair on your back, but I wouldn't call any of those sites "good design". While they might be very usable and well-structured (not the markup), it doesn't take long to realize that they weren't created by somebody with a background in graphic design. Just compare to any of the sites in the CSS Vault.
I just took a closer look at the Open Source Web Design site, I like that idea. I can't help but think that they need to implement one of their templates on their own site.
CSS is not annoying, knowledge must be acquired
on
The CSS Anthology
·
· Score: 2, Informative
As folks have pointed out, you can set a class for blue text or you can use the comma-separated list to apply the color.
What people haven't mentioned (I didn't see anyway) is the fact that you can apply multiple classes to a single element. So you can have your "blue" class for blue colored text (although that is a very bad class name...think about if you change the color to green). So you can do....info{
color:blue; }.att{
font-weight:bold; } a{
text-decoration:none; } div#back{
border:1px solid red; }
Then in your HTML...
<div id="back" class="info"> <p>this is some text</p> </div> <p class="info att">This desrves special attention, it should be bold and blue.</p>
The ability to add multiple classes to a single element is awesome!
Re:Good review, but...
on
The CSS Anthology
·
· Score: 4, Insightful
I don't know about that. Myself being more skilled in the programming area, I find I have a very difficult time creating a site that I would consider "professional looking". I mean, I love CSS and have jumped head first into creating CSS-based layouts several years ago. My problem however, is not having the "design eye" that gives folks the ability to create such beautiful designs that you often see in CSS Zen Garden.
Sure, I *want* to create a well designed site, but until I get that knowledge (school) it just ain't going to happen (not for me, anyway).
> I work quite comfortably on both sides of that fence
It's easy to say that about yourself, sure I even would try to claim that one. But when I look at sites I have created and compare them to sites done by a *real* graphic designer (web designer), there *is* a huge difference.
I'd consider myself a professional programmer and an amatuer designer at best.
You have raised some interesting thoughts which I haven't given much consideration in the past, the idea of the Content Type. Serving up a content type of xhtml+xml for XHTML documents makes sense from a technical point of view, but as you pointed out leads to some very undesirable effects in the browser (as does the declaration atop the page).
I appreciate this conversation and the opinions you've shared, I am learning that not everyone is a supporter of the W3C and their current direction (this is new to me). I am thinking I've had a jaded view through the last year or two because I'm a daily visitor to sites such as Mezzo Blue, Stop Design, A List Apart, etc...
I'd equate it to listening to Air America Radio exclusively or using Fox News as your news source, you become a little out-of-touch with what's really going on.
To me, what the W3C has made clear by depricating certain HTML attributes (take the "target" for example) is that from an usability perspective, there is no gain in opening a page in a new window. Furthermore, for many users/browsers the idea of opening a page in a new window is utterly meaningless (think disabilities).
Sorry I just don't agree that the XHTML standard is bad. I take it that you don't consider the ESPN and Red Hat (there are many more) sites either "real-world" enough or they are "doing it wrong"?
Consider the HTML 4 spec, which is syntactically difficult to decipher. After writing XHTML pages for several years now (thanks, I'm not a newbie to the web standards world) it's impossible to go back to HTML 4 and have it actually make any sense. For every open tag, you need a closing tag, except if it's horizontal line or a line break or an input or a meta tag or an image or...
It's just ugly and difficult to parse. By using XHTML, any XML parser can read a document. It's simple, if there's an open tag, close it. If there's a stand-alone tag, it better have a self-closing end. That is just one small piece of what I like about XHTML.
Insisting that if a webpage meets the XHTML Strict spec, it doesn't work in IE is just pure ignorance. Yes, typically developers have to put a little extra work into their CSS to get their pages looking as good in IE as they do in Mozilla/Firefox/Netscape/Opera/Safari/etc... I don't write webpages to look good in IE, I write webpages to meet a standard (that happens to look good in most browsers), then I tweak it to look good in IE. The only thing that's broken in that equation is IE, but we are forced to deal with their inadequecies.
I don't see how MS inventing their own standards is any different than the W3C making web standards. It just so happens that everyone but MS has adopted these standards and they actually make more sense from a semantics perspective.
BTW, you may want to check your sources since Anne van Kesteren has a XHTML Strict compliant site.
Sure HTML 4 is a standard, but it's extremely loose and does not generally produce good markup. On the other hand, there is some great sites written with the XHTML standard in mind, but because old habits are hard to break, you see them sticking with the HTML 4 DOCTYPE. A good example of this would be ESPN (espn.com), Yahoo and Netflix (netflix.com).
Meeting the XHTML Transitional standard is a great thing to do, and if you cannot break away from attributes such as "target", "border", "name", etc.. Then stick with Transitional. There are really just some minor differences between the Transitional and Strict standard, but I still think that those differences are important and make sense from an accessibility point of view.
I have no idea what sites you would deem "real-world" enough to prove to you anything, but Wired Magazine (wired.com) has been standards-compliant for a long time. Red Hat (redhat.com) has recently switch to XHTML layout that looks great. The widely used Blogspot (blogspot.com) is fully XHTML 1.1 Strict compliant.
Show me a "real-world" site that does XHTML 1.1 correctly. Are you trying to imply that the thousands of XHTML Strict websites out there produced by web/graphic designers, web developers, bloggers, and those who are supporting the standards are doing something wrong? I've never heard such skepticism before over web standards. I suppose you wouldn't have that position if you had a disability which hindered your ability to use a computer, like maybe not being able to move a mouse?
I don't know about broken, I've never looked at it in that way. For me, the standards are perfectly clear and separate content (XHTML) from presentation (CSS) from user-interactive (DOM). If you take a webpage that's written to the Strict spec, and render the HTML at the simplest level (text-based) you have a perfectly legible webpage by any browser/user. I don't see how that could have been possible without the work of the W3C and the current XHTML 1.1 Strict specification.
Javascript is here to stay, I don't agree that using Javascript in itself is a problem or a vulnerability. Allowing Javascript to alter the DOM of a website at a different domain name than the site the Javascript is running on *is* a problem.
You've got to think about accessability when making links, imagine Javascript turned off. Does it still work? Imagine using a screen reader, can it follow the link? The HREF should be a valid URL to the page you are trying to display, if Javascript is turned on, you override the behavior by attaching an event to the anchor in question.
There is a striking resemblence to the cross-browser "vulnerability" discovered by the same group a few months ago. Remember this?
Looks like they tweaked their Javascript to take advantage of a similar problem with the Javascript model.
Well since the target attribute of the anchor link is not part of the XHTML 1.1 Strict standard, web developers who *are* actually concerned about standards are required to use Javascript to perform the pop-up behavior.
By using standards-based design and manipulating the DOM via Javascript, we can accomplish anything. No need for clunky the "onclick" or even the outdated "target" attributes.
Maybe the car is so light that it would just bounce away. In fact maybe they could install some super rubber bumpers so that it would guarantee a bounce... I think somebody already thought of the NERF car.
Slashdot Mirror
I'm looking at complimenting my BS in CSc with a BA (or MFA, if I have to) in Graphic Design, but that's just me and what I love to do (web development, with a passion for CSS-design). I wouldn't think a degree in Graphic Design is any kind of income enhancing achievement.
I am sure there is a solution out there, there's pretty much a CSS alternative to every table-based layout I've seen.
e ft;t h:400px;
There is stuff like http://www.bluerobot.com/web/layouts/, or http://www.csscreator.com/version2/pagelayout.php (which I've never used).
Basically, the key to a CSS based layout is liberal use of floats or absolute positioning. I tend to prefer floats because the render better across a wider range of browsers.
The problem you desribe of having the column with the most content determine the height of all columns is a common one. From my experience, I have found that using floats within floats will solve your problems.
The basic idea would be something like...
#container{
float:left;
}
#sidebar{
float:l
width:200px;
}
#content{
float:left;
wid
}
<div id="container">
<div id="sidebar"><p>this is content, it could be long or short</p>
</div>
<div id="content">
<h2>This is the main area</h2>
<p>This is my content area, it could be longer the side column or shorter</p>
</div>
</div>
This hasn't been tested and isn't guaranteed to work, I just know that I've done something similar to the above. IE5 actually renders floats and stuff pretty well, that's why I like them so much.
> but sometimes css doesn't cut it
Sorry to break it to you, but there are thousands of web developers who can create table-less layouts. It's just a matter of learning how to do it. I will admit it is a difficult transition to make coming from a table-centric background (we all have come from that background), but once you learn the methods to create a 2-column or 3-column layout exclusively with containers (div) and CSS, you will not want to touch a table-based layout again.
> then you're either too young or too naive to remember what old table based layouts used to look like
Actually I used to create layouts exclusively with tables, it was the norm and it was what worked. I just happen to think table based layouts create bloated HTML and end up binding your content to a specific layout. With a CSS based layout, you can change the entire look and feel of your site with one file.
> I also needed it to work back to IE5
All my CSS based layouts look the same in IE5 as they do in IE6, Mozilla, etc. All you need to know is the hacks to put in your CSS to get it looking good.
Yeah, but 2/3 of those sites are built on table-based layouts (old school methods). If you're reading a CSS book or already know CSS (for creating layouts), then you're not doing table-based layout.
Not to raise the hair on your back, but I wouldn't call any of those sites "good design". While they might be very usable and well-structured (not the markup), it doesn't take long to realize that they weren't created by somebody with a background in graphic design. Just compare to any of the sites in the CSS Vault.
Or if you want a similar theme, check out Red Hat or Suse (Novell).
I just took a closer look at the Open Source Web Design site, I like that idea. I can't help but think that they need to implement one of their templates on their own site.
As folks have pointed out, you can set a class for blue text or you can use the comma-separated list to apply the color.
.info{ .att{
What people haven't mentioned (I didn't see anyway) is the fact that you can apply multiple classes to a single element. So you can have your "blue" class for blue colored text (although that is a very bad class name...think about if you change the color to green). So you can do...
color:blue;
}
font-weight:bold;
}
a{
text-decoration:none;
}
div#back{
border:1px solid red;
}
Then in your HTML...
<div id="back" class="info">
<p>this is some text</p>
</div>
<p class="info att">This desrves special attention, it should be bold and blue.</p>
The ability to add multiple classes to a single element is awesome!
I don't know about that. Myself being more skilled in the programming area, I find I have a very difficult time creating a site that I would consider "professional looking". I mean, I love CSS and have jumped head first into creating CSS-based layouts several years ago. My problem however, is not having the "design eye" that gives folks the ability to create such beautiful designs that you often see in CSS Zen Garden.
Sure, I *want* to create a well designed site, but until I get that knowledge (school) it just ain't going to happen (not for me, anyway).
> I work quite comfortably on both sides of that fence
It's easy to say that about yourself, sure I even would try to claim that one. But when I look at sites I have created and compare them to sites done by a *real* graphic designer (web designer), there *is* a huge difference.
I'd consider myself a professional programmer and an amatuer designer at best.
You have raised some interesting thoughts which I haven't given much consideration in the past, the idea of the Content Type. Serving up a content type of xhtml+xml for XHTML documents makes sense from a technical point of view, but as you pointed out leads to some very undesirable effects in the browser (as does the declaration atop the page).
I appreciate this conversation and the opinions you've shared, I am learning that not everyone is a supporter of the W3C and their current direction (this is new to me). I am thinking I've had a jaded view through the last year or two because I'm a daily visitor to sites such as Mezzo Blue, Stop Design, A List Apart, etc...
I'd equate it to listening to Air America Radio exclusively or using Fox News as your news source, you become a little out-of-touch with what's really going on.
To me, what the W3C has made clear by depricating certain HTML attributes (take the "target" for example) is that from an usability perspective, there is no gain in opening a page in a new window. Furthermore, for many users/browsers the idea of opening a page in a new window is utterly meaningless (think disabilities).
Sorry I just don't agree that the XHTML standard is bad. I take it that you don't consider the ESPN and Red Hat (there are many more) sites either "real-world" enough or they are "doing it wrong"?
Consider the HTML 4 spec, which is syntactically difficult to decipher. After writing XHTML pages for several years now (thanks, I'm not a newbie to the web standards world) it's impossible to go back to HTML 4 and have it actually make any sense. For every open tag, you need a closing tag, except if it's horizontal line or a line break or an input or a meta tag or an image or...
It's just ugly and difficult to parse. By using XHTML, any XML parser can read a document. It's simple, if there's an open tag, close it. If there's a stand-alone tag, it better have a self-closing end. That is just one small piece of what I like about XHTML.
Insisting that if a webpage meets the XHTML Strict spec, it doesn't work in IE is just pure ignorance. Yes, typically developers have to put a little extra work into their CSS to get their pages looking as good in IE as they do in Mozilla/Firefox/Netscape/Opera/Safari/etc...
I don't write webpages to look good in IE, I write webpages to meet a standard (that happens to look good in most browsers), then I tweak it to look good in IE. The only thing that's broken in that equation is IE, but we are forced to deal with their inadequecies.
I don't see how MS inventing their own standards is any different than the W3C making web standards. It just so happens that everyone but MS has adopted these standards and they actually make more sense from a semantics perspective.
BTW, you may want to check your sources since Anne van Kesteren has a XHTML Strict compliant site.
Sure HTML 4 is a standard, but it's extremely loose and does not generally produce good markup. On the other hand, there is some great sites written with the XHTML standard in mind, but because old habits are hard to break, you see them sticking with the HTML 4 DOCTYPE. A good example of this would be ESPN (espn.com), Yahoo and Netflix (netflix.com).
Meeting the XHTML Transitional standard is a great thing to do, and if you cannot break away from attributes such as "target", "border", "name", etc.. Then stick with Transitional. There are really just some minor differences between the Transitional and Strict standard, but I still think that those differences are important and make sense from an accessibility point of view.
I have no idea what sites you would deem "real-world" enough to prove to you anything, but Wired Magazine (wired.com) has been standards-compliant for a long time. Red Hat (redhat.com) has recently switch to XHTML layout that looks great. The widely used Blogspot (blogspot.com) is fully XHTML 1.1 Strict compliant.
Show me a "real-world" site that does XHTML 1.1 correctly.
Are you trying to imply that the thousands of XHTML Strict websites out there produced by web/graphic designers, web developers, bloggers, and those who are supporting the standards are doing something wrong? I've never heard such skepticism before over web standards. I suppose you wouldn't have that position if you had a disability which hindered your ability to use a computer, like maybe not being able to move a mouse?
I don't know about broken, I've never looked at it in that way. For me, the standards are perfectly clear and separate content (XHTML) from presentation (CSS) from user-interactive (DOM). If you take a webpage that's written to the Strict spec, and render the HTML at the simplest level (text-based) you have a perfectly legible webpage by any browser/user. I don't see how that could have been possible without the work of the W3C and the current XHTML 1.1 Strict specification.
Javascript is here to stay, I don't agree that using Javascript in itself is a problem or a vulnerability. Allowing Javascript to alter the DOM of a website at a different domain name than the site the Javascript is running on *is* a problem.
You've got to think about accessability when making links, imagine Javascript turned off. Does it still work? Imagine using a screen reader, can it follow the link? The HREF should be a valid URL to the page you are trying to display, if Javascript is turned on, you override the behavior by attaching an event to the anchor in question.
This excellent article on ALA should answer any pending questions on the issue.
BTW, the target attribute of anchors was dropped between XHTML 1.1 Transitional and XHTML 1.1 Strict.
Maybe it depends on your OS, the vulnerability worked in my Firefox 1.0 on my Windows XP and my Linux (Slackware).
There is a striking resemblence to the cross-browser "vulnerability" discovered by the same group a few months ago.
Remember this?
Looks like they tweaked their Javascript to take advantage of a similar problem with the Javascript model.
Well since the target attribute of the anchor link is not part of the XHTML 1.1 Strict standard, web developers who *are* actually concerned about standards are required to use Javascript to perform the pop-up behavior. By using standards-based design and manipulating the DOM via Javascript, we can accomplish anything. No need for clunky the "onclick" or even the outdated "target" attributes.
Maybe the car is so light that it would just bounce away. In fact maybe they could install some super rubber bumpers so that it would guarantee a bounce... I think somebody already thought of the NERF car.