stylesheet layout (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

lilblackgirl -> stylesheet layout (3/10/2004 11:14:32)

is layout a user's preference or is there one that that actually functions better?

this is what i mean (and thanks to gorilla for the examples):

like this:
body { background-color: #F0FFF0; color: Black; border: 0px; margin: 0px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}

or like this:
#menu {
position: absolute;
width: 150px;
top: 180px;
text-align: left;
font-size: small;
}

either line by line or all on the same line.

thanks,
Lil



Giomanach -> RE: stylesheet layout (3/10/2004 11:27:44)

Depends on your preference and how you find it easier to read stylesheets etc. The top example you have given will shave of bandwidth, but is also harder to read by the human eye. The second of you examples will work as well, but it will use that little bit more bandwidth. There's no difference it just depends on which one you find easiest to read

HTH

Dan



c1sissy -> RE: stylesheet layout (3/10/2004 12:16:42)

Hi lilblackgirl
I use your second example myself. I find that it is easier for me to read by doing it this way.

also I think if I were having trouble with something and wanted someone to read my code, I think that the second way is better, but that is only my opnion, and you do what is best for you when you set up your style sheets.

Take care!



lilblackgirl -> RE: stylesheet layout (3/10/2004 13:30:30)

so it's purely a matter of preference.

Yeah, c1sissy, i prefer the latter of the two as it's just easier to read and update and find than solid lines.



Nancy -> RE: stylesheet layout (3/10/2004 13:49:58)

I know I certainly prefer the second method.

I also don't know why it would make any difference as to bandwidth used though.

Nancy



d a v e -> RE: stylesheet layout (3/10/2004 14:02:22)

the more lines the more extra bytes - was it a byte a character or something?

think about it, in a long stylesheet of 50 lines if ran all those lines together like above you might save anything like 0.5k.
as far as i understand it because the style sheet is cached it's only downloaded once (but i can't swear to this) so you'd be better at looking at your code or - a lot easier - your pictures. i'm not saying it's not worth doing but the savings are minimal IMO, at least for the general developer. it's also a lot easier to go back and edit the style sheet after as well when it's laid out line by line



lilblackgirl -> RE: stylesheet layout (3/10/2004 15:09:37)

Well, and I would imagine that the latter would be the preferred method for you hardcore CSS users/table haters (which I'm quickly becoming).

Will higher byte sizes take longer to load because there are more lines to read or is it pretty much just instantaneous regarless of file size (within reason)?

Regardless, thanks all for the comments.



gorilla -> RE: stylesheet layout (3/10/2004 15:35:50)

Well its nice to be thanked :-) Thank you in return.

Unless your stylesheet is embedded, (in which case you shave as much off the page as you can., ) it really doesn't have much practical impact. Same goes for whether you use shorthand for colour notations or not.

Take a look here

http://www.cinnamon.nl/

These people are quite literally world famous, I break that commandment about not coveting every time I think of them. Their styling is "huge", and quite complex. Loads pretty fast no?

Each line break is an extra character - IMO it is a good idea to minimise the size of everything you can to spped up a site. But you've actually answered your own question.

"Within reason"

I like to minimise bandwidth as much as possible so I spend some time shaving of a sliver here or there. Images are the worst offenders.

As a practical tip:

I take a copy of my styles and paste them into a text editor. I then add line numbers to that copy. Next I make notes something like "lines 45 -58 do this and are dependent on that"

"lines 12-15 inherit from ......" and so on. makes life a lot easier in the long run.

Sound like a lot of fuss doesn't it? - It only takes a couple of minutes and regularly saves me hours tracking down whatever dimwitted thing it was I did yesterday, five minutes ago, or a few months ago.

A lot of "webmastery" is sitting down and saying

"its a computer. Impossible though it maybe to believe the fact is that it is even better at doing thoroughly stupid things than I am, and its a hell of a lot more stubborn too."

So i take notes :-)

Final thoughts Occam's razor applies big time here - the simplest solution is always the best.



d a v e -> RE: stylesheet layout (3/10/2004 15:36:30)

more lines takes up more filespace, but it wouldn't generally be particularly siginificant to most sites i wouldn't have thought. I certainly wouldn't bother changing to the all in one line approach. maybe someone else knows of a circumstance where it would make a signifiant impact?



gorilla -> RE: stylesheet layout (3/10/2004 15:42:03)

LOL Dave - the old posting simultaneously thing:

