I'm trying to create a button and here is the demo so far.
Right now I can't figure out how I can position the sprite image so that only the black icon is visible.
Does anyone know how I can fix this?
This is what I want to achieve with the button:
No hover:
Hover:
Here is the code I have:
HTML:
<a class="top-language" href="#" alt="Choose your language">Language</a>
CSS:
.top-language {
border: 1px solid #ddd;
padding: 5px;
text-decoration: none;
color: #000;
position: relative;
font-weight: bold;
font-size: 13px;
padding-right: 10px;
padding-left: 35px;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 0;
}
.top-language:hover {
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 -22;
}
This will work. Here is a jsfiddle
.top-language {
border: 1px solid #ddd;
width: 100px;
color: #202020;
padding-left: 10px;
padding-right: 10px;
display: block;
font-weight: bold;
font-size: 13px;
width: 80px;
margin: 0;
line-height: 22px;
text-align: right;
text-decoration: none;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat top left ;
}
.top-language:hover {
background-position: bottom left;
color: #d13030;
}
You can either:
a. reduce the height of the button;
b. increase the vertical gap between the two sprites in the image itself;
c. background: url(...) no-repeat 0 2px; adjust the value to push out the red icon
.top-language {
display: block;
width: 22px;
height: 22px;
font-size: 13px;
background: url('http://imageshack.com/a/img853/7081/1u5z.png') bottom;
text-indent: -99999px;
}
.top-language:hover {
background-position: 0 0;
}
You can provide image display position as follows:
display:inline-block
Related
I have attached an image showing my dropdown. The issue is that you can still see the text behind the dropdown. I want it to be deep blue so the text behind it can be hidden. How can I change this with CSS so that the background won't let me see the text behind it ?
As you can see on the image, ns can be seen through that dropdown. And last 12 months is kind of overlapped.
here is the CSS code of the tabs
.menu_button {
width: 19%;
height: 30px;
background: #1A3F73;
float: left;
margin-right: 5px;
margin-bottom: 10px;
text-align: center;
border: 1px solid black;
border-radius: 5px;
color: #f4f442;
font-weight: bold;
font-size: 13px;
}
.menu_button ul {
margin-top: 10px;
background: #1A3F73;
list-style-type: none;
width: 100%;
display: none;
margin-left: 0px;
background: rgba(128,128,128,0.7);
}
.menu_button li {
height: 30px;
background: #1A3F73;
margin: 0px;
width: 100%;
opacity: 1;
}
HTML
<a style='color:#f4f442;' href ='course/view.php?id=11'><div class ='menu_button'><span class='middle daily'>Daily Magic Spells</span><br /><div class='dd'><ul><li class='recent'><a style='color:#f4f442' href='recent.php'>Most recent leaders</a></li><li class='threem'><a style='color:#f4f442' href='three-month.php'>last 3 months</a></li><li class='sixm'><a style='color:#f4f442' href='six-month.php'>last 6 months</a></li><li class='twelvem'><a style='color:#f4f442' href='year.php'>last 12 months</a></li></ul></div></div></a>
You need to remove the opacity from your rgba background color
.test{
height: 100px;
width: 100px;
background-color: rgba(26,63,115, .5)
}
If you change the
background-color: rgba(26,63,115, .5)
to
background-color: rgba(26,63,115, 1)
It will remove the Opacity making the color solid
With your code change
.menu_button ul {
margin-top: 10px;
background: #1A3F73;
list-style-type: none;
width: 100%;
display: none;
margin-left: 0px;
background: rgba(128,128,128,0.7);
}
to
.menu_button ul {
margin-top: 10px;
background: #1A3F73;
list-style-type: none;
width: 100%;
display: none;
margin-left: 0px;
background: rgba(128,128,128,1);
}
1)I want to change "submit" button border in circle shape as below image as here
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius: 0;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
Add border-radius to round shape.
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius:8px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
Just add border-radius as required
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius: 5px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
<button class="submit1">
Upload Picture
</button>
Try this one
You just want to add border-radius: 50px;
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius: 50px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
<button class="submit1">Submit</button>
you need to put a container div to your button,
<div style="border:5px solid gray;background-color:gray;max-width: 140px;">
<input type="button" class="submit1" value="submit" />
</div>
css
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius: 10px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
Use like this, and use correct image, i just put sample image from online
<!DOCTYPE html>
<html>
<style>
.submit1 {
background-color: #ff7704;
border: medium none;
border-radius: 10px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 15px;
padding-right:70px;
min-width: 140px;
background-image:url('http://troncell.com/images/hdsp/ht-icon-1.png');
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
</style>
<body>
<button class="submit1">Upload Picture</button>
</body>
</html>
So I am new to css,and have been trying to develop a basic website as a college project,but I am having problems aligning the background image for a div with class name mainhead,it leaves a whitespace at left of the screen.
Whatever width I set it to,there is a blank white space on the left.
I dont know what to do,I havent set any padding or margins and also specified left: 0px,but no joy.
The class I am having problem with is the mainhead class
Here is the code,please help!
.loginbox
{
position: fixed;
top: 0px;
margin: 0px;
left: 0px;
font-weight: bold;
background-color: #2C2C2C;
text-align: right;
width: 1370px;
height: 40px;
}
.loginbut
{
background-color: #2C2C2C;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
font-size: 100%;
color: #c9c9c9;
text-align: right;
margin-right: 50px;
margin-top: 5px;
border-color: #2C2C2C;
border-radius: 8px;
top: 10px;
text-decoration: none;
outline: none !important;
}
.loginbut:hover
{
background-color: #000000;
}
.mainhead
{
background-image: url("grey.jpg");
background-repeat: none;
border: 1px solid black;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
top: 40px;
width: 1360px;
height: 170px;
color: #c9c9c9;
text-align: center;
}
.mainhead h1
{
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
font-size: 300%;
}
Use background-position: center center; and background-size: cover; and remove width from mainhead. Hope it should work
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
Try using this reset code by Eric Meyer enter link description here and also set the .mainhead div to 100%.
I'm using dreamweaver to code my website. I've got a div with text inside an anchor element in order to get the whole div clickable, however when displayed in a browser, there's a weird Purple/Red line underneath the Text.
I have text-decoration: none; in the code. Any help would be appreciated!
Website in Browser: http://test.crows-perch.com/
HTML of Text in question:
<div id="Guides"><div id="GuidesT">GUIDES</div></div>
CSS of all related elements:
#Guides {
z-index: 4;
position: relative;
margin: 0 auto;
top: -135px;
right: 89px;
width: 133px;
height: 65px;
background: url(../images/button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Guides:hover {
width: 133px;
background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
background-size: cover;
}
#GuidesT {
text-decoration: none;
font-family: "Cinzel Regular";
font-size: 18px;
letter-spacing: 1px;
color: #D2C300;
line-height: 65px;
vertical-align: middle;
}
The text-decoration is typically applied to the link, not elements inside it. Try this instead:
a.Guides { text-decoration: none; }
So, it's pretty easy to set a hover over effect for an element. But what I want is when the user hovers over a button that has text in it, to make the button turn from black to white and the text from white black at the same time. Instead of two separate elements. How should I do this?
Thanks!
#signUpBox {
width: 150px;
height: 47px;
border-style: solid;
border-width: 1px;
margin: auto;
margin-top: 25px;
border-radius: 2px;
}
#signUpBox:hover {
background-color: #ffffff;
}
h3 {
text-align: center;
margin-top: -35px;
letter-spacing: 1px;
font-size: 17px;
}
I'm not sure how you have the code set up but this would work on a div with an onclick function attached as a button:
#signUpBox {
width: 150px;
height: 47px;
border: solid 1px #000;
margin: auto;
margin-top: 25px;
border-radius: 2px;
color:#000;
background:#fff;
}
#signUpBox:hover {
background: #000;
color:#fff;
}
HTML:
<div id="signUpBox">This is a test</div>
DEMO
#signUpBox:hover {
background-color: #ffffff;
color:#000000;
}
you can do
#signUpBox:hover h3 {
color: #000;
}
JSFIDDLE
change text color using color property on hover.
#signUpBox:hover {
background-color: black;
color: white;
}
Here is a demo.
#signUpBox {
width: 150px;
height: 47px;
border-style: solid;
border-width: 1px;
margin: auto;
margin-top: 25px;
border-radius: 2px;
background: #000000;
color: #FFFFFF;
}
#signUpBox:hover {
background: #ffffff;
color: #000000;
cursor: pointer;
}
Fiddle