SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    border radius on navmenu a:hover

    My nav menu has 7px radius on the corners. I need the image i have sent to hover on them to have a radius of 7px when i hover (and active) on the home (left) button only. I have tried #navmenu li.menu-item-home a:hover { border-top-left-radius: 7px; border-bottom-left-radius: 7px; } but that doesn't seem to work. I have seen on other sites code - #navmenu li.menu-item-513 a:hover (or any number). So how do I know which number to use if that is the way. -THanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    It's not quite clear what you are asking here. You talk of images and border radius, but just use one or the other. Could you provide a screen shot of what you are hoping to achieve, and either a live link or at least some working example code? Numbers in the CSS class selector have no inherent meaning, so don't worry about that. It's just part of the name someone chose to gave it.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Here is what i have. http://www.flickr.com/photos/7717650...in/photostream
    Here is what i want but only on the home button. http://www.flickr.com/photos/7717650...in/photostream
    Here is what happens now. http://www.flickr.com/photos/7717650...in/photostream

    Here is my code for the menu.



    #navmenu {
    margin: auto;
    }

    #navmenu ul {
    background: url(images/nav1.png) no-repeat;
    float: left;
    width: 949px;
    position: relative;
    top: 20px;
    }

    #navmenu li {
    float: left;
    list-style-type: none;
    padding: 0px px 0px px;
    }

    #navmenu li a {
    color: #fff;
    text-shadow: #000 -1px 0px;
    display: block;
    padding: 10px 11px 10px 11px;
    position: relative;
    text-decoration: none;
    font-size: 18px;
    position: relative;
    right: 40px;
    border-right: 1px solid #245b7d;
    height: 20px;
    }

    #navmenu li a:hover {
    background: url(images/nav2.png) no-repeat;
    text-decoration: underline;
    }

    #navmenu li a:active {
    background: url(images/nav3.png) no-repeat;
    }
    Attached Images Attached Images

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    I am going to concentrate on how to achieve what you want rather than how to fix what you have.

    The issue is that you have given border-radius to the UL.
    You could solve this one of a number of ways. One is to actually apply the default bg image to the LIs
    Give ALL THE LIs top/left andbottom left/border radius. Apply the same to the A tags.
    then LI +LI , LI+LI A { border-radius:none;}


    OR you could also target the first LI /LI A by using #navmenu>UL >li:first-child OR #navmenu>UL >li:first-of-type OR just by giving it a class.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried what you suggested. I must have done something wrong. Can you please be a little more descriptive? I'm a newbie at this. Maybe show w/ my code i posted maybe. :/

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by nlsilverberg View Post
    I tried what you suggested. I must have done something wrong. Can you please be a little more descriptive? I'm a newbie at this. Maybe show w/ my code i posted maybe. :/
    Could you post the HTML and CSS you currently have?

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "html://www.w3.org/TR/xhtm1/DTD/xhtml-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title> - GreenPlumbing</title>
        <meta http-equiv="Content-Type"
             content="text/html; charset=utf-8"/>
        <link href="gpstyle.css" rel="stylesheet" type="text/css"/>
      </head>
      <body>
    <div id="wrapper">
       <div id="header">
    <img src="images/gplogo.png" class="logo"
      width="540" height="80"
         alt="BeGreenPlumbing logo"/>         
         <div id="tagline">
      A good name is rather to be chosen<br/>than great riches. - Proverbs 22:1
         </div> <!-- end of tagline div -->
      </div> <!-- end of header div -->
    <div id="navmenu">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="testimonies.html">Testimonies</a></li>
        <li><a href="helpfulinfo.html">Helpful Info</a></li>
    </div> <!-- end of navmenu div --> 
    <div id="bodycontent">
        <h2>Home</h2>
    <div id="main">
       <p><h4>Plumbing Services You Can Count On Every Time!</h4></p>
    
    
        <p>We are a small business that strives to give superb service. We have flat rates on many of our services. We have plumbers with many years in the business. Our rates are very competitive with our competition.</p>
        <p>Whether you have a clogged drain, need a hot water heater or a complete remodeling project, Green Plumbing has got it covered.</p>
        <p>Fair Pricing-Quality Work-Beautiful Results</p>
        <p> We hope that with that first call you will never call another plumber again.</p>
    </div> <!-- end of main div -->
    <div id="widget">
       <p><h3>What You Can Expect From Green Plumbing</h3></p>
    <p><h4>100% SATISFACTION GUARANTEE</h4></p>
    <p>You'll never be disappointed with our Service.</p>
    <p>We guarantee you'll be pleased, no matter what it takes.</p>
     <p><h4>Prices Quoted In Advance</h4></p>
    <p>We'll give you the price, guarantee the price, and guarantee the work.</p>
    <p>That way there are no surprises. That’s the way we do business.</p>
     <p><h4>PROFESSIONAL SERVICE</h4></p>
    You deserve the comfort and peace of mind that comes with having a professionally maintained system. We use only the finest quality products and the most skilled technicians. When you call Green Plumbing, you can be confident that you will have the most professional people in the plumbing service industry today.</p>
    </div> <!-- end of widget div -->
        </div> <!-- end of bodycontent div -->
    <div id="footer">
    
    <!-- end of "footer" div --> 
    </div> <!-- end of wrapper div -->
      </body>
    </html>
    CSS

    Code:
    body {
      background: url(images/linebg.png);
    }
    
    #bodycontent {
      margin: auto;
      width: 949px;
      position: relative;
      top: 70px;
      background: #fff;
      border-radius: 7px;
      box-shadow: 0px 3px 5px #999;
    }
    
    #wrapper {
      margin: 0 auto;
      width: 949px;
    }
    
    p {
      color: #000;
      font-family: Big Caslon, Times, Georgia;
    }
    
    h2 {
      font-family: Big Caslon, Times, Georgia;
      padding: 20px 20px 0px 20px;
    }
    
    h3 {
      color: #245b7d;
    }
    
    h4 {
      color: #154D43;
    }
    
    
    
    
    
    ///////* MENU */
    
    
    
    
    
    
    #navmenu {
        margin: auto;
    }
     
    #navmenu ul {
        background: url(images/nav1.png) no-repeat;
        float: left;
        width: 949px;
        position: relative;
        top: 20px;
    }
     
    #navmenu li {
        float: left;
        list-style-type: none;
        padding: 0px px 0px px;
    }
     
    #navmenu li a {
        color: #fff;
        text-shadow: #000 -1px 0px;
        display: block;
        padding: 10px 11px 10px 11px;
        position: relative;
        text-decoration: none;
        font-size: 18px;
        position: relative;
        right: 40px;
        border-right: 1px solid #245b7d;
        height: 20px;
    }
     
    #navmenu li a:hover {
    	background: url(images/nav2.png) no-repeat;
    	text-decoration: underline;
    }
    
    #navmenu>ul >li:first-of-type {
      border-bottom-left-radius: 7px;
      border-top-left-radius: 7px;
    }
    
    #navmenu li a:active {
      background: url(images/nav3.png) no-repeat;
    }
    
    
    
    
    
    //////* ADJUSTMENTS */
    
    
    
    
    .logo {
      position: absolute;
      right: 300px;
      top: 300px;
      border: 2px solid #fff;
    }
    
    #tagline {
      position: absolute;
      right: 180px;
      top: 50px;
      font-family: Papyrus;
      font-size: 21px;
      font-weight: bold;
    }
    
    #widget {
      position: absolute:
      right: 700px;
      width: 200px;
      padding: 0px 10px 0px 10px;
      border: 2px solid #C4C4C4;
      border-radius: 4px;
      margin: -339px 707px;
      background: #F7F7F7 url(images/wh.png);
    }
    
    #main {
      padding: 2px 0px 0px 20px;
      width: 650px;
      order: 1px solid red;
    }
    
    
    
    
    
    
    
    /////////* FOOTER */
    
    
    
    
    
    #footer {
    
    }
    Last edited by ralph.m; Apr 14, 2012 at 17:06. Reason: added code tags

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    This is a basic way to approach it:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    	
    <style media="all">
    html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}
    
    #wrapper {
    margin: 0 auto;
    width: 949px;
    overflow:hidden;
    }
    
    ul#navmenu {
    overflow: hidden;
    list-style: none;
    }
    
    #navmenu li {
    float: left;
    padding: 0;
    }
    
    #navmenu li a {
    color: #fff;
    background: green;
    text-shadow: #000 -1px 0px;
    display: block;
    padding: 10px 11px 10px 11px;
    text-decoration: none;
    font-size: 18px;
    border-right: 1px solid #245b7d;
    height: 20px;
    }
    
    #navmenu li a:hover {
    background: blue none no-repeat;
    text-decoration: underline;
    }
    
    ul#navmenu a.first {
    border-radius: 7px 0 0 7px;
    }
    
    #navmenu li a:active {
    background: red none no-repeat;
    }
    
    #main {
    padding: 2px 0px 0px 20px;
    width: 650px;
    border: 1px solid red;
    }
    </style>
    	
    </head>
    <body>
    
    <div id="wrapper">
    
    	<ul id="navmenu">
    		<li><a class="first" href="index.html">Home</a></li>
    		<li><a href="about.html">About Us</a></li>
    		<li><a href="contact.html">Contact Us</a></li>
    		<li><a href="testimonies.html">Testimonies</a></li>
    		<li><a href="helpfulinfo.html">Helpful Info</a></li>
    	</ul>
    
    </div> <!-- end of wrapper div -->
    </body>
    </html>

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    Ralph pretty much described what i was saying (tho he opted for the method of ADDING A CLASS). Which, as I said, has the most backward browser support.

    If you didn't want to have to alter the markup, you also target your element as follows ( note this way you cont need to have : class="first" in your HTML):

    Code:
    ul#navmenu li:first-child a {
    border-radius: 7px 0 0 7px;
    }

    Another way ( which is supported all the way back to IE7)
    Code:
    #navmenu li,#navmenu li a {
    border-radius: 7px 0 0 7px;
    }
    #navmenu li + li, #navmenu li +li a{border-radius:0; }
    Of course one figure you cant be worried about IElt8 anyway, as it did not support rounded corners anyhow.

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much guys. It works now. I really appreciate it.


Bookmarks

Posting Permissions

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