Where I know that the file is already large, or the stylesheet is embedded, or if I know that a large proportion of visitors are likely to be on bad quality slow dial up lines.

Other than that see above about "Uncle Billy."[:)]



lilblackgirl -> RE: stylesheet layout (3/10/2004 15:44:24)

So, it does matter. It may not be visible to me, but it may save those fractions of a second for someone else.

And Gorilla, while I've got you here (you didn't think you'd get away that easy), i've been messing with your work from the CSS post that you displayed the different page layouts and so forth. I'm still a big table user and pretty much use CSS for font color and minute little things. Is there a trick to transitioning from what I'm doing to completely building a site from CSS? I'm willing to sit down and just start coding by hand (using your examples to learn from), but do you have any suggestions for things i should look out for, stay away from, etc?

Oh, and <fieldset> and <legend> . . . WAY COOL! [:D] Wish I'd known that existed before now. God, i feel like such a newbie.

thanks,
Lil



gorilla -> RE: stylesheet layout (3/10/2004 16:04:02)

Yup - that's the trap the some many "designers" fall into they forget they're working with code that that has to run goodness only knows where, and on goodness only knows what. Delighted to see you don't want to fall into it.

The transitioning: well lets start by saying again the professional attitutde IMO is to reach for the tool that works.

Tables are great if you must have absolute pixel level positionig for everything for all conceivable circumstances. They're a powerful thing but they have disadvantages too.

In a nutshell I suppose they give you a grid.

The big "no no" is to nest and nest and nest.

Try taking something complex with nested tables and simplifying that using (say) stacked tables instead.

Then try doing something similar using css. This time what you're doing is slotting boxes down on a flat surface and sliding 'em around.

It is not that it is any more or less difficult - it isn't - but it is damned fiddly just as tables where when you started to learn them.

I'll be putting up a new layout hopefully this weekend.

Got to run now - that's the third time a head has popped around the door.

I alway suggest that people get two things:

The specs fron w3c asre avialable for download in a variety of formats - they're "the bible"

Elizabath Castro's book: - HTML for the World Wide Web, Fifth Edition with XHTML and CSS: Visual
QuickStart Guide

http://www.cookwood.com/html5ed/

is great - she shows the "old" and the "new" ways side by side. It is the book I suggest to everyone. I have a copy in each place I work and refer constantly.

Oops Gustav has come in and is looking ominously at his watch and even more ominously at me. Bye for now ......






Peppergal -> RE: stylesheet layout (3/10/2004 16:41:07)

quote:

you hardcore CSS users/table haters


LOL



lilblackgirl -> RE: stylesheet layout (3/10/2004 16:44:20)

I want to make sure i understand your terminology.
Nested tables=tables within tables?
stacked tables=?

So, basically, learn CSS like i learned HTML, by putting my nose to the grindstone and making things work. I'm going to stop off on the way home from work and pick up the book. It looks like a great resource.

all hail the supreme overlord! thanks for the help and i'll probably start bothering all of you with stupid questions pretty soon. so please bear with my ignorance [&:]



Nancy -> RE: stylesheet layout (3/10/2004 17:23:24)

Stacked tables - one on top of each other, like a stack of books etc

for example - the header area can be one table, underneath another new table for the main content, and underneath it a new table for the footer area.

Instead of having one main table with the above mentioned areas inside of it with nested tables.

Make sense?

Nancy



lilblackgirl -> RE: stylesheet layout (3/10/2004 18:03:16)

yup, complete sense. I just never heard of them referred to that way. Guess i just never knew they had an officail name.



gorilla -> RE: stylesheet layout (3/11/2004 3:06:03)

Saved by Nancy's clear explanation, thanks Nancy. That idea of nesting is very important. You'll often find in css layout - well all layout - that what you do is create a box , typically with say just borders and backgrounds to hold the boxes that actually have the content in place place on the screen.

Nesting Example:

<div>
<div><p> Gorillas are like birds they live in nests</p> </div>
</div>


Here's another example for a page that would have lots of thumbnail images in it:

<div id="boxside">
<div><br/><img></div><br/>
<div><br/><img></div><br/>
<div><br/><img></div><br/>
<div><br/><img></div><br/>
<div><br/><img></div><br/>
<div><br/><img></div><br/>
<div><br/><img></div><br/>
<div><br/><img></div><br/>
<div><br/><img></div><br/>
<div><br/><img></div><br/>
<div><br/><img></div><br/>
<div><br/><img></div><br/>
<div><br/><img></div>
</div>

