|
CSS - Rounder Borders
q) In CSS or html, how can make my buttons and borders around a screen section ( created with css) have roundish borders and regular not corners
q) How can i get the colors of such buttons to be a bit more exciting eg go from ligh to dark blue instead 1 uniform color? Similar TutorialsCurrently I am using the following code for links: Code:
a:link{color: red; text-decoration: none}
a:active{color: red}
a:visited{color: red; text-decoration: none}
a:hover{background-color: gray}
I was wondering how to make the gray background have rounded corners when the user hovers over them. Hello, I can't for the life of me figure out how to get these thin white borders like on this website: http://www.viceland.com/index_us.php Is this done with a style sheet? I can't find any reference to a border. How is this done? Hi guys, I am using the following css to style a content box: Code:
/*---------------- Start of Testimonies Content Box ---------*/
#testimonies {
WIDTH: 175px;
MARGIN: -85px 0px 0px;
POSITION: right;
height: 60px;
float:right;
BORDER-RIGHT: #d9ddb9 1px solid;
BORDER-LEFT: #d9ddb9 1px solid;
BORDER-BOTTOM: #d9ddb9 1px solid;
BORDER-TOP: #d9ddb9 1px solid;
PADDING-TOP: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 20px;
PADDING-LEFT: 10px; FLOAT: right;
BACKGROUND-IMAGE: url(images/bg-down-right.gif);
BACKGROUND-POSITION: 50% bottom;
BACKGROUND-REPEAT: repeat-x;
BACKGROUND-COLOR: #fafceb;
}
.testimonies-h2 {
PADDING-RIGHT: 3px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #fafceb
}
#testimonies H2 {
PADDING-RIGHT: 0px; BACKGROUND-POSITION: 2px 3px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 100%; BACKGROUND-IMAGE: url(images/bg-h2.gif); PADDING-BOTTOM: 2px; TEXT-TRANSFORM: uppercase; COLOR: #8fa300; PADDING-TOP: 2px; BACKGROUND-REPEAT: repeat-x
}
/*---------------- End of Testimonies Content Box ---------*/
I want to add an inline frame inside the 'testimonies' div in my html but it keeps using the border styling of the css above. I tried using this to cancel it out (placing my inline frame in a span, but it did nothing) Code:
#testimonials {
border-left:none;
border-right: none;
border-bottom:none;
border-top:none;
}
HTML CODE: Code: <div id="testimonies"> <h2><span class="testimonies-h2">Testimonials</span></h2> <span class="testimonials"> <!-- ========== V-NewsTicker v2.2 (Freeware) ============= --> <script type="text/javascript" src="v_newsticker_1.js"></script> <!-- ======================= --> </span> </div> Is it possible to have more than one border in CSS? I want to have a grey and green border around an area of text, something like this. So is it possible to have two or more borders in CSS and if so, how? Can any one suggest a better CSS script for having a border in IE So far I have the following: PHP Code: border: 1px solid #0099CC; The problem is that when ran in IE, the top border does not show. However it works fine in firefox. Also I get warnings on my script when I run my CSS validation tool. Can any one help. Thge URL is http://pfwd.org.uk/sfd/update_test3.php Hi All, I am trying to set a style in my CSS that will show a border-bottom for an entire row. So far I can only get it to work on a per cell (<td>) basis. I am using Dreamweaver MX 2004 and when I select an entire row and assign it a style, it just add's it to the <tr> tags at the top of those rows. Code:
<!-- This is a Row that is at the top of the table -->
<table width="100%" border="0" class="fullwidth">
<tr>
<td class="head">This is a header </td>
</tr>
</table>
<!-- This is where I want the border-bottom attribute to show up -->
<table width="100%" border="0" cellpadding="2" cellspacing="1" class="list">
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Here is the CSS: Code:
table.fullwidth
{width: 100%;
background-color: #FFFFFF;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}
tr.list
{background-color: #EFEFEF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
border-bottom: 1px dotted #000000;}
I have a onMouseOver event that draws a top border over text. This works fine with Mozilla/Firefox, but it doesn't render in IE. I think I know why -- it's because I used CSS to position the text beforehand, and in IE it doesn't bother drawing the top border because it's out of the text's bounding box, right? So, how do I fix this so it works in IE? I've posted a sample page with the problem he http://aaron.verge-rpg.com/vergebrd/test.html Any help would be appreciated. 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> if someone would, check out my testing grounds website... jon.endysis.org there are 3px #fff double borders going along each side of the layout (you can see them on either side of the space shuttle background) that are supposed to extend all the way down the layout, but only go until the end of the shuttle. I've learned that if I just have html br /'s after the the shuttle part they extend down for those, but for some reason don't extend down for my div class="contentleft" and my div class="contentright". if anyone wants to check my source, div id="racingstripes" is the layer that has the stripes, and it has ONLY the stripes. my css is: #racingstripes{ border-right:3px #fff double; border-left:3px #fff double; } any ideas please? i can't figure it out. thanks for any help! Hello, I have a list that looks like this Code: <ul> <li><a href="#"> List item 1</a></li> <li><a href="#"> List item 2</a></li> <li><a href="#"> List item 3</a></li> </ul> ... and my CSS for the list looks like this Code:
ul {
margin-left: 0px;
list-style: none;
border: none;
border-top: 1px solid #000000;
}
li {
border-bottom: 1px solid #000000;
}
li a {
text-decoration: none;
border-bottom: 1px solid #000000;
border-left: 14px solid #82817C;
color: #FFFFFF;
background-color: #585752;
}
li a:hover {
text-decoration: none;
border-left: 14px solid #9D9E8E;
border-bottom: 1px solid #000000;
color: #FFFFFF;
background-color: #585752;
}
My problem is that I can't get the borders go the way I want them to. As you can see, the list items have two borders, a left border and a bottom border. The unorganized list-tag has one border, a top border. In both cases, the top and bottom borders are 1px in height, and the left border is 14 pixels in width. The ul's top-border is full width, meaning it starts at the left side of the page, while again the li's bottom-border starts AFTER the left-border... ok, that was confusingly explained. What I'm trying to achieve is that the li's left-border is over lapped by it's bottom-border - so that the bottom border looks just like the ul's top-border. Ok, if you put the code to your editing program and view it "in action" you should be able to see what I mean. So to summarize it all, how can I force the bottom-border to over lap the left-border? Thank you in advance, - Kimppa How do i apply visible and formated border to a certain cells without afecting the entire column or row? Im using the border properties like: border-buttom-style border-top-style border-left-style border-right-style border-width border-color etc, etc, but when apply the style the colum or the row is affected entirely, this makes my top sliced image (header) with the separators visible. Im new to css and need some help in doing this. Thx I am trying to make a nice thin border around a table and all the table cells. It need to work on both windows and macs... If I add this to my table tag [ style="border-collapse: collapse" bordercolor="#808080" ] it give me a nice border in IE, but not so great on a mac (big and thick). I also want to be able to add it into a style sheet and just add the style tag to the table, but I can't seem to get any of it to work. Anyone have any examples or advice? Thanks! Hi I have built some nav buttons on my site and they looked as I wanted however when i attached links to them a border appeared around the image can someone tell me how to get rid of them please. DYNAMIC WEB DESIGN thankyou in advance. Hi I'm currently testing my code within the firefox browser and have found that no borders appear whatsoever. I was using the dotted border however changed it to solid to see if that made a difference however this did not help. The css I use for the <div> is as follows: Code:
.div_surround {
width:185px;
min-height:200px;
float:left;
margin-top:5px;
margin-right:5px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
border-left-style: solid;
border-left-color: #CCCCCC;
border:1px;
}
I know a lot of people dont like the width to be specific pixels however unless this makes a difference to my situation, please ignore this for the time being. I am looking to change it in the future. By the way this code works fine in IE where I see a box with a bottom and left border. Thanks in advance for any help. Billabang! hi all, hoping someone could help me with an issue i'm having in css involving borders (sort of). hopefully this is the appropriate place for this question, as it does involve some html. i have a page divided into three vertical frames (i know, i know...frames are not ideal. but i would like to keep the page in this format for specific reasons). the border is set to "0" in each frame, but on the left and right frames i use a bit of css code to create a colored border on the right hand side for the left frame, and on the left hand side for the right frame (it creates a kind of vertical outline for the middle frame). hopefully this makes sense. after completely finishing the website and uploading it to my ftp, i found that it works perfectly, except when opened in firefox or navigator. when opened with either of these browsers, the content and most of the design loads fine, but the colored borders in the outer frames are offset from their sides maybe a quarter of an inch. i can't figure out what's causing it, but i know it has something to do with the border code. as i would like this site to be as compatible as possible with most popular browsers, i'd like to try and fix this somehow. i've posted my code following this message in hopes that someone could offer suggestions. any advice would be greatly appreciated. frames created in index.htm: Code: <frameset cols = "25%, 50%, 25%" border = "0"> <frame name = "side1" src = "blankleft.htm" scrolling = "no"> <frame name = "middle" src = "main.htm"> <frame name = "side2" src = "blankright.htm" scrolling = "no"> </frameset> colored border for the left frame (side1): Code: <style type = "text/css">
body
{
border-left: 0px solid #607046;
border-right: 2px solid #607046;
border-top: 0px solid #607046;
border-bottom: 0px solid #607046;
}
</style>
colored border for the right frame (side2): Code: <style type = "text/css">
body
{
border-left: 2px solid #607046;
border-right: 0px solid #607046;
border-top: 0px solid #607046;
border-bottom: 0px solid #607046;
}
</style>
I have a bit of CSS that wraps a border around an image, it works in IE but not in FF. What am I doing wrong? Code:
.book_box {
width: 95%;
padding: 10px 5px 5px 5px;
border: 2px solid white;
background-color: #eef7ff;
text-align : left;
overflow: auto;
}
.book_box_img {
float: left;
margin: 5px;
border: 1px;
border-color: #003366;
}
I have a site that uses many tables to display lists of data. I would like to use CSS to clean up these tables. In particular I want to put round corners around each table as a border. The tables vary in width and height so how can I do this? I'd like to have a class in my style sheet that gives a table a 1 px border, something like this: Quote: <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td width="100%">test</td> </tr> </table> But I'm unsure how to do it. i want to tell an iframe to fill 100% width, but have a border of 1px this will cause horizontal scrolling since the width property does not include the border in its calculation. how can i do this? I have a small table that is not displaying borders in IE. On this page The section with Financial Aid and Parents should have a grey 3px border on the right hand side going from the header image to the person at the bottom. In FF it displays as intended. HTML Code: <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td id="finaid" class="finaid greybrdr"></td> <td id="parents" class="greybrdr"></td> <td id="students" class="students"></td> </tr> <tr> <td class="bod finaid greybrdr"></td> <td class="bod greybrdr"></td> <td class="bod students"></td> </tr> <tr> <td id="finback" class="greybrdr"></td> <td id="parback" class="greybrdr"></td> <td id="studback"></td> CSS Code:
.greybrdr {
border-right: 3px solid #e4e4e4;
}
.finaid {
border-left: 2px solid white;
}
.students {
border-right: 5px solid white;
}
.bod {
width: 183px;
height: 200px;
background-color: #FFFFFF;
}
|
|||||||