Yes, I know this has been asked and answered but I can't get this working no matter what I try.
I need to remove the text decoration on a link that I have applied to a div.
The code looks like this:
#about-con a {
text-decoration: none !important;
}
div #about-con a:link {
text-decoration: none;
}
#about {
position: relative;
width: 100px;
height: 1.5em;
font-size: 1.125em;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border: 1.5px;
border-style: solid;
border-color: black;
}
<div id="about-con">
<a href="http://ptunitedbrochure.bkm-tech.com/about.php">
<div class="inline-nav" id="about">
<div style="margin-top: 2px; text-align: center">
About Us
</div>
</div>
</a>
</div>
Instead of this:
div #about-con a:link {
text-decoration: none;
}
Place this:
#about-con a:hover{
text-decoration: none;
color: #337ab7;
}
This will make your link text stay the same on hover. Now, if you are talking about the border around the "About Us", you will have to remove border properties from your #about div.
Related
I'm trying to set a :hover for a link inside a class. At first I tried
.link{
color: #e62739;
}
I saw past discusssion and try the solution proposed
.opener a.link:hover {
color: #e62739;
}
but it didn't work. Im'not sure to know where is my mistake.
.link{text-decoration:none; color:white;}
.opener a.link:hover {
color: #e62739;
}
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
div {font-family:'Varela Round';
}
.opener {
background-color: #07183d;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border: 1px white solid;
}
.benefits {
background-color: #07183d;
border: none;
color: white;
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
width:300px;
}
a {
text-decoration: none;
}
#upbutton {
border: 1px dotted white;
}
<div class="row">
<div class="opener col" style="padding-left: 10px;padding-right: 10px;"><a class="link" href="www.google.com" name="1" onclick=" show('1');" style="color: white;font-size: 14px;">SOCIETES: 400</a>
<div class="benefits" id="b1" style="display: none; color: white; font-size: 14px;">Part SBF 120 : 120<br />
Part Filiales +100M€: 280
<div id="upbutton"><a onclick=" hide('1');">fermer</a></div>
</div>
</div>
The issue is the inline styling you've got on the link: color: white;.
This is taking priority over any styling you're adding in your CSS file. Removing that from the inline styling allows the hover color to work.
If you need the white color by default add it to the stylesheet rather than inline. For example:
.link {
color: white;
}
I am trying to code a button that changes color when you hover over it/click on it. However, I ran into an issue. There is a space between the text and the edges of the div section, and if you hover over the button, it turns black but the text does not turn white. I put color:white;. I am not sure as to why this does not fix the problem.
Here is my code:
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
just change your a:hover to .button:hover a
everything will look great. :>
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
.button:hover a{
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
Ok so heres the deal. You made it too complex. If you had problem with the spaces, its because < a > tag is diplayed inline by default and it makes gap between it's container sometimes.
Here's your code, cleaned and working : https://jsfiddle.net/m6dphvm1/
<a class="button" href="https://www.google.com"> Click Me! </a>
a.button {
border: 2px black solid;
border-radius: 4px;
padding: 5px;
color: black;
text-decoration: none;
display: inline-block;
}
a.button:hover {
background-color: black;
color: white;
}
The problem with your CSS is that your anchor(link) color is black, when you hover on the button you are changing the background of button to black, i.e both anchor color and background are black. due to that text is not being visible.
Change either background-color of button or anchor color to a differnt color and that should work. For example I'm changing the color of anchor to blue.
.button:hover {
background-color: black;
color: white;
}
a {
color: blue;
text-decoration: none;
}
a is an inline element, meaning it's designed to be nested in plain text (or what otherwise could be). It's only occupying the immediate space around the text.
However, a tags are also totally allowed to wrap around elements according to the HTML5 spec (not that anyone would stop you otherwise, it's just convention). So if you want the a tag to occupy the entire space just wrap it around the element.
Better yet, only use the a tag. The rest is basically redundant:
<a class="button" href="https://www.google.com">
Click Me!
</a>
.button {
width: 66px;
height: 20px;
border-radius: 4px;
padding: 5px;
color: black;
border: 2px black solid;
}
.button:hover {
background-color: black;
color: white;
}
https://jsfiddle.net/hyp4a9ya/
In a website I'm developing, I am making a menu that appears when one hovers over a navigation menu item. However, only half of the hover menu appears.
HTML:
<div class= "navn">
<ul>
<li>
<a class="btn" href="about_contact.html">
About Us
<div class="tooltip">
Contact Info, and <b>stuff</b> <!--the txt inside the hover thing-->
</div>
</a>
</li>
</ul>
</div>
CSS:
.btn {
/* irrelevant: some styling to make the anchor tags look nicer */
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
text-align: center;
white-space: nowrap;
margin: auto;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
text-decoration: none;
font-family: 'Lucida Sans', 'Arial', 'sans-serif';
}
.btn:hover .tooltip {
display: block;
}
.tooltip {
background-color: white;
color: black;
position: absolute;
display: none;
border: 1px solid black;
}
What I see:
Why is this happening? What can I do to stop this?
Sorry for no JSFiddle
Edit: I know I can use a standard tooltip on the <a> tag, but I want to have formatted text in the tooltip.
Maybe Your <div class="navn"> has a not enough height. Try to extend that and see what happened. Or set z-index on tooltip.
Set ul{ height: 60px; //for example}. I think it help you.
I have posted some of this code before, trying to get the sidebar links in the right places and look a special way, I have decided to go in a different direction with that. What I need now is know what I am supposed to do to get the div that I have labeled "content" next to the sidebar instead of below it. I've tried everything. The sidebar and the content div are in the same div together and I've tried displaying in inline, inline-block. Nothing works. I just want them next to each other and level. Can you help me out again? Thanks so much!
Code displayed here: http://jsfiddle.net/eNUpJ/11/
HTML
</div>
<div id="wholething">
<div id="sidebar">
<h3>Navigation Links</h3>
<div id="sidelinks">
<div id="buttons">Home
</div>
<div id="buttons">Biography
</div>
<div id="buttons">News
</div>
<div id="buttons">Music
</div>
<div id="buttons">Contact
</div>
</div>
</div>
<div id="content">
<p>News stuff and things</p>
</div>
</div>
</body>
CSS
#sidebar {
background: #464646;
width: 250px;
height: 500px;
margin-left: 50px;
border-radius: 15px;
position: relative;
}
h3 {
font-family:'Coda', cursive;
color: white;
background: #6B6B6B;
font-size: 24px;
text-align: center;
padding: 15px 0 8px 0;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#sidelinks {
font-family:'Armata', sans-serif;
width: 250;
font-size: 25px;
text-decoration: none;
color: white;
background-color: #4D4D4D;
padding: 10px;
line-height: 40px;
}
#buttons a {
text-decoration: none;
color: white;
}
#content {
position: relative;
width: 750px;
border-radius: 15px;
background: #464646;
}
#wholething {
display: inline;
}
Give both #content and #sidebar float: left. You should also remove display:inline from #wholething. Also, you should know that if you want to add anything below the #content and #sidebar - for instance, a footer, with a copyright statement or such - you'll need to give it clear:both, which will force it to be below the two floated divs.
I am trying to create a tab with the internal text and image as a link. The problem I am facing is the anchor dimensions and/or positioning seem to be different than the image. As you can see in the jsfiddle link, there is some spacing between the bottom of the image and the bottom of my div and I can't figure out why that is there.
JSFiddle link
If you can't access that link, HTML code:
<div id="SapDataBtn">
<a href="#">
<img runat="server" src="http://i.cubeupload.com/Tm2tPF.png" />
</a>
<a href="#" id="SapBtnText">
Data
</a>
</div>
CSS:
#SapDataBtn {
background-color: #c7ddf2;
text-align: center;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding-left: 15px;
padding-right: 15px;
width: 90px;
}
#SapDataBtn a:link,
#SapDataBtn a:visited,
#SapDataBtn a:hover,
#SapDataBtn a:active {
font-size: 15px;
font-weight: bold;
color: #19456e;
text-decoration: none;
}
#SapDataBtn img {
border-style: none;
}
Add vertical-align:bottom; in your #SapDataBtn img, this should do the trick :)
Try like below... it will help you...
#SapDataBtn img {
border-style: none;
vertical-align: middle;
}
Fiddle : http://jsfiddle.net/XLeGd/1/
Maybe this is what you looking for:
#SapBtnText {
vertical-align: super;
}