Ask away - that why we're here :-)

And yes quite deifintely, I really like that attitude, nose to the grindstone and make it work - it's actually a fair bit of fun too - you can add a sparkle - your own sparkle to everything you touch. You'll probably spend little while swearing at it, then you'' swear by it and wonder how on earth you ever managed without it.

You're timing good btw - those who've got a real grasp of CSS2 now - will be very well placed for CSS3 - yes that's still some time away. but I'm drooling at some of the possibilities.

<added> Ah, yes, I've toddled along to your site, I remember it, did I critique it for you here on outfront or did I just look up your profile after answering a question?

Can't remember, need more coffee! Anyway i remember liking it a lot. And your portfolio too. I get enthusiatic about people who think about navigation and produe nice clear navigation structures. I rather suspect you're going to have a lot of fun :-) </added>



c1sissy -> RE: stylesheet layout (3/11/2004 7:08:39)

quote:

Elizabath Castro's book: - HTML for the World Wide Web, Fifth Edition with XHTML and CSS: Visual
QuickStart Guide


lilblackgirl, this is a good book, I'm reading it right now. I know you will enjoy it.



lilblackgirl -> RE: stylesheet layout (3/11/2004 9:23:18)

Gorilla, thanks, that means a lot to know that someone like yourself appreciates something that i've done. I think the current layout i'm using may be going away for two reasons.
1. I usually can't go longer than about 6 months without completely changing the layout and format of my site (see the end of the 'webwork' section at the numerous iterations of my site), and
2. About 2 months ago, i started messing around with some CSS (imagine that) that i ganked from a european sports site that showed me how to format navigation using only CSS. Now, it's chock full of tables still (it's so hard to get away from them once you get comfortable with them), but I'm going to make an effort to do away with most of them and try to build the site strictly in CSS. I know i've got my work cut out for me.

Ok, you said to ask away, so could you take the example you posted here and show me the finished product (if it's possible), so i can see the code next to what it looks like?

That kind of leads into my next comment which is a response to c1sissy. Yes, i picked up the book yesterday and got thru chapter 10. I couldn't put it down! Even going through the basics uncovered some things for me and the author really has a way of making things simplistic and easy to understand. I've read a billion tuts on HTML and CSS and in one night, she managed to explain a bunch of things i didn't understand or was to embarassed to ask about. I'm realizing that CSS is an amazing and versitile tool, but i'm also thinking that there seems to be a lot of unneeded repetition to cover little things. For instance, why use the <div> tag when simple HTML could just as easily do the same thing? And i haven't completely grasped the real purpose of thngs like the <div> tag or the <id> tag (it is a tag, right? - see, i'm confused). Anyway, i know it'll take a lot more reading and just outright testing to make sense of it all.

thanks,
Lil



lilblackgirl -> RE: stylesheet layout (3/11/2004 9:34:58)

BTW, cissy, what exactly is the winged spider thingy you have as your avitar? [:)]



c1sissy -> RE: stylesheet layout (3/15/2004 7:38:01)

quote:

ORIGINAL: lilblackgirl

BTW, cissy, what exactly is the winged spider thingy you have as your avitar? [:)]


Hi Lilblackgirl,
Ok, the spider? lol a couple of people have asked that are newbies. This started about a year ago in a discussion that turned into spiders, and my total fear of them. A member posted a picture, the original spiddy, and I decided to use it as an avatar because it was a "cute one" From there it has taken off and has been changed around several times for seasonal things. The one that is there now is to go along with a trip that I made to California to visit with my son before he left to return to I Iraq just recently. Spidy has had several intersting make overs during the past year. And somehow, Mel Gibson got added to the picture. lol.



gorilla -> RE: stylesheet layout (3/15/2004 8:50:27)

You're welcome - glad I turned you on to Castor's book, she's really a superb technical author. Don't forget to visit her site - you can get lots of freeby examples there.

Umm which code? - do you mean the stuff I did in the tips section? The css layouts? or the completed page + css code again in the tips section?



lilblackgirl -> RE: stylesheet layout (3/15/2004 12:57:49)

yup, that's the one.



gorilla -> RE: stylesheet layout (3/15/2004 13:30:11)

