Solved

Trying to figure out how rounded corners were implemented

Posted on 2011-03-06
3
391 Views
Last Modified: 2012-05-11
I'm trying to figure out how the rounded corners were implemented at this website: www.jquery.com
(like in the 2 navigation bars at the top)

When I download the html along with the .css and .js files and render the file locally, the rounded corners go away.
0
Comment
Question by:opike
  • 2
3 Comments
 
LVL 4

Expert Comment

by:florjan
ID: 35046624
Images are in http://jquery.com/files/rocker/images/ if you look at css.
0
 
LVL 4

Accepted Solution

by:
florjan earned 350 total points
ID: 35046644
So for their primary navigation you have css (image http://jquery.com/files/rocker/images/bg_primaryNav_right.gif http://jquery.com/files/rocker/images/bg_primaryNav_left.gif)
/*Primary Navigation*/
#jq-primaryNavigation {
float: right;
background: #192839 url(../images/bg_primaryNav_left.gif) left bottom no-repeat;
}

#jq-primaryNavigation ul {
float: left;
background: url(../images/bg_primaryNav_right.gif) right bottom no-repeat;
padding: 0 .8em 2px;
margin: 0;
}
#jq-primaryNavigation li {
float: left;
list-style: none;
margin: 0;
background: none;
padding: 0;
}
#jq-primaryNavigation li a {
float: left;
padding: 0 1em;
line-height: 25px;
font-size: 1.2em;
color: #D0D0D0;
text-decoration: none;
margin-bottom: 2px;
}
#jq-primaryNavigation li.jq-ui, #jq-primaryNavigation li.jq-blog {
border-right: 1px solid #0F1924;
}
#jq-primaryNavigation li.jq-current a, #jq-primaryNavigation li.jq-current a:hover {
	border-bottom: 2px solid #176092;
	background: #192839;
	margin-bottom: 0;
	cursor: default;
	color: #D0D0D0;
}
#jq-primaryNavigation li a:hover {
color: #fff;
border-bottom: 2px solid #4082ae;
margin-bottom: 0;
}

Open in new window

0
 
LVL 9

Assisted Solution

by:Tom
Tom earned 150 total points
ID: 35046783
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Find out what you should include to make the best professional email signature for your organization.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question