Rounded Corner's

monke · Jun 20, 2007

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:

yagran · Jun 20, 2007

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

use an unordered list and just have your rounded corners before and after the list...?

monke · Jun 20, 2007

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

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.

jng · Jun 20, 2007

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

No.

Answer is Sliding Doors. Part II.

monke · Jun 20, 2007

jng said:
No.

Answer is Sliding Doors. Part II.

Except I don't want a rollover.

Apple's start page has an example of this. Look a the 'Top Stories' column in the middle. That's all I want. No link nothing, but I don't want to have a big image loading.

jng · Jun 20, 2007

Read the tutorial. The article describes a general CSS technique and happens to use it in a navbar.

Figure it out. Worth learning.

operator · Jun 20, 2007

I can also vouch for the Sliding Door method. It works very well.

monke · Jun 21, 2007

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.

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.

jng · Jun 21, 2007

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.

yagran · Jun 21, 2007

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>

jng · Jun 22, 2007

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.

yagran · Jun 22, 2007

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.

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.

monke · Jun 25, 2007

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.

jng · Jun 25, 2007

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.

monke · Jun 25, 2007

Sure. Here:

Hope that helps.

Search

Search

Rounded Corner's

monke

macrumors 65816

yagran

macrumors 6502a

monke

macrumors 65816

jng

macrumors 65816

monke

macrumors 65816

jng

macrumors 65816

operator

macrumors regular

monke

macrumors 65816

jng

macrumors 65816

yagran

macrumors 6502a

jng

macrumors 65816

yagran

macrumors 6502a

monke

macrumors 65816

jng

macrumors 65816

monke

macrumors 65816

Our Staff