How I'm spending my vaction, CSS check? (Full Version)

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



Message

StevieB -> How I'm spending my vaction, CSS check? (2/6/2006 15:26:52)

Greetings all,

Ok, so I'm finally taking on this CSS thing. I created this page to play around with some CSS (and other stuff). I wasn't sure if I should have posted it in the site check forum, but since I'm trying to learn CSS my thought was that this would be the best spot.

Please take a look at the page to see if I am making any serious errors. You are welcome to comment , suggest, laugh or maybe it might even help someone else.

I've only check it in IE and Firefox. that's all I have now but if anyone knows what else I should be checking and maybe a reliable download link I would be grateful.

I'm also not sure what all can be done with css oor what the staples of a good style sheet are. Anyone have an example of a realy good complete style sheet?

And for whatever reason, my server seems to be running a little slow today. I usually never have a problem with them, but go figure. I apologise in advance.

Thanks a bunch!
Steve




womble -> RE: How I'm spending my vaction, CSS check? (2/6/2006 16:06:30)

Looks pretty good! You've got a couple of errors with you CSS and some warnings coming up too - check it out at the W3C's CSS validator. Most of the warnings seem to be to do with background colour, which is easily fixed.

As for browsers, I always check in Firefox, IE, Mozilla, Netscape, and Opera. A quick google'll find their official sites. You may also want to test on previous versions of of IE - skyzyzdownloads - they tend to be a little unstable, but they're okay for testing on. There's also a Mac browser compatibility tester here.

...oh, and I'm sure Nicole will be pleased to hear she's got you hooked on CSS! [;)]



StevieB -> RE: How I'm spending my vaction, CSS check? (2/6/2006 16:09:49)

Thanks Womble

I didn't realize you could also check the css. Will do so now.



womble -> RE: How I'm spending my vaction, CSS check? (2/6/2006 16:14:19)

There's a link to it on the left of their home page along with the link to the HTML validator etc. If you have the firefox web developers toolbar installed you can also check iyt directly from there as well.



StevieB -> RE: How I'm spending my vaction, CSS check? (2/6/2006 17:43:28)

Question:
Is it nessesary to pay attention to the warnings when validating the CSS? I have 2 style sheets....

The text.css validates but comes up with the following warnings:

Line : 3 (Level : 1) You have no background-color with your color : P
Line : 6 (Level : 1) You have no background-color with your color : A:link
Line : 9 (Level : 1) You have no background-color with your color : A:visited
Line : 12 (Level : 1) You have no background-color with your color : A:hover
Line : 15 (Level : 1) You have no background-color with your color : A:active
Line : 25 font-family: You are encouraged to offer a generic family as a last alternative
Line : 25 (Level : 1) You have no background-color with your color : H2
Line : 25 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : H2
Line : 28 (Level : 1) You have no background-color with your color : H3

So I used a generic font and I didnt want a different background-color. Is that a problem and do I have to set the same background-color for each when its already set in the body?

And the test-layout.css validates and is much of the same except:

Line : 104 (Level : 1) This property applies to block-level elements. : ul#navlist

[sm=yikes.gif] What the heck does that mean???

Thanks,
Steve



womble -> RE: How I'm spending my vaction, CSS check? (2/6/2006 18:21:56)

The validator does tend to get a little obsessive with colours at times! [:D]
The problem with not setting a background colour is that a user stylesheet may clash with your stylesheet, for example if a user stylesheet has the background colour set at blue and your text's blue, then all the user will see is potentially a blue screen, so it's safer to specify a background colour. That said though, the number of users likely to be using their own stylesheet's probably negligable.

Warnings are just that - warnings. How much attention you pay to them depends on how much of a css control freak you are. There are times when you can't avoid validator warnings - I have a site where to get an image replacement technque to work I have to use an empty <span>, which of course the validator doesn't like, but apart from that the xhtml and css both validate, and using the box model hack will also throw up a warning as well.



Tailslide -> RE: How I'm spending my vaction, CSS check? (2/7/2006 3:15:17)

Hi Stevie

Excellent job so far!

Couple of things to think about and a couple of answers to questions you posed on the page:

It's a "bad idea" unfortunately to use px for font-sizing. Reason being that dear old IE refuses to resize pxs up or down in the browser. There are about 50 different conflicting ways of setting up your font-size. All have their drawbacks. I use font-size:100.01% in the body or html rules then set font-size:76% in the wrapper div to set the font to about "medium". (the 100.01 thing was to combat a bug - think it was in Opera but I've forgotten now!).

The whole "active" li thing has an easy and really cool way round it.

What you do is give each li a specific id like this: 

<ul id="navlist">
<li><a href="index.html" id="nav-home">Home</a></li>
<li><a href="index.html" id="nav-faq">FAQs</a></li>
<li><a href="index.html" id="nav-contact">Contact</a></li>
</ul>


Then on each page you give the body tag a specific id too like this: 

<body id="home">


Then in your CSS you do this: 

#home #nav-home,  #faq #nav-faq, #contact#nav-contact {whatever your "on" rules are}


Now on the home page the li with the id nav-home will be highlighted however you want. Cool eh? This means you can have exactly the same lot of links on every page.

Far as changing the size etc of the h# tags you do it like this: 
h1 {font-size:120%;}


