Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Rounded Corner's

monke

monke

macrumors 65816
Original poster
How do you make bars, so that the main part of it is repeating and you have rounded corners?

I know how to repeat the image in CSS, and have everything working. I just can't figure out how to add rounded corners to it.

Here's a pic that might help explain what I mean:
rounded corners.jpg
 
monke said:
How do you make bars, so that the main part of it is repeating and you have rounded corners?

I know how to repeat the image in CSS, and have everything working. I just can't figure out how to add rounded corners to it.

Here's a pic that might help explain what I mean:
View attachment 77135
Click to expand...

use an unordered list and just have your rounded corners before and after the list...?
 
yagran said:
use an unordered list and just have your rounded corners before and after the list...?
Click to expand...

How exactly do you do this?

Here's what I've got

HTML File:
HTML: 
<div id="navigation">    
<ul id="menu">
<li><a href="Link">Link</a></li>
</ul>
</div>

CSS File:
Code: 
#navleft {
background: url(files/navleft.jpg) repeat-x;
width:	62%;
height: 28px;
float: left;}	
/* UL Files here */

Actually, I realized I only need a rounded corner on the right hand side.
 
Read the tutorial. The article describes a general CSS technique and happens to use it in a navbar.

Figure it out. Worth learning.
 
jng said:
Read the tutorial. The article describes a general CSS technique and happens to use it in a navbar.

Figure it out. Worth learning.
Click to expand...

It's not making any sense at all. I'm fairly new at this, and it's doing absolutely nothing for me.

Where should I be looking? I feel lost. 😱
 
Ignore Part II and read Part I carefully.

You won't need a list like the intro talkes about. That's navbar specific.

But read "The Sliding Doors Technique." The trick is that you actually use only 2 images, not 1 (fixed) or 3 like the idea tossed at the beginning of this thread.

Read that part carefully and study the diagrams. Once you understand that concept, you can figure out how to make a nested div into the box you want. This technique useful for many things, including this.
 
you could always do something mega simple like

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
#menu {
background: url(files/navleft.jpg) repeat-x;
width:	62%;
height: 28px;
float: left;}
</style>
<style type="text/css"> 
<!-- 
#menu li { 
list-style-type: none; 
display: inline; 
margin: 0px; 
height: 30px; 
width: 100px; 
}

#menu a, #menu a:link { 
background: url(images/buttons.gif); 
background-repeat: no-repeat; 
color: #000; 
font: bold 12px/22px tahoma, verdana, arial, sans-serif; 
text-decoration: none; 
height: 30px; 
width: 100px; 
}

#menu a:hover { 
background: url(images/buttons_rollover.gif); 
background-position: 0px -30px; 
} 
--> 
</style> 
</head>

<body>

<div id="menu" style="height: 30px;"> 
<nobr><img src="lhscorner.jpg" height="25"/>
<li><a href="#">  Home  </a></li> 
<li><a href="#">  Registration  </a></li> 
<li><a href="#">  Information  </a></li> 
</div><img src="rhscorner.jpg" height="30"/><nobr>
</body>
</html>
 
That code is NASTY, yagran, sorry. The point of CSS/XHTML based designs is to simplify code, esp. for debugging and reading purposes.

That's why the pros use Sliding Doors. It's just 2 CSS definitions and nested tags, like so:

Code: 
.bar {
...
}

.bar h3 {
...
}

HTML: 
<div class="bar">
<h3>Today's Top Stories</h3>
</div>

Your code is anything but simple. Anyway, that's a freebie for monke, I guess. I was hoping he'd figure it out based on the article.
 
jng said:
That code is NASTY, yagran, sorry. The point of CSS/XHTML based designs is to simplify code, esp. for debugging and reading purposes.

That's why the pros use Sliding Doors. It's just 2 CSS definitions and nested tags, like so:

Your code is anything but simple. Anyway, that's a freebie for monke, I guess. I was hoping he'd figure it out based on the article.
Click to expand...

i know its horrible. dont get me wrong.
i just gave him a code that was pre made which i lifted from a website somewhere.

im not gan sit here and write a code for him same as you, but he didnt seem to understand what you were giving him so i gave him smething that WOULD work for what i think he wants.
 
I couldn't figure out where exactly to put it. So I pasted my code here.
Basically I wanted a rounded edge on the the right of the div 'navleft' and the same rounded edge on the left of the div 'navright'.

I know it's not the best coding, but I'm new at it. Any Help? 😱
HTML: 
<div id="navigation">
  <div id="navleft">
    <ul id="left">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>        	
    </ul><!--ul#left-->
  </div><!--#navleft -->
  <div id="navright"> 
    <ul id="right">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>			
   </ul><!--ul#right-->    
  </div><!--#navright-->
</div><!--#navigation-->

Code: 
#navigation {
	text-align: center;
	margin-top: 15px;
	height: 28px;
	width: 100%;
}
	
	#navleft {
		background: url(files/navleft.jpg) repeat-x;
		width:	62%;
		height: 28px;
		float: left;
	}	
	
	#navleft  ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
		#navleft  ul a {
			color: #ffffff;
			font: 13px "Lucida Grande", Verdana, sans-serif;
			text-shadow: #04256f 0px 1px 0px;	
			display: block;		
		}
		
		#navleft  ul a:hover {
			color: #2299d7;
		}
		
		#navleft  ul li {
			float: left;
			padding-left: 2.25em;
		}
		
		#navleft ul#left {
			float: left;
			margin: 5px 0px 0px 15px;
			display: inline;
		}
	
	#navright {
		background: url(files/navright.jpg) repeat-x;
		width:	25%;
		height: 28px;
		float: right;
		clear: right;
	}
	
	#navright  ul {
		list-style: none;
	}
	
		#navright  ul a {
			color: #ffffff;
			font: 13px "Lucida Grande", Verdana, sans-serif;
			text-shadow: #6f0404 0px 1px 0px;				
		}
		
		#navright  ul a:hover {
			color: #e23838;
		}
		
		#navright  ul li {
			float: left;
			padding-left: 2.25em;
		}
		
		#navright ul#right {
			float: left;
			margin: 5px 0px 0px 15px;
			display: inline;
}

Thanks again. 🙂
 
Do you have a photoshop/screenshot of what you want it to look like? The code looks really convoluted. It'd help to have a screenshot.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back