It is a straight copy and paste job [:)] Copy it to the clipboard, then paste it into notepad to ensure that yuo've got clean text without the gunk put in for instance by the forum software and then from notepad either save it or paste into your html editro of choice. Same is true of the stylesheet except that in notepad you'll have to make sure to save it with a .css extension and the correct filename.

Ah well time to get back to what I was doing - I'll check back tomorrow.



lilblackgirl -> RE: stylesheet layout (3/15/2004 15:16:47)

I wouldn't be to concerned about this request. I think i figured some of it out. Like i said earlier, i needed to get my hands dirty and just start writing. I did that and it helped significantly. I think my questions lie in the post here:
http://www.frontpagewebmaster.com/m-187757/mpage-2/tm.htm
Trying to find out why the layout isn't working and i'm pretty sure it's because i'm still new with how CSS formatting a layout works. It's amazing though, when using CSS for layout how light the actual html code is. My original page is 3X longer in html code (mostly because of all the tables i was using). Way cool! [:D]



jaybee -> RE: stylesheet layout (3/15/2004 18:41:03)

Hi all,

Thought I'd add my twopenneth (or two cents worth for our colleagues over there).

I have a hobby site which has got somewhat out of hand. When I started it I had no idea about CSS so I went down the tables route. I decided to get really flash and do a jukebox. Spent days getting the layout right. Everytime I shifted something the whole lot went and then it was hours of fiddling to get it back again. Once it was finished it wasn't going to get touched again....ever!

As we all know, web sites grow and soon (last month) came the day when I knew it had to be changed again. I approached it with trepidation mainly because I had to make new graphics but that done, I gaily inserted a new column. YIKES! All hell broke loose.

Some hours and a lot of blue air later it was done. You can see it here

I decided enough was enough and bit the bullet with css. Oh happy bunny or what! Twenty minutes shoving a few divs around and it was done. [:D]

I haven't uploaded it yet as I'm still playing. Now it's so easy I spend hours tweaking instead of fixing.

So, a question for our hirsute expert........
I have twenty "gigs" pages (see example here)
These are enormous and use tables mainly because I can't think of any way to do it sensibly without. I suspect much of the download time is due to the content, as I've fiddled around with the pages taking out the tables and not been able to knock much off. I can shave off some by putting the rest of the page in a style sheet but it still leaves a fair chunk. Any ideas great man of the jungle? [;)]



gorilla -> RE: stylesheet layout (3/15/2004 23:12:04)

Did you have to ask that (enquired the gorilla peevishly) Yikes. My guess is that you took a theme (there's an awful lot of theme markup in there) and then went down the "upgrade to stylesheets" route. Hang on a mo ........

(Gorilla runs round the clearing in the forest shrieking "When I get my paws on the Microsofty who came up with that monstrosity of a notion. What I am going to do them will make he, she, or it rue the day I was born. 'Trampling out the grapes of wrath' won't even get a look in.")

.... right I feel better now.

Its huge and its full of this*:

<tr>
<td class="xl23" style="border-style: ridge" width="49"><!--mstheme--><font face="Verdana">
<p style="line-height: 100%; margin-top: 0; margin-bottom: 0"><!--mstheme--></font></td>
<td class="xl23" style="border-style: ridge" x:num align="center" valign="middle" width="16"><!--mstheme--><font face="Verdana">
<p style="line-height: 100%; margin-top: 0; margin-bottom: 0"><font size="2" face="Verdana">9</font><!--mstheme--></font></td>
<td class="xl42" style="border-style: ridge" align="center" width="12"><!--mstheme--><font face="Verdana"><font size="4" color="#CC99FF">»</font><!--mstheme--></font></td>
<td class="xl23" style="border-style: ridge" x:num align="center" valign="middle" width="44"><!--mstheme--><font face="Verdana"><!--mstheme--></font></td>
<td class="xl25" style="border-style: ridge" valign="middle" align="left" width="293"><!--mstheme--><font face="Verdana">
<p style="line-height: 100%; margin-top: 0; margin-bottom: 0"><font size="2" face="Verdana">Russ
Sainty with the Rhett Stoller Group</font></p>
<p style="line-height: 100%; margin-top: 0; margin-bottom: 0"><font size="2" face="Verdana">The
Blue Tones</font></p>
<p style="line-height: 100%; margin-top: 0; margin-bottom: 0"><font size="2" face="Verdana">Wayfarers
Jazz Band</font><!--mstheme--></font></td>
<td class="xl42" style="border-style: ridge" valign="middle" align="left" width="238"><!--mstheme--><font face="Verdana"><font face="Verdana" size="2">Admission
3/6</font><!--mstheme--></font></td>
</tr>


What I'd do is to take one page. Save it and create styles (straight copy of what what repeats like mad throughout the whole thing and bring my data in to it. Its a classsic use for tables so I wouldn't mess with that. You need a table for that type of data. Just tossing out all the font tags should make a difference. But caveat coming up. Its been goodness knows only how long since I touched a theme. Messing with 'em as far as I remember was a sure fire way to needing lots and lots of tranquilisers or failing that a script kiddy to jump up and down upon. Gawd almighty talk about the worst of both worlds. All the style info is repeated endlessly.

One pitfall to avoid IE has a well known bug where <td> element in particular fail to
inherit backgound colours. So be sure to declare bgs for all table elements as well.

You should be able to drastically slim those pages down. By creating "universal" styles instead of separetly styling every single element in the html code itself. Ye gods. An external styleshhet please - that way it'll load once and reside in cache thereafter. ( But I'd do it in a new web if I were you.)

