Member Avatar for Dante2

Ok, I've done everything I can think of and I've looked around and haven't found anyone else that has run into this kind of problem. Maybe I'm just missing something really simple but I am at my wit's end. Umm... actually, just had an idea, but I'll put this here just in case it doesn't work. I have a navbar with a roll-over image in the back. The text links however are all the way at the top of the bar instead of in the middle of the bar. I have done all I can think to do to move them but nothing seems to make them budge from the top. Am I missing something really simple here, or is there some fix yet to be exploited? Here's my code so far. Also, if anyone has any tips on making my code more concise, all opinions and advice are welcome. =) Thanks.

<!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>
<title>Dante2 Home Page</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<meta name="description" content="This is my personal website for my blogs, videos, podcasts, software reviews, and such." />
			<meta name="keywords" content="funny, video, blog, Dante, 2, dante2, danet2, do not, rock, God, Jesus, Music, humor, cats, catology" />
			<link rel ="stylesheet" type="text/css" href="styles/dante2 styles.css" />
			<script src="sIFR-2.0.7/sifr.js" type="text/javascript"></script>
  			<link href="sIFR-2.0.7/sIFR-screen.css" rel="stylesheet" type="text/css"/>
</head>

<body>
	
<div id="container">	

<h1 class="header">Dante2</h1>

<ul id="navbar">
	<li><a href="index.html">Home</a></li>
	<li><a href="aboutme.html">About Me</a></li>
	<li><a href="view_blog.php">Blogs</a></li>
	<li><a href="videos.html">Videos</a></li>
	<li> <a href="podcast.html">Pod Cast</a></li>
	<li><a href="software.html">Software</a></li>
	<li><a href="featured.html">Featured</a></li>
</ul>

<div id="sidebar" ><!--This is the sidebar for each page.-->
<h2>Welcome</h2>
<p>Welcome to the latest revision of my web site. I have redesigned it for two reasons. 1:) I am using this as an experiment/portfolio for my works. 2:) There are several things you will need to enjoy this site:</p>

<div id="require">
   A good sense of humor<br />
   A love for the strange<br />
   No fear of laughing<br />
   No fear of crying<br />
   Your own tissues (I don't share mine)<br />
   A good friend to laugh/cry with<br />
</div>

<p>Why someone to cry with? Some of the content on this site is meant to hit you in the heart. To make you seriously look at yourself in the light of God's Word and cause you to ask, <span class="quote"> Am I living for God with hope and peace, or am I living on my own power and not cutting it?"</span> You decide.</p>
</div>

<div id="content"><!--This is the news section for the front page-->
<h2>Site News</h2>
<p><strong>About Me Page <em>Aug 17th</em></strong><br />  I have finally begun work on the About Me page</p>

<p>Ok, Day one. We have updated the site and we are working full swing to bring you the best and most accessible site possible.
Nuff Said for now. </p>
</div>

</div>
</body>

</html>

And here's the CSS:

@font-face {
	font-family: love;
	scr: url(../fonts/Fortheloveofhatelight.ttf);
}



body {
	background: url("../images/metal.bmp") fixed;
}

#container {
	background: url("../images/container-bgnd.png")  no-repeat;
	width: 805px;
	margin: 0 auto;
	overflow: hidden;
}

.header {
	background: url(../images/logo.png) no-repeat;
	height: 78px;
	width: 204px;
	text-indent: -9999px;
	
}

#navbar {
	list-style: none;
	overflow: hidden;
	width: 805px;
	padding: 0;
	margin-left: 1px;
}

#navbar li {
	float: left;
	text-align: center;
}

#navbar li a {
	display: block;
	background: url(../images/button.gif)no-repeat;
	width: 114.5px;
	height: 73px;
	text-decoration: none;
	font: 20px Verdana;
	vertical-align: text-bottom;
}

#navbar li a:hover {
	background: url(../images/button.gif) center bottom no-repeat;
}

#sidebar {
	float: left;
	width: 380px;
	margin-left: 20px;
	color: #DDD;
}

#require {
	font-size: 50px;
}

#content {
	float: right;
	width: 340px;
	margin-right: 10px;
	color: #DDD;
}

#about {
	float: right;
	width: 380px;
	margin-right: 20px;
}

#videos {
	position:relative;
	left: 40px;
}

.intro {
	font-weight: bold;
	font-family: love;
}

