CSS - Rounded Element Borders

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover.

Here is an example:


Code:

<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>

.link a { some link height }

.link a span { display: none; }

.link a:hover span {
  position: abolute;
  top: (some link height * the number of links);
  background-image: (some image url)
  width: (image width)
  height: (image height)
}

Appearance:

------
Link1
Link2
Link3
Link4
-------
-------
Rollover Image to appear here
-------

The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed.
IE
------
Link1
sublink1
sublink2
Link2
Link3
Link4
-------

will break my scheme.


Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang?

If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that.

thanks.

Okay, so I've been trying to figure out the easiest way to make a layer with rounded corners in CSS. I used the 4 corner image way (as opposed to using JavaScript, or a single scalable image).

The problem isn't my "main" layer, it's that I have two layers within that "main" layer that need to be positioned correctly (a "navbar" and "content").

The "navbar" I have as float: left, and the same for the "content." Long story short, the "content" window (that also has rounded corners) goes all the way to the right of the "main" layer. I want there to be a margin on the right, but if I put one, the "main" layer messes up big time and goes past the original width it was at.

Anyone got an answer to my problem (unlikely, since I didn't explain it very well I don't think) or a simple tutorial I can do?

Here's what I want (LINK).

Thanks for reading my question

Here is the link to the two pages in question.

http://www.pierced.ca/Kelly/cardsRound.htm http://www.pierced.ca/Kelly/indexRound.htm

I know my images for the rounded corners aren't round, that's not the problem. My problem is the positioning of the images.

When I view the pages using IE, the "Menu" images line up perfectly, and it's just the bl.jpg and br.jpg images on the "Info" section that don't.

When I view the pages using FireFox, the bl.jpg and br.jpg images on the "Menu" section are off.

Any words of wisdom to get both to work?

Thanks again,

Brad

Am having a problem with turning a design into a tableless layout.
I've attached the part of the layout I'm trying to code and this is the code I'm using:

xhtml Code:
Original - xhtml Code <div class="content"> <div class="bar">Devshed Rocks the socks of oneself</div> <div class="leftcon">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lu ptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div> <div class="rightcon">Hey</div> </div>

  
    <div class="content">
        <div class="bar">Devshed Rocks the socks of oneself</div>
        <div class="leftcon">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
        esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, 
        consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
        eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lu ptatum zzril 
        delenit augue duis dolore te feugait nulla facilisi.</div>
        <div class="rightcon">Hey</div>
    </div>

And here is the css:

