Dylan Dylan - 5 months ago 27
HTML Question

HTML cannot get menu in center of heading

I cant seem to figure out how to get the menu inline with the text in the heading which is in the centre of the heading already. I'm sure it isnt a difficult problem but i cant figure it out as im trying to teach myself.
Any help would be appreciated.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="HomepageStyleSheet.css">
<title>Kilbride Classic Cuisine</title>
</head>
<body>
<div id="toplocation">
<i class="fa fa-fax"></i>
(01)-8393790&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<i class="fa fa-map- marker">&nbspBaldoyle Industrial Estate</i>
</div>
<div id="heading">
<h3>Kilbride Classic Cuisine
<ul id="menu">

<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">Products</a></li>
<li><a href="contact.asp">MyOwn Gym Foods</a></li>
<li><a href="about.asp">Contact Us</a></li>

</ul>
</h3>
</div>
<div id="redline"></div>


stylesheet

html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif, arial;
}



#toplocation
{
background-color:black;
color:grey;
margin-top: 0;
margin-bottom:0;
margin-right: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}

#heading
{
background-color:#2b2b2b;
color:white;
padding-top: 14px;
padding-right: 14px;
padding-bottom: 14px;
padding-left: 14px;

}
#redline
{
background-color:#ff0a0a;

height: 2px;
border: 0;
padding: 0;
}
ul#menu {
padding: 0;
}

ul#menu li {
display: inline;

}

ul#menu li a {
background-color: #383838;
color: white;
padding: 4px 11px;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
}

ul#menu li a:hover {
background-color: #ff0a0a;
}

Answer

Is this what you are looking for ? Making a few guesses from your description.

html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden; 
font-family: sans-serif, arial;
}



#toplocation
{
background-color:black;
color:grey;
margin-top: 0;
margin-bottom:0;
margin-right: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}

#heading
{
background-color:#2b2b2b;
color:white;
padding-top: 14px;
padding-right: 14px;
padding-bottom: 14px;
padding-left: 14px;

}
#redline
{
background-color:#ff0a0a;

height: 2px;
border: 0;
padding: 0; 
}
.pull-left{
  float:left;
  display:inline-block;
  margin-right:100px;
  }
.h2{
  font-size:22px;
  }

ul#menu {
padding: 0;
}

ul#menu li {
display: inline;

}

ul#menu li a {
background-color: #383838;
color: white;
padding: 4px 11px;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
}

ul#menu li a:hover {
background-color: #ff0a0a;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-            awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="HomepageStyleSheet.css">
<title>Kilbride Classic Cuisine</title>
</head>
<body>
<div id="toplocation">
    <i class="fa fa-fax"></i>
    (01)-8393790&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<i class="fa fa-map-  marker">&nbspBaldoyle Industrial Estate</i>
  </div>
 <div id="heading">
    <div class="h2">
      <span class="pull-left">Kilbride Classic Cuisine </span>
    <ul id="menu">

        <li><a href="default.asp">Home</a></li>
        <li><a href="news.asp">Products</a></li>
        <li><a href="contact.asp">MyOwn Gym Foods</a></li>
        <li><a href="about.asp">Contact Us</a></li>

</ul>
</div>
</div>
<div id="redline"></div>

Comments