|
CSS - Creating Table With Rounded Td Elements
Hi,
How to create a rounded table, which has the td elements also rounded? Thank you Similar TutorialsI am trying to create a table with rounded cellcorners using 1 pixel gif's. It is possible to do this with html only but this creates an enormous amount of code. Unfortunately the tables have to be inserted in the WYSIWYG editor of the Vignette V7 content management system and the people inserting the tabular data are novices and do not know anything about html. Therefore I have to use css and a very simple html table. This is the code I have created so far: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rounded Corner Test Using CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.header {
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.light {
background-color: #CCCCCC;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.dark {
background-color: #999999;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.rounded {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
-->
</style>
</head>
<body>
<table width="75%" border="0" cellspacing="1" cellpadding="3" class="rounded">
<tr class="header">
<td colspan="3">Title</td>
</tr>
<tr class="light">
<td>Text</td>
<td>More text </td>
<td>Contents</td>
</tr>
<tr class="dark">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
And this is the result: URL As you can see, using the css background property I can only place a pixel in one cellcorner at the time and I need to have them in all corners. Does anybody have an idea how to do this without making the html code too complicated? attempting to create a re-usable quote box like on this website right at the top, http://pownce.com/download/ I would prefer not to use an image, and I swear I have seen a tutorial or some variation of how to do this. I know there are several that are with rounded boxes, but I would like to create something like this, no rounded boxes involved. Thank you for ANY help. hi. I am trying to create rounded tabs similar to the tabs on this page of yahoo personals: http://personals.yahoo.com/us/search/dashboard notice how there is a bit of an extension over the table boundaries where the rounded tabs exist over the search type. i am guessing this happens on of two ways: 1) there is another table that sits on top of the main table and the slice of tab with the rounded corners appears there. 2) a mix of float, position:absolute, etc which positions the top tab slices. I am using javascript and CSS to round the tabs. I have tried option #2 with so-so results. I am wondering what approach (please feel free to advise others if there are others) would be the most easy on the eye and bullet-proof to multiple browsers? I would be happy to provide code but thought i'd get the discussion going as the question is more conceptual than "why-doesn't-my-code-work". thanks! Hi: I'm told that forms cannot have rounded corners and that tables can. Question: How do you do it? I am new to css and just had a quick question. (please forgive me for any invalid lingo... hopefully you can make sense of my question) I am creating a dynamic calendar of events page, the calendar will be built using a table. If I put "table.calendar" in my style sheet to format the overall table, and I have th.calendar, td.calendar, do I have to add the "class" property to th or td, or will they automatically be in the calendar class because they are part of the table. For example... Do I do this? Code: <table class="calendar"> <tr><th></th></tr> <tr><td></td></tr> </table> Or this? Code: <table class="calendar"> <tr><th class="calendar"></th></tr> <tr><td class="calendar"></td></tr> </table> I want to know how I could possible control all the elements inside a table that is inside a div with an id. This is possible correct? So if I have: Code:
#header { width: 900px; }
And then something like this: Code: <div id="header"> <table> <tr> <td> </td> </tr> </table> </div> I'd like to then have something like: Code:
#header.table,td {padding-left: 10px;}
Which I am hoping would put a 10px padding on all the td's in the table and nothing else. Is my syntax right? I have two problems. First issue is that I cant seem to get a background image to repeat in IE when it works fine in FF. I tried to reproduce the bug on another server using the same exact CSS and to my shock, the background repeat rule works fine. So, it doesnt work on my server at home with a much more complicated stylesheet (albiet the reference to the background image and repeat rule are exactly the same .. and simple) .. but when I port the same stylesheet to another server with simpler markup, boom, it works fine. Cant wrap my head around this one. Is there a commonly known IE bug/problem with background image/CSS/background-repeat rules? My site that does not work through IE shows the image once .. and thats it. No repeating like tell it to. My other issue (if youre still interested) is a problem with the CSS command: Code: table
{
empty-cells: show;
}
which does not work at all. As you can see on this page in IE, (http://www.doublethinkdesigns.com/development/ ) ive specified the rule, but lo and behold, the cells are still missing. Can someone kindly lend me some perspective perhaps? Thank you much in advance. Hello, I am trying to aling two unordered lists side by side by each other. I want them to look like: Code: Example 1: Example2: *blah *blah *blah *blah *blah *blah I'm running into two problems: 1) I can't get them spaced apart from each other. I tried putting them in a table, but the cells just sit right next to each other so there's no space. 2) Since it is an UL, the dotted bullet points are centered, however, I would like them left-justified like the example. Is this possible? Thanks guys, [EDIT] After posting, the example does not display like I want it. I want a whole SPACE GAP between the two lists. The post made them run together. Hi there. I am trying to create the attached image in style sheets. I have done everything, but now I'm stuck on the border of the bottom TD. Anyone got any suggestions on how to do this? Hi all, i'd like to make a 'table' like div that has a column down the left hand side with one or more image tags and another cell on the right with text, however i would like to do this without specifying the height (other than 100% or 1px) or absolute position of the divs: Code: ___________________ |Image 1 |Text | |Image 2 |Text | | |Text | | |Text | ------------------- Currently i've got 3 divs: one for the outer 'table', one for the images 'cell' and one for the text 'cell'. Outer 'table' style: None (just a plain <div>) Images 'cell' style: height:100%;float:left Text 'cell' style: height:100% Here's the full code if you want it: Code: <div>
<div style="height:100%;float:left;"><img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10" border="0"><br>
<img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10"></div>
<div style="height:100%"> [div 2] Shows text on the right <br>
<br>
continues downwards no matter how much text appears<br>
<br>
<br>
<br>
<br>
<br>
Even down here [/div2] <br>
</div>
</div>
This works great in i.e. but not mozilla, anyone have any ideas? Something like this gives real thick and uneven borders, is it possible to make the borders combine and become one single border when they are next to each other? I don't want to use seperate border-top border-left etc ... Thank you. Code:
<HTML>
<HEAD>
<style type="text/css">
div.table div
{
border : 1px solid black;
/* border-collapse : collapse; */
}
div.table div.tr
{
clear : both;
}
div.table div.tr div.th
{
float : left;
font-weight : bold;
width : 25%;
}
div.table div.tr div.td
{
float : left;
width : 25%;
}
</style>
</HEAD>
<BODY>
<div class="table">
<div class="tr">
<div class="th">column 1</div>
<div class="th">column 2</div>
<div class="th">column 3</div>
<div class="th">column 4</div>
</div>
<div class="tr">
<div class="td">num 1</div>
<div class="td">num 2</div>
<div class="td">num 3</div>
<div class="td">num 4</div>
</div>
<div class="tr">
<div class="td">numAAA 1</div>
<div class="td">numA 2</div>
<div class="td">numAAAA 3</div>
<div class="td">num 4</div>
</div>
<div class="tr">
<div class="td">num 1</div>
<div class="td">num 2</div>
<div class="td">num 3</div>
<div class="td">num 4</div>
</div>
<div class="tr">
<div class="td">num 1</div>
<div class="td">num 2</div>
<div class="td">num 3</div>
<div class="td">num 4</div>
</div>
</div>
</BODY>
</HTML>
Trying to create a table psuedo class so that the specific attributes apply to the target table. Not sure if my syntax is correct. What I would like is to call the ID DataTable and have it cascade thru the tr, td...... Here are my tags: #DataTable { width:auto; border-collapse: collapse; border:1px solid #cccccc; border-spacing :20px;} #DataTable tr { border-spacing:20px;} #DataTable td.headerDescription{ width: 240px;} #DataTable td.fundCell { width: 240px; text-indent:40px;} #DataTable td.percentageCell { width: 60px; vertical-align:middle; text-align:center; border-right:1px solid #cccccc;} #DataTable td.seperator { border-top:1px solid #cccccc;} #DataTable td.assetCategory { width: 240px; text-indent:20px; vertical-align:middle;} #DataTable td.headerColumn { font-weight:bold ; width:40px; background-color:#F0F0F0 ; text-align :center;} #DataTable td.leftHeaderColumn { font-weight :bold ; width:40px; background-color:#E0E0E0 ; text-align :center ; border-left:1px solid #cccccc;} #DataTable td.assetClass { width: 240px; vertical-align:middle; font-weight :bold;} #DataTable td.performanceCell { width:60px; background-color:#E0E0E0 ; text-align :center ; vertical-align :middle;} Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! 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). 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 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;
}
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;
}
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. 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> |
|||||||