How to remove the border around the square?
How it looks:
My HTML:
<input id="black" type="image" src="html5-canvas-drawing-app/images/color-swatch-brown.png" onClick="changeColorBlack()">
My CSS:
#black{
border:none;
outline:none;
background:none;
padding:0;
}
To disappear with it, set it's thickness to 0 instead:
border: 0;
border: 0;
put in the My css file....
For whatever reasons, stylesheets text/css are not very universally-predictable. Still, this should clear you all around:
img#black {
border: 0px solid #00000;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
Toss that in your style.css or whatever. Not all of it may be necessary at the moment, but it will protect you from weird inheritance problems that may arise down the road.
Related
I'm using SaaS for building my own webshop. The problem is that i dont know any code. I wish to make my menu bar look more stylish. The SaaS platform offers CSS editing but i can't change the html.
The current menu bar has this css;
#menu {
padding: 5px 0 5px 0;
background: #005775;
margin: 0 0 8px 0;
}
How can I make this better looking. I tried changing the opacity, but every time i add the word opacity the code breaks and the memu disappears.
My current Design looks like this;
http://imgur.com/a/ptSuA
I would really like to make the Menu bar a bit less rough and make it look more friendly.
Sorry for my horrible grammar and lack of knowledge.
try using
background-color:rgba() instead of opacity
this adds transparency to the menu bar.
example
background-color:rgba(255,0,0,0.5);
the last value adds transparency.
When you added opacity to #menu, it affect on All his Childrens and menu disappears.you must use of background-color:rgba() or background-color:hsla()
#005775 = rgba(0, 87, 117, 1.0)
#005775 = hsla(195, 100%, 23%, 1.0)
So :
#menu {
width: 200px;
height: 200px;
padding: 5px 0 5px 0;
margin: 0 0 8px 0;
background:rgba(0, 87, 117, 0.3);/*/ I use 0.3 /*/
}
<div id="menu">I Am Menu</div>
Try this. As said by others, this will reduce the opacity of the text in the menu too.
#menu {
padding: 5px 0 5px 0;
background: #005775;
margin: 0 0 8px 0;
opacity: 0.5; // Change this value between 0(transparent) -> 1(100% visible);
}
Is there a way to influence only separate box-shadow properties?
For instance I have these classes to set button size and button color
.btn {
background: gray;
font-size: 15px;
box-shadow: 0 2px 0 0 dark-gray;
}
.btn--primary {
background: blue;
box-shadow: 0 2px 0 0 dark-blue;
}
.btn--secondary {
background: red;
box-shadow: 0 2px 0 0 dark-red;
}
.btn--large {
font-size: 20px;
}
But now, I also want a larger box shadow on .btn--large
Problem is, I have multiple colored buttons, so I would need some sort of "box-shadow-y-size property"
How do you work around this problem? The only way I can think of right now is to do something like this...
.btn--large.btn--primary {
box-shadow: 0 4px 0 0 dark-blue;
}
.btn--large.btn--secondary {
box-shadow: 0 4px 0 0 dark-red;
}
There is sadly only one way to define a box-shadow, but in your case there might be a work-around. If you don't specify a colour for your box-shadow it will default to the colour of the color attribute. Perhaps this is something you can make use of.
For example, if you want to be able to have a differently coloured box-shadow while still retaining the original text color, one way you can achieve this by applying the box-shadow to a :before pseudo element instead of the element itself.
JSFiddle with pseudo element solution
I have added schema markup to my website, and I have placed it at the bottom on my page in the footer. On my CSS it says
#copyright {
float:left;
margin:13px 10px 0 23;
width:380px
}
But when I browse it through Firebug it doesn't show the margin, only the float and width. It was showing it before, and all I changed was the first and last numbers of the margin trying to get the schema markup exactly where I wanted it.
One thing I see is that the 23 in your margin list does have 'px' on it. Could that be the issue? Try updating it to:
margin:13px 10px 0 23px;
You have syntax errors:
This:
#copyright {
float:left;
margin:13px 10px 0 23;
width:380px
}
Should Be:
#copyright {
float:left;
margin:13px 10px 0 23px;
width:380px;
}
Notice the missing semicolon after width. This could cause the previous styles from being read. Also the left margin won't be read because you didn't define a unit.
This should work:
#copyright {
float:left;
margin:13px 10px 0 23px;
width:380px;
}
I want to add two different padding for Chrome and Firefox, and want to use it in same style sheets. (cant use separate sheets) These are the two styles I want.
for Firefox
padding: 0 0 0 14px !important;
for Chrome
padding: 0 0 0 0px !important;
My knowledge in style sheets is minimum, don't even know this is possible or not. Any sort of help is welcome, Thanks.
Update
code for my button is
<button class="buttonClass" data-dojo-type="dijit.form.Button" onclick="buttonToggle(this);" id="butid">
<input type="image" class="ns" onclick="buttonToggle(this);" value="" />
i haven't tried it. But it should work like this.
here's the link to browser detection via jQuery: http://api.jquery.com/jQuery.browser/
$(function() {
if ($.browser.mozilla) {
$('body').addClass("firefox");
} else if ($.browser.chrome) {
$('body').addClass("chrome");
}
});
I solved It by adding this to deal with Firefox.
#-moz-document url-prefix(){
#butFullScreen .ns, #butFullScreen .fs {
padding: 0 0 0 14px;
height:0px;
width:0px;
}
while using this to other browsers
width:14px;
height:14px;
color: transparent;
Thanks a lot for all the help.
I'm currently in the process of styling a website and have hit a bit of a rut.
I'm trying to target and style this:
<asp:Button ID="cmdUpdate" runat="server" Text="Update Details" CssClass="update_btn" />
Using this CSS:
div#account .update_btn {
width:108px;
height:27px;
background:url("/furniture/images/buttons/update.jpg") no-repeat 0 0;
clear:both;
float:left;
}
However when I inspect the button in firebug it doesn't appear.
It's currently being styled by the code below but the one above doesn't even appear.
div#account input {
border: 1px solid #ccc;
width:150px;
padding:5px 0 5px 10px;
margin: 0 0 10px 0;
float:right;
}
I don't know ASP so I can't make alterations and I can't use input.button[type="submit"] as it isn't supported by IE7.
Any help or guidance would be much appreciated.
Put a comma in your style it should work fine.
div#account, .update_btn {
try this
div#account input.update_btn {
width:108px;
height:27px;
background:url("/furniture/images/buttons/update.jpg") no-repeat 0 0;
clear:both;
float:left;
}