...

View Full Version : Navigtion Button Text Positioning



derektoigo
05-24-2009, 08:59 AM
Hi Folks,

I have a small problem which I was hoping the community here would be able to help me out with. On the navigation bar of my website that I'm currently building, when you hover over a button in the menu bar, notice how the text is slightly off center. I believer that this is an illusion caused by the shadow I've added below the buttons, and I was wondering if anyone could show me how to perhaps 'push' the text up slightly so that its more centered? If it helps, I've posted the HTML & CSS below. You can also see my site online at www.derektoigo.com (http://www.derektoigo.com)

On a side note, if you notice on my contact page I have a form, if I type in the Message window, the text continues to extend beyond the width of the box and does not break and continue onto the net line. Any suggestions as to how I can resolve this?

Thanks to everyone for the help in advance,

Derek



HTML (Header region):

<div id="header">

<div id="logo">
<img src="images/logo.png" alt="MyPortfolio" />
<!--optional text region
<p><strong>My</strong> Portfolio</p>
-->
</div><!--end logo-->

<ul id="navigation">
<li>
<div id="leftRegion"></div>
<div id="centerRegion"><a href="contact.html" alt="Get In Touch">Get In Touch</a></div>
<div id="rightRegion"></div>
</li>
<li>
<div id="leftRegion"></div>
<div id="centerRegion"><a href="blog.html" alt="My Blog">My Blog</a></div>
<div id="rightRegion"></div>
</li>
<li>
<div id="leftRegion"></div>
<div id="centerRegion"><a href="portfolio.html" alt="Work Portfolio">Work Portfolio</a></div>
<div id="rightRegion"></div>
</li>
<li>
<div id="leftRegion"></div>
<div id="centerRegion"><a href="services.html" alt="My Services">My Services</a></div>
<div id="rightRegion"></div>
</li>
<li>
<div id="leftRegion"></div>
<div id="centerRegion"><a href="about.html" alt="About Me">About Me</a></div>
<div id="rightRegion"></div>
</li>
<li>
<div id="leftRegion"></div>
<div id="centerRegion"><a href="index.html" alt="Home">Home</a></div>
<div id="rightRegion"></div>
</li>
</ul><!--end navigation-->

</div><!--end header-->


CSS Styles:

#container #header {
height: 95px;
float: left;
width: 960px;
clear: both;
overflow: hidden;
}



#container #header #logo {
float: left;
height: 60px;
width: 300px;
margin-right: 50px;
padding-top: 35px;
}



#container #header #logo p {
height: 95px;
font-size: 36px;
margin-top: 25px;
color: #CCC;
font-family: Arial, Helvetica, sans-serif;
}


#container #header #logo p strong {
color: #FFF;
}



#container #header #navigation {
float: right;
font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
font-size: 14px;
margin-top: 33px;
width: 600px;
margin-left: 5px;
font-weight: normal;
}



#container #header #navigation li {
float: right;
height: 28px;
margin-left: 15px;
}


#container #header #navigation li a {
text-decoration: none;
color: #666;
float: right;
height: 28px;
}



#container #header #navigation li a:hover {
text-decoration: none;
color: #1e7896;
height: 28px;
}



#container #header #navigation li #leftRegion {
float: left;
width: 6px;
height: 28px;
}



#container #header #navigation li:hover #leftRegion {
background-image:url(../images/navigationOver_left.png);
background-repeat:no-repeat;
float: left;
width: 6px;
height: 28px;
}



#container #header #navigation li #centerRegion {
float: left;
line-height: 28px;
}



#container #header #navigation li:hover #centerRegion {
background-image:url(../images/navigationOver_center.png);
background-repeat:repeat-x;
height: 28px;
line-height: 28px;
float: left;
}



#container #header #navigation li #rightRegion {
float: left;
width: 6px;
height: 28px;
}



#container #header #navigation li:hover #rightRegion {
background-image:url(../images/navigationOver_right.png);
background-repeat:no-repeat;
float: left;
width: 6px;
height: 28px;
}#container #mainContents #left #feature {
width: 960px;
}


#container #mainContents #left h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 21px;
color: #999;
font-weight: normal;
}

effpeetee
05-24-2009, 09:54 AM
We really need ALL your code or a link to your site.

Frank

derektoigo
05-24-2009, 10:20 AM
Hi Frank,

I posted the link to my website in the 2nd paragraph of my original post, here it is again: http://www.derektoigo.com (www.derektoigo.com)

Thanks for the help,

Derek

abduraooft
05-24-2009, 02:50 PM
Try the following

#footer #innerFooter #navigation li {/*footer.css (line 30)*/
color:#CCCCCC;
display:inline;
/*float:right;*/
}

PS:

Hi Frank,
I posted the link to my website in the 2nd paragraph of my original post, here it is again: [...] Please use
][/COLOR] tags while posting your code here, to make it easier to read.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum