|
| |
|
|
StevieB
Posts: 80
Joined: 8/11/2005
From: Yuma, AZ USA
Status: offline
 |
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
< Message edited by StevieB -- 2/6/2006 15:56:41 >
|
|
|
|
StevieB
Posts: 80
Joined: 8/11/2005
From: Yuma, AZ USA
Status: offline
|
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.
| |
|
|
|
Tailslide
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
< Message edited by Tailslide -- 2/7/2006 5:13:01 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
StevieB
Posts: 80
Joined: 8/11/2005
From: Yuma, AZ USA
Status: offline
|
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
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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?
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
StevieB
Posts: 80
Joined: 8/11/2005
From: Yuma, AZ USA
Status: offline
|
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
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
StevieB
Posts: 80
Joined: 8/11/2005
From: Yuma, AZ USA
Status: offline
|
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
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
What the heck does that mean??? 
I've got 5 more days of vacations left and I'm looking to learn as much as possible. 