Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navigtion Button Text Positioning

    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

    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;
    }

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    We really need ALL your code or a link to your site.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Thanks for the help,

    Derek
    Last edited by derektoigo; 05-24-2009 at 10:24 AM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Try the following
    Code:
    #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 [CODE][/CODE] tags while posting your code here, to make it easier to read.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •