|
CSS - Button With An Outline Color
I tried to create a button with an outline color, but it doesnt seem to work. Does anyone has worked on outline property ,can u help me!!!
<button STYLE="outline: red solid thick">I'm a Button - CLICK ME!</button> Similar TutorialsHow do i set a font outline color as red and the fill with white using css. Does anyone know? How can I set the color inside a radio button. background-color won't work. it sets color around radio buttons. I tested color, it is not working for this as well. hi all ! I want to know how I can change the text size and color for a button created inside my page (only for the button the rest should remain the same). The data and button are created in PHP so it looks something like: Code: <div class="column3">
<div class="padding">
<?php if( $this->countModules('right') ): ?>
<jdoc:include type="modules" name="right" style="xhtml" />
<?php endif; ?>
</div>
And css for that part of the page is: Code: #index .box .column3 {width:252px;}
i was able to have the image button links hover and change colors using 2 different image buttons, however i came to realize that i want to have the hovered image stay active once the button is clicked. can someone assist me with this? this is what my code looks like: Code:
a:hover#index {
background: url("./images/home-red.png") 0 0 no-repeat;
}
a:hover#howto {
background: url("./images/howtobuild-red.png") 0 0 no-repeat;
}
a:hover#installation {
background: url("./images/installation-red.png") 0 0 no-repeat;
}
a:hover#design {
background: url("./images/dande-red.png") 0 0 no-repeat;
}
a:hover#dean {
background: url("./images/deansblog-red.png") 0 0 no-repeat;
}
a:hover#forum {
background: url("./images/userforum-red.png") 0 0 no-repeat;
}
a:hover#plan {
background: url("./images/planbike-red.png") 0 0 no-repeat;
}
a:hover#search {
background: url("./images/search-red.png") 0 0 no-repeat;
}
a#index, a#design, a#howto, a#installation, a#dean, a#forum, a#plan, a#search {
width: 86px;
height: 27px;
float: left;
margin-top:6px;
position:relative;
left: 115px;
}
a#index {
background: url("./images/home-grey.png");
}
a#design {
background: url("./images/dande-grey.png");
}
a#howto {
background: url("./images/howtobuild-grey.png");
}
a#installation {
background: url("./images/installation-grey.png");
}
a#dean {
background: url("./images/deansblog-grey.png");
}
a#forum {
background: url("./images/userforum-grey.png");
}
a#plan {
background: url("./images/planbike-grey.png");
}
a#search {
background: url("./images/search-grey.png");
}
I decided to remove all outlines from my website, so I added the following statement to my CSS file: Code: *
{
outline: none
}
However, in Firefox 2 (but not in IE7), the outline still surrounds the content of a <select> dropdown after a new option is selected. Is there any way to get rid of this outline? I know dropdowns are often part of the operating system so that there are additional restrictions on styling them, but I assume Firefox's dropdowns are not. I've already checked, and the outline property is not being set elsewhere in my code. Thanks for your help! Working to set up a template that has containers with rounded corners WITH outlines. I have the round corners and sides...just can figure out how to add the top and bottom line to complete the container. If I use a border-top it extends past the rounded corners. Any help would be greatly appreciated Link to the page in progress: http://www.rustbug.com/test/journey-home-page.html Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {color:#000000;background-color:#ffffff;background-attachment:fixed;font-family: Arial, Helvetica, sans-serif;line-height:1.25em;font-size:100%;}
#wrapper {margin:0 auto;width:720px;background-color:#f6f5f3;padding-top:1em;padding-bottom:2em; overflow:hidden;}
#container1 {float:left; display:inline; width:435px; height:auto; background-color:#FFF; border-top:1px #e3e2e1 solid; margin-left:1em; margin-bottom:1em;}
#container2 {float:right; display:inline; width:235px; height:auto; background-color:#FFF; margin-right:1em;}
p.roundcont { font-size:90%; margin:0 10px 0 10px; color: #999999;}
.roundtop { background: url(images/tr.gif) no-repeat top right;}
.middle { border-left:1px #e3e2e1 solid; border-right:1px #e3e2e1 solid;}
.roundbottom { background: url(images/br.gif) no-repeat top right;}
img.corner { width: 8px; height: 8px; border: none; display: block !important;}
</style>
</head>
<body>
<div id="wrapper">
<div id="container1">
<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
<div class="middle"><p class="roundcont">Hello</p></div>
<div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
</div>
<div id="container2">
<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
<div class="middle"><p class="roundcont">aasdf s asdf sdf sfsdfsdf asdf sdf. afas sdf sfsdf. adf asdf sdf .asdfsdfsdgfga fasdf adfdaf asdf a.</p></div>
<div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
</div>
<div id="container1">
<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
<div class="middle"><p class="roundcont">Hello</p></div>
<div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
</div>
</div>
</body>
</html>
hello everyone, does anyone know how can i connect both the outline and the border-radius? it works fine beside the outline is square (btw both does not work on ie for some reason, why's that?) code is: Quote: outline: #ffc614 solid 5px; -moz-border-radius: 15px; border-radius: 15px; -webkit-border-radius: 15px; thank you. I have a test template page I have created using two columns with dropshadows and an outline. My question is, when I try to add other content within the div that creates the outline container....it does not expand the outline container, it creates a new outline container. I need to put other elements other than text so, i need to resolve/better understand this issue. the template page can be found at: http: //www rustbug.com / mmtest / template.html Hi all, I've tried both the "shorthand" and regular version of BORDER attribute, and neither works, Yet outline works fine (but I don't want to use that since IE7 doesn't support it). Anyone able to troubleshoot this? Here's part of the CSS code (the ".thumb" class at the end is what's not working) and below that is the url. CSS Code: Original - CSS Code .gallerycontainer{ position: relative; text-align:right; margin-left: 0em auto; margin-right: 0em auto; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } #thumbBox{ /*Outermost DIV for thumbnail viewer*/ position: absolute; left: 2.5em; top: -4em; width: auto; height: auto; padding: .5em; padding-bottom: 0em; background: #313131; visibility: hidden; z-index: 5; cursor: hand; cursor: pointer; } #thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */ font: bold 1em arial; line-height: 1.1em; color: white; padding: .5em 0; text-align: right; } #thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */ background-color: #CCC; } #thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/ position: absolute; visibility: hidden; border: .125em solid black; background-color: #EFEFEF; padding: .5em; z-index: 6; } .thumb { margin: .5em .5em .5em .5em; height: 8.5em; width: 8.5em; border-style: dashed; border-color:#CCC; border-width:.125em; }
.gallerycontainer{
I don't think I have the 5 requisite posts, so here's the url in question (# = .) & (| = /) http:||www#bauerbuiltmfg#com|db-series-planters#html Thanks in advance for any help! I tried everything I can think of in Opera, and no matter what I try, when I focus on a link I get selected highlight on the text. Is there some CSS way of hiding the highlight? I've also posted in the JavaScript forum. heys all, in FF, I can get rid of that dreaded link outline via a { outline: none; } but IE7 isn't obeying. Funny enough, it's buggy, sometimes the outline is there, othertimes not. Does anyone know a sure-fire way to fix this issue, hopefully not resorting to apply this.blur() to all the links? Thanks. Here's the code:
Code: <html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div { }
table { width: 100% }
.sttable { background-color: #000080 }
tr { }
td { vertical-align: top }
.sttd { font: bold 12px Arial #FFFFFF }
</style>
</head>
<body>
<table class="sttable">
<tr>
<td class="sttd">Catalog > Categories</td>
<td class="sttd">Cart Total: $ 0.00</td>
<td class="sttd">Date</td>
</tr>
</table>
</body>
</html>
Would someone please tell me why the color of the text isn't rendering white? I'm making a game that revolves around four teams. For developmental purposes, I made the team colors blue, red, green, and yellow. And now I'm at the stage where I'm designing a layout. The theme is set in the 1800's, and my first idea was to have a different color scheme for each team (in accordance with their team color,) but my layouts ended up having nothing to do with the 1800's -- just colors (I want to give a very real effect to this website.) So I tried making a universal layout with a sort of tea-stained, burnt edges, parchment look, with a black background, but I had trouble making it tile nicely (partly the burnt edges, partly the stains in the paper.) So this is where I am. I need help designing a layout! I can change the team colors to whatever, I have beginner/intermediate photoshop skills (though, I'm quite competent,) and all suggestions are warmly welcomed! hello, about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets? i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color... i hope i explained my issue properly... thanks for any thoughts or suggestions on this Hi, Im trying to validate with CSS 3, but am getting one warning, which I really want to get rid of: Code:
body {
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-size: 15px;
}
#header {
clear: both;
}
#topmenu {
width: 100%;
height: 30px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 20px;
font-weight: normal;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 1px;
clear: both;
}
#topmenu a {
width: 150px;
height: 28px;
color: #ffffff;
background-color: #990000;
text-align: center;
text-decoration: none;
border-right: 1px solid #ffffff;
padding-top: 2px;
float: left;
}
#topmenu a:hover {
width: 150px;
color: #990000;
background-color: #ffffff;
text-align: center;
text-decoration: none;
border-right: 1px solid #990000;
float: left;
}
#body {
color: #000000;
background-color: #ffffff;
margin: 10px 0px 10px 0px;
clear: both;
}
#footer {
width: 100%;
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-size: 12px;
font-weight: normal;
text-align: center;
border-top: 2px solid #990000;
padding-top: 5px;
clear: both;
}
#footer a {
color: #990000;
background-color: #ffffff;
font-weight: normal;
text-decoration: none;
}
#footer a:hover {
color: #990000;
background-color: #ffffff;
font-weight: normal;
text-decoration: underline;
}
#leftmenu {
color: #000000;
background-color: #ffffff;
width: 19.5%;
padding-right: 0.5%;
float: left;
}
#contents {
color: #000000;
background-color: #ffffff;
width: 58.5%;
padding-left: 0.5%;
padding-right: 0.5%;
float: left;
}
#rightmenu {
color: #000000;
background-color: #ffffff;
width: 19.5%;
padding-left: 0.5%;
float: right;
}
.contentbreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 10px;
clear: both;
}
.menubreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 10px;
clear: both;
}
.footerbreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 2px;
clear: both;
}
.menutoptitle {
width: 100%;
height: 26px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ffffff;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
.contenttoptitle {
width: 100%;
height: 26px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ffffff;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
.menu {
width: 100%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
float: left;
}
.menu a {
width: 98%;
height: 19px;
color: #000000;
background-color: #eeeeee;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #990000;
padding-left: 2%;
float: left;
}
.menu a:hover {
width: 98%;
height: 19px;
color: #ffffff;
background-color: #990000;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #990000;
padding-left: 2%;
float: left;
}
.menucontent {
width: 96%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
padding-bottom: 5px;
padding-left: 2%;
padding-right: 2%;
float: left;
}
.menucontent a {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: underline;
}
.menucontent a:hover {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: none;
}
.subcontentright {
color: #000000;
background-color: #ffffff;
text-align: right;
}
.content {
width: 98%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 5px;
float: left;
}
.content a {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: none;
}
.content a:hover {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: underline;
}
.input {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 13px;
}
.menuformcontainer {
color: #000000;
background-color: #ffffff;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
clear: both;
}
.menuformsubcontainer {
color: #000000;
background-color: #ffffff;
width: 100%;
clear: both;
}
.menuformlabels {
color: #000000;
background-color: #ffffff;
width: 50%;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.menuformfields {
color: #000000;
background-color: #ffffff;
width: 48%;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 2%;
float: left;
}
.menuformsubmit {
color: #000000;
background-color: #ffffff;
width: 100%;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
clear: both;
}
http://jigsaw.w3.org/css-validator/...ut+with_options Please make sure you select CSS 3 and Warnings = ALL in order to see the 32 warnings... Thanks! Yours sincerely, speedbooster! i know that IE doesnt support the :hover being added to anything but links, is this the same with :active? was just wondering whether i could have a style change when the user clicks on a form button basically if i add a border around a button in FF i can click the button however the effect of "pressing" a button is lost.. IE mainatain this! is there a solution or will i have to live with it? Hi I'm putting together help documentation for an application and I would like the structure of the document to have all headings and sub headings to be dynamically numbered, for example: 1. Main 1.1. Sub1 1.2. Sub2 2. Main 2.1 Sub1 etc I've read about the pseudo class :before, but understand that this isn't supported by Explorer, or else I could use: BODY { counter-reset: chapter; /* Create a chapter counter scope */ font-family:Arial, Helvetica, sans-serif; } H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Add 1 to chapter */ } H1 { counter-reset: section; /* Set section to 0 */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; } Could anyone help with any suggestions as to how I could do this please? Thanks Sophie Hey everyone, I am using a template, and I thought i changed all of the colors, however, i am still getting blues and i want them gone. Help me please! Sarah CSS: /* Global Styles */ body { margin:0px; } td { font:11px arial; color:#333333; } a { color: #cc0000; text-decoration:none; font-weight:bold; } a:hover { color: #990000; text-decoration:underline; } /* ID Styles */ #navigation a { font:10px arial; color: #ffffff; text-decoration:none; letter-spacing:.1em; } #navigation a:hover { color: #99CCFF; } #padding { padding:20px 5px 20px 5px; } #calendar td { border: 1px solid rgb(0,51,153); } #noborder td { border: 0px; } #weekdays th { font:11px arial; color: #ffffff; font-weight:bold; border: 0px; padding:2px; } #calheader td { font-weight:bold; } /* Class Styles */ .logo { font:18px times new roman; color: #990000; letter-spacing:.3em; font-weight:bold; line-height:22px; } .tagline { font:11px times new roman; color: #CC3300; letter-spacing:.2em; } .smallText { font:12px times new roman; color: #CC3300; line-height:18px; } .pageHeader { font:30px times new roman; color: #CC3300; letter-spacing:.1em; line-height:38px; } .bodyText { font:11px arial; color:#333333; line-height:24px; } .pageName { font:20px georgia; color: #8F0000; letter-spacing:.1em; line-height:26px; } .subHeader { font:14px times new roman; color: #990000; font-weight:bold; line-height:20px; letter-spacing:.1em; } .navText { font:10px arial; color: #333300; letter-spacing:.1em; } I am looking a sitting for Peach color like this #000000 not the word. Dose anyone know how to do this or know the sitting for it? |
|||||||