I'm trying to style my link with black background, using the code below:
a#link-1: link{
background: black;
padding: 20px;
}
However; it won't show up on the browser!
Please, check it out. This is the entire code
Is that the effect you want ?
https://jsfiddle.net/ehc5skbv/2/
a#link-1 {
background: #333;
padding: 10px;
}
Related
Please note: I have already tried the solution listed here which does not serve my purposes as it still draws a box around the image
Update: I have taken a further look into this and found that one solution is to draw an SVG of the image in question and make this the button so that there is not such a large box surrounding the image. I would prefer not to do this as I have many assets but would this be the only solution?
I am trying to place a button on my website but make it so that the clickable area is exactly the image and nothing else. I have been trying to find solutions for this but perhaps I am not searching the correct terms.
At present, I am using Bootstrap to create a button for a carousel. This works fine but the issue I am having is the square border around the button itself which will cause a problem as I put more buttons on the page that are closely placed together.
I would like the clickable area to be restricted strictly to the png itself, which includes the white border seen on the image linked above.
My code at present looks as follows.
HTML:
<div class='background'></div>
<div class="map">
<img id='mainMap' src='assets/maps/map.png' alt='map'>
<!-- Modal's toggle button has data that's used to determine what content to use -->
<!-- Bridge icons -->
<button type="button" class="btn btn-primary-outline-btn bridge-btn" id='bridge1' data-toggle="modal" data-target="#exampleModal"><img class="bridge_icon" src="assets/icons/bridge1.png" alt="image"></button>
</div>
CSS:
.camera_icon, .video_icon{
width: 30px;
height: 30px;
}
.bridge_icon {
width: 150px;
height: auto;
margin: 0px;
padding: 0px;
}
#bridge1 {
top: 3%;
left: 10%;
position: inherit;
}
/* Buttons */
.btn, .btn-outline-primary, .video-btn {
background-color: transparent;
border-color: #ccc;
padding: 0px;
box-shadow: none;
}
.btn:focus,.btn:active {
outline: none !important;
box-shadow: none;
}
.bridge-btn {
border-color: hotpink;
}
.btn-outline-primary:hover, .video-btn:hover{
background-color: #e4dbef;
border-color: #ccc;
}
.btn-outline-primary:focus, .video-btn:focus{
background-color: #e4dbef;
outline: none;
border-color: #ccc;
}
.btn:focus, .btn:active:focus, .btn.active:focus { outline: none; ! important; outline-style: none; }
Any help you could provide would be very useful.
Thank you.
If I understand correctly the button has a border you don't want? If that is the case try changing btn-primary-outline-btn to btn-transparent-outline-btn
Can someone tell me why is there something like white glow/shadow next to my div (on the right side)? At first, I thought that border is smaller than div, but it's not that. This only happens when I use dark color as background.
Maybe you won't see, but take a close look on image below.
:
Here is a close up of the line:
Here is the code:
#container {
margin: 20px auto;
padding: 10px;
border-top: 5px solid #000000;
background-color: #990000;
width: 600px;
}
That is simply the anti-alias effect, caused by the image tool, or monitor, you use.
When have high contrast color next to each other, this often happens.
Turn of anti-alias when doing the screen dump/paste into the image tool and it will be gone
Here is the code you put in and when I run it on here I definitely don't see a white line. Click run snippet and then full page. Then zoom in as much as possible. I think it is gone meaning that the line is probably caused by your browser or something else other than the code.
I might try using a css normalizer. Good Luck!
#font-face {
font-family: Myriad Pro;
src: url('fonts/MyriadPro-Regular.otf');
}
body {
background-color: #DEDEDE;
font-family: Myriad Pro;
}
a {
text-decoration: none;
color: #1738E0;
}
textarea:focus, input:focus, button:focus {
outline: none;
}
#container {
margin: 20px auto;
padding: 10px;
border-top: 5px solid #000000;
background-color: #990000;
width: 600px;
}
<div id="container">
<div id="yay">
Ugly thing...
</div>
</div>
I have an input box, which is quite small when it's loaded and I want it to resize to become bigger when the user clicks on it (with CSS).
The CSS code I have is:
input.tagInputField {
box-sizing: border-box;
border: none;
background-color: #fff;
width: 2em;
color: #000;
font-size: 14px;
}
input.tagInputField:focus {
width: 50px;
}
But it's not working... no response... Any ideas?
Thanks!
UPDATE
the html code (sorry for the pic, it was the fastest to get it this way)
It worked. Some other styles were overriding this one, so as per #putvande suggestion I checked that and added !important
input.tagInputField:focus {
width: 50px !important;
}
Im trying to implement some part of a page that needs some custom styled table (I know tables are a big no no for this but that is wat im doing so please try to only look at the question.)
The problem is that when I include Bootstrap the line gets destroyed. The easisest way to explain is by looking at this jsfiddle and then remove the bootstrap dependency.
The problem I think is in the following CSS:
td span {
background-color: #fff;
color: #000;
}
hr {
border: none;
color: blue;
background-color: blue;
height: 1px;
position: absolute;
display: block;
width: 100%;
z-index: -1;
}
This implementation is borrowing ideas from an earlier question.
Bootstrap applies a number of styles to elements directly- in your layout the (main) conflicting rule is line 159 of bootstrap-combined.min.css for hr elements:
hr {
margin:20px 0;
border:0;
border-top:1px solid #eeeeee;
border-bottom:1px solid #ffffff;
}
To rectify, add:
Demo Fiddle
hr{
margin:10px 0;
}
To your CSS. Note you may also want to change styling for a and table elements.
To see what styling Bootstrap applies to each element, use the DOM inspector in you browsers developer tools to step through into the element in questions and its CSS.
I understand the basics of CSS.In fragments.
I try to understand how to combine all of what I want together.
I want to create two types of buttons, "view" and "save".
I have 4 images, two for each, where one represents the button, and one when mouse hovers it.
So I want an alternative background when hover.
I want also a tooltip, something "cheap" like "View file", "Save file", that better explains the content of the image if it wasn't clear enough.
I understand that I need to use the hover attribute, background attribute, and somehow to create a tooltip.
Those two buttons are actually images with a link
How do I combine it all together?
you could do something like this:
<div title="View File" class="view-button">
View File
</div>
CSS:
.view-button {
background-image: url("first-view-image");
}
.view-button:hover {
background-image: url("second-view-image");
}
And the same for the save button. The title tag shows a small tooltip. if you want bigger/fancier tooltips, you have to use some javaScript framework.
check this out
HTML
<button>Hello</button>
CSS
button {
background: url(your-image.png) no-repeat;
}
button:hover {
background: url(your-image-hovered.png) no-repeat;
}
button:focus {
background: url(your-image-focused.png) no-repeat;
}
Hi i've created a fiddle for you. When you hover the image/button changes and also you get a small tooltip that says "Click here to Save". Is that all you need? Tell me if this helped you or you have any questions.
EXAMPLE
HTML
CSS
.save {
margin-bottom: 10px;
width: 47px;
height:20px;
display:block;
background:transparent url('http://www.mtsworld.com/images/button_submit.gif') center top no-repeat;
}
.save:hover {
background-image: url('http://www.ecdoe.gov.za/ecdoe/graphics/buttons/submit.png');
}
This is my example, change background value to your image, to use tooltip i used jqueryui
Example
html
<a href='#' class='button savebutton' title='Save form'>Save</a>
<a href='#' class='button cancelbutton' title='Cancel action'>Cancel</a>
css
.button{
background : #999;
padding : 5px 10px;
border-radius : 5px;
color:#fff;
text-decoration : none;
}
.savebutton{
background : blue;
}
.cancelbutton{
background : orange;
}
.savebutton:hover{
background : cyan;
}
.cancelbutton:hover{
background : yellow;
}
.ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
border-width: 2px;
}
JS
$('.button').tooltip();