|
CSS - Rounded Corner/drop-shadow With .png, How To?
Hello,
Quick Q: How would I go about getting this effect (drop-shadow/rounded corners around the main container div - here are a couple examples): http://urlgreyhot.com/personal/ http://www.fiftyfoureleven.com/sandbox/weblog/ I am aware of the tutorials found on ALA site... but those tuts do not use .png's to achieve the drop-shadow/rounded-corner effect. Can someone point me to a nice tutorial? I have tried viewing the CSS of above sites, but I have found it a bit confusing, and I would prefer a simplified version of the code. Anyone feel like sharing techniques? Thanks in advance! Cheers M Similar TutorialsAm 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 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>
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 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> Hey, I'm trying to figure out how to make a table area have rounded corners that will change color dynamically on different page backgrounds. I know how to set rounded corners on just 1 color, but is there code, css/html/java/php that would allow the corners to take the color of whatever the background looks like, even if its a picture? All the ways I try make the rounded corner image transparent which turns the table back into a square. Let me know if my question wasn't clear! Thanks!!!!!!!!!!!!! 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? I am very new to CSS, but I am trying to use it to make a tabbed rounded-corner centered menu bar for my webpage. I've gone through a number of iterations, and I feel like I'm close, but it's not quite right. The left rounded-corner image appears to be just slightly too high compared to the middle/right part of the tab. The css and html codes are below. Thank you for any help. Kate CSS CODE: #tabs8 { float:left; width:100%; background:#FCF1F6; border-bottom:4px solid #E276A7; overflow:hidden; position:relative; } #tabs8 ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #tabs8 ul li { display:block; float:left; list-style:none; margin:0 0 0 1px; padding:0px 3px; position:relative; right:50%; } #tabs8 ul li a { display:block; margin:0 0 0 1px; padding:3px 0px; background:url("tableft8.gif") no-repeat left top; text-decoration:none; line-height:1.3em;} #tabs8 a span { background:url("tabright8.gif") no-repeat right top; padding:3px 10px; color:#333; line-height:1.3em;} #tabs8 ul li a:hover { background:#369; color:#fff; } #tabs8 ul li a.active, #tabs8 ul li a.active:hover { color:#fff; background:#000; font-weight:bold; }--> HTML CODE: <div id="tabs8"><ul> <li id="current"> <div align="center"><a href="index.html"><span>Home</span></a></div> </li> <li> <div align="center"><a href="cake-shaping.html"><span>Cake Shaping</span></a></div> </li> <li> <div align="center"><a href="decorations.html"><span>Edible Decorations</span></a></div> </li> <li> <div align="center"><a href="gallery.html"><span>Gallery</span></a></div> </li> <li> <div align="center"><a href="blog.html"><span>Blog</span></a></div> </li> <li> <div align="center"><a href="subscribe.html"><span>Subscribe</span></a></div> </li></ul></div> I am developing a site that requires the navigation menu to have one rounded corner at the end on the home button. The default button state is created using a background image but I need it to also have a rollover effect on hover and also on focus (for the home page item only). I have tried to use CSS and curvy corners Javascript code to create the effect as I don't want to use images. However, I don't think the curvy corners script is picking up the div item that I want to apply the corner to. The trouble is I have a number of div boxes on the site that also have rounded corners (3 rounded and 1 square). The CSS is working fine for these in all browsers apart from Opera but when it comes to the navigation it doesn't work properly in IE. Here's the HTML for the menu: Code: <div id="menu"> <ul> <li><a href="index.htm" class="home">Home</a></li><li><a href="#">Mortgages</a></li><li><a href="#">Life Assurance</a></li><li><a href="#">General Insurance</a></li><li><a href="#">Partnership Services</a></li><li><a href="#">About Us</a></li><li><a href="#">Contact Us</a></li> </ul> </div> <br class="clearfloat" /> and here's the CSS: Code:
#menu {
background-image:url(images/menubg.png);
height:24px;
width: 100%;
overflow: hidden;
position:relative;
float:left;
}
#menu ul {font-size:11px; font-weight:bold; list-style:none;}
#menu li{ display: inline; margin: 0;}
#menu ul li a {float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 15px 5px 15px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
}
#menu li a:hover, #menu li a.focus {display: block; text-decoration:none; color:#445671; background-color:#d9e021;} /*background of tabs for hover state, plus tab with "focus" class assigned */
#menu li a.home:hover, #menu li a.homefocus { width:auto; text-decoration:none; color:#445671; background-color:#d9e021; border-right: 1px solid white;
/* Do rounding (native in Firefox and Safari) */
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:12px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
}
The CSS is in an external stylesheet, although I have also added the CSS for the rounded corner items to the header code. The class 'homefocus' seems to work when applied to the a tag on the home page but the other class 'home' which should work on hover won't work in IE. I'm sure it's something to do with the hover. Any ideas how I can make it work? If you open this page; w w w.ctuchicago.com/parties/contact-us.html If you open this page on IE you won`t see any input, but if you open it with chrome or firefox you will see there is input. I found way to make rounded corner input but it doesn`t work with IE7 & IE8. I tried to resolve this problem with z-index and i saw the input area it was looking like working until i tried to type something in input area. Just one of those educational "How Do They Do that?" Questions... Here is my site...(NOT a real business...just a project) My Projekt I was wondering how those drop shadows around the body "frame" are created like the following site: This Site I've looked under different threads, viewed hundreds of lines of page source code and search engine results to no avail. I did find ONE article stating there is a conflict in FF/Netscape using CSS to render these drop shadows correctly. Is there a cross-platform (browser) friendly way to create these drop shadows utilizing my friend, CSS; without having to use 200 1 x 1 px images? Thanks for helping me learn (in advance)...(bows gracefully) PWD Hello am trying to add a black drop shadow to a text whose color is red, how can i proceed with this in css? The text in question is in fact between <h1> tags where the color has been modified to red, but now i want to add a drop shadow in that text using css Hi there I am busy making a drop shadow for a div on my site. Works great in everything except IE (well there's a surprise). What I would like to have is a shadow that emanates from a light source directly above the element (figuratively speaking). The shadow will in other words extend in all directions (or ideally to the left, right and bottom, but not the top) from underneath the div. I can't seem to get the spread right in IE. It seems that in IE I can only have the shadow extend in one direction. Here is what it looks like in Chrome, Firefox and Safari (what I want it to loo like) And this is what I have managed to do for IE 7 & 8 And here is the code: Code: #myDiv{-moz-box-shadow: 0px 10px 33px #000; -webkit-box-shadow: 0px 10px 33px #000; box-shadow: 0px 10px 33px #000; /* For IE 8 */-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#000000');}
I have been considering using three different elements each with it's own shadow going in different directions. This means a lot of tweaking to only display these elements in IE, and just seems messy in general. Does anyone have any ideas on how I can solve this in a simpler way? Any advice would be much appreciated CODE TITLE: CSS drop shadow DESCRIPTION: Technique to build flexible CSS drop shadows (realistic) applied to arbitrary block elements (no images). URL TO CODE: CSS drop shadow I want to add a css drop shadow on flash object (embedded using the object tag) that works with Firefox, Internet Explorer and Safari... anyone know how I can code that or know where there examples of it? TIA I'm learning CSS and creating a blog at annieagarwal.com/blog (again, work in progress!) I want to recreate the shadow on the sides of the main container of this blog the url is blocked just google robin cornett and then find the style sheets How do I do that? The blog has two style sheets My style sheet is at annieagarwal.com/blog/wp-content/themes/tofurious/style.css I created a png of the shadow that is 1000px wide at annieagarwal.com/blog/wp-content/themes/tofurious/images/shadow.png But I can't seem to get the code right. I want to use a background image/color along with the container having a drop shadow. The original post was asking about how to finish a CSS drop shadow for a box. However, I quickly discovered a solution after posting this comment. The reply below is useful for creating a drop shadow for a box or image of a known height and width. I created a drop shadow CSS code for a box of known width (though with a bit of number crunching in the CSS you can alter it to any) but of variable height. If you want to view the code, go to http://www.wattersisere.co.uk/dev-shed/ I am using this: http://alistapart.com/articles/cssdropshadows/ for use on a gallery. Each image it is applied to is in a table cell. However, because its floated left, it floats to the left of the table cell even though I have cent the text-align to center I really strive to stay as close to design when I get a psd from a graphic designer. Sometimes that can be a challenge such as the situation I am having now. If you look at this page Osake Restaurant you will see a header on the page that reads Restaurant Menu. This header is using a custom font called Lato. I have uploaded a screenshot of the layer styles for drop shadow and gradient. Screen Shot Below is some code I found from a tutorial for css drop-shadow - Code:
/* default setup that everything sees */
.shadow {
/* needed for Internet explorer */
height: 1em;
filter: Shadow(Color=#666666,
Direction=135,
Strength=5);
/* Needed for Gecko */
line-height: 2em;
white-space: nowrap;
}
/*
* used by browsers which know about
* :before to create the shadow
*/
.shadow:before {
display: block;
margin: 0 0 -2.12em 0.15em;
padding: 0;
color: #666666;
}
#shadow_1:before {
content: 'In shadow';
}
#second_2:before {
content: 'Happy Shadowing!';
}
/*\*/
html*.shadow {
[color:red;/* required by Safari
* so that [] is correctly
* begun. associated with
* the property, yet hiding
* it. Seen by IE6 */
/*
* seen by IE6 and Safari, but hidden
* from Gecko
*/
text-shadow: #666666 5px 5px 5px;
]color:auto; /* resets color for IE6 */
}/**/
/*
* end hack using dummy attribute selector
* for IE5 mac
*/
.dummyend[id]{clear: both;}
/*\*/
html*.shadow:before {
[color:red;/* required by Safari.
seen by IE6 */
/*
* seen by IE6 and Safari, but hidden
* from Gecko
*/
display: none;
]color:auto; /* resets color for IE6 */
}/**/
/*
* end hack using dummy attribute selector
* for IE5 mac
*/
.dummyend[id]{clear: both;}
My question is how do I go from those settings in PSD to a equivalent look in HTML w/ CSS. Do I just play around with it or is there a more precise way. Also what about for gradient. Hopefully others can learn from this thread as well. Thanks! Tom How do I apply a css drop shadow around the search widget generated by this script code? Code: <script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('dfacd65d-6514-4845-ad81-7249d33a6280');</script>
<noscript>Get the <a href="http://www.widgetbox.com/widget/college-search">College search</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://support.widgetbox.com/">More info</a>)</noscript>
|
|||||||