Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member djsquid's Avatar
    Join Date
    Aug 2011
    Location
    Staffordshire
    Posts
    15
    Member #
    28854
    Hi,

    I am having difficulty trying to sort my navigation menu out. I have the links all in the correct place, and I have also managed to get all the hover effects working via CSS.

    The Navigation links all have 7px padding-top so that they are horizontally aligned with the red background to the navigation bar, and because of this the white hover effect also has 7px padding-top, but when I take the padding-top off, the links sit flush at the top of the red band rather than horizontally aligned.

    What can I do?

    First one without 7px Padding



    Second one with 7px Padding



    I need the white to be the same height as the red bar, and the button text to be horizontally aligned to the red!

    This is the code for them

    HTML Code:
    <div id="main">
        <div id="container">
    
            <div class="header">
            </div>
    
            <div id="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">About us</a></li>
                </ul>
            </div>
    
            <div id="content">
                <div id="contentholder">
                <h4>Content goes here</h4>
                </div>
     
                <div id="footercontainer">
                    <div id="footer">
                      <h2>Footer</h2>
                      </div>
                </div>
       
        </div>
    </div>


    Code:
    #nav {
        width:1020px;
        height:37px;
        background-image:url(Images/nav_gradient.jpg);
        background-repeat:repeat-x
    }
    
    #nav ul {
        list-style:none;
        text-align:center;
    }
    
    #nav ul li {
        position:relative;
        display:inline-block;
        padding-top:0px;
    }
    
    #nav ul li a {
        display:inline-block;
        font-size:20px;
        text-decoration:none;
        color:#FFF;
        padding-right:75px;
        padding-left:75px;
    }
    
    #nav ul li a:hover {
        display:inline-block;
        height:37px;
        background-color:#FFF;
        color:#ed1c24;
    }
    
    #nav ul li a:active {
        display:inline-block;
        background-color:#FFF;
        background-position:
        color:#ed1c24;
    
    }

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    #nav ul li a { line-height: 37px; } /* if you make the line height the same as that of your nav bar, the vertical padding will automatically calculate itself. */
    djsquid likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member djsquid's Avatar
    Join Date
    Aug 2011
    Location
    Staffordshire
    Posts
    15
    Member #
    28854
    You are a legend! thank you soooooooooo much! I can't believe it was so simple!

    This is very cheeky, but I am working on another project as well, and having a problem with something I was wondering you could help with?

    I have a div content for the middle section of my website which I have implemented a contact form for this, I also have a h1 tag and P tag above the form, I want to remove the h1 and P tag and have the form closer to the top, but when I delete these tags the form sits flush with the top of the content div and when I try to move it down with some padding or margin the content moves with it?? I'l add the code......

    **( I have removed the h1 and P tag in this now and put a space div in just to keep the contact form from sitting flush with the "contactuscontentholder"....Very annoying )




    HTML Code:
    <div id="content">
                <div id="contactuscontentholder">
                <div class="space"></div>
                <div id="contactform" class="myform">
                    <form id="form" name="form" method="post" action="Home.html">
                    <h1>Contact Us</h1>
                    <p>Product Enquiries or just a general chat?</p>
                    <label>Name
                    <span class="small">Add your name</span>
                    </label>
                    <input type="text" name="name" id="name"/>
                    <label>Email
                    <span class="small">Add your Email Address</span>
                    </label>
                    <input type="text" name="email" id="email"/>
                    <label>Message
                    <span class="small">How can we Help</span>
                    </label>
                    <input type="text" name="message" id="message"/>
                    <button type="submit">Submit</button>
                    <div class="spacer"></div>
                    </form>
                </div>
                </div>




    Code:
    /*--------------------CONTENT HOLDER STYLES -----------------------*/
    
    #content {
        width:1020px;
        height:100%;
    }
    
    #homecontentholder {
        margin-top:50px;
        margin-left:auto;
        margin-right:auto;
        width:908px;
        height:796px;
        background-image:url(Images/contentholder.jpg);
    }
    
    #productcontentholder {
        margin-top:50px;
        margin-left:auto;
        margin-right:auto;
        width:908px;
        height:796px;
        background-image:url(Images/contentholder.jpg);
    }
    
    #portfoliocontentholder {
        margin-top:50px;
        margin-left:auto;
        margin-right:auto;
        width:908px;
        height:796px;
        background-image:url(Images/contentholder.jpg);
    }
    
    #contactuscontentholder {
        margin-top:50px;
        margin-left:auto;
        margin-right:auto;
        width:908px;
        height:796px;
        background-image:url(Images/contentholder.jpg);
    }
    
    /*--------------------END OF CONTENT HOLDER STYLES -----------------------*/
    
    /*--------------------CONTENT HOLDER H1 STYLES -----------------------*/
    
    #productcontentholder h1 {
        font
        text-align:left;
        padding:55px;
    }
    
    #portfoliocontentholder h1 {
        text-align:left;
        padding:55px
    }
    
    /*------------------SPACER FOR CONTACT FORM!!!!!!!-----------------------*/
    /*------------------SPACER FOR CONTACT FORM!!!!!!!-----------------------*/
    
    .space {
        padding:20px;
    }
    
    
    /*------------------SPACER FOR CONTACT FORM!!!!!!!-----------------------*/
    /*------------------SPACER FOR CONTACT FORM!!!!!!!-----------------------*/
    
    
    
    
    
    #contactuscontentholder .myform {
        margin-top:25px;
        padding-left:0px;
    }
    
    
    
    
    
    
    /*--------------------END OF CONTENT HOLDER H1 STYLES-----------------------*/
    
    
    
    
    
    
    
    /*--------------------CONTACT US FORM -----------------------*/
    
    /*----FORM ----*/
    
    
    .myform {
        margin-top:50px;
        margin-left:25px;
        width:400px;
        padding:14px;
    }
    
    /*----FORM STYLE ----*/
    
    #contactform {
        border:solid 1px #F00;
        background:#FFF;
    }
    
    #contactform h1 {
        font-size:32px;
        font-weight:bold;
        margin-bottom:0px;
    }
    
    #contactform p {
        font-size:11px;
        color:#F00;
        margin-bottom:20px;
        border-bottom:solid 1px #F00;
        padding-bottom:10px;
    }
    
    #contactform label {
        display:block;
        font-size:25px;
        font-weight:300;
        text-align:right;
        width:140px;
        float:left;
    }
    
    #contactform .small {
        color:#F00;
        display:block;
        font-size:11px;
        font-weight:normal;
        text-align:right;
        width:140px;
    }
    
    #contactform input {
        float:left;
        font-size:12px;
        padding:4px 2px;
        border:solid 1px #F00;
        width:200px;
        margin:2px 0 20px 10px;
    }
    
    #contactform button {
        clear:both;
        margin-left:150px;
        width:125px;
        height:31px;
        background:#CCC;
        text-align:center;
        line-height:20px;
        color:#000;
        font-size:16px;
        font-weight:bold;
    }
    
    
    /*--------------------END OF CONTACT US FORM -----------------------*/

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    div#contactform {padding-top: 40px;}

    Try that.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member djsquid's Avatar
    Join Date
    Aug 2011
    Location
    Staffordshire
    Posts
    15
    Member #
    28854
    Hi TheGame1264

    I did try that and unfortunately it still moved the contactuscontentholder with it, would z-index work for this situation and make the form go ontop of the contactuscontentholder?

    Thanks


Remove Ads

Posting Permissions

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

Search tags for this page

css change background size on hover
,
css hover height
,
css hover link background color height
,
hover background increase
,

hover height

,
hover height css
,
hover on menu increases height
,
link menu on hover height css
,
navigation bar hover effects css background
,
navigation css horizontal hover height
Click on a term to search for related topics.
All times are GMT -6. The time now is 10:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com