Jump to content

Centering div nav links


John-Luke

Recommended Posts

First I'd like to pay my homage by thanking everyone involved in w3schools. I am utterly grateful for the knowledge and support it provides for anyone around the world. Amazing.

 

I am trying to center the nav links in my nav div. I may of made future problems for myself by the way I've tried to fix this but we shall see!

 

This is the first half of the source code to give you an idea:

 

<!doctype html>
<html lang="en-GB">
<head>
<title>Fly Elstree</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet" type="text/css">
<style>
h1, h2, p {
text-align: center;
}
</style>
<meta name="description" content="Fly Elstree is a traditional flying school infused with the latest knowledge. Flight training, tests and aircraft rental based at Elstree Aerodrome, North London.">
</head>
<body>
<div id="container">
<div id="heading">
<h1>Fly Elstree</h1>
<h2><i>Flight Training, Tests and Aircraft Rental</i></h2></div>
<div id="nav">
<ul>
<li><a href="index.html" title="Home" target="_self">Home</a></li>
<li><a href="staff.html" title="Staff" target="_self">Staff</a></li>
<li><a href="aircraft.html" title="Aircraft" target="_self">Aircraft</a></li>
<li><a href="servicesandpricelist.html" title="Services and Price List" target="_self">Services and Price List</a></li>
<li><a href="honestanswers.html" title="Honest Answers" target="_self">Honest Answers</a></li>
<li><a href="findcontactus.html" title="Find/Contact Us" target="_self">Find/Contact Us</a></li>
</ul>
</div>
<div id="text">
...........

 

And this is my main.css:

 

@charset "utf-8";
#container {
padding-top: auto;
padding-bottom: auto;
padding-left: auto;
padding-right: auto;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
position: relative;
}
#heading {
}
#text {
padding-top: auto;
padding-right: auto;
padding-bottom: auto;
padding-left: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
position:relative;
}
#footer {
bottom: 0vmax;
}
#nav {
display: block;
padding-top: auto;
padding-right: auto;
padding-bottom: auto;
padding-left: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
position: relative;
min-height: 30px;
}
#nav ul {
list-style-type: none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
position: relative;
}
#nav li {
float: left;
position: relative;
}
#nav a {
display: block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
position: relative;
font-size: 1em;
}
#text p {
}
#nav a:hover {
background-color: #00D8F3;
}
a {
text-decoration: none;
color: #000000;
font-style: normal;
font-weight: bold;
padding-top: auto;
padding-right: auto;
padding-bottom: auto;
padding-left: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
position:relative;
}

 

As you can see my aim is to for everything to be center aligned and displayed equally. I have a feeling I should remove some of the stuff, or maybe I can keep it?

 

But for now, I would be eternally grateful if someone can enlighten me on how to center the links in the nav bar, atm they float to the left instead of the center.

 

Thank you very much even just for reading and a million times more for helping a noob on the other side of the world (or next door to you).

 

 

  • Like 1
Link to comment
Share on other sites

Setting padding to "auto" does nothing, so you can remove all that. The "auto" value for margin only applies to the left and right margins, so you can remove half of your margin rules as well.

 

Types of elements

There are two major types of elements: inline and block.

 

Inline elements behave like a letter in text. They can have content to the left and right of them. Examples of inline elements are <span>, <a>, <strong>, <em>, <small>.

 

Block elements force other page content below or above them. They can have width, height, margin and padding. Examples of block elements are <div>, <h1> to <h6>, <p>, <header>, <footer>, <section> and others.

 

Shorthand forms of CSS properties

Most CSS properties have a shorthand form. Margin, padding, border properties, background, fonts.

 

For your case, the ones you should pay attention to are margin and padding. They can take one value, two values, three values or four values.

One value: All sides have 10px

margin: 10px;

Two values: Top and bottom have 10px left and right have 20px.

margin: 10px 20px;

Three values: Top has 10px, left and right have 20px, bottom has 30px.

margin: 10px 20px 30px;

Four values: Starting from the top, move clockwise: top 10px, right 15px, bottom 20px and left 40px.

margin: 10px 15px 20px 40px;

Centering content

How you center something depends on what kind of element it is.

 

Block elements are centered if they have a specified width and you set their left and right margins to "auto".

<div id="box">A centered box</div>#box {    width: 500px;    margin: 0 auto;    background-color: #EEE;}

Inline elements are centered if their parent element has text-align set to "center"

<div id="box">    <a href="#">Centered link</a></div>#box {    text-align: center;}
Link to comment
Share on other sites

"Thank you so much" doesn't even do justice for how much you've helped me and how grateful I am for taking time to explain that to me.

 

But without crossing the line from thankful and grateful to strange and weird, I guess it will have to do!

 

Thank you very much! God bless.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...