|
CSS - Rounded-corner Tabbed Menu Bar
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> 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 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? 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 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>
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 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? 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? 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 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. Hi! Could you please help me to fix my menu in IE7. You can see the problem on my site. But actually I don't know how to add an url he The code is: padding:0; } #menu ul#layer1 li { background:transparent url(/site_media/images/left.png) no-repeat scroll left top; float:left; margin-left:6px; padding-bottom:6px; padding-left:6px; padding-top:4px; } #menu ul#layer1 li span { background:transparent url(/site_media/images/right.jpg) no-repeat scroll right top; margin-right:6px; padding-bottom:6px; padding-right:6px; padding-top:4px; } #menu li a { background-color:#BF1E2D; color:#FFFFFF; padding:4px 35px 6px; text-decoration:none; } #menu ul#layer1 li#current span { background:transparent url(/site_media/images/right-gray.png) no-repeat scroll right top; } #menu ul#layer1 li#current { background:transparent url(/site_media/images/left-gray.png) no-repeat scroll left top; } #menu ul#layer1 li#current a { background-color:#E3E3E3; color:#BF1E2D; } Hello, I am working on my HW problem with CSS, it's about rounded and angular corners in menu (active or hover). I can't post picture (not permitted), but probably you know what i mean, rounded corners are created with image and angular are created with padding by CSS. Angular is ready, now i have to do rounded, which is more hard. I have 3 pictures, left rounded side, middle and right rounded side. But i really dont know how to add it to a.active or a:hover elements. Middle picture will be repeated depending on text long, so i can't do 1 picture. Thank you for your help. Thanks to Kravvitz I was able to get the first version of this system up and running, but I didn't like the plain tabs so I switched them out with tabs of my own and also a background image (instead of just a color) for the subnav bar. I am having trouble lining the tabs up though so they have 1 or 2 px spaces between them and the text is centered on them. (I'm trying to right align the tabs). Also in IE the on tab merges with the subnav bar as it should (so the gradiant looks seemless) but in Firefox it does not... The images are he http://yourthreshold.com/downloads/nav_background.gif http://yourthreshold.com/downloads/..._background.gif http://yourthreshold.com/downloads/..._background.gif The code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
/*
passes tests in Firefox, IE5.5+/Win, Netscape 6+, and Opera 7+
IE5.0/Win just isn't handling the z-indexes correctly.
*/
/* Menu */
body {
color: #333;
background-color: #fff;
padding: 20px 0 0 20px;
margin:0;
font-size: 90%;
}
body,a,* {
font-family: helvetica, arial, geneva, lucida, sans-serif;
}
h1 {
font-size:1.5em;
font-weight:normal;
margin:1em 0;
}
ul#topnav {
margin:1px 0 10px;
padding: 0 0 0 12px;
list-style-type: none;
border: 0 none;
position: relative;
left:-50px;
width: 55em;
}
/* \*/
* html body {
font-size: 85%;
}
* html ul#topnav {
left: 0;
}
/* */
@media screen and (min-width: 0px){
ul#topnav {
left: -33px;
}
}
#topnav li {
display: block;
margin: 0;
padding: 0;
float:right;
}
#topnav a {
display:block;
color:#444;
text-decoration:none;
background: url(images/nav_background.gif) no-repeat;
margin:0;
text-align: right;
padding: 0.2em 36px 0.2em 3.4em;
position: relative;
font-weight: bold;
top: 0;
font-size: .8em;
}
#topnav li a.a0 {
left: -3px;
z-index: 151;
}
#topnav li a.a1 {
left: -2px;
z-index: 152;
}
#topnav li a.a2 {
left: -1px;
z-index: 153;
}
#topnav li a.a3 {
left: 0px;
z-index: 154;
}
#topnav a:hover {
background: url(images/nav_background.gif) no-repeat;
}
ul#topnav li a.here {
background: url(images/navHERE_background.gif) no-repeat;
z-index: 310;
}
/*ul#topnav li a.here {
z-index: 210;
background: url(images/lia.gif) no-repeat;
/*border-right: 1px solid #777;
padding: 0.2em 10px 0.2em 3.4em;
margin: 0 2px 0 0;
}*/
ul#subnav {
list-style-type: none;
position:absolute;
z-index:201;
margin: -1px 0 0;
right: 0;
padding: 1px 30px 3px 0px;
background:url(images/subnav_background.gif) repeat-x;
border-top:1px solid #fff;
width: 720px;
height: 22px;
min-height: 1.2em;
}
/* \*/
* html ul#subnav {
width: 748px;
wid\th: 730px;
}
/* */
#subnav li {
position:relative;
z-index:102;
display: block;
margin: 0;
padding: 0;
float:right;
}
#subnav a,#subnav a:hover,ul#topnav li #subnav li a.here {
color:#fff;
display:block;
text-decoration:none;
margin:0;
padding: 2px 10px 2px 12px;
background-color: transparent;
background-image: none;
border: 0 none;
}
#subnav a:hover,ul#topnav li #subnav li a.here {
color:#444;
}
/*Structure*/
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
text-align: center; /* IE5/Win fix */
}
#wrapper {
width:750px;
height:100%;
margin:0 auto 0 auto;
border:1px solid green;
text-align: left;
}
#top {
width:750px;
height:60px;
}
#logohead {
width:370px;
height:60px;
border:1px solid blue;
float:left;
}
#toplinks {
height:60px;
width:365px;
border: 1px solid orange;
margin-left:380px;
}
#nav{
width:750px;
height:50px;
/*border:1px solid pink;*/
}
#midbanner {
width:auto;
height:170px;
border:1px solid red;
}
#bottomcontent {
width:auto;
height:auto;
border:1px solid #990; /*yellow;*/
}
/* \*/
* html #bottomcontent,* html #midbanner {
width:750.5px;
wid\th:760px;
}
/* */
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="logohead">Logo Here</div>
<div id="toplinks" align="right">Login Link Here</div>
</div>
<div id="nav">
<ul id="topnav">
<li><a class="a3" href="../fresh/about.htm">About</a></li>
<li><a class="a2" href="#">Tools</a></li>
<li><a class="a1" href="#">Hosting</a></li>
<li><a class="a0 here" href="#">Home</a>
<ul id="subnav">
<li><a href="#"> </a></li>
</ul>
</li>
</ul>
</div>
<div id="midbanner">Flash Banner Here</div>
<div id="bottomcontent">Bottom Content Starts Here</div>
</div>
</body>
</html>
Hi, I really need help with something!... I'm currently designing a website, with a verticle tabbed navigation bar (using CSS & Javascript). I need it so that when the user hovers over a tab, the content related to that tab, displays until another tab is hovered over. At the moment, when ever you move the mouse into the content area for a certain tab, the content disappears and goes back to the default 'Welcome' layer underneath. But the content layers will have links in them, and this need to be 'active', as it were. Please take a look (I would post a link, but I'm new here... ) Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript"><!--
function showLayer(layerName, shadowLayerName)
{
if (document.getElementById) // Netscape 6 and IE 5+
{
var targetElement = document.getElementById(layerName);
var shadowElement = document.getElementById(shadowLayerName);
targetElement.style.top = shadowElement.style.top;
targetElement.style.visibility = 'visible';
}
}
function hideLayer(layerName)
{
if (document.getElementById) {
var targetElement = document.getElementById(layerName);
targetElement.style.visibility = 'hidden';
}
}
// -->
</script>
<style type="text/css"><!--
.buttonBar
{ width:125px; padding: 0; margin: 0;
}
.shadow
{
position: relative; visibility: hidden;
}
.button
{
background:width:125px; height: 100px;
}
.bg {display: block; width:125px; height: 100px;}
.bg#about:hover {background:url(...) no-repeat;}
.bg#destinations:hover {background:url(...) no-repeat;}
.bg#cruiselines:hover {background:url(...) no-repeat;}
.bg#specialoffers:hover {background:url(...) no-repeat;}
.bg#about:focus {background:url(...) no-repeat;}
.information
{
visibility: hidden; position: absolute; padding: 0; margin: 0; background-color: #891344; height: 400px; width: 575px;}
body {
text-align: center;
min-width: 700px;
}
#content {
margin:0 auto;
width:700px;
text-align: left;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="header" style="width:700px; height: 110px; text-align: right;"><img src="..." width="171" height="100"></div>
<div class="buttonBar">
<div style="height: 400px; width: 575px; position: absolute; margin-left:125px; border: #891344 1px solid; ">
<img src="...">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent non elit. Donec porttitor. Ut in ligula. Mauris tortor. Vivamus at odio. Curabitur rhoncus vulputate neque. Praesent elit sapien, pellentesque non, adipiscing vel, pulvinar consectetuer, ante. Morbi semper pede ut nisl. Nam porttitor fermentum nisl. Mauris viverra malesuada neque. Vivamus aliquam pharetra ligula. Suspendisse quis orci et velit pharetra bibendum. Aenean turpis. Donec vel ipsum. Vivamus pharetra. Aliquam ut turpis non erat sagittis tincidunt.</p>
<p>Nam pellentesque egestas libero. Duis lobortis. Mauris egestas luctus urna. Nunc venenatis lectus in quam. Nulla gravida sem at massa. Quisque tortor. Donec id dui quis justo porta fermentum. In iaculis lacus non tellus. Morbi nunc enim, mattis eu, sollicitudin vel, placerat vel, magna. Pellentesque volutpat. Nam mi.</p>
</div>
<div style="position: absolute; width: 575px; height: 400px; margin-left: 125px; border: #891344 1px solid;">
<div id="shadowLayer" class="shadow"></div>
<div class="infoArea">
</div>
<div>
<div id="HoverArea1Info" class="information" onmouseover="showLayer('HoverArea1Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea1Info')" >
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
<div id="HoverArea2Info" class="information" onmouseover="showLayer('HoverArea2Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea2Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
<div id="HoverArea3Info" class="information" onmouseover="showLayer('HoverArea3Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea3Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
<div id="HoverArea4Info" class="information" onmouseover="showLayer('HoverArea4Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea4Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
</div>
</div>
<div style="position: absolute; height: 400px; width: 125px; background:url(...) no-repeat; border: #891344 1px solid;">
<div class="button" onmouseover="showLayer('HoverArea1Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea1Info')" >
<a href="about.phtml" class="bg" id="about">
</a></div>
<div class="button" onmouseover="showLayer('HoverArea2Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea2Info')" >
<a href="destinations.phtml" class="bg" id="destinations">
</a></div>
<div class="button" onmouseover="showLayer('HoverArea3Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea3Info')" >
<a href="cruise_lines.phtml" class="bg" id="cruiselines">
</a></div>
<div class="button" onmouseover="showLayer('HoverArea4Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea4Info')" >
<a href="special_offers.phtml" class="bg" id="specialoffers">
</a></div>
<div id="footer" style="width:700px; height: 20px; text-align: right;">
</div>
</div>
</div>
</div>
</body>
</html>
There must be some way to adapt the code already used, to do what I want. Where am I going wrong and what do I need to do?? Any help would be much appreciated! Many thanks, Britcanuck. Hello all i have this site here -> http://forum.prxa.info/index.php I am trying to create a box to the right of the logo right up near the end of the page to contain some text, can anyone help me out? Thanks! I'm trying to use a jQuery script to create a tabbed slide-out on the right side of the screen. At this point, the slide-out plug-in is not an option. Here's the jQuery script: Code: $('#sideTabMain .button').toggle(function() {
$('#sideTab').animate({right:'0px'}, {queue:false, duration: 500});
}, function() {
$('#sideTab').animate({right:'-650px'}, {queue:false, duration: 500});
});
And the basic CSS for the div: Code: #sideTab {
position: absolute;
z-index: 1000;
top: 50px;
right: -650px
}
The issue is CSS-related. You can still see the slide-out div when you scroll over to the right (off the screen). How do I hide this? I tried putting the entire page in a CSS div with overflow: hidden but this completely removed the ability to scroll horizontally. Any ideas? Thanks for your help. My first new thread here! Hoping for some quick review and suggestions - any input is much appreciated. I have a site in the *early* stages of development and I'm using the "sliding doors" technique for tabbed navigation. Not sure if I'm allowed to post links, so below are some code snippets and I've also attached a screenshot. The nav container (#nav) temporarily has a yellow background just as a clear visual cue and it is not positioned on the page yet - so forgive the ugliness! - but the code for the actual tab effects is complete, or so I thought. CSS: Code:
/* horizontal main menu navigation */
#nav {
float:left;
width: 100%;
background: yellow; /*temporary color just for visual cue */
}
#nav ul {
margin: 0;
padding: 0 0 0 300px;
list-style: none;
}
#nav ul li {
float: left;
margin: 0;
padding: 0;
font: bold 1em/2em Verdana, Arial, Helvetica, sans-serif;
background: url(images/tab_right.gif) no-repeat top right;
}
#nav a {
float: left;
display: block;
margin: 0 10px 0 0;
padding: 5px 2px;
color: #fff;
text-decoration: none;
background: #284d73 url(images/tab_left.gif) no-repeat top left;
}
HTML: Code: <div id="nav"> <ul> <li id="t-index"><a href="/" title="Gonzi's home page">HOME</a></li> <li id="t-about"><a href="#" title="About Us">ABOUT US</a></li> <li id="t-services"><a href="#" title="Our Services">OUR SERVICES</a></li> <li id="t-fleet"><a href="#" title="Our Fleet">FLEET</a></li> <li id="t-reserve"><a href="#" title="Reservations">RESERVATIONS</a></li> </ul> <!-- end #nav --> </div> Problem is two fold: 1. The 'a' elements are styled to 'display: block' to make the entire tab clickable, yet it isn't actually rendering this way, and I'm at a loss to explain why. Perhaps something obvious I'm just missing... 2. The 'tab_right.gif' background image (in 'li' elements) and the 'tab_left.gif' background image (in the 'a' elements) don't appear to be meeting up correctly, leaving an area with no image. Again, no idea why and I'm hoping a 2nd pair of eyes may find something I'm missing... If it would help to see the actual implementation, I can send a URL - just let me know how to get that to you (email?). Thanks for any suggestions! luispunchy Didn't know what to search for this--apologies if it exists somewhere on the board. Now, with links, I know you can supply a title="" attribute to them, to get a tooltip to appear on them if you leave the mouse hovering on them for a short period. What I am trying to do is somewhat similar. Basically, imagine that you have a column of links, and a large space to the right of them (the background of which is defined elsewhere, but links' descriptions still would show here). Some code demonstrating the type of effect I'm grasping for is below: Code: -- DTD removed for space --
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body{
padding: 0px;
margin: 0px;
}
.navCol{
background: #00FFCC;
width: 20.00%;
}
.dispInf{
position: absolute;
top: 0px;
left: 21.00%;
width: 79.00%;
background: #CCCCCC;
height: 65%;
}
a:hover span{
display: block;
position: absolute;
top: 0px;
left: 21.00%;
width: 79.00%;
}
a span{
display: none;
}
-->
</style>
</head>
<body>
<div class="dispInf"></div>
<div class="navCol">
<a href="/site1">Link 1<span>
Description 1</span></a>
<br />
<a href="/site2">Link 2<span>
Description 2</span></a>
</div>
</body>
</html>
Now, my problem is this: This does not work in Internet Explorer, at all. Links still function; however, the text that should be appearing over in that right area does not. Could anyone please point me in the proper direction to resolve this, if such can be done? I'm only shooting for IE6 and Mozilla compatibility, though the more the merrier. Thank you for your time. friends i have table.. that table corner must be in the curve form.. i dont know to do.. plz send the links for my problem curve edge is my output.. for that related css link plz thanks in advance |
|||||||