Welcome to the MacNN Forums.

bwahahax · Mar 18, 2004, 12:09 AM

Okay. Maybe this is something straight-forward, but I've been wrestling with it for hours, and, well, need help. I'm trying to build a button bar using CSS, but I just can't seem to get the buttons to align vertically. They should stay inside the bar, not drop off the bottom.

Here's what it looks like: http://thereckoning.gloaming.org/source/top.html

I've stripped the irrelevent code from the page and the source is below:

Code:
<html>
<head>
    	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	<title>The Reckoning</title>
<style>
body { 
	background-color: #F5F5F5;	
	margin-top: 10px;
	margin-bottom: 10px;
	font-family: Optima, Arial, sans-serif;
	text-align: center; /*for IE stupidity*/ }

#container  {
	margin: 0px auto;
	padding: 0px 0px;
	width:   550px }

h1 {	
	margin: 0px 0px;
	padding: 0px 0px;
	text-align: center;
	height: 20px;
	border-top: 1px solid #88BBEE;
	border-left: 1px solid #88BBEE;
	border-right: 1px solid #4477AA;
	border-bottom: 1px solid #4477AA }

a	{
	color: #333;
	font-weight: bold;
	text-decoration: none;
	font-size: 12px;
	margin: 0px 0px;
	padding: 3px 10px;
	background-image: url("norm.gif");
	background-repeat: repeat-x;
	background-color: #6699CC }

a:hover {
	color: #333;
	background-image: url("over.gif");
	background-repeat: repeat-x;
	background-color: #6699CC }

a:active { 
	color: #F5F5F5;
	background-image: url("press.gif");
	background-repeat: repeat-x;
	background-color: #6699CC }

</style>
</head>

<body>
    <div id="container">
      <h1>
		<a href="index.html">Blog</a>
		<a href="archive.html">Blog Archives</a>
		<a href="members.html">Members</a>
		<a href="films.html">Film List</a>
		<a href="music.html">Music List</a>
		<a href="links.html">Links</a>
		<a href="contact.html">Contact</a>
	</h1>
    </div>
</body>
</html>

What do I need to do to make this display correctly?

Thanks in advance!

Synotic · Mar 18, 2004, 01:23 AM

Originally posted by bwahahax:
Okay. Maybe this is something straight-forward, but I've been wrestling with it for hours, and, well, need help. I'm trying to build a button bar using CSS, but I just can't seem to get the buttons to align vertically. They should stay inside the bar, not drop off the bottom.

Here's what it looks like: http://thereckoning.gloaming.org/source/top.html

I've stripped the irrelevent code from the page and the source is below:

Code:
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>The Reckoning</title> <style> body { background-color: #F5F5F5; margin-top: 10px; margin-bottom: 10px; font-family: Optima, Arial, sans-serif; text-align: center; /*for IE stupidity*/ } #container { margin: 0px auto; padding: 0px 0px; width: 550px } h1 { margin: 0px 0px; padding: 0px 0px; text-align: center; height: 20px; border-top: 1px solid #88BBEE; border-left: 1px solid #88BBEE; border-right: 1px solid #4477AA; border-bottom: 1px solid #4477AA } a { color: #333; font-weight: bold; text-decoration: none; font-size: 12px; margin: 0px 0px; padding: 3px 10px; background-image: url("norm.gif"); background-repeat: repeat-x; background-color: #6699CC } a:hover { color: #333; background-image: url("over.gif"); background-repeat: repeat-x; background-color: #6699CC } a:active { color: #F5F5F5; background-image: url("press.gif"); background-repeat: repeat-x; background-color: #6699CC } </style> </head> <body> <div id="container"> <h1> <a href="index.html">Blog</a> <a href="archive.html">Blog Archives</a> <a href="members.html">Members</a> <a href="films.html">Film List</a> <a href="music.html">Music List</a> <a href="links.html">Links</a> <a href="contact.html">Contact</a> </h1> </div> </body> </html>

What do I need to do to make this display correctly?

Thanks in advance!

Well first off... don't use h1s for your navigation... H1s are for the title of the page... so cut that out. The problem seems to be because you're trying to manipulate inline elements as blocks and it's just not working out... add "display: block; float: left;" to your "a" selector. That should sort it out. Some notes... try not to use any explicit widths or heights... if you resize the text you'll see that everything moves out of place. Also, for your purposes, it might be best to use an unordered list for the navigation. Check out this article for some tips.

OreoCookie · Mar 18, 2004, 02:12 AM

Take a look at my page that relies on CSS for the design.

I use <div id="nav"> and <div id="content"> for separating content and navigation (i. e. static things like design and navigation and content. I can now implement a completely different design without having to change any of my .html files (or in my case .shtml files)! I just need to change my css file.

The biggest caveat of my approach is that due to numerous bugs in IE's CSS engine, the page isn't properly displayed (IE doesn't know position:fixed, and it has some problems calculating the correct dimensions).

Akarso · Mar 18, 2004, 03:17 PM

try reading this article over at alistapart.com: taming lists.

bwahahax · Mar 18, 2004, 07:22 PM

Am I the only one who can't see many of the images, other than the ads, in the forums today?

Anyhoo, thanks a lot for the good advice!
I spent most of the day on it, and this is what I've got:
http://thereckoning.gloaming.org/source/test.html

I've inserted an image of what the page should look like at the bottom of the page to make sure it's displaying correctly in different browsers and on different computers.

Hopefully my CSS grammar is improving as well!

Here's the new CSS code for the page. If anyone sees obvious ways that I could clean it up, let me know.

Sorry for the large posts.

Code:
body {
	margin: 10px 0px;
	padding: 0px;
	background-color: #f5f5f5;
	font-family: Optima, Arial, sans-serif;
	text-align: center; /*for IE stupidity*/ }

#container {
	width: 552px;
	margin: 0px auto;
	padding: 0px }

a {
	color: #333;
	font-weight: bold;
	text-decoration: none }

a:hover {
	color: #f5f5f5;
	background-color: #6699cc }

#banner {
	height: 35px;
	border-top: 1px solid #88bbee;
	border-left: 1px solid #88bbee;
	border-bottom: 1px solid #4477aa;
	border-right: 1px solid #4477aa;
	background-color: #6699cc }

#contact {
	margin: 0px 10px;
	color: #777;
	font-weight: normal;
	font-size: 10px;
	line-height: 14px;
	text-align: right }

#nav {
	float: right }

#nav ul {
	margin: 0px;
	padding: 0px }

#nav ul li {
	display: block;
	float: left }

#nav ul li a {
	width: 90px;
	display: block;
	border-top: 1px solid #88bbee;
	border-left: 1px solid #88bbee;
	border-bottom: 1px solid #4477aa;
	border-right: 1px solid #4477aa;
	background-color: #6699cc;
	background-image: url("norm.gif");
	background-repeat: repeat-x;
	color: #f5f5f5;
	font-weight: bold;
	font-size: 11px;
	line-height: 15px;
	text-align: center;
	text-transform: uppercase }

#nav ul li a:hover {
	background-color: #88bbee;
	background-image: url("over.gif");
	background-repeat: repeat-x;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
	border-bottom: 1px solid #888;
	border-right: 1px solid #888 }

#nav ul li a:active {
	background-color: #4477aa;
	background-image: url("press.gif");
	background-repeat: repeat-x;
	border-top: 1px solid #888;
	border-left: 1px solid #888;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555 }

#nav ul li#active a {
	background-color: #4477aa;
	background-image: url("press.gif");
	background-repeat: repeat-x;
	border-top: 1px solid #888;
	border-left: 1px solid #888;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555 }

#content {
	margin-top: 5px }

h1 {
	margin: 0px;
	padding: 2px 6px;
	border-top: 1px solid #888;
	border-left: 1px solid #888;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
	color: #F5F5F5;
	background-color: #777;
	font-weight: bold;
	font-size: 12px;
	line-height: 13px;
	text-transform: uppercase;
	text-align: left }

#border {
	border-top: 1px solid #6699cc;
	border-left: 1px solid #88bbee;
	border-bottom: 1px solid #4477aa;
	border-right: 1px solid #4477aa;
	background-color: #6699cc }

p.post {
	margin: 5px 5px 0px 5px;
	padding: 10px 15px;
	border-top: 1px solid #4477aa;
	border-left: 1px solid #4477aa;
	border-bottom: 1px solid #88bbee;
	border-right: 1px solid #88bbee;
	background-color: #f5f5f5;
	color: #666;
	font-weight: normal;
	font-size: 12px;
	line-height: 14px;
	text-align: justify }

p.tag {
	margin: 0px 25px 5px 25px;
	color: #333;
	font-weight: bold;
	font-size: 10px;
	line-height: 14px;
	text-align: right }

Oisín · Mar 19, 2004, 03:54 AM

As far as I can tell, it renders usably and readably, but not 100% correctly on both FireFox 0.8, MSIE 6.0 and Opera 7.23, all on PC.

Opera shows the menu as a vertical menu to the right of the blog field, like this:

On rolling over the other menu items, their background turns into the same grey effect that the active one has.

FireFox and IE both look like the picture on the page, but the other menu items all become blue (no effect) on rollover.

Sorry, didn't bother to read through the CSS