I have some code to make an arrow and im trying to add a title attribute to it. Here is the arrow code:
#arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid white;
}
#arrow-right:hover {
border-left: 10px solid gray;
}
<div id="arrow-right" title="text here"></div>
Before I added the 'title' attribute, it worked fine, changing to color to grey on hover, but after I added the 'title' attribute, the css color changing stopped working but the title started working. Is there any way to have both of these work at the same time?
replace
<div id="arrow-right" ; title="text here"></div>
with
<div id="arrow-right" title="text here"></div>
I found the problem. I had some js declaring the style in the element like:
<div id="arrow-right" title="text here" style="border-right: 10px solid white;"></div>
Along with the style declared in the stylesheet and that broke it. I just had to remove the style declared in thr div and that fixed it
Related
Hello guys I'm doing a CSS/HTML course at the moment and I have to assign a border to images on my website.
1. I gave the images a class:
<a href="https://de.wikipedia.org/wiki/Elefanten"
target="_blank"
class="images>
<img src="elefant.jpg" alt="Elefant">
In my CSS file I used following code to assign the border:
.images
{
border-left: 10px solid red;
border-top: 10px solid red;
border-bottom: 10px solid red;
border-right: 10px solid red;
}
Should be very easy code but the in Chrome it doesnt really seem to work correctly. Here a screenshot :
https://snipboard.io/VAipY8.jpg
This is probably a very beginner thing but I hope someone can help me :)
If you are trying to make the image a clickable link you should wrap it in between the <a> tag
<img src = " ">
And to add border to the image you should give class to the <img> tag not to the <a> tag.
Currently you are applying border to the link inside the <a> tag.
You're missing the closing / tag in the img tag. and the closing " in the class attribute. and the closing tag for the anchor tag. Write your code like this:
<a href="https://de.wikipedia.org/wiki/Elefanten"
target="_blank"
class="images" >
<img src="elefant.jpg" alt="Elefant" class="elephantImg" />
</a>
Change the css as follows:
img {
border-left: 10px solid red;
border-top: 10px solid red;
border-bottom: 10px solid red;
border-right: 10px solid red;
}
You can use this if you decide not to use the class attribute on the elephant image otherwise, if you decide to use the elephantImg class attribute use this css:
.elephantImg{
border-left: 10px solid red;
border-top: 10px solid red;
border-bottom: 10px solid red;
border-right: 10px solid red;
}
When a user clicks on an option to select it, a data-selected attribute is added to the .item. How do i style this state of the .item DIV and give it a border color.
I've tried this but doesnt seem to work
div[data-selected=".item"]{
border-color: #333;
}
Add style like this
div.item[data-selected] {
border: 2px solid #333;
}
div.item[data-selected] {
border: 2px solid #333;
}
<div class="item" data-selected="">
ABC
</div>
More Specifically if you want to select with the attribute value, you can do like the snippet below
This type of selection is called Attribute Selector
div.item[data-selected="value"] {
border: 1px solid #000;
}
<div class="item" data-selected="value">
Having Border
</div>
<div class="item">
Not Having Border
</div>
You can style it with following selector
div.item[data-selected] {
border: 1px solid rgba(0,0,0, 0.5);
}
Here is a fiddle for this
https://jsfiddle.net/3hp2v70r/
i want to add border to the bootstrap form box.i had added border style properties but its not working . suggest please
thia is the form box class:
<div class="form-box">
<div class="form-top">
<div class="form-top-left">
And this is the css :
.form-box {
margin-top: 0px;
border-radius: 25px;
border-bottom-style: solid;
border-color: #50e54b;
}
Because of other classes, use the "!important"
border: solid 2px #50e54b!important;
You can add border to your box by using the border CSS property [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
Here's an example usage:
border: 1px solid #FFFFFF;
The code above will add a solid border of 1px in thickness and white in colour.
Click the link above to see more about the border property.
From what I can tell, the code works fine. But if you want you can add an 8px padding so the content has room for placement instead of being crammed in there with the border. By the way, a 2px or 4px border radius looks better for the border, but it's up to you.
.form-box {
padding: 8px; /*makes it look neat*/
border-radius: 4px; /*or 2px*/
border: 1px solid red;
}
I have a div that wraps around my <footer> tag. In the div is an <hr>, which needs to be in the div to have the positioning properties applied. However, it also carries over the coloring of the links in my footer. I don't want the <hr> to be the same color as the links. Is there any way to "escape" this or change the property.
I tried <hr style="color: black;"> but that didn't change anything. If you have any input on how to change the properties despite the set CSS in the div, I would greatly appreciate it.
JS Fiddle: http://jsfiddle.net/o6vmz7t5/1/
HTML
<div id="footer_style">
<hr>
<footer>
Contact
Privacy Policy
Create Account
</footer>
</div>
CSS
#footer_style {
margin: 0 auto;
position: fixed;
bottom:0;
width: 100%;
padding: 20px;
}
#footer_style a {
color: #f2f0e1;
}
#footer_style a:hover {
color: black;
}
hr tags simply have a border-top applied on them
override the hr as below
#footer_style hr {
border-top: 1px solid black;
}
#footer_style hr {
background-color: black;
height:1px;
}
JSFiddle
Whoa, it had me struggling for a minute. Apparently since the hr has no height and you cant see its internal "fill", affecting the color does nothing.
What you actually see is the border, so using border-color did it for me.
Please try below code I have try this code. Using this code solve your problem.
border-color: red;
Instead Using the color: black;
Try using in this way
border: 1px solid #000;
border-width: 1px 0px 0px 0px;
Try it
I have below code in html page:
<img id="image_java" alt="image_not" src="images/java-icon.png">
in css page the below code:
#image_java: focus {
outline: 2px solid blue;
}
I have also tried:
img:focus{
outline: 2px solid blue;
}
but non of them seem to work, they are suppose to display a blue margin around the image when focus.
Does any one know how to do that? thank you!!!
Actually you CAN focus an <img> - with the help of tabindex:
img:focus {
outline: 2px solid blue;
}
<img src="http://www.w3schools.com/images/w3logotest2.png" tabindex="0">
You can't "focus" an image unless you have an interactive element or navigate to it using tab. Try adding an interactive element on a wrapper div like so:
Html
<a class="imageAnchor" href="#">
<img id="image_java" alt="image_not" src="http://www.w3schools.com/images/w3logotest2.png" />
</a>
CSS
.imageAnchor:focus img{
border: 2px solid blue;
}
http://jsfiddle.net/4x7wg7sb/1/
If its an anchor tag you can also use
A:focus img{border: 2px solid blue;}
Try using the border property instead of the outline property. It should look like:
img:hover {
border: 2px solid blue;
}
Edit: Use hover instead of focus