You can make it more specific like this: 

#sidebar h2 {font-size:120%;}


With styling the inputs - this is difficult as different browsers allow you to do different things but basically you could add a class to the inputs you want to change the look of then add rules for that particular input into your stylesheet.

Final thing - you've still got a fair amount of inline CSS within your page - you ideally want to remove all of that to the external stylesheet (I realise that it might be there just because you're fiddling with it).


Edit: just noticed that you mention about wanting the size of the font in the sidebar to be constant - well it won't be in all "good" browsers your font will scale up and down - which is as it should be. Users should have the ability to make the text larger if they need.

The menu should be able to survive the font-size increasing a few times.



StevieB -> RE: How I'm spending my vaction, CSS check? (2/7/2006 10:43:16)

Thanks Tailslide,

I kinda flying in the dark here trying to learn as I go. Thats exactly the kind of direction I was looking for.

Definately a cool way to deal with the whole li a thing - I'll try it today

The px thing, unfortunately thats all I ever used and have no understanding of other ways to set the size at all. Do you know of any good refrences or tutorials on this??

[:)] I've got 5 more days of vacations left and I'm looking to learn as much as possible.

Thank you and all others that are giving direction and challenge here,

Steve



StevieB -> RE: How I'm spending my vaction, CSS check? (2/7/2006 10:46:27)

I forgot to ask...

Is there a way to set inline in the style sheet? I tried something like <p.inline> </p>
That didn't work

Thanks, Steve



Tailslide -> RE: How I'm spending my vaction, CSS check? (2/7/2006 11:13:58)

Hi Steve

What a way to spend your vacation!

Far as the font-sizing thing goes - there are loads - google "Noodle incident" which is the really famous one and here:http://www.w3.org/QA/Tips/font-size is the W3C's take on it. Problem is I find that the more I read, the more confused I get and I like to think I'm reasonably experienced (well 2 years ish) using CSS. Maybe I'm just thick (shut up all of you!) but I've ended up just sticking with the % route.

You could either declare a font size of around 76% (or maybe a bit smaller if you prefer) in the body element of your CSS or do the 100.01% in the body element and 76% in the container or wrapper div.

Far as the inline thing goes - a paragraph tag is by it's nature a block item so you can't really force it to be inline - well you can tell it to be inline but it's still block... what are you trying to get it to do?



StevieB -> RE: How I'm spending my vaction, CSS check? (2/7/2006 12:30:53)

The inline thing didn't really have to be a <p> tag I was just trying to see in I could set the inline in the css, In the header of my page I have: 

<form name="font_select" action="GET" style="display:inline; FONT-SIZE: 10px; COLOR: #a5222b; FONT-FAMILY: verdana, arial, helvetica, sans-serif;"> <input type="button" onclick="javascript:fontsizedown();" value=" - " /> <input type="button" onclick="javascript:fontsizeup()" value=" + " /> <p style="display:inline; FONT-SIZE: 12px; color: #003277; FONT-FAMILY: Verdana, Arial, helvedica, sans-serif"> Adjust Font Size</p></form></div>


The inline is needed to keep the form from expanding to two lines.

I was trying to avoid the inline inline(?)

OBTW The li active thing is really cool! I used it in the side nav and it works beutifuly all except er, uh the color I chose (lol)

Thanks again,

Steve



Tailslide -> RE: How I'm spending my vaction, CSS check? (2/7/2006 12:38:44)

Oh ok - I think what you're after is white-space: nowrap instead of display:inline. The whitespace thing will prevent the line wrapping unless you include a line break.



StevieB -> RE: How I'm spending my vaction, CSS check? (2/7/2006 13:07:29)

Sorry I'm missing it, but would you put it in the style sheet something like:

#head h2 {white-space: nowrap ;} and just use the tags in the head, or keep it inline style?

Something else I was trying to figure out through the articles.. when I get away from using px for font size is it still ok for such things as borders, padding etc? or should I try to avoid px all together when I rework the CSS??

Sorry for so many questions and Thanks a bunch for your help,

Steve



Tailslide -> RE: How I'm spending my vaction, CSS check? (2/7/2006 13:39:23)

Hi again

Yeah I'd pretty much always put all the styling in the external stylesheet.

If you wanted all the stuff within a particular div on one line with no wrapping then you'd do: 

#yourdiv {white-space:nowrap;}


The example you gave of the #head h2 element I suppose you could attach nowrap to that but there's not really any point since the h2 tag is a heading - can't see where that wrapping would be a problem... You could add it to a form I guess, but again there'll probably be times when the form wrapping would be preferable - you'd have to play with it and see. You could just give the form an id and then do this: 

#textresizer {white-space:nowrap;}


Here's more on block level items: http://www.cs.sfu.ca/CC/165/ggbaker/ref/wdgxhtml10/block.html

Far as using pxs goes - They have their uses - for instance I'd personally always use pxs for images (there are other techniques) to ensure the image is the correct size. Sometimes I'd have a div width set in pxs rather than % or ems - depends on the look you want in the end.

E.G.: if you want a fixed width container that doesn't expand or contract with font-size then use px for sizing the width. If you want a container that expands and contracts with the browser window then use percentages. If you want a container that expands and contracts with the font-size then use ems.




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625