css Code:
Original - css Code .content { width:570px; float:right; margin-top:20px; background-color:#CCCCCC; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; } .leftcon { width:450px; padding:5px; float:left; border-right:1px solid black; background-color:#FFFFFF; padding-left:15px; background-image:url(images/cornerbot.jpg); background-repeat:no-repeat; } .bar { background-color:#66CC00; font-size:12pt; padding:10px; padding-left:15px; background-image:url(images/corner.jpg); background-repeat:repeat-y; }

  

 .content {


 width:570px;


 float:right;


 margin-top:20px;


 background-color:#CCCCCC;


 font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;


 }


  


 .leftcon {


 width:450px;


 padding:5px;


 float:left;


 border-right:1px solid black;


 background-color:#FFFFFF;


 padding-left:15px;


 background-image:url(images/cornerbot.jpg);


 background-repeat:no-repeat;


 }


  


 .bar {


 background-color:#66CC00;


 font-size:12pt;


 padding:10px;


 padding-left:15px;


 background-image:url(images/corner.jpg);


 background-repeat:repeat-y;


 } 

The corner image simply won't line up with the bottom half of the corner which I have as the left floated background image. Anyone able to point out what I'm doing wrong or perhaps offer another solution?

Thanks

What is the best way to make your element corners rounded with CSS? I'm kind of looking for a good tutorial.

Hello every one, Am sameer pandurangi and new to web development. I wanted to create a css for SCROLLBAR with rounded corners . Actually i dont know if there is any such property for this in scroll bar. Am able to change the color through css but am not getting the rounded corners for that.
So i hope there is someone out there with some good idea.

Thanks in advance.

Hi,

Does anyone know of a way to do the effect of rounding corners (see attached image) in CSS?

As you'll see in the image, I just want 1 pixel to be offset and be in a different colour for each corner of my box.

Simple question but I'm curious if anyone can work out how the 'Browse' buttons are done on this page, they have rounded corners yet looking through the css I can't see any images that account for them... http://www.haveamint.com/forum/

I have copied this tutorial, but my divs are not showing rounded, but still square. http://www.sitepoint.com/article/ro...-css-javascript Tut link

Can anyone see what I've done wrong?

I have attached a screenshot as the webpage is located on a protected server. The header is what I'm trying to make round. I have stroked it in black to show you

My html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Test Rounded Div</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div class="container" align="center">
  <div class="header">
   <div>  <!-- upper left corner-->
     <div> <!-- bottom right-->
       <div> <!-- bottom left -->
         Header
       </div>
     </div>
   </div>
  </div>
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div id="footer">Footer</div>
 </div>
</body>
</html>

My CSS:

Code:

div.header {
  width: 200px;
  background: #4095BF url(img/blue_top_rt.gif) no-repeat top right;
}

div.header div {
  background: transparent url(img/blue_top_left.gif) no-repeat top left;
}

div.header div div {
  background: transparent url(img/blue_bottom_rt.gif) no-repeat bottom right;
}

div.header div div div {
  background: transparent url(img/blue_bottom_lt.gif) no-repeat bottom left;
  padding: 15px;
}

How all the divs are rounded in this css ????

I am looking at the images and none f them has any image of a rounded corner ?


Code:

body {
	margin: 10px 0;
	padding: 0;
	background: #FFFFFF url(images/img00.gif) repeat-x;
	font: normal small Georgia, "Times New Roman", Times, serif;
	color: #6B6B6B;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	color: #3787DE;
}

h1, h2, h3 {
}

h4, h5, h6 {
}

p, ul, ol, blockquote {
	margin-top: 0;
	line-height: 160%;
}

blockquote {
	font-style: italic;
}

a {
	text-decoration: none;
	color: #3787DE;
}

a:hover {
	text-decoration: underline;
	color: #990000;
}

img {
	border: none;
}

/* Header */

#header {
	width: 760px;
	height: 101px;
	margin: 0 auto; 
	background: url(images/img01.gif) no-repeat;
}

#header h1 {
	float: left;
	padding: 25px 0 0 20px;
	letter-spacing: -3px;
	font-size: 3.4em;
}

#header h2 {
	float: right;
	padding: 43px 20px 0 0;
	letter-spacing: -1px;
	font-size: 2em;
}

#header a {
	text-decoration: none;
}

/* Content */

#content {
	width: 720px;
	margin: 0 auto;
	padding: 20px;
	background: url(images/img02.gif) no-repeat;
}

/* Posts */

#posts {
	float: left;
	width: 320px;
}

.post {
}

.post .title {
	letter-spacing: -1px;
	font-size: 2em;
}

.post .posted {
	margin-bottom: 20px;
	font-size: .8em;
}

.post .story {
}

.post .meta {
	height: 50px;
	padding: 8px 0 0 10px;
	background: url(images/img09.gif) no-repeat;
	font-size: .8em;
}

/* Archives */

#archives {
	float: left;
	width: 180px;
	padding: 0 0 0 20px;
}

/* Search */

#search {
	float: right;
	width: 180px;
}

#search form {
	margin: 0 0 12px 0;
	padding: 0;
}

#search #textfield1 {
	width: 155px;
}

#search #submit1 {
	display: none;
}

/* Pages */

#pages {
	float: right;
	width: 180px;
}

/* Categories */

#categories {
	float: right;
	width: 180px;
}

/* Blog Roll */

#blogroll {
	float: right;
	width: 180px;
}

/* Orange Box */

.obox {
}

.obox .heading {
	height: 27px;
	padding: 4px 0 0 10px;
	background: url(images/img03.gif) no-repeat;
	letter-spacing: -1px;
	font-size: 1.4em;
	color: #FF6500;
}

.obox .content {
	padding: 10px;
	background: url(images/img04.gif) no-repeat;
}

.obox ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.obox li {
	padding-left: 15px;
	background: url(images/img05.gif) no-repeat left center;
}

.obox a {
	color: #FF6500;
}

/* Green Box */

.gbox {
}

