Jump to content

How To Horizontal Align Menu + Date


phprocker

Recommended Posts

Hey all. I can't seem to figure out how to horizontally align my top menu and the date.  The date always starts on a new line.  I want it aligned horizontally with the top menu and I want it aligned to the right.

 

Here's what I have.

 

a.menu:link,a.menu:visited
{
display:inline;
font-weight:bold;
font-size:0.875em;
color:#F5F5DC;
border:1px solid #006400;
background-color:#008000;
text-align:center;
padding:2px;
text-decoration:none;
}

#topmenu
{
background-color:#008000;
margin-left:auto;
margin-right:auto;	
width:1000px;		
margin-top:5px;
height:21px;
}

<div id="topmenu">
<a class="menu" href="index.php">HOME</a>
<a class="menu" href="indexte.php">CONTACT US</a>
<a class="menu" href="indextk.php">ABOUT US</a>
<a class="menu" href="indexh.php">BLOG</a>
<a class="menu" href="indext.php">PHOTO GALLERY</a>
<p>Monday, November 08, 2010</p>
</div>

 

The date is always on a new line and not aligned to the right.

 

I want it too look like this:

HOME CONTACT US  ABOUT US BLOG PHOTO GALLERY                                                              Monday, November 08, 2010

Link to comment
https://forums.phpfreaks.com/topic/218088-how-to-horizontal-align-menu-date/
Share on other sites

Thanks again for the reply Haku. That did not work unfortunately.

 

Here is the entire code I'm using on one page.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Testing</title>

<style>
#header
{
margin-left:auto;
margin-right:auto;
width:998px;	
height:125px;
border:1px solid #006400;
background-image:url('imgs/h_lime.gif');
background-repeat:repeat-x;
}

/* begin menu formatting */

a.menu:link,a.menu:visited
{
margin-top:0px;
float:left;
margin-right:2px;
font-weight:bold;
font-size:0.875em;
color:#F5F5DC;
border:1px solid #006400;
background-color:#008000;
text-align:center;
padding:2px;
text-decoration:none;
}
a.menu:hover,a.menu:active
{
background-color:#91C991;
}
/* end menu formatting */

div.topmenu
{
background-color:#008000;
margin-left:auto;
margin-right:auto;	
width:1000px;		
margin-top:0px;
}

p.date
{
color:#F5F5DC;
padding:3px 10px 3px;
text-align:right;
font-size:0.875em;	
font-weight:bold;
}
/* end display blocks */


</style>
</head>
<body>




<div id="header"></div>

<div class="topmenu">
<a class="menu" href="home.php">HOME</a>
<a class="menu" href="contact.php">CONTACT US</a>
<a class="menu" href="about.php">ABOUT US</a>
<a class="menu" href="blog.php">BLOG</a>
<a class="menu" href="photos.php">PHOTO GALLERY</a>
<p class="date">November 8, 2010</p>
</div>


</body>
</html>

 

You can see there is roughly 15-20px of white space between the header and the menu when using "float:left;" for the menu.  You will see that if you remove the "float:left;" from the a.menu.link removes the white space but it messes up the date alignment.

 

I can't figure it out.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.