CODEWITHSUNDEEP
htmlcss
user2902846
user2902846

Reputation: 11

Problems centering menu

After teaching myself basic HTML / CSS about ten years ago, I'm now getting back into this for a project at work.

I'm currently building a concept for a site to be hosted internally on our company network.

I have three issues/questions:

  1. At the moment I am specifically trying get everything centred: the logo, text and menu grid. I'm having trouble figuring out what I have done wrong. I have attempted to go through each line of CSS but to no avail. Currently I have used padding-left: 15em; to push the menu into the centre.

  2. I am also trying to vertically center the text in the menu grid. Using vertical-align: middle; didn't work but line-height: Xem; did, but only for one-line links. Where there is a second line that line is not visible.

  3. I would appreciate it if anyone can shine a light on any obvious errors I have made in my code. I'm not asking nor do I expect anyone to re-write what I've done, but if anyone has any suggestions/advice to help widen my understanding I would be very appreciative.

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Process Guides</title>
  <style type="text/css">

  img.logo
    {
    position: absolute;
    top: -30em;
    bottom: 0em;
    left: 0em;
    right: 0em;
    margin: auto;
    }

  body {
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
    color: #001f5e;
    }

  h1 {
    font-size: 20pt;
    text-align: center;
    padding-top: 7em;
    }

  line {
    color: #b3b3b3;
    padding-left: 17em;
    }

  h3 {
    font-size: 10pt;
    color: #828282;
    padding-left: 21em;
    }

  #menu ul
    {
    list-style-type: none;
    width: 70em;
    padding-top: 0em;
    padding-left: 17em;
    text-align: center;
    }

  #menu li
    {
    float: left;
    width: 15em;
    padding: .5em;
    line-height: 1.6em;
    }

   br
    {
    clear: left;
    }

  #menu a
    {
    font-size: 15pt;
    display: block;
    color: #ffffff;
    background-color: #10167d; 
    width: 11em;
    height: 2.5em;
    line-height: 2.5em;
    padding: .5em;
    text-decoration: none;
    transition: .2s;
     -webkit-transition: .2s;
     -o-transition: .2s
     -moz-transition: opacity .2s
    }

  #menu a em
    {
    font-size: 12pt;
    }

  #menu a:hover
    {
    color: #ffffff;
    background-color: #00b0f0;
    }


  </style>
</head>

<body>

<h1>
SELECT A CATEGORY:
</h1>

<img class="logo" src="./CCOGuidesLogo.png" width="299" height="121" alt="CCO Guides"/>

<!-- Site navigation menu -->

<div id="menu">
   <ul>
      <li><a href="./SubMenuGrid.html">Link One</a></li>
      <li><a href="./SubMenuGrid.html">Link Two</a></li>
      <li><a href="./SubMenuGrid.html">Link Three</a></li>
   </br>
      <li><a href="./SubMenuGrid.html">Link Four</a></li>
      <li><a href="./SubMenuGrid.html">Link Five</a></li>
      <li><a href="./SubMenuGrid.html">Link Six</a></li>
   </br>
      <li><a href="./SubMenuGrid.html">Link Seven</a></li>
      <li><a href="./CCOGuide5.html">Link Eight</a></li>
      <li><a href="./CCOGuide5.html">Link Nine</a></li>
   </br>
      <li><a href="./CCOGuide5.html">Link Ten</a></li>
      <li><a href="./SubMenuGrid.html">Link Eleven</a></li>
      <li><a href="./SubMenuGrid.html">Link Twelve</a></li>
   </ul>
</div>

<br>
<br>

<line>
________________________________________________________________________________________________
</line>

<h3>
<i>Information about this site.</i>
<br><u>Report a problem</u>
<br>Last updated: Monday 21 October 2013
</h3>

</body>
</html>

Upvotes: 1

Views: 68

Answers (1)

user934902
user934902

Reputation: 1204

use margin to center

  #menu ul
    {
    list-style-type: none;
    width: 70em; /*consider changing to %*/
    margin: 0 auto;
    text-align: center;
    }

Upvotes: 2

Related Questions