3
\$\begingroup\$

This is the first webpage I've ever made, besides simplified tests. My goal was to have a navigation menu on the left, an image in the top left corner with a header to its right, and a block of text in the main body.

It's mostly what I had in my head, but there are a few things about it that I don't like:

  1. The centering of the header horizontally. I couldn't find any way to reliably centre the header text. I tried adding auto margins around it, but it made literally no change. I ended up forcing it to a specified percentage from the left, but it's not exactly centred, and seems like a hack.

  2. Centering the header text vertically. I tried setting verticle-align: middle, but it acted as though that was a invalid value, and used default baseline alignment. I was able to move it around by specifying a percentage vertical alignment, but again, that seems like a hack.

  3. The text body doesn't line up with the top of the navigation menu. I tried removing the margin, but it made no difference for some reason.

  4. The space to the left of the menu entries. I'd rather it not have all that space, since it's a waste, especially if I shrink the window and everything smooshes together. I supposed I could just use stacked links instead of a list, but a list seems like a better organization to use.

I'd also like feedback on anything else noteworthy. Style, code ordering, anything dumb I'm doing. Please let me know!

Since anyone testing this code won't have access to the pictures, here's what it looks like on my computer in Edge:

Page Sample

<html>

<head>
   <style>
      * {
         /*border: 1px solid red;*/
      }

      #mainHeader {

      }

      #pascalPicture {
         display: inline-block;

         height: auto;
         width: 20%;
      }

      #headerTextBox {
         border: 5px groove darkblue;
         position: relative;

         display: inline-block;
         vertical-align: top;

         font-size: 20px;

         width: 75%;

      }

      #headerText {
         position: relative;

         left: 40%;
      }

      #mainBody {

      }

      #mainNav {
         border: 2px solid green;

         display: inline-block;
         width: 20%;

         vertical-align: top;
      }

      .navMenu {
         list-style-type: none;

         margin-top: 0px;
      }

      #mainContentBody {
         display: inline-block;
         width: 75%;
      }

   </style>
</head>

<body style="background-color: sandybrown">

    <header id="mainHeader">
       <img id="pascalPicture" src="pascal-cropped.jpg" alt="Picture of Pascal">

       <section id="headerTextBox">
          <section id="headerText">
             This is a header!
          </section>
       </section>

    </header>

