Quantcast
Channel: Simple HTML and CSS website - Code Review Stack Exchange
Viewing all articles
Browse latest Browse all 2

Answer by cimmanon for Simple HTML and CSS website

$
0
0

Markup

Your markup has a case of divitis. In years past, this was considered necessary, but now there are more semantic choices available like header, footer, nav, etc. If you'd like to learn more about the HTML5 elements, I personally found HTML5 Doctor very helpful.

You have an image in your "nav" section, but it is unclear as to how it is related to navigation. I don't know what it looks like so I used a picture of Bill Murray, which makes it look even more out of place.

Redundancy

Unless you're mixing ul and ol, there's no reason to specify ul in any selector containing li (eg. .nav ul li). The li element must be a child of ul according to the rules of HTML. The only exception is if you're trying to target a specific li of a specific ul in the case of nested lists (eg. .nav > ul > li). Use the shortest selector necessary to target the element you want.

Navigation

There's nothing hacky about removing the margin the first element of your list. If anything, you should be more concerned about your method for removing whitespace between your elements. The font: 0 technique does not work on certain mobile browsers (plus it's terrible for not allowing you to use ems).

There are lots of ways to remove the undesirable whitespace between your inline elements. Personally, I favor commenting it out.

Rather than setting paddings and unsetting them later, it is more efficient to only set the paddings on the elements you want:

.nav li ~ li {    padding-left: 1em;}

Though, if you're expecting your elements to wrap (eg. due to narrow viewport for mobile devices), negative margins would be better:

.nav ul {    margin: 0 -.5em;}.nav li {    margin: .5em;}

Viewing all articles
Browse latest Browse all 2

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>