HTML question

Scott · June 16, 2011

Hi all I was wondering if anyone help me with a little bit of coding please...

I have this page I want the table centred...I've managed to move the table into the centre but the it looks like the bottom of the page moves itself up, check this link to unnderstand what I mean...

Come Fly Test Page

Here is the code I've made...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux (vers 1st December 2004), see www.w3.org" />
<title>Horizontal Navigation Bar w/Rollover Effect</title>

<style type="text/css">
/*<![CDATA[*/

<!-- 

#navbar ul {
        margin: 0;
        padding: 5px;
        list-style-type: none;
        text-align: center;
        background-color: #;
} 

#navbar ul li {
         display: inline;
        }

#navbar ul li a {
        text-decoration: none;
        padding: .2em 1em;
        color: #fff;
        background-color: #6179d1;
        }

#navbar ul li a:hover {
        color: #000;
        background-color: #fff;
        }

--> 
/*]]>*/
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><a href="http://www.comeflyva.co.uk/forum" target=
"_blank">Forum</a>
</li>
<li><a href="http://www.comeflyva.co.uk/index.php/TopPilot">Top
Pilots</a>
</li>
<li><a href=
"http://www.comeflyva.co.uk/index.php/TouchdownStats/top_landings/10">
Touch Down Stats</a>
</li>
<li><a href="%3C?php%20echo%20url('/staff');%20?%3E">Staff</a></li>
<li><a href=
"http://www.comeflyva.co.uk/index.php/pages/disclaimer">Disclaimer</a></li>
</ul>
</div>
<p style="text-align: center;"><img alt="" height="200" src=
"http://comeflyva.co.uk/lib/downloads/acpictures/fp1.png" width=
"700" /></p>
<h1 style="text-align: center;"><u>Come Fly... Resource
Centre</u></h1>
<div style="left: 250px; top: 400px; position: absolute;">
<table align="center" border="0">
<tbody>
<tr>
<td width="33%" bgcolor="#6179D1" class="bar">About Us</td>
<td>
<div class="bar">Human Resources</div>
</td>
</tr>
<tr>
<td><a href=
"http://www.comeflyva.co.uk/index.php/pages/about">About Come
Fly...</a></td>
<td><a href=
"http://www.comeflyva.co.uk/index.php/pages/introductiontohumanresources">
Introduction to Human Resources</a></td>
</tr>
<tr>
<td><a href=
"http://www.comeflyva.co.uk/index.php/pages/missionstatement">Mission
Statement</a></td>
<td><a href="http://www.comeflyva.co.uk/index.php/pages/termsandconditions">Terms and conditions</a></td>
</tr>
<tr>
<td> </td>
<td><a href="/prc/section2/activityandleave.php">Flight activity
and leave policy</a></td>
</tr>
<tr>
<td> </td>
<td><a href=
"http://www.comeflyva.co.uk/index.php/pages/careerandawards">Career
guide</a></td>
</tr>
<tr>
<td> </td>
<td><a href=
"http://www.comeflyva.co.uk/index.php/pages/leavingcomefly">Leaving
Come Fly...</a></td>
</tr>
<tr>
<td> </td>
<td><a href="http://www.comeflyva.co.uk/index.php/staff">Staff
Positions and Vacancies</a></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="left" bgcolor="#6179D1" class="bar">Flight
Operations</td>
<td align="left" bgcolor="#6179D1" class="bar">Learning Centre</td>
</tr>
<tr>
<td><a href=
"http://www.comeflyva.co.uk/index.php/pages/introductiontoflightoperations">
Introduction to Flight Ops</a></td>
<td><a href=
"http://www.comeflyva.co.uk/index.php/pages/introductionlearningcentre">
Introduction to the Learning Center</a></td>
</tr>
<tr>
<td><a href=
"http://www.comeflyva.co.uk/index.php/pages/standareoperatingprocedure">
Standard operating procedures</a></td>
<td><a href=
"http://www.comeflyva.co.uk/index.php/pages/traininglinks">Training
Links</a></td>
</tr>
<tr>
<td><a href=
"http://www.comeflyva.co.uk/index.php/pages/kacars">kACARS</a></td>
<td> </td>
</tr>
<tr>
<td><a href=
"/http://www.comeflyva.co.uk/index.php/pages/flyingonline">Online
Flying Guide</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<table align="center" border="1"></table>
<p><span style="display: none;"> </span></p>
<table border="2"></table>
</div>
</body>
</html>

Any help would be greatly received!!

Kind Regards

Scott

Jeff · June 16, 2011

Not Allowed

You are not allowed permission to access this page.

Scott · June 16, 2011

Not Allowed

You are not allowed permission to access this page.

lol hold on Ill turn it on...

Scott · June 16, 2011

Turned on!

vader21 · June 19, 2011

Okay your positioning is the one causing the problem, i think.

One of the things i first learned when i studied design was to always have a backbone of something meaning, keep everything centralized. If you put all your css classes in one spot and just call it by ID and Class

for individual page that would be a lot easier then making new styles or copy and pasting on every page.

Okay let me try to help you out. Start by making these DIVS ( This is just an example. Work the styles out to fit your layout )

The HTML

  <div id="container">
  <div id="header"></div>
  <div id="body"></div>
  <div id="footer"></div>
  </div>

"There are only four divs required for this to work. The first is a container div that surrounds everything. Inside that are three more divs; a header, a body and a footer. That's it, all the magic happens in the CSS."

The CSS

html,
body {
  margin:0;
  padding:0;
  height:100%;
}
#container {
  min-height:100%;
  position:relative;
}
#header {
  background:#ff0;
  padding:10px;
}
#body {
  padding:10px;
  padding-bottom:60px;   /* Height of the footer */
}
#footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;   /* Height of the footer */
  background:#6cf;
}

And For IE

#container {
  height:100%;
}

Now One last thing it looks like you are using full site links for your images, try not using it as it can be easier on you when you change things around.

Hope this Helped if not i can try explaining once again

Strider · June 19, 2011

There is an easier way, in the footer styles, add:

clear:both;

That should force the footer to the bottom, and everything to remain where it is.

vader21 · June 19, 2011

There is an easier way, in the footer styles, add:
clear:both;
That should force the footer to the bottom, and everything to remain where it is.

Yes sir, that is also correct

Sign In

HTML question

Recommended Posts

Scott

Link to comment

Share on other sites

Jeff

Link to comment

Share on other sites

Scott

Link to comment

Share on other sites

Scott

Link to comment

Share on other sites

vader21

Link to comment

Share on other sites

Strider

Link to comment

Share on other sites

vader21

Link to comment

Share on other sites

Join the conversation