hanwall Posted July 19, 2009 Share Posted July 19, 2009 Is it possible to make rounded corners with CSS for a container-div or is it just possible using pictures?Then I also wonder if anyone can tell me how to get the background to stay in the same position when scrolling the content (container-div or main-div)? I want the effect to be like the content-divs are lying on top of the background.Anyone? Link to comment Share on other sites More sharing options...
Ingolme Posted July 19, 2009 Share Posted July 19, 2009 Is it possible to make rounded corners with CSS for a container-div or is it just possible using pictures?Then I also wonder if anyone can tell me how to get the background to stay in the same position when scrolling the content (container-div or main-div)? I want the effect to be like the content-divs are lying on top of the background.Anyone? It's possible to make round corners without images. I have examples here:http://dtfox-tests.totalh.com/roundcorners.htmlIf you look in the W3Schools CSS referece, you'll find the background-attachment property to keep the background from scrolling. Link to comment Share on other sites More sharing options...
hanwall Posted July 20, 2009 Author Share Posted July 20, 2009 It's possible to make round corners without images. I have examples here:http://dtfox-tests.totalh.com/roundcorners.htmlIf you look in the W3Schools CSS referece, you'll find the background-attachment property to keep the background from scrolling.Okay! Thanks, I will check it out Link to comment Share on other sites More sharing options...
bigsilk Posted August 22, 2009 Share Posted August 22, 2009 That's brilliant. Best example I've seen yet.Now, how would one make separate boxes on the same page in different colors?Here's the code, as to not have to go to the page: html,body { background-color:#123456; font-family: Georgia,"Times New Roman",Serif; text-align: center; color:#FFFFFF; } .box b, .box i { height: 1px; line-height: 1px; display: block; } .inside, .box b, .box i { background-color: #FFCC66; } .inside { padding: 0 5px; color: white; height: 100%;} .p1 { margin: 0 5px; } .p2 { margin: 0 3px; } .p3 { margin: 0 2px; } .p4 { margin: 0 1px; } .border,i.p1,i.p2,i.p3,i.p4 { border: solid black; border-width: 0 1px; } i.p1 { margin: 0 4px !important; border-width: 0 2px; } .p0 { background-color: black !important; margin: 0 6px; } .box { margin: 5px 0; text-align: left; } .width { margin: 0 auto; height: 300px; width: 300px; text-align: center; padding-bottom: 12px; float:left; }Here's an example of what I want to make: Link to comment Share on other sites More sharing options...
Ingolme Posted August 22, 2009 Share Posted August 22, 2009 You'll have to assign an extra class to the box: <div class="box green">...<div class="box red">...<div class="box blue"> And assign a background color with that class: .green .inside,.green b,.green i {background-color: green;}.red .inside,.red b,.red i {background-color: red;}.blue .inside,.blue b,.blue i {background-color: blue;} Link to comment Share on other sites More sharing options...
bigsilk Posted August 22, 2009 Share Posted August 22, 2009 Maybe I did it wrong? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Round corners</title> <link href="CSS/rounded_corners.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Round corners without images</h1> <div class="box"> <b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p4"></b> <div class="green inside"> A box with round corners and no border </div> <b class="p4"></b><b class="p4"></b><b class="p3"></b><b class="p2"></b><b class="p1"></b> </div> <div class="box width"> <i class="p0"></i><i class="p1"></i><i class="p2"></i><i class="p3"></i><i class="p4"></i><i class="p4"></i> <div class="inside border"> A box with round corners and a black border </div> <i class="p4"></i><i class="p4"></i><i class="p3"></i><i class="p2"></i><i class="p1"></i><i class="p0"></i> </div> </body> </html> html,body {background-color:#333333;font-family: Georgia,"Times New Roman",Serif;text-align: center;color:#FFFFFF;}.box b, .box i {height: 1px;line-height: 1px;display: block;}/*.inside, .box b, .box i {background-color: red;}*/.green .inside,.green b,.green i {background-color: green;}.red .inside,.red b,.red i {background-color: red;}.blue .inside,.blue b,.blue i{background-color: blue;}.inside {padding: 0 5px; color: white; height: 100%;}.p1 {margin: 0 5px;}.p2{margin: 0 3px;}.p3{margin: 0 2px;}.p4{margin: 0 1px;}.border,i.p1,i.p2,i.p3,i.p4{border: solid white; border-width: 0 1px;}i.p1 {margin: 0 4px !important; border-width: 0 2px;}.p0{background-color: white !important; margin: 0 6px;}.box{margin: 5px 0; text-align: left;}.width {margin: 0 auto;height: 300px;width: 300px;text-align: center;padding-bottom: 12px;float:left;} I simply get a transparent round corner box with and without a border. Link to comment Share on other sites More sharing options...
bigsilk Posted August 22, 2009 Share Posted August 22, 2009 I think I have to change the p1, p2, etc as well. Seems all this code does is create a series of 'lines' with a left and right border of a color for a bordered box, or no color for a borderless box. So it will end up as p1.green, p2.green, etc.No, that didn't work. Link to comment Share on other sites More sharing options...
bigsilk Posted August 22, 2009 Share Posted August 22, 2009 Here's what I got:http://www.bigsilkdesign.com/rounded_corners/ Link to comment Share on other sites More sharing options...
Ingolme Posted August 23, 2009 Share Posted August 23, 2009 You need to assign the "red" class to the <div class="box"> element, not the <i> elements. It makes things easier.This is the code for the box with a border: <div class="box width red"><i class="p0"></i><i class="p1"></i><i class="p2"></i><i class="p3"></i><i class="p4"></i><i class="p4"></i><div class="inside border">A box with round corners and a black border</div><i class="p4"></i><i class="p4"></i><i class="p3"></i><i class="p2"></i><i class="p1"></i><i class="p0"></i></div> I apply left and right borders to all the <i> elements and the .inside box. I added the extra "p0" <i> element for the top and bottom borders: .inside { padding: 0 5px; color: white; height: 100%;}.p1 { margin: 0 5px; }.p2 { margin: 0 3px; }.p3 { margin: 0 2px; }.p4 { margin: 0 1px; }/* Apply borders to elements */.border,i.p1,i.p2,i.p3,i.p4 { border: solid black; border-width: 0 1px; }/* Special case for p1 */i.p1 { margin: 0 4px !important; border-width: 0 2px; }/* The "p0" element, the top and bottom borders */.p0 { background-color: black !important; margin: 0 6px; }/* The "box" element contains everything else */.box { margin: 5px 0; text-align: left; }/* The "width" class just assigns a width and height to the box */.width { margin: 0 auto; height: 300px; width: 300px; text-align: center; padding-bottom: 12px;}/* This assigns the background color to the boxYou only need to give the class to the container div */.red .inside,.red b,.red i {background-color: red;} The .red class is only applied to the container, not to all the rest of the elements: <div class="box red"> Link to comment Share on other sites More sharing options...
bigsilk Posted August 23, 2009 Share Posted August 23, 2009 The red is showing up outside the borders. Link to comment Share on other sites More sharing options...
Ingolme Posted August 23, 2009 Share Posted August 23, 2009 The red is showing up outside the borders.Your stylesheet is different than the code I gave you. This is wrong:.red ,.red b,.red i {background-color: red;} Delete that from your stylesheet because it is redundant. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.