CSS - Css Rounded Border With 2 Different Colour Halfs
Hi,
I am trying to do a rounded corner box with 2 different colour halfs but using little images instead of big images. Here is my code so far: CSS: Code: #box { position: relative; margin-left: auto; margin-right: auto; margin-top: 3em; padding: 0; text-align: left; width:150px; background-color: #eeeeee; } #content{height:180px;} #tlc, #trc, #blc, #brc { background-color: transparent; background-repeat: no-repeat; } #tlc { background-image:url(images/tlc.gif); background-position: 0% 0%; } #trc { background-image:url(images/trc.gif); background-position: 100% 0%; } #blc { background-image:url(images/blc.gif); background-position: 0% 100%; } #brc { background-image:url(images/brc.gif); background-position: 100% 100%; } #tb, #bb { background-color: transparent; background-repeat: repeat-x; } #tb { background-image:url(images/tb.gif); background-position: 0% 0%; } #bb { background-image:url(images/bb.gif); background-position: 50% 100%;} #rb { background-image:url(images/r.gif); background-position: 100% 0%; background-repeat: repeat-y;} #lb { background-color: #; background-image:url(images/l.gif); background-position: 0% 100%; background-repeat: repeat-y;} HTML: Code: <div id="box"> <!--- box border --> <div id="lb"> <div id="rb"> <div id="bb"><div id="blc"><div id="brc"> <div id="tb"><div id="tlc"><div id="trc"> <!-- --> <div id="content"> <p>2 colour box.</p> </div> <!--- end of box border --> </div></div></div></div> </div></div></div></div> <!-- --> </div> The lb "left border image" and rb "right border image" needs to change half way down vertically to a different image. hope some one can help me?!? Thanks Similar Tutorialswww . 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? I'm trying to make a basic 'business card' website for a family friend and I want to add a custom dotted border (alternating colours) around the inside of my container, but I'm not sure of the best way to achieve what this without lots of extra markup. Image of Current look Image of Desired look Here's the actual site. http://www.thenewsite.com/thelolmaster/ Greetings, I'm trying to create a fieldset that has rounded corners and a solid border. From what I gather IE displays rounded corners by default, Firefox does not. The code below makes Firefox display rounded corners, but when a border is applied rounded corners won't display on IE. Is there anything I can do to enable rounded borders? Thanks, fieldset { border:3px solid #000000; -moz-border-radius: 8px; border-radius: px; background: #C4FC02; margin: 0 0 1em 0; position: relative; } I have a form design that i've been working on and I've got the border to appear correctly in FF, but not in IE. In IE the sides of the border don't meet the top pieces. I've heard about something similar before and solution involved negative margins. This did work to correct IE but then FF was messed up. The form is contained in the #wrapper div. I would really appreciate anybody's help. I'll warn you though, I'm pretty new to web design. Here's the HTML & PHP (The first 2/3 is php): Code: <?php require_once('Connections/getBiz.php'); ?> <?php ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////DREAMWEAVER FUNCTION - USED TO STRIP OUT COMMAS ETC. ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// if (!function_exists("GetSQLValueString")) { function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") { $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue; $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue); switch ($theType) { case "text": $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "long": case "int": $theValue = ($theValue != "") ? intval($theValue) : "NULL"; break; case "double": $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL"; break; case "date": $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "defined": $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue; break; } return $theValue; } }//end DreamWeaver Function //USED CHECK IF FORM FIELD IS EMPTY function notEmpty($variable){ if($variable == NULL || $variable == ''){ $ntEmpty = false; } else { $ntEmpty = true; } return($ntEmpty); } //end notEmpty function ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// //BEGIN HTML CODE CREATION ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// session_start(); $currentPage = $_SERVER["PHP_SELF"]; $num_fields = 0; //Initiate counter for filled fields //Set form field variables to 'missing' $name = "-1"; $city = "-1"; $zip = "-1"; $begDate = "-1"; $endDate = "-1"; $maxRows_Biz = 10; $pageNum_Biz = 0; if (isset($_GET['pageNum_Biz'])) { $pageNum_Biz = $_GET['pageNum_Biz']; } $startrow_Biz = $pageNum_Biz * $maxRows_Biz; //CHECK EACH FORM FIELD TO SEE IF IT'S EMPTY if (isset($_GET['Name']) && notEmpty($_GET['Name'])) { $name = $_GET['Name']; $num_fields++; } if (isset($_GET['City']) && notEmpty($_GET['City'])) { $city = $_GET['City']; $num_fields++; } if (isset($_GET['zp']) && notEmpty($_GET['zp'])) { $zip = $_GET['zp']; $num_fields++; } if (isset($_GET['Beginning_Date']) && notEmpty($_GET['Beginning_Date'])) { $begDate = date("Y-m-d", strtotime($_GET['Beginning_Date'])); $num_fields++; } if (isset($_GET['Ending_Date']) && notEmpty($_GET['Ending_Date'])) { $endDate = date("Y-m-d", strtotime($_GET['Ending_Date'])); $num_fields++; } if (isset($_GET['Submit']) && notEmpty($_GET['Submit'])) { $submit = true; } //print ($begDate); mysql_select_db($database_getBiz, $getBiz); ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// //IF FORM FIELDS WERE SUBMITTED, CREATE QUERY BASED ON NUMBER OF FILLED FIELDS ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// //print (str_replace(' ','',GetSQLValueString($zip, "defined"))); //print ("Here is the zip" . $zip . "<br>"); //print ("Here is the zip" . GetSQLValueString($zip, "defined")); if ($num_fields > 0) { $query_Biz = "SELECT * FROM biz WHERE "; if ($name != "-1") { $query_Biz .= "bizName LIKE '%" . $name . "%'"; $num_fields--; if ($num_fields > 0) { $query_Biz .= " AND "; } } if ($city != "-1") { $query_Biz .= "city LIKE " . GetSQLValueString($city, "text") ; $num_fields--; if ($num_fields > 0) { $query_Biz .= " AND "; } } if ($zip != "-1") { $query_Biz .= "zip IN ( " . $zip . " ) "; $num_fields--; if ($num_fields > 0) { $query_Biz .= " AND "; } } if ($begDate != "-1") { $query_Biz .= "incDate > " . GetSQLValueString($begDate, "date"); $num_fields--; if ($num_fields > 0) { $query_Biz .= " AND "; } } if ($endDate != "-1") { $query_Biz .= "incDate < " . GetSQLValueString($endDate, "date"); $num_fields--; } /// PUT A LIMIT ON THE QUERY //////////////////////////////////////////////////////////// $query_limit_Biz = sprintf("%s LIMIT %d, %d", $query_Biz, $startrow_Biz, $maxRows_Biz); //add limit // print($query_limit_Biz); $Biz = mysql_query($query_limit_Biz, $getBiz) or die(mysql_error()); $row_Biz = mysql_fetch_assoc($Biz); if (isset($_GET['totalRows_Biz'])) { //get total # rows from clicked link.... $totalRows_Biz = $_GET['totalRows_Biz']; } else { $all_Biz = mysql_query($query_Biz, $getBiz); //or from adjunct query $totalRows_Biz = mysql_num_rows($all_Biz); } $totalPages_Biz = ceil($totalRows_Biz/$maxRows_Biz)-1; } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// //CHECK FOR NEW PARAMETERS AND INCORPORATE THEM ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// $queryString_Biz = ""; if (!empty($_SERVER['QUERY_STRING'])) { //get the query parameters from clicked link $params = explode("&", $_SERVER['QUERY_STRING']); $newParams = array(); foreach ($params as $param) { if (stristr($param, "pageNum_Biz") == false && stristr($param, "totalRows_Biz") == false) { // print($param); array_push($newParams, $param); } } if (count($newParams) != 0) { //add new parameters, if any, to queryString $queryString_Biz = "&" . htmlentities(implode("&", $newParams)); } } $queryString_Biz = sprintf("&totalRows_Biz=%d%s", $totalRows_Biz, $queryString_Biz); //print ($currentPage); ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// //BEGIN HTML ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>NewBizFL - The only site devoted exclusively to free business listings</title> <link href="css/hilite.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <div id="logo"> <h1>newbizFL</h1> </div> <div id="menu"> <ul> <li class="active"><a href="#">homepage</a></li> <li><a href="#">search</a></li> <li><a href="#">about us</a></li> <li><a href="#"> faq</a></li> <li><a href="#">contact us</a></li> </ul> </div> <p> </p> <p> </p> </div> <div id="wrapper"> <div class="top"></div> <div class="rside"> <div class="content"> <div id="srchForm"> <form name="form1" method="get" action=<?php $currentPage ?> > <fieldset id="location"> <ol> <li> <label for="Name">Business Name:</label> <input type="text" name="Name" id="Name"> </li> <li> <label for="City">City:</label> <input type="text" name="City" id="City"> </li> <li> <label for="Zip Code">Zip Code:</label> <input type="text" name="zp" id="Zip Code"> </li> </ol> </fieldset> <fieldset id="dateRange"> <ol> <li> <label for="Beginning Date">Beginning Date</label> <input type="text" name="Beginning_Date" id="Beginning Date"> </li> <li> <label for="Ending Date">Ending Date</label> <input type="text" name="Ending_Date" id="Ending Date"> </li> </ol> </fieldset> <input type="submit" name="Submit" id="Submit" value="Submit" /> </form> </div> <div id="dataTable"> <?php ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// //IF NO RECORDS, SHOW 'NO RECORDS' MESSAGE. ELSE, SHOW TABLE WITH RECORDS ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// if ($totalRows_Biz == 0 ) { echo '<td>No Records to Display' . ' Sorry </td>'; } else { echo '<p> Records' . ($startrow_Biz + 1) . ' to ' . min($startrow_Biz + $maxRows_Biz, $totalRows_Biz) . ' of ' . $totalRows_Biz . '</p>'; // Result Page Heading: 'Records 1 to 10 of 40' echo '<table border="1">'; echo "<thead>"; echo " <tr>"; echo " <th scope=\"col\">Business Name</th>"; echo " <th scope=\"col\">Address</th>"; echo " <th scope=\"col\">City</th>"; echo " <th scope=\"col\">Zip</th>"; echo " <th scope=\"col\">Filing</th>"; echo " <th scope=\"col\">Date</th>"; echo " <th scope=\"col\">President</th>"; echo " </tr>"; echo "</thead>"; $counter = 0; // counter to highlite rows do { //do loop till all records are printed if ($counter++ % 2) { echo '<tr class="hilite">'; } else { echo '<tr>'; } echo '<td>' . $row_Biz['bizName'] . '</td>'; echo '<td>' . $row_Biz['Address'] . '</td>'; echo '<td>' . $row_Biz['city'] . '</td>'; echo '<td>' . $row_Biz['zip'] . '</td>'; echo '<td>' . $row_Biz['incDate'] . '</td>'; echo '<td>' . $row_Biz['type'] . '</td>'; echo '<td>' . $row_Biz['pres'] . '</td>'; echo '</tr>'; } while ($row_Biz = mysql_fetch_assoc($Biz)); echo '</table>'; ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// //LINKS FOR 'PREVIOUS', 'NEXT', ETC.. ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// echo '<table border="0">'; echo '<tr>'; ////FIRST LINK echo '<td>'; if ($pageNum_Biz > 0) { // Show if not first page echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, 0, $queryString_Biz) . '">First</a>'; } echo '</td>'; ////PREVIOUS LINK echo '<td>'; if ($pageNum_Biz > 0) { // Show if not first page echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, max(0, $pageNum_Biz - 1), $queryString_Biz) . '">Previous</a>';} echo '</td>'; ////NEXT LINK // print ("This is querystringbiz = " . $queryString_Biz); // print ('%s?pageNum_Biz=%d', $currentPage, 23) ; // print ("total pages = " . $totalPages_Biz); // print ("current page = " . $pageNum_Biz); // print (printf("%s?pageNum_Biz=%d", $currentPage, 2)); echo '<td>'; // Show if not last page if ($pageNum_Biz < $totalPages_Biz) { echo '<a href="' ; echo $currentPage . '?pageNum_Biz=' . ($pageNum_Biz + 1). $queryString_Biz; echo '">Next</a>' ; } echo '</td>'; ////LAST LINK echo '<td>'; if ($pageNum_Biz < $totalPages_Biz) { // Show if not last page echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, $totalPages_Biz, $queryString_Biz) . '">Last</a>';} echo '</td>'; echo '</tr>'; echo '</table>'; } ?> </div> </div> </div> <div class="bottom"></div> </div> </body> </html> <?php if (isset($totalRows_Biz)) { mysql_free_result($Biz);} ?> And here's the CSS: Code: @charset "utf-8"; .hilite { background-color: #CCCCFF; } body { font-family : "Trebuchet MS", Arial, sans-serif; padding: 0; text-align: center; background-image: url(../images/gradient.png); background-repeat: repeat-x; background-color: #ecffec; } #wrapper { width: 920px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: left; background-color: #FFFFFF; } #wrapper .bottom { background-image: url(../images/bottom.png); background-repeat: no-repeat; background-position: left bottom; height: 21px; } table, th, td { border : 1px solid #d4e0ee; border-collapse : collapse; font-family : "Trebuchet MS", Arial, sans-serif; color : #555; } #wrapper .rside { background-image: url(../images/right.png); background-repeat: repeat-y; background-position: right top; } #header { width: 900px; height: 40px; margin: 0 auto 20px auto; padding-top: 10px; } #menu { float: right; padding-top: 10px; } #menu ul { margin: 0; padding: 0; list-style: none; } #menu li { display: inline; } #menu a { display: block; float: left; margin-left: 5px; padding: 1px 10px; text-decoration: none; font-size: 12px; color: #FFFFFF; background-color: #A6A6FF; } #menu .active a { } #menu a:hover { text-decoration: underline; } #logo { float: left; } #logo h1 { float: left; margin: 0; font-size: 38px; color: #8484FF; } #logo h1 sup { vertical-align: text-top; font-size: 24px; } #logo h1 a { color: #0099E8; } #wrapper #dataTable { text-align: left; clear: both; } legend { margin-left: 1em; color: #000000; font-weight: bold; padding: 0; } fieldset ol { list-style: none; margin: 0; padding: 0.5em 0em 0em .5em; } fieldset li { padding-bottom: 1em; } label { float: left; width: 7em; margin-right: 1em; } #wrapper #location { float: left; width: 40%; margin-right: 15px; margin-left: 5px; } #wrapper #dateRange { margin-right: 20px; } input { background: #F3F4EC !important; } #wrapper .top { background-image: url(../images/top.png); background-repeat: no-repeat; background-position: left top; height: 18px; margin: 0; } #wrapper .top span { background-image: url(../images/leftside.png); background-repeat: repeat-y; background-position: left top; } #wrapper .content { background-image: url(../images/leftside.png); background-repeat: repeat-y; background-position: left top; padding-top: 0px; padding-right: 20; padding-bottom: 0; padding-left: 20; } #wrapper .content span { background-image: url(../images/right.png); background-repeat: repeat-y; background-position: right top; } Sorry, I know my code is probably a mess. I really appreciate anyone's help with this, though. Oh, and by the way, does anyone know how to attach things to a post? For example, a screen capture (jpeg) or the images I used? Is it possible to include (in this instance) a white border, INSIDE an orange background colour on a h1. The background colour of the page is white and the background colour of the h1 is orange, so I need the border inside rather than around the h1 bg colour for it to work otherwise you wouldn't see it for the white page background. Can this be done? If so can anyone help.. Thanks. I am using the code shown he http://webdesign.about.com/od/css/a/aa072406.htm Code: .container {background:#ccc; color:#fff; margin:0 15px;} .rtop, .rbottom{ display:block; background:#fff; } .rtop *, .rbottom *{ display: block; height: 1px; overflow: hidden; background:#ccc; } .r1{margin: 0 5px} .r2{margin: 0 3px} .r3{margin: 0 2px} .r4{ margin: 0 1px; height: 2px } Code: <div class="container"> <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b> CONTENTS GOES HERE <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b> </div> the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close? thanks in advance for your help Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <style type="text/css"> a.menu_top:link {color: #000000; text-decoration: none;} a.menu_top:visited {color: #000000; text-decoration: none;} a.menu_top:hover {color: #000000; text-decoration: none;} a.menu_top:active {color: #000000; text-decoration: none;} td.menu_top_passive { background-color: #777; border-left: 1px #000000 solid; border-right: 1px #000000 solid; border-top: 1px #000000 solid; border-bottom: 1px #000000 solid; text-align: center; cursor:pointer; font-weight: bold; padding: 5px 20px 5px 20px; margin: 0; } td.menu_top_active { background-color: #bbb; border-left: 1px #000000 solid; border-right: 1px #000000 solid; border-top: 1px #000000 solid; border-bottom: 1px #bbb solid; text-align: center; cursor:pointer; font-weight: bold; padding: 5px 20px 5px 20px; margin: 0; } </style> <script language="JavaScript"> function change(id, url) { for (i=1; i<6; i++){ eval("document.getElementById("+i+").className='menu_top_passive'"); } eval("document.getElementById("+id+").className='menu_top_active'"); } </script> </head> <body style="margin:0; padding:0; background-color:#bbb;"> <br><br> <center> 1. Load the page.<br> 2. Click Item 4.<br> 3. Click Item 2.<br><br> Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br> None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br> Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br> If I remove border-collapse, then there is no strange behaviour in Firefox.<br> Any way to get this working in Firefox without breaking it in IE? </center> <br><br><br> <table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;"> <tr> <td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td> <td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td> <td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td> <td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td> <td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td> </tr> </table> </body> </html> I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? 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). I would like to set up a table with a different border than the cells inside it. Here's my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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"> TABLE {border: 1px solid black; border-collapse: collapse; width: 200px} TD {border: 1px solid #ccc} </style> </head> <body> <table> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html> That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different? Hi, This used to be my solution: Code: <table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'> But this only works well on IE - not Mozilla Now I want to use CSS: Code: .results { border: 1px solid #CCCCCC ; } Code: <table class='results'> --------------- The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't. If I specify Code: <td class='results'> for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping). Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration? Thanks a lot! 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; } 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; } 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/ 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 { 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 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> 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. |