Hi
I’m just following book and finding a few basic mistake so far.
The author has just explained the differences between a Class Selector and an ID Selector. However, I’m not convinced that the <div id=“footer”>This is the footer area</div should really say <div class=“footer”>This is the footer area</div>
So far, I can actually see that there is not class “current” set within the .css file so thats good as far as I can see.
However, its mainly the div called “footer” that I would like someone to check over please.
Can someone check this for me before I get too involved to find that I get problems please.
This is the html file:-
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<title></title>
<link href=“/StyleSheet.css” rel=“Stylesheet” type=“text/css” />
</head>
<body>
<div id=“header”>This is the head content</div>
<div id=“maincontent”>
<div id=“nav”>
<a href=“home.cshtml” class=“current”>Home</a> |
<a href=“about.cshtml”>About</a> |
<a href=“contact.cshtml”>Contact</a>
</div>
<div id=“content”>This is where the rest of the page content goes</div>
</div>
<div id=“footer”>This is the footer area</div>
</body>
</html>
List-style: none removes the default bullet points from the UL
overflow: hidden is not essential, but it’s there to make the UL wrap around the floated LIs. It’s needed if you have a background color on the UL, for example.
Regarding the footer, can you say why it starts with a . full stop in the style sheet.
Yes you can have any of the alternative. For classes styling you use dot(.) and forl Ids you use hash (#). If you have still confusion then here are some references for making the concept even clearer: http://www.w3schools.com/css/css_id_class.asp
Also in the .html file, could alternative fix be to declare the div like this:-
<div class=“footer”>
Yes, definitely. Indeed, that’s the way I do it. Since you only need the footer once on the page, and John noted, it’s fine to use an ID, but these days I prefer classes, reserving IDs as hooks for JavaScript. Classes are a little easier to work with, I find, as they are a bit easier to override, if necessary.
wow!!! so much resources to look at!!! Thanks guys - I going to go away and cry now!!! I’m very grateful - thanks - I will use css classes a lot more now to get going with css more also
Thanks John - now I’m starting to see the advantages that some browsers have over other ones. I’m learning at such a rapid rapid rate now - I’ll keep referring back to these threads forever I think.
Now back to this html code for a moment if thats ok… so ignoring the css style sheet for 1 second, within the html code would it be better to mostly replace all the div id= with div class=
Surely using class selectors is better… I can also add more classes to div at a later date if I need to. e.g. <div class=“fontstyle headerfontstyle fontsize headerfontsize”>
Can I also do this?>> <div id=“header” class=“fontstyle headerfontstyle fontsize headerfontsize”>
Oh I’m getting in a bit of jam now!!! which div statement is better practice to use, that is in bold above?
This is the original code from the book I am using:-
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<title></title>
<link href=“/StyleSheet.css” rel=“Stylesheet” type=“text/css” />
</head>
<body>
<div id=“header”>This is the head content</div>
<div id=“maincontent”>
<div id=“nav”>
<a href=“home.cshtml” class=“current”>Home</a> |
<a href=“about.cshtml”>About</a> |
<a href=“contact.cshtml”>Contact</a>
</div>
<div id=“content”>This is where the rest of the page content goes</div>
</div>
<div id=“footer”>This is the footer area</div>
</body>
</html>
Not without reason, though. It’s rare that I need more than one, so don’t assume you’ll need lots. It’s only in rare cases where you have, say, a series of boxes that are mostly the same but there are slight differences to each. The diferences can be handled by a separate class.
Currently, I use Coda, which is Mac-only. I used to use Dreamweaver, but got sick of it and switched to Coda and Sublime Text 2, but kind of prefer Coda, although Sublime is better in a lot of ways.