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
    Aug 2014
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    diminishing certain border lines and adjusting clickable regions to fit round radius

    how to deminish furthest right border line?

    how to have home and faq clickable region to fit in rounded edges vs whole rectangle?

    Code:
    <style>
    nav	{
    	margin-top: -15px;
    	box-shadow: 10px 10px 5px grey;
    	width: 755px;
    	border-radius: 25px;
    	}
    nav ul{
    	background-color: black;
    	height: 50px;
    	padding: 0;
    	margin: 0;
    	border-radius: 25px;
    	}
    nav ul li {
    	list-style-type: none;
    	width: 150px; 
    	float: left;
    	border-right: 1px solid #CCC;
    	text-align: center;
    	}
    nav ul li a { 
    	text-decoration: none;
    	color: white;
    	line-height: 50px;
    	display: block;
    	}	
    nav ul li a:hover {
    	background-color: red;
    	color: orange;
    	}	
    	
    #company ul li {
    	text-align: right;
    	color: green;
    	line-height: 1.2;
    	list-style-type: none;
    	background-color: ;
    	margin-right: 2px;
    	margin-top: 0px;
    	
    		}
    #company ul li a {
    	text-decoration: none;
    
    	}
    	
    </style>
    
    <div id="company">
    	<ul>
    		
    		<li>Website: <a href="#">WWW.WHATEVER.COM</a></li>
    		<li>Telephone #: 1-800-867-5309</li>
    		<li>Email: whatever@gmail.com</li>
    		<li>Business Hours: Monday-Friday 8:00am-5:00pm</li>
    	</ul>
    </div>
    
    <nav>
    <ul>
    	<li><a href="#">HOME</a></li> 
    	<li><a href="#">PRODUCTS</a></li> 
    	<li><a href="#">ABOUT US</a></li> 
    	<li><a href="#">CONTACT US</a></li> 
    	<li><a href="#">FAQ</a></li>		
    </ul>
    </nav>
    
    <p id="sup">border radius allows you to add rounded corners</p>
    
    </body>

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,714
    Thanks
    0
    Thanked 238 Times in 233 Posts
    Hi there simplejunior,

    try it like this...
    Code:
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    nav	{
    	margin-top: -15px;
    	box-shadow: 10px 10px 5px grey;
    	width: 755px;
    	border-radius: 25px;
    	}
    nav ul{
    	background-color: black;
    	height: 50px;
    	padding: 0;
    	margin: 0;
    	border-radius: 25px;
    	}
    nav ul li {
    	list-style-type: none;
    	width: 150px; 
    	float: left;
    	border-right: 1px solid #CCC;
    	text-align: center;
    	}
    nav ul li:first-of-type {
    	border-radius: 25px 0 0 25px;
            }
    nav ul li:last-of-type {
    	border-radius: 0 25px 25px 0;
    	border:0;
            }
    nav ul li a { 
    	text-decoration: none;
    	color: white;
    	line-height: 50px;
    	display: block;
    	}	
    nav ul li a:hover {
    	color: orange;
    	}	
    nav ul li:hover {
    	background-color: red;
            }
    #company ul li {
    	text-align: right;
    	color: green;
    	line-height: 1.2;
    	list-style-type: none;
    	background-color: ;
    	margin-right: 2px;
    	margin-top: 0;	
            }
    #company ul li a {
    	text-decoration: none;
    	}	
    </style>
    
    </head>
    <body>
    
    <div id="company">
    <ul>
     <li>Website: <a href="#">WWW.WHATEVER.COM</a></li>
     <li>Telephone #: 1-800-867-5309</li>
     <li>Email: whatever@gmail.com</li>
     <li>Business Hours: Monday-Friday 8:00am-5:00pm</li>
    </ul>
    </div>
    
    <nav>
    <ul>
     <li><a href="#">HOME</a></li> 
     <li><a href="#">PRODUCTS</a></li> 
     <li><a href="#">ABOUT US</a></li> 
     <li><a href="#">CONTACT US</a></li> 
     <li><a href="#">FAQ</a></li>		
    </ul>
    </nav>
    
    <p id="sup">border radius allows you to add rounded corners</p>
    
    </body>
    </html>
    

    coothead

  • Users who have thanked coothead for this post:

    simplejunior (09-02-2014)

  • #3
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    @coothead

    Much obliged for your response to my inquiry.

    I inserted the suggested codes and everything looks pretty solid. The only thing is that to the right of the FAQ menu, where the right edge is rounded, there is maybe 1 to 2px that is black. How would I go about fixing that?

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,714
    Thanks
    0
    Thanked 238 Times in 233 Posts
    Hi there simplejunior,

    is this better...
    Code:
    
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    nav	{
    	margin-top: -15px;
    	box-shadow: 10px 10px 5px grey;
    	width: 755px;
    	border-radius: 25px;
    	}
    nav ul  {
    	background-color: black;
    	height: 50px;
    	padding: 0;
    	margin: 0;
    	border-radius: 25px;
    	}
    nav ul li {
    	list-style-type: none;
    	width: 150px; 
    	float: left;
    	border-right: 1px solid #ccc;
    	text-align: center;
    	}
    nav ul li:first-of-type {
    	border-radius: 25px 0 0 25px;
            }
    nav ul li:last-of-type {
    	border-radius: 0 25px 25px 0;
    	border-color: black;
            }
    nav ul li a { 
    	text-decoration: none;
    	color: white;
    	line-height: 50px;
    	display: block;
    	}	
    nav ul li a:hover {
    	color: orange;
    	}	
    nav ul li:hover {
    	background-color: red;
            }
    nav ul li:last-of-type:hover {	
            border-color: red;
            }	
    #company ul li {
    	text-align: right;
    	color: green;
    	line-height: 1.2;
    	list-style-type: none;
    	background-color: ;
    	margin-right: 2px;
    	margin-top: 0;	
            }
    #company ul li a {
    	text-decoration: none;
    	}	
    </style>
    
    </head>
    <body>
    
    <div id="company">
    <ul>
     <li>Website: <a href="#">WWW.WHATEVER.COM</a></lilephone #: 1-800-867-5309</li>
     <li>Email: whatever@gmail.com</li<li>Business Hours: Monday-Friday 8:00am-5:00pm</li>
    </ul>
    </div>
    
    <nav>
    <ul>
     <li><a href="#">HOME</a></li> 
     <li><a href="#">PRODUCTS</a></li> 
     <li><a href="#">ABOUT US</a></li> 
     <li><a href="#">CONTACT US</a></li> 
     <li><a href="#">FAQ</a></li>		
    </ul>
    </nav>
    
    <p id="sup">border radius allows you to add rounded corners</p>
    
    </body>
    </html>
    
    

    coothead


  •  

    Posting Permissions

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