I'm trying to accomplish something very simple as seen here.
HTML
<div id="header">
<div class="container">
<img src="#">
<ul id="header_nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
CSS
.container {
padding-left: 80px;
padding-right: 80px;
}
#header {
height: 50px;
line-height: 50px;
background-color: blue;
}
#header_nav {
float:right;
}
#header_nav li {
display: inline-block;
}
Questions:
- Am I using the IDs and classes correctly? For example, should header be an ID or class?
- Is my naming convention ok?
- Should I be using nested rules instead? E.g
#header ul li { ... } - Is this the best way to achieve this layout?
Any advice at this stage would be good, so I can take these practices forward when doing the next steps of the structure.
3 Answers 3
Am I using the IDs and classes correctly? For example, should header be an ID or class?
From your example I don't see anything wrong with them. Just remember that ID's are supposed to be unique within your entire HTML page and classes not. So if you're planning to have more header's (note the exact same name) on your page, make it a class.
Is my naming convention ok?
Yes, as long as you enforce a consistent naming convention you should be okay.
Should I be using nested rules instead? E.g
#header ul li { ... }.
This actually depends on your entire HTML structure and personal preference. Most of the time I find #header ul li { ... } being cleaner, because you're applying the CSS rules to the ul li's in the #header without having to define the class or id in the HTML.
Is this the best way to achieve this layout?
If you have an element that contains only one horizontal line of elements to be centered vertically, more often then not defining
heightwith the same value ofline-heightbecomes redundant.Get rid of your container class and
divand move it's CSS rules to the#headerblock. The#headeris the container already.
HTML
<div id="header">
<img src="#">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
CSS
#header {
line-height: 50px;
padding: 0 80px;
background-color: blue;
}
#header ul {
float: right;
}
#header li {
display: inline-block;
}
Update: Changed #header ul li to #header li, see @cimmanon's comment.
-
1\$\begingroup\$ There's no reason to specify
#header ul liover#header li. The li element can only be a descendant of ul elements. The only reason to have the ul be a part of the selector is if you're trying to single out specific ul/li elements via more specific selectors (eg.#header > ul > li). \$\endgroup\$cimmanon– cimmanon2014年09月01日 12:52:07 +00:00Commented Sep 1, 2014 at 12:52 -
\$\begingroup\$ @cimmanon That's true. In my case it's just preference. I updated my answer. \$\endgroup\$Kid Diamond– Kid Diamond2014年09月01日 13:48:18 +00:00Commented Sep 1, 2014 at 13:48
-
\$\begingroup\$ I think, its not quite true!! The
<li>element can also be a descendant of an<ol>. Maybe not in this case, but lets say you dont know if#headerwill have<ul>or<ol>, and lets say, there are diffrences between this two in styling... then#header ul liwould make sens to me... \$\endgroup\$reyaner– reyaner2014年09月05日 15:40:02 +00:00Commented Sep 5, 2014 at 15:40 -
\$\begingroup\$ @reyaner What is not true? I never said that they couldn't be descendants of those. \$\endgroup\$Kid Diamond– Kid Diamond2014年09月05日 15:47:20 +00:00Commented Sep 5, 2014 at 15:47
-
\$\begingroup\$ cimmanon said it:"The li element can only be a descendant of ul elements.", und you said: "That's true"... am i wrong? \$\endgroup\$reyaner– reyaner2014年09月05日 15:54:42 +00:00Commented Sep 5, 2014 at 15:54
You should be using HTML 5 elements such as header and nav making some/all classes and IDs unnecessary:
<header>
<nav>
<img src="#">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</header>
-
1\$\begingroup\$ Only if he's using the HTML5 doc type, which you really cant determine from looking at the code he posted. \$\endgroup\$Kid Diamond– Kid Diamond2014年09月01日 10:49:40 +00:00Commented Sep 1, 2014 at 10:49
-
1\$\begingroup\$ @KidDiamond Well, theoretically speaking, yes, however practically speaking, no. Browsers don't worry about the exact doctype used. In most browsers HTML 5 elements will work fine, no matter what doctype you use, if at all. In the rest (such as IE) you'll need any doctype, that triggers standard mode, which you should have anyway. That being said, nowadays there is no reason not to use the HTML 5 doctype. \$\endgroup\$RoToRa– RoToRa2014年09月01日 10:56:09 +00:00Commented Sep 1, 2014 at 10:56
-
\$\begingroup\$ I'm just saying. Some people want to make code that is cross browser compatible all the way back to IE7 (even 6), which is nuts imo. And some like to have completely valid HTML code according to the specifications. So it all depends on the requirements. \$\endgroup\$Kid Diamond– Kid Diamond2014年09月01日 10:59:47 +00:00Commented Sep 1, 2014 at 10:59
-
1\$\begingroup\$ @KidDiamond Based on the use of
display: inline-blockby itself, I think it's safe to say that IE6-7 support is not something the OP cares about. These are dead browsers. Unless support for them is specified, you should assume that they can be ignored. \$\endgroup\$cimmanon– cimmanon2014年09月01日 11:58:46 +00:00Commented Sep 1, 2014 at 11:58 -
\$\begingroup\$ @cimmanon Fair enough. :) \$\endgroup\$Kid Diamond– Kid Diamond2014年09月01日 12:05:38 +00:00Commented Sep 1, 2014 at 12:05
Should I be using nested rules instead?
You should use the least specific selector possible to target exactly the element(s) you want. If your choice is between .foo .bar and .bar and you will only have a single element with a class of bar in your document, use .bar as your selector.
Selectors like these are all longer than necessary:
table td/table th/tr td/tr thul li/ol li/dl dt/dl ddfigure figcaptionfieldset legend
In each of these cases, the second element in the selector must be a descendant of the first element in order to be valid HTML. Unless you're fighting specificity issues, there's no benefit to being more specific than td or li.
<!DOCTYPE html>) is automatically included (although it would be beneficial for the poster to learn about the different doctypes, how they differ, and what HTML5 offers). \$\endgroup\$