<section id="mainBody">

       <nav id="mainNav">
          <ul class="navMenu">
             <li> <a href="pascal-cropped.jpg">Pascal Cropped</a> </li>
             <li> <a href="a.png">Ethics Excerpt</a> </li>
             <li> <a href="pascal-cropped.jpg">Pascal Cropped Again</a> </li>
          </ul>
       </nav>

       <section id="mainContentBody">
          <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nisl mollis, sodales neque id, efficitur velit. Aliquam et ultricies purus. Nulla facilisi. Mauris id pulvinar ipsum, ac commodo ipsum. Nunc non facilisis augue. Suspendisse nec lacus ullamcorper, ultricies augue nec, consectetur enim. Donec fermentum suscipit dapibus. Nunc quis interdum nibh, vel aliquam nunc. Nunc non tincidunt sem. Nullam vitae dapibus metus. Curabitur eget dignissim lectus. Vivamus tempus sagittis eros sit amet aliquet. Integer tincidunt porta leo ac suscipit.

             Quisque a feugiat erat. Proin non ante ut leo aliquam aliquam. Etiam tempus volutpat nulla sed commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc laoreet est et rutrum dapibus. Cras luctus id ex vel volutpat. Suspendisse porttitor, mauris vitae dapibus convallis, felis eros maximus ex, vitae sodales ante nulla eu quam. Curabitur nec metus nisi. Nunc dapibus orci condimentum lobortis dictum. Proin augue orci, pharetra a mollis vel, ornare id tellus. Pellentesque lectus leo, maximus et risus id, gravida ornare diam. Etiam eget metus quis quam feugiat mattis. Praesent vitae elementum metus.

             Fusce volutpat fringilla ex, sit amet imperdiet sapien efficitur a.
          </p>
          <p>
             Proin gravida orci diam, vitae placerat ligula hendrerit vel. Donec turpis nulla, lacinia vel justo in, consequat elementum tellus. Vivamus ut gravida metus. Aliquam lobortis, dolor nec pulvinar venenatis, lorem enim viverra sapien, vitae ultricies velit nisl vel arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut a tincidunt lorem, non mollis neque. Nullam interdum dolor luctus ornare gravida. In tempus diam lectus. Sed tempor, purus in convallis suscipit, nisi nibh vehicula augue, et iaculis nisl nisl vestibulum justo. Integer posuere cursus velit, et iaculis justo aliquet et. Sed dapibus egestas neque, tincidunt aliquam nisl dapibus at. Morbi malesuada pellentesque posuere. Fusce a libero at mauris maximus maximus eu sed mi. Vivamus est nulla, viverra non felis at, elementum condimentum lacus. Sed sodales enim non tortor faucibus imperdiet.

             Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus est diam, mollis non purus non, posuere porta est. Donec vestibulum consequat massa vitae dictum. Sed eu lectus sed leo dignissim rutrum. Donec efficitur imperdiet purus, quis iaculis risus accumsan a. Integer ac erat id odio fringilla elementum. Pellentesque egestas ex eleifend, mollis nunc a, feugiat dui. Duis interdum id arcu vel aliquam. Aenean fringilla quam dolor, ut tempor elit cursus ut. Sed congue dui sit amet risus egestas rutrum. Nam dictum porttitor turpis, sit amet suscipit nunc consectetur ut. Donec at tincidunt nibh. Vestibulum sagittis pharetra eleifend.

             Aenean pharetra, mi ac mattis suscipit, eros ante vehicula tellus, egestas ultricies felis elit sed ex. Suspendisse in nisl elit. Nullam nec libero nisl. Nulla tincidunt purus sapien, sed pulvinar diam varius non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non libero sed lorem dignissim hendrerit. Proin felis tortor, dignissim ac maximus ornare, consectetur vitae velit. Aenean nec accumsan felis. Proin vitae fringilla magna. Pellentesque sagittis purus sed finibus pretium. Nam nec ante dapibus odio suscipit mattis. Nulla in nisi convallis, pulvinar leo ac, fringilla nisl. Nam a dictum dolor.
          </p>

       </section>

    </section>

</body>

</html>

I know external CSS is preferred, but I'm using internal for ease of learning.

\$\endgroup\$
  • 3
    \$\begingroup\$ You might want to consider running your pages through the w3 validator service before posting it to the code review stack exchange, or other linter. \$\endgroup\$ – HSchmale Nov 29 '15 at 0:09
