|
CSS - Rounded Box Within A Rounded Box...
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). Similar TutorialsI 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;
}
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. What is the best way to make your element corners rounded with CSS? I'm kind of looking for a good tutorial. 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 {
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 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. 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;
}
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 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/ Hey, searched so don't give me crap. I have 2 images, searchleft.jpg (looks like { ) and searchright.jpg (looks like } ) I only posted the Doc type just incase, I validated my webpage(www.gameyin.com) and nothing that could hurt this has happened. Anyway I want the rounded borders on the left center, for searchleft.jpg and a roundedborder for searchright.jpg on the right center. I hope I have been very clear. All the searches need 4 images...anyway... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> html { height: 100%; overflow: scroll; } body { font-family: tahoma, arial, sans-serif; font-size: 11px; background: #DEDEBA; margin: 0px 0px 0px 0px; color: #DEDEBA; } input, option, select, textarea { font-family: verdana, tahoma, arial, sans-serif; font-size: 11px; } .search { margin: 0px; padding: 5px 5px 5px 7px; width: 366px; height: 24px; float: right; } .input-search { width: 259px; margin: 0px 5px 0px 0px; padding: 5px; background: #DEDEBA; border-color: #666666; float: left; text-shadow: 808080; color: #808080; } </style> <script type="text/javascript" src="webfunctions.js"></script> </head> <body> <div class="search"> <form action="search.php" method="post" style="display:inline;"> <div> <input type="text" name="search" class="input-search" value="Enter your Search Query" onblur="if(this.value=='') this.value='Enter your Search Query';" onfocus="if(this.value=='Enter your Search Query') this.value='';" /> <input type="image" src="images/search.gif" /></div> </form> </div> I copy code to make a rounded corner and test it with my images It is a mess as I get 1 image out of 4 displaying and i did get the names correct. How do I assemble cut my image sizes for this? I create a rounded corner in Gimp and cut it up. I am ANNOYED at the time spent doing this. Images enclosed and here is code i use from http://www.vertexwerks.com/tests/sidebox/ Code:
<html>
<head>
<style type="text/css">
/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */
body { background-color:Green }
.sidebox {
margin: 0 10; /* center for now */
width: 27em; /* ems so it will grow */
background: url(wbright2.png) no-repeat bottom right;
font-size: 100%;
}
.boxhead {
background: url(whright2.gif) no-repeat top right;
margin: 0;
padding: 0;
text-align: center;
}
.boxhead h2 {
background: url(whleft2.png) no-repeat top left;
margin: 0;
padding: 22px 30px 5px;
color: white;
font-weight: bold;
font-size: 1.2em;
line-height: 1em;
}
.boxbody {
background: url(wbleft2.png) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}
</style >
<title>
</title>
</head>
<body><h1>It works!</h1>
<div class="sidebox">
<div class="boxhead"><h2>Test Headline</h2></div>
<div class="boxbody">
<p>This is a short sample paragraph.</p>
<p>And another onsdasdadsadsadsadsadsadsad
asdsadadsaffffffffffffffffffffffffffffff dsdsf sdfdsf sdfdsf sdfsdf sdfsd
sdfffffe.</p>
</div>
</div>
<br />
asSADSADSAD
<img src="whleft2.png" />
</body></html>
www . gameyin . com It shows as the border image twice. Er...I mean the image is showing twice and no matter what I do I can't seem to get the bottom part to stretch more to meet the content. I don't want to try pixels though because that wouldn't be fluid : \. Any help? Hi: I'm told that forms cannot have rounded corners and that tables can. Question: How do you do it? I'm looking for suggestions for CSS based rounded corners. I've seen a number of nice tutorials that show how to do solid corner, but I'm interested specifically in corners with borders. Simple Machines Forum has something he http://mods.simplemachines.org/ But I'm having trouble digging the details out of the style sheets. I can't seem to make it work for me. I'm really trying to avoid any JS. I'm having trouble getting the corners to line up when the parent DIV has a border. The corner images want to sit inside the border. I understand why this is, but not how to do it correctly for what I want. Think of a box with, say, a 2 pixel border and rounded corners... Just like the example I've provided above. Ideas? I am trying to attach 4 rounded images to a box, I have read hundreds of guides but non that seem to help. The problem I think is that I have set the size of the box rather than letting the amount of text written in it define the size. The idea is that the white box (mainarea) will have 3 different colour boxes inside it, but herein lies another problem. They are not inside the box they are merely on top of it, is this a problem. At the moment I have one corner (bottom left) positioned perfectly. My problem is the other 3. As you can see I have removed all the previous attempts to do this. Please someone help I think my hair is falling out! CSS Code: body {
background-image: url(bg2.png);
background-repeat: repeat;
}
#image1 {
position:relative;
width:650px;
height:125px;
background-image: url(banner.png);
margin-left: auto;
margin-right: auto;
}
#navi {
position:relative;
top:20px;
margin-left: auto;
margin-right: auto;
width:650px;
height:50px;
background-image: url(navibg.png);
/*background : #ffcc66 url(bg_navPrimaryShadow.gif) repeat-x 0 100% */
}
#mainarea {
position:relative;
top:40px;
margin-left: auto;
margin-right: auto;
width:650px;
height:480px;
background:#ffffff url(cornerbtlft.png) 0 100% no-repeat;
}
#box1 {
position:absolute;
top:250px;
left:200px;
width:600px;
height:150px;
background-color:#ffcc66;
}
#box2 {
position:absolute;
top:420px;
left:200px;
width:280px;
height:275px;
background-color:#ffcc66;
}
#box3 {
position:absolute;
top:420px;
right:200px;
width:280px;
height:275px;
background-color:#ffcc66;
}
#leftlg {
position:absolute;
top:230px;
left:17px;
width:140px;
height:500px;
background-color:#ffffff;
}
#rightlg {
position:absolute;
top:230px;
right:17px;
width:140px;
height:500px;
background-color:#ffffff;
}
#footer {
position:relative;
height:70px;
}
HTML Code: <body> <div id="image1"></div> <div id="navi"></div> <div id="mainarea"></div> <div id="topleft"></div> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="leftlg"></div> <div id="rightlg"></div> <div id="footer"></div> </body> 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 I'm looking to round out the borders of some of my elements. It'd be nice to make it similar looking to the way the <fieldset> in IE rounds them out. Anyone know a good way? Hi i know there prolly loads around, iv been searching for ages but cant find one that will do the job. I want to create rounded corners in CSS but completely CSS no javascript no images etc. i found one called spiffy corners, it would have been perfect but it was only does complete box color, i only want borders, i wouldnt figure out how to change it to just borders Any one have any ideas? http://www.spiffycorners.com/ I used this tutorial to create my rounded corner boxes. Now if I change the font in the content of the box to italics, IE goes bananas. I read about the "Holly Hack" by setting the height to 1%. I can't seem to get it work with these rounded corner boxes. I'm not sure what div to apply it to. Here is the relevant html for the boxes: Code: <div class="bluebox">
<div class="hd"><div class="c"></div></div>
<div class="bd">
<div class="c">
<h4>Something</h4>
<p>Content Goes Here</p>
</div>
</div>
<div class="ft"><div class="c"></div></div>
</div>
And the css is this: Code: .bluebox {
margin:0 auto 8px auto;
color:#fff;
}
.bluebox .hd .c{
font-size:1px;
height:16px;
}
.bluebox .ft .c{
font-size:1px; /* ensure minimum height */
height:18px;
}
.bluebox .hd {
background:transparent url(images/tlb.gif) no-repeat 0px 0px;
}
.bluebox .hd .c {
background:transparent url(images/trb.gif) no-repeat right 0px;
}
.bluebox .bd {
background:transparent url(images/mlb.gif) repeat-y 0px 0px;
}
.bluebox .bd .c {
background:transparent url(images/mrb.gif) repeat-y right 0px;
}
.bluebox .bd .c .s {
background:#1caaec url(images/msb.jpg) repeat-x 0px 0px;
}
.bluebox .ft {
background:transparent url(images/blb.gif) no-repeat 0px 0px;
}
.bluebox .ft .c {
background:transparent url(images/brb.gif) no-repeat right 0px;
}
.bluebox h4 {
font:0.9em Verdana, sans-serif;
font-weight:bold;
padding-left:5px;
}
.bluebox p {
font:0.8em Verdana, arial, sans-serif;
font-style:italic;
padding:2px 10px 8px 5px;
text-align:justify;
color:#000000;
}
Any ideas where to stick the Holly Hack? I was looking for the best way to implement rounded corners for my website and its been difficult evaluating the different methods and deciding which way is the best way to go. So far the mountaintop method looks the most promising. The idea is to create a transpatent gif with the corners of the image as a white mountain shape. When you make this the background of the CSS div, the color of the background offsets and creates the image of rounded corners. I am having a small issue implementing that as well, for example, ive created two images one for the top and one for the bottom, but I am not quite sure how to implement it as you cannot specify two background images per CSS div. Anyone have any thoughts on this? Working to set up a template that has containers with rounded corners WITH outlines. I have the round corners and sides...just can figure out how to add the top and bottom line to complete the container. If I use a border-top it extends past the rounded corners. Any help would be greatly appreciated Link to the page in progress: http://www.rustbug.com/test/journey-home-page.html Here is my code: Code: <!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 type="text/css">
body {color:#000000;background-color:#ffffff;background-attachment:fixed;font-family: Arial, Helvetica, sans-serif;line-height:1.25em;font-size:100%;}
#wrapper {margin:0 auto;width:720px;background-color:#f6f5f3;padding-top:1em;padding-bottom:2em; overflow:hidden;}
#container1 {float:left; display:inline; width:435px; height:auto; background-color:#FFF; border-top:1px #e3e2e1 solid; margin-left:1em; margin-bottom:1em;}
#container2 {float:right; display:inline; width:235px; height:auto; background-color:#FFF; margin-right:1em;}
p.roundcont { font-size:90%; margin:0 10px 0 10px; color: #999999;}
.roundtop { background: url(images/tr.gif) no-repeat top right;}
.middle { border-left:1px #e3e2e1 solid; border-right:1px #e3e2e1 solid;}
.roundbottom { background: url(images/br.gif) no-repeat top right;}
img.corner { width: 8px; height: 8px; border: none; display: block !important;}
</style>
</head>
<body>
<div id="wrapper">
<div id="container1">
<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
<div class="middle"><p class="roundcont">Hello</p></div>
<div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
</div>
<div id="container2">
<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
<div class="middle"><p class="roundcont">aasdf s asdf sdf sfsdfsdf asdf sdf. afas sdf sfsdf. adf asdf sdf .asdfsdfsdgfga fasdf adfdaf asdf a.</p></div>
<div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
</div>
<div id="container1">
<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
<div class="middle"><p class="roundcont">Hello</p></div>
<div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
</div>
</div>
</body>
</html>
|
|||||||