.soft {
	color: white;
	text-decoration: none;
}

h2 {
	margin-bottom: 10px;
	border-bottom: 2px;
}

p {
	font-weight: bold;
}

#profile {
	padding: 0;
	margin: 0;
}

#name {
	width: 150px;
}

Attached is the button image. Thanks again.

button.gif 5.98 KB
  • 3 Contributors
  • 7 Replies
  • 254 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by Dante2

Dani AI

Generated

This is a very common vertical-centering issue with image-based nav buttons. ended up centering the links by removing the explicit height and adding symmetric padding, which works, but it can be fragile (fractional pixels, box-model effects, wrapping). was on the right track with padding and suggested using em for font sizing. misread the CSS: background: ... fixed sets background-attachment, not the element position, so it would not force the nav into a fixed layout.

Why it happened: the anchors were treated as block-level elements, so vertical-align has no effect. Adding padding to a block changes its total size unless box-sizing or the element height is handled explicitly, so the nav can grow unexpectedly.

Two more robust approaches that avoid fragile pixel hacks:

/* single-line links: simple and stable */
#navbar li a {
  display: inline-block;
  height: 48px;          /* match the button graphic */
  line-height: 48px;     /* vertically centers single-line text */
  padding: 0 0.6em;
  box-sizing: border-box;
}
/* flexible, wrap-safe: modern and reliable */
#navbar li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  min-height: 3rem;      /* match graphic height or adapt */
}

Quick troubleshooting checklist that avoids wasted time: inspect computed height/padding in devtools, add a temporary outline/background to the anchor to see its box, avoid fractional pixels where possible, confirm text isn’t wrapping, and centralize the button height in one place (CSS variable or single rule) so hover sprites and fonts stay in sync. Using em for font sizes (as suggested) helps keep proportions consistent across devices.

Recommended Answers

All 7 Replies

Member Avatar for louie540

I'll take a look at it. I have been messing around with nav menus for about a year so I might be able to help you.

By the way, your code looks really clean.

Member Avatar for louie540

Ok I don't have a lot of time to mess with it right now, but in "#nav li a" I took the height "73px" and divided by 2 and used that for padding-top (36.5px) so the text could go half way down. But then the navbar itself adds the 36.5px to it's height so it looks much bigger.

So then I tried changing from "height: 73px;" to "max-height: 73px;" and it just cut off everything else.

If I get more time, I'll look at it more. I felt like I was getting somewhere.

Did you make the background image yourself?

Member Avatar for Dante2

Thanks for the code compliment and your work so far. =) And yes, I did. I try to make all of my graphics. Keeps me from having to worry about infringement uses and usage fees.

And not to top things off I have just attained that highly illusive creature known as a client, so now I have yet another site to work on. The one I posted here is a personal site, thank heaven. I'm hoping to get back to that code before the night's out. I'll let you know if I come across anything tonight in the way of progress. Gotta go work on a couple mock-ups right now.

Member Avatar for Dante2

Ok, so this is a little unexpected, but that aforementioned idea I had when I posted this, it worked. I kept the width declaration but removed the height. I then added padding to top and bottom, and that seems to have fixed it. Had to get funky with the pixels, though.

padding-top: 35.5px;
padding-bottom: 35.5px;

and that got it back to the original dimensions but with the links centered. Now I just have to increase the font size to fill it out a little better.

Member Avatar for louie540

I'm glad you could get that fixed :)
For your font size, I suggest you use "em" instead of pixels for better cross-browser compatibility. But 1em is pretty big so don't be afraid to experiment with decimals.

I've only had like 2 clients myself btw lol. I consider myself pretty new to this and I also have to focus on school. Are you charging anything?

Member Avatar for lps

Actually I think your main problem is that you declared a 'fixed' position to your body. That made the rest of the element inherit it and thus created this problem, how about try to assign position:relative or absolute to the nav bar. I believe it can work.

Member Avatar for Dante2

Lps, I will give that a try and see where it lands me. thanks for the suggestion.

Louie540, yeah I am charging. right now I'm working with an estimate of about $800. kinda cheap for the work I am doing, but since I am still very new at this myself and some of the things I'll be doing will be learning on the fly, I think its a decent sacrifice. I didn't really get to finish my training before I moved and the school I was going to, though the best in the area and affordable, was not as good as it could have been.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.