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; }
Related
I have a button that needs to be centered in it's div class ex. div="sanfrancisco-image". It's placed 17px from the bottom of the box, however it will appear center, even though I've placed justify-self:center; and align-items: center; tabs.
Here's the codepen link: https://codepen.io/holmedw/pen/KrvJEb
.btn {
align-items: center;
position: absolute;
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
border: 2px black solid;
border-radius: 1px;
background: transparent;
cursor: pointer;
bottom: 17px;
justify-self: center;
}
No need for the align-items and justify-self. not sure they do any good, so try to remove them. on the css of the button? => set the following:
margin: 0px auto 0px auto;
try that and let me know if it works.
The quickest way to get what you want is to add position: relative to the .our-story-block, .our-dna-block, .sanfrancisco-block then you add a new div to include your button, like <div class="btn"><button>See More</button></div>. Set that div to position: absolute; bottom: 17px; width: 100%; left: 0; so it would center the absolute div inside a relative element. You won't need to include those values in your .btn css class anymore so just remove them.
.btn {
position: absolute;
width: 100%;
left: 0;
bottom: 17px;
}
.btn > button{
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
border: 2px black solid;
border-radius: 1px;
background: transparent;
cursor: pointer;
}
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 have created a html code with css which displays the image 1 below (left image). What I want to accomplish is that when you hover with your mouse over image 1, I want the image 2 (Right picture) to appear (do not mind the difference in sizes).
HTML:
<body>
<div class="borderbox">
<h3 class="header-3">+</h3>
<p class="paragraph-text">visa fler bästsäljare</p>
</div>
</body>
CSS:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
position: absolute;
height: 362px; !important
width: 241px; !important
top: 0;
left: 0;
margin-right: 5%;
}
h3.header-3 {
font-size: 130px;
text-align: center;
color: #00a0df;
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
color: #00a0df;
text-transform: uppercase;
font-family: inherit; font-weight: bold;
}
How can I implement this to my CSS, when you hover with your mouse over the Image 1 I want it to switch colour (image 2). The colour code for the blue is #00a0df.
URL to my website
Add color: #00a0df; to borderbox and change your text's color to color: inherit. Then on hover you can change the background-color, text color, border color and anything else you want:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
position: absolute;
height: 362px; !important
width: 241px; !important
top: 0;
left: 0;
margin-right: 5%;
color: #00a0df; //add
}
h3.header-3 {
font-size: 130px;
text-align: center;
color: inherit; //change
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
color: inherit; //change
text-transform: uppercase;
font-family: inherit; font-weight: bold;
}
.borderbox:hover{
background-color: #00a0df;
color: #FFF;
border-color: #FFF;
}
FIDDLE
http://jsfiddle.net/mk7hrs49/3/
In order to get the white border you want when you hover over it.
Just add border color:
.borderbox:hover{
background-color: #00a0df;
color: #FFF;
border-color: white; <---
}
cheers
You can use the CSS :hover pseudo-class, which changes the style when the mouse is hovering over the element. Apply the colors you want (backround and font colors) to the hover attribute which will override the default (non-hovered) style. If you put the font and background color in the .borderbox class, then all you need is to override these in a .borderbox:hover like so:
.borderbox:hover {
background-color: #00a0df;
color: white;
}
The full example follows:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
color: #00a0df;
position: absolute;
height: 362px; !important
width: 241px; !important
top: 0;
left: 0;
margin-right: 5%;
}
.borderbox:hover {
background-color: #00a0df;
color: white;
}
h3.header-3 {
font-size: 130px;
text-align: center;
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
text-transform: uppercase;
font-family: inherit; font-weight: bold;
}
<body>
<div class="borderbox">
<h3 class="header-3">+</h3>
<p class="paragraph-text">visa fler bästsäljare</p>
</div>
</body>
You should use the :hover Pseudoclass. If this is new to you, check out the explanations on W3Schools. Your code should look like that afterwards:
.borderbox:hover {
#Here comes all your css on hover
background-color: #00a0df;
}
Hope this solves your problem. :-)
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
I've got a button posted here:
http://buttontest.raptorshop.com/
But for some reason, it isn't entirely lining up. What can cause this?
I tried changing line height, padding, etc.
Here's the CSS code I have:
a.gbutton {
background: transparent url('buttonside.png') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 82px;
margin-right: 6px;
padding-right: 46px; /* sliding doors padding */
text-decoration: none;
}
a.gbutton span {
background: transparent url('buttonmain.png') no-repeat;
display: block;
line-height: 68px;
padding: 5px 0 5px 18px;
}
I am modifying this from a tutorial I found online, and perfect CSS placement has always been a difficult item for me.
The sliding door technique works because extending a rectangle won't change its look. But extending a ellipse will, so your code won't work as you expect.
Here is the best I could get:
a.gbutton {
background: transparent url('buttonside.png') no-repeat scroll right top;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 82px;
margin-right: 10px;
padding-right: 51px;
text-decoration: none;
}
a.gbutton span {
background: transparent url('buttonmain.png') no-repeat left top;
background-size: 100% auto;
display: block;
line-height: 68px;
padding: 5px 0 5px 18px;
height: 100%;
width: 100%;
}
Update
Just use a single image and specify the CSS:
background-size: 100% auto;