3
\$\begingroup\$
  • You are missing a DOCTYPE. As you seem to use HTML5, it should be:

    <!DOCTYPE html>
    

    It comes before the opening html tag.

  • The title element is a required element. It belongs in the head:

    <head>
      <title>The title of the web page</title>
    </head>
    
  • It’s often a good idea to specify the character encoding. It should be the first element of head (I‘m assuming UTF-8):

    <head>
      <meta charset="utf-8" />
      <title>The title of the web page</title>
    </head>
    
  • Ideally you would not use the style attribute. So use

    <body>
    

    instead of

    <body style="background-color: sandybrown">
    

    and add to your CSS:

    body {background-color: sandybrown;}
    
  • Don’t use section just because you need an element for styling purposes. The section element is a sectioning content element, so it creates a new entry in the document outline.

    If you need an element just for styling purposes (and not because it’s semantically warranted), use div.

    So your header should probably look like this:

    <header id="mainHeader">
    
       <img id="pascalPicture" src="pascal-cropped.jpg" alt="Picture of Pascal">
    
       <div id="headerTextBox">
          <div id="headerText">
             This is a header!
          </div>
       </div>
    
    </header>
    
  • You should use headings (h1-h6). They (together with the sectioning content elements) create the document outline, i.e., a hierarchy of your page’s content, like a table of contents.

    (Depending on your heading structure, the #mainBody should likely not be a section but a div.)

    To check your outline, have a look at the question Tool that displays outline of HTML5 documents.

  • Instead of using id to get hooks for your CSS, you might want to consider to use class instead. It has the benefit that a class can be used on more than just one element per document. And it has lower specificity for CSS.

    As a rule of thumb: A good reason for using id is if you want to create anchors which let users jump to the element with that ID.

\$\endgroup\$
1
\$\begingroup\$

Starting with your questions:

  1. To center text you'll use text-align: center, but note that this centers the text within whatever block it is set into. That is, if the block isn't wider than the text, you'll see no effect.
  2. Centering vertically is troublesome, a random article is Vertical Centering in CSS. Newer browsers support display: flex, which I've used in code below. See A guide to Flexbox.
  3. (and 4.) To allow the navigation menu to both flow, and be aligned with the top line, I used float: right. I shifted it over to the right, as this kind of floating menu, especially when the text is supposed to expand into the margins, are more commonly done on the righthand side.

Some other issues wilst we're at it:

  • The <section> attribute, as I get it, is more to group larger sections of texts. Like here on Code Review the questions or any of the answers are suitable for a section. I wouldn't use it for a header. I rather use a <div>for the header grouping
  • Use the structural elements when they are there. I.e. use <h1> for top level headers, or <h2> and similar for lower level headers.
  • Enclose paragraphs in <p>...</p> tags
  • For addressing of styles, normally it's better to use classes instead of id's. This allows for the styles to be reused, whilst an id is supposed to be unique.

Here is my refactored code (Press "Run code snippet" to see it in action):

div.flexi {
  display: flex;
  flex-direction: row;
  border: 5px groove yellow;
  height: 100px;
}
div.flexi img {
  # align-self can be: flex-start, center, or flex-end;
  align-self: flex-start;
}
div.flexi h1 {
  align-self: center;
  flex-grow: 1;
  text-align: center;
}
nav {
  border: 2px solid green;
  padding: 0px 5px 5px 5px;
  display: inline-block;
  width: 20%;
  #vertical-align: top;
  float: right;
}
nav ul {
  padding: 0;
  list-style-type: none;
}
section.article {
  # Styling of article text and elements
}
<html>

<body style="background-color: sandybrown">
  <div class="flexi">
    <img src="http://cdn.sstatic.net/codereview/img/favicon.ico" alt="Picture of Pascal" />
    <h1 id="mainHeader">Header in flex</h1>
  </div>
  <nav>
    <ul class="navMenu">
      <li> <a href="pascal-cropped.jpg">Pascal Cropped</a>
      </li>
      <li> <a href="a.png">Ethics Excerpt</a> 
      </li>
      <li> <a href="pascal-cropped.jpg">Pascal Cropped Again</a> 
      </li>
    </ul>
  </nav>

  <section class="article">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nisl mollis, sodales neque id, efficitur velit. Aliquam et ultricies purus. Nulla facilisi. Mauris id pulvinar ipsum, ac commodo ipsum. Nunc non facilisis augue.</p>
    <p>Suspendisse nec lacus llamcorper, ultricies augue nec, consectetur enim. Donec fermentum suscipit dapibus. Nunc quis interdum nibh, vel aliquam nunc. Nunc non tincidunt sem. Nullam vitae dapibus metus.</p>

    <h2 style="text-align: center">new header</h1>

    <p>Curabitur eget dignissim lectus. Vivamus tempus sagittis eros sit amet aliquet. Integer tincidunt porta leo ac suscipit. Quisque a feugiat erat. Proin non ante ut leo aliquam aliquam. Etiam tempus volutpat nulla sed commodo. Vestibulum ante ipsum
      primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc laoreet est et rutrum dapibus.</p>

  </section>
</body>
</html>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.