5
\$\begingroup\$

I'm making a really simple html website with CSS and I was hoping on some feedback. A few notes:

  1. There will be more content under this, but I want the starting screen to take up the full page and then scroll under it.

  2. I've used a bit of a hack to remove the padding from the first list element

  3. I've used a bit of a hack to remove spacing between list elements

  4. I'm a bit unsure if I have to clear floats for the menu bar as it has no height at the moment. If so, clear:float didn't seem to work.

* {
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
}
a {
  text-decoration: none;
}
.header {
  height: 100%;
  width: 100%;
  background: lightgray;
  position: relative;
  text-align: center;
  min-height: 350px;
}
li {
  list-style: none;
}
.nav {
  display: block;
  padding: 20px;
}
.nav img {
  float: left;
}
.nav ul {
  float: right;
  font-size: 0;
}
.nav ul li {
  display: inline-block;
  font-size: 16px;
  padding-left: 10px;
}
.nav ul li:first-child {
  padding-left: 0px
}
.nav ul li a {
  padding: 0 10px;
}
<html>

<body>
  <div class="header">
    <div class="nav">
      <img width="39" height="35" alt="" src="#">
      <ul>
        <li><a href="#">Services</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
      </ul>
    </div>
    <span class="billboard">Hello!</span> 
  </div>
  <div class="content">Test</div>
</body>

</html>

\$\endgroup\$
2
  • 1
    \$\begingroup\$ "I've used a bit of a hack to remove the padding from the first list element" <- why do you think that using :first-child to remove the padding is a hack? \$\endgroup\$
    – cimmanon
    Commented Jun 23, 2015 at 21:14
  • \$\begingroup\$ Your HTML misses a DOCTYPE. Which HTML version do you want to use? \$\endgroup\$
    – unor
    Commented Jun 24, 2015 at 16:02

1 Answer 1

Reset to default
2
\$\begingroup\$

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;
}
\$\endgroup\$

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.