.gbox .heading {
	height: 27px;
	padding: 4px 0 0 10px;
	background: url(images/img06.gif) no-repeat;
	letter-spacing: -1px;
	font-size: 1.4em;
	color: #09881C;
}

.gbox .content {
	padding: 10px;
	background: url(images/img07.gif) no-repeat;
}

.gbox ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gbox li {
	padding-left: 15px;
	background: url(images/img08.gif) no-repeat left center;
}

.gbox a {
	color: #09881C;
}

/* Footer */

#footer {
	width: 760px;
	margin: 0 auto;
	padding: 60px 0 0 0;
	background: url(images/img10.gif) no-repeat;
}

#footer p {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: x-small;
}

Hi

I'm trying to match the overhead menu element of a Coppermine theme to a phpBB style. I've just run into a few problems and I was wonding if anyone could help please?

Coppermine here - http://www.brummiesfans.com/coppermine
phpBB3 here - http://www.brummiesfans.com/main/

Where I would like some help please is in getting the menu bar to have the same rounded corners as in phpBB3. What I have tried to do is to use the CSS from phpBB3, but on this occasion, it has
not worked. The code is shown below. I don't have a problem in Firefox, Safari or Chrome, as there is code in place to sort the rounded corners out in CSS, however I need the missing piece put into place for IE, and this is where I need help.

In phpBB3 the div classes are called "corners-top" and "corners-bottom".

The relevant graphics files have also been copied across. (e.g. www.brummiesfans.com/coppermine/themes/brummies/images/corners_right.png)

If someone can suggest how the matter can be fixed then I'd be very grateful.

The relevant bits of the template.html and style.css file wordings follow, which hopefully will be of help.

TEMPLATE.HTML
Code:

		<div class="navbar">

			<span class="corners-top"><span></span></span>

            <div id="main_menu">
                    {SYS_MENU}
                    {SUB_MENU}
                    {ADMIN_MENU}
                <!-- Begin IE7 support --><img src="images/spacer.gif" class="menuheight" alt="" /><!-- End IE7 support -->
            <div class="clearer"></div>

			<span class="corners-bottom"><span></span></span>	
		</div>

STYLE.CSS
Code:

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
	margin: 0 -10px;
}


span.corners-top {
	background-image: url("images/corners_left.png");
}

span.corners-top span {
	background-image: url("images/corners_right.png");
}

span.corners-bottom {
	background-image: url("images/corners_left.png");
}

span.corners-bottom span {
	background-image: url("images/corners_right.png");
}

div.headerbar span.corners-top {
    background-image: url("images/corners_left2.png");
}

div.headerbar span.corners-top span {
    background-image: url("images/corners_right2.png");
}


span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}

span.corners-top {
	background-image: none;
	background-position: 0 0;
	margin: 0 -5px;
}

span.corners-top span {
	background-image: none;
	background-position: 100% 0;
}

span.corners-bottom {
	background-image: none;
	background-position: 0 100%;
	margin: 0 -5px;
	clear: both;
}

span.corners-bottom span {
	background-image: none;
	background-position: 100% 100%;
}

.headbg span.corners-bottom {
	margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
	margin: 0 -10px;
}

.rules span.corners-top {
	margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
	margin: 5px -10px 0 -10px;
}

Thanks in advance for any assistance.

Martin

Hi All,

In one of my websites, I like to have boxes (rounded corners) like here, which is almost ok, except the rightside repeater is not repeating and not in the place.

Do anybody know how to fix this? Any help would be appreciated.

EDIT: Tried in different way, please have a look at it here

Hi, I'm still trying to learn CSS. Using CSS instead of tables really increases the versatility of the page, but, don't the graphics suffer? I'm trying to make a 3column layout which resizes according to the resolution. I've made it, but IMO it would look more appealing if I could make the corners curved as in... the menu box corners and the content space corners. Is there anyway to do this?

Thanks so much for taking the time to read my question.

I have a rounded corner that isn't working. For now, I have a red corner, so that it stands out and I know it's position.

I would like the right side to look the same as the left side of the contentheaderbox (this is where the page title goes like Home, or Contacts, or Site Map).

Not sure how to do this, I've run out of ideas. I have no where to post it, so I've attached the files.

Thanks for the help.

Brad