Lovely layout btw. Whoever came up with it had a good eye.

* This not a typographical error, it is me being diplomatic and not upsetting the censor program thingy on this forum, seeing as how I believe in peace love harmony and only shoving other anthropoids off cliffs if they really get up my nose and I think I'll get away with it... Incidentally I laugh in scorn at your two pennies - over here it'd be two øre except that there's no such tiny amount, minimum is 25 øre, 100 øre = 1 kroner, thats fine for the other anthropoids I however demand solid gold bananas .......[;)]



jaybee -> RE: stylesheet layout (3/16/2004 8:13:55)

[:D] [:D] [:D]

I thought you might enjoy that. I fully intend, when time permits to re do the entire site using css but as there are 150 pages it might take a while. I'm switching hosts this weekend so it'll have to wait till after then but I will upload the css jukebox. (dead proud of that [:D])

Now to tables and themes. [:'(]

My design, thanks for the comps. There are so many details it has to be clear and easy to read. Yup! the tables are huge. I must admit I'm dead impressed at your bravery looking at the HTML. I've avoided looking at that like the plague. Puts me right off my tea.

What happened was. One weekend I was bored and thought I'd set up a small site. (ha ha... naive or what!) I was the proud owner of a copy of Frontpage 1897 version Archaic. You know the one...... YOU WILL HAVE A THEME.... OR ELSE!

By the time I had realised what had happened I had around 50 pages and it was growing at a rate of knots. So I have a cunning plan.........

I'm going to css it a bit at a time, starting with the tables as they're the problem. Then the band pages as they should all be able to use the same layout. That'll break the back of it. The rest can wait.

As soon as I've finished the five sites I'm working on now I'll let you have a look at the new improved Gorillaproof tables.

PS..... gold banana attached. [:)]

[image]local://upfiles/9075/98E6444134604587BF504C6861C57ACF.jpg[/image]



ritarun -> RE: stylesheet layout (3/23/2004 9:36:53)

quote:

As a practical tip:

I take a copy of my styles and paste them into a text editor. I then add line numbers to that copy. Next I make notes something like "lines 45 -58 do this and are dependent on that"

"lines 12-15 inherit from ......" and so on. makes life a lot easier in the long run.


The above was from a post by Gorilla. This sound like it would really help me.
I am struggling with understanding HTML and CSS coding. When I read this tip I went in search of trying to add lines in my text editor. No can do... Nothing so far has worked. Can anyone help me out? How do I add numbers to the lines of code so that I can make notes? Also I remember something about two different types of "edits" in CSS. Which version should I use?



c1sissy -> RE: stylesheet layout (3/23/2004 10:09:41)

Hi Ritarun, how are you doign?

I think what Gorilla might mean to do here is to have 2 copies of your css file. The one with the numbers you would save for reference (and in the text editor I belive you would just add the line number to the code?). The second one would be the one that you link to your html/xhtml file.

also, don't forget that you can use css commenting to help you out with things that you need to remember in your css file.

Such as the following
/* this is the color red*/ lol, I use this on my practice pages to let me know the color name of the color that I am using.

Also, you can use the comment for commenting out code as well. If you already have something in your style sheet, and want to try something different in that particluar spot, just comment out the original, put in what you would like to try, then this way you won't loose the original that you have in case you want to go back to it.

I'm not sure If I helped you out or not, but I hope so!



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.1582031