|
CSS - Creating Rounded Tabs: Design Approaches
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! Similar TutorialsI want to setup tab links / tab strips like shown in the following article: http://www.codeproject.com/html/css_round.asp However, in addition to rounded corners, id like to have the individual tabs use a gradient. Its the center part that im not sure how to handle. Help ?!!! Can you do something like the following: Code:
a.tab {
color: #000;
background: #fb0 url("left-tab.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
a.tab span {
background: url("right-tab.gif") right top no-repeat;
padding-right: 10px
}
/*my addition and it does not work */
a.tab span div {
background: url("center-tab.gif") center top repeat-x;
}
And then use the links like so: Code: <a href="#"><span><div>Home</div></span></a> I have a basic layout that I'm working on right now (a gif is attached), but I can't figure out the best way to code it. I know the corners have to be gif images. That's easy enough. What I'm wondering, is whether the top and side sections can be div's with corresponding borders or if I'm going to have to use images all around the center div. I'd really like to use as little bitmap imagery as possible just to get used to working conservatively instead of just laying everything out with images. I'm still new to CSS layouts, and I've seen some good tutorials, but not much related to escaping the blocky look traditionally associated with them. I know a list apart has a good article on rounded corners, but it didn't seem to apply here. Thanks for your time Hi, How to create a rounded table, which has the td elements also rounded? Thank you 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. The application I'm writing currently uses a Custom tag to generate a table of images and input images to represent tabs. It is working just fine. After implementing a liquid layout on the application the tabs still work, but do not grow larger based on the size of the screen. Also there are always only 7 tabs max per row. I'm looking to try to change this so that the tabs will fit to the space provided. I'm hoping to come up with a style sheet solution that can be applied to code that my custom tag would generate. Here is an example of what my custom tag would generate currently. It is all tables, but could easily be modified to divs or such. I realize this is going to take a bit of work, so I'm just hoping someone may have a suggestion on the direction I could take this. Something that might change the number of tabs on a row as the browser is expanded or contracted.... Code: <div id="content" class="ParentDivBrowse"> <div id="subContent" class="ChildDiv"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td nowrap='nowrap'> <table border='0' cellspacing='0' cellpadding='0'> <tr> <td nowrap='nowrap'> <img src="/AppName/images/leftExtreme_off.gif" /> <input type="image" src="/AppName/images/Properties_0_en_US_off.jpg" alt=" Properties" name="Properties" value="15" onClick="buttonClick(this)"> <img src="/AppName/images/offOff.gif" /> </td> <td nowrap='nowrap' colspan="6"> <input type="image" src="/AppName/images/Fields_0_en_US_off.jpg" alt=" Fields" name="Fields" value="14" onClick="buttonClick(this)"> <img src="/AppName/images/rightExtreme_off.gif" /> </td> </tr> </table> </td> </tr> <tr> <td nowrap='nowrap'> <table border='0' cellspacing='0' cellpadding='0'> <tr> <td nowrap='nowrap'> <img src="/AppName/images/leftExtreme_off.gif" /> <input type="image" src="/AppName/images/DLG_FEOV_0_en_US_off.jpg" alt=" DLG_FEOV" name="DLG_FEOV" value="7" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_FLST_0_en_US_off.jpg" alt=" DLG_FLST" name="DLG_FLST" value="10" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_SHOV_0_en_US_off.jpg" alt=" DLG_SHOV" name="DLG_SHOV" value="8" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_TLOV_0_en_US_off.jpg" alt=" DLG_TLOV" name="DLG_TLOV" value="9" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_OCUR_0_en_US_off.jpg" alt=" DLG_OCUR" name="DLG_OCUR" value="11" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_NOTE_0_en_US_off.jpg" alt=" DLG_NOTE" name="DLG_NOTE" value="12" onClick="buttonClick(this)"> </td> <td nowrap='nowrap' colspan="1"> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_FILT_0_en_US_off.jpg" alt=" DLG_FILT" name="DLG_FILT" value="13" onClick="buttonClick(this)"> <img src="/AppName/images/rightExtreme_off.gif" /> </td> </tr> </table> </td> </tr> <tr> <td nowrap='nowrap'> <table border='0' cellspacing='0' cellpadding='0'> <tr> <td nowrap='nowrap'> <img src="/AppName/images/leftExtreme_on.gif" /> <input type="image" src="/AppName/images/DLG1_T381_FUND1_0_en_US_on.jpg" alt=" DLG1_T381_FUND1" name="DLG1_T381_FUND1" value="0" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/onOff.gif" /> <input type="image" src="/AppName/images/DLG3_T381_FUND2_0_en_US_off.jpg" alt=" DLG3_T381_FUND2" name="DLG3_T381_FUND2" value="1" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG6_T381_TO_FROM_0_en_US_off.jpg" alt=" DLG6_T381_TO_FROM" name="DLG6_T381_TO_FROM" value="2" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG7_T381_MISC_0_en_US_off.jpg" alt=" DLG7_T381_MISC" name="DLG7_T381_MISC" value="3" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_ADER_0_en_US_off.jpg" alt=" DLG_ADER" name="DLG_ADER" value="4" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_PTDE_0_en_US_off.jpg" alt=" DLG_PTDE" name="DLG_PTDE" value="5" onClick="buttonClick(this)"> </td> <td nowrap='nowrap' colspan="1"> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_COOV_0_en_US_off.jpg" alt=" DLG_COOV" name="DLG_COOV" value="6" onClick="buttonClick(this)"> <img src="/AppName/images/rightExtreme_off.gif" /> </td> </tr> </table> </td> </tr> <tr> <td nowrap='nowrap' colspan='2'> <img width='100%' style='min-width:837px;' src='/AppName/images/strip_on.gif'> </td> </tr> </table> </td> </tr> </table></div></div> I 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? look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated. 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). What is the best way to make your element corners rounded with CSS? I'm kind of looking for a good tutorial. Hi, Does anyone know of a way to do the effect of rounding corners (see attached image) in CSS? As you'll see in the image, I just want 1 pixel to be offset and be in a different colour for each corner of my box. Am having a problem with turning a design into a tableless layout. I've attached the part of the layout I'm trying to code and this is the code I'm using: xhtml Code: Original - xhtml Code <div class="content"> <div class="bar">Devshed Rocks the socks of oneself</div> <div class="leftcon">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lu ptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div> <div class="rightcon">Hey</div> </div> <div class="content"> <div class="bar">Devshed Rocks the socks of oneself</div> <div class="leftcon">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lu ptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div> <div class="rightcon">Hey</div> </div> And here is the css: css Code: Original - css Code .content { width:570px; float:right; margin-top:20px; background-color:#CCCCCC; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; } .leftcon { width:450px; padding:5px; float:left; border-right:1px solid black; background-color:#FFFFFF; padding-left:15px; background-image:url(images/cornerbot.jpg); background-repeat:no-repeat; } .bar { background-color:#66CC00; font-size:12pt; padding:10px; padding-left:15px; background-image:url(images/corner.jpg); background-repeat:repeat-y; }
.content {
The corner image simply won't line up with the bottom half of the corner which I have as the left floated background image. Anyone able to point out what I'm doing wrong or perhaps offer another solution? Thanks Hey, searched so don't give me crap. I have 2 images, searchleft.jpg (looks like { ) and searchright.jpg (looks like } ) I only posted the Doc type just incase, I validated my webpage(www.gameyin.com) and nothing that could hurt this has happened. Anyway I want the rounded borders on the left center, for searchleft.jpg and a roundedborder for searchright.jpg on the right center. I hope I have been very clear. All the searches need 4 images...anyway... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> html { height: 100%; overflow: scroll; } body { font-family: tahoma, arial, sans-serif; font-size: 11px; background: #DEDEBA; margin: 0px 0px 0px 0px; color: #DEDEBA; } input, option, select, textarea { font-family: verdana, tahoma, arial, sans-serif; font-size: 11px; } .search { margin: 0px; padding: 5px 5px 5px 7px; width: 366px; height: 24px; float: right; } .input-search { width: 259px; margin: 0px 5px 0px 0px; padding: 5px; background: #DEDEBA; border-color: #666666; float: left; text-shadow: 808080; color: #808080; } </style> <script type="text/javascript" src="webfunctions.js"></script> </head> <body> <div class="search"> <form action="search.php" method="post" style="display:inline;"> <div> <input type="text" name="search" class="input-search" value="Enter your Search Query" onblur="if(this.value=='') this.value='Enter your Search Query';" onfocus="if(this.value=='Enter your Search Query') this.value='';" /> <input type="image" src="images/search.gif" /></div> </form> </div> 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;
}
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. Simple question but I'm curious if anyone can work out how the 'Browse' buttons are done on this page, they have rounded corners yet looking through the css I can't see any images that account for them... http://www.haveamint.com/forum/ 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;
}
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 Hi: I'm told that forms cannot have rounded corners and that tables can. Question: How do you do it? I am writing in hopes someone can help me figure out some problems I am having. All problems occur on the following page: http://cbo4edu.org/newSite/home.html PROBLEM #1 I cannot figure out why Column 3 is positioned outside the wrapper div. I need the solid black border to align with the other borders on the right-hand side. PROBLEM #2 As you can see I am having trouble getting the rounded corner divs to display correctly in the 3rd column. Why are the top-right corners displaying the top-left? Why is the top edge of the lower rounded corner div absent? And why is the bottom-left corner have a blue line under it? I used the method presented he http://kalsey.com/2003/07/rounded_corners_in_css/ PROBLEM #3 I need to add a border between Column 1 & 2 and a border between Column 2 & 3. I have tried adding a border attribute to the CSS file but that does not display anything. Any help on any of these problems are much appreciated. I'm looking to round out the borders of some of my elements. It'd be nice to make it similar looking to the way the <fieldset> in IE rounds them out. Anyone know a good way? |
|||||||