14 replies [Last post]
bluesquirel
Offline
newbie
Last seen: 16 years 46 weeks ago
Joined: 2005-01-10
Posts: 4
Points: 0

I always look a www.cssvault.com for inspiration and to see what the latest trends are in CSS Based design and it seems clear that a fixed width site is the most popular format.

I look at some of these sites and trt to work out what the stylesheet could possibly be but I always seem to fail to recreate anything similar.

Just how do you get these sharp cutting edge layouts just using CSS.

May seem like a vague question but a nudge in the right direction would be a great help. I understand the principals and basics of CSS but have trouble transposing it into design layout.

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 14 years 23 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

How do they creat these layouts

that is a pretty vague question. my answer would be to simply continue working on re-creating the sites.

look to www.alistapart.com for some good tips.

and www.csszengarden.com to see just how far you can push the css enveloppe with the same html

hth

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How do they creat these layouts

I would be careful here fixed width is probably the most popular design but I would suggest that that is because to a certain extent it is easier to get right than a fluid design, so I would reserve a certain amount of cynicism for some of the efforts one finds.
As for csszen garden, I long ago stopped visiting the site after the initial wow factor had died off, ( and became fed up waiting for huge graphic files to download, which the artist couldn't be bothered to optimise!)and I became aware of the inherit flaw in it's philosophy. I think that it has run it's course and I worry that it actually encourages the belief that web site design is just about graphic design rather than compliant, semantic coding. The mediums purpose is to convey information mainly of a written form; first in a designers duty is to ensure that 'standards' and correct coding are followed, that the information is conveyed in a manner that we can absorb using transposed typographical techniques. When that is achieved we can worry about making it look "pretty" after all a properly designed site is supposed to work at the most basic level and that is without any CSS styling in a text based context.
We all love those stunning sites but we must remember what were trying to achieve and not let graphic design rule over basic design it's there to compliment and enhance not dictate.
Thus ends the homily Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wisbin
Offline
Enthusiast
Netherlands
Last seen: 17 years 5 weeks ago
Netherlands
Joined: 2004-10-28
Posts: 71
Points: 0

How do they creat these layouts

If I understand you right, I think you could start looking at those pretty designs as building blocks. Concentrate on the outer divs, that hold and guide the inner elements. See how they are layed out and practice some (rebuild it for practice and dont mind the inner stuff).

Then turn to the content and see what elements they use for menu's and headings or those nice little listings of thumbs, data and text.

semantically there are different ways to achieve the common inner lay-outs, you could use LISTS (UL) or DIVS as parent containers for example and float left and right or use margins to position cascading elements.

Most of the time the "pretty" sites are complex to layout without tables, but thats just because we have a lot to learn still. Wink well.. I do.

check out the yahoo redesign, but most of all, just do it and hang out here Smile

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

How do they creat these layouts

Hugo

Quote:
We all love those stunning sites but we must remember what were trying to achieve and not let graphic design rule over basic design it's there to compliment and enhance not dictate.

I'm with you totally on this one. Some of these sites seem to have lost their way from their original purpose. Most of them are prefixed with 'css' but they are deeply entrenched in graphic design. The visuals can be important - to grab attention of sighted visitors, but as you say the 'pretty piccies' should not be the main/only factor.

PS like the new signature. It will be interesting to see if it stops you having to point out doctype and validation many times whenever you join the forum Wink

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How do they creat these layouts

Lorraine wrote:
PS like the new signature. It will be interesting to see if it stops you having to point out doctype and validation many times whenever you join the forum


I fear not, it's a bit akin to shutting the stable door after the horse has bolted, it's something that was discussed ages ago and the hope was that in creating the 'How To' section and populating it with some guides that people would maybe read them before posting :roll: oh well Smile
I am beginning to sound a bit like a stuck record though.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 14 years 23 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

How do they creat these layouts

i agree that the zengarden seems to be a graphics design show but i think the message that it's still trying to get across is that the html code in itself never changes... users only submit the css.

i think that's the "cool" factor here. you should be coding your site semantically(sp?) and standard and THEN use css to position and pretty everything up.

did i make sense on that? UGh! i'm having a hard time keeping my own brain cells with this baby in here Laughing out loud he/she is not only sucking up my air and food but my brain cells as well sometimes Laughing out loud

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

How do they creat these layouts

Ha! - you can blame me for making Hugo put that in his sig. It will save him at least an hour a day in typing, I figure.

Regarding the CSS Zen Garden site- they quite clearly say:

Quote:
Participation
Graphic artists only please. You are modifying this page, so strong CSS skills are necessary. . .
Despite the name, it was not about the CSS - it was about the graphics. CSS liberated graphic design allowing layers and absolute positioning. However, other than the Fahrner Image Replacement technique, there was nothing there that was cutting edge as far as the CSS itself goes. The FIRT has now been supplanted by other methods although the essential principle remains. (See http://www.mezzoblue.com/tests/revised-image-replacement/ and http://www.stopdesign.com/articles/replace_text/ for discussion)

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How do they creat these layouts

Sounds like your having fun there Karinne Smile

I think you made sense :?

My problem with zengarden is perhaps that it perpetuates something of a myth that css can't cope with complicated graphical layouts and invites graphical designers to then come along and smother a layout in heavy graphic elements whilst possibly loosing site of the real beauty of semantic standards accessible coding and creates the impression that for CSS and web design to be worthy one has to pay lip service to graphics before pure design/layout.

I also understand the opposing view and reason for the creation of the site though.

Now I wonder whether I'm making any sense Laughing out loud

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How do they creat these layouts

David, I won't have anything left to contribute now, thanks for that Laughing out loud

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 14 years 23 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

How do they creat these layouts

[soooo off-topic]

Hugo wrote:
Sounds like your having fun there Karinne Smile

fun eh? hmmm... lack of sleep, wobbling instead of walking, nothing fits anymore... even my maternity clothes are getting tighter... oh yes... i'm having loads of fun Shock ahhh.... only 6 weeks to go Laughing out loud

[/soooo off-topic]

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

How do they creat these layouts

Wow, Karinne, didn't realize you had a croissant in the oven. You are really:

body {
display:pregnant;
weight:increasing;
position:supine;
feet:swollen;
brain:fogged;
bladder-collapse:collapse;
}
#baby {
visibility:hidden;
position [we hope]:vertex;
float:everywhere;
border:1cm solid pink;
voice-family:shrill, piercing;
genes:inherit;
amnion:transparent;
}
...
<body>
  <div id="baby>
  </div>
</body>

DE (I crack myself up) Laughing out loud

PS bluesquirel - sorry for hijacking your thread - but it was in a good cause

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 14 years 23 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

How do they creat these layouts

now that is hilareous!!! Laughing out loud Laughing out loud I'll have to keep that one handy Wink

Well done DE!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How do they creat these layouts

Laughing out loud

Yes sorry for hijacking the thread bluesquirel.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

How do they creat these layouts

Laughing out loud Laughing out loud Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies