I want to make the padding Opaque, but opacity isn't working.
body {
background-image:url(http://i.imgur.com/apKZRmj.png);
font-family:Helvetica;
color:lightgrey;
font-size: 16px;
align:center;
padding: 20px 0;
}
Why won't this work?
according to W3 schools
The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
so basically it has no color property to make it an opaque or adding some opacity, I think what you need is 'border'
ex.
border: 20px solid #000;
JSfiddle: http://jsfiddle.net/bJ2CF/2/
use background color , The padding clears an area around the content
Related
I have a bootstrap button with dimensions of 46 x 96px and border radius of 22px, when I hover this button I want to set the background color up to 40 x 90px. (I do not want to fill the entire button)
I know this can be done using a box-shadow but I have different pages with different page colors where this button is used, so I do not want to change the box-shadow color page by page to match page's background color.
Any easy way to do this?
You can leverage this with the backgroud-clip property.
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
MDN
Make the size of your button 40px x 90px and add 3px of padding.
Then on hover, set background-clip: content-box and the background color will be restricted to just the content and not the padding.
Exaggerated example below:
body {
background: lightgreen;
}
.button {
height: 30px;
width: 80px;
border-radius: 22px;
background: blue;
display: flex;
justify-content: center;
align-items: center;
margin: 2em;
padding: 8px;
border: 1px solid red;
color: white;
}
.button:hover {
background-clip: content-box;
}
<div class="button">Button</div>
As you can see from the border the button size does not change but rather the background just does not extend to the border from the content.
On hover, try adding a transparent border matching the button's background of size 6px, and change the background-color as needed. This will give the intended effect, but will also visually reduce the size of the button. From your question it was not clear whether that was an acceptable side-effect.
Check out this link to implement fully transparent borders.
I am new to HTML programming. Is it possible to make a border to the margin instead of the padding? I need this just for design purposes only.
Is it possible to make a border to the margin instead of the padding?
Yes. The closest way I can think of to achieve this effect is using the CSS background-clip property:
background-clip: padding-box;
This clips any backgrounds in the element not to be rendered in the border region, thus treating it like a margin rather than padding.
Below is an example of the difference:
div {
border: 5px dashed #000; /* to see through border */
background-color: #0FF; /* to show extent of background */
padding: 5px;
margin: 10px;
}
.adjusted {
background-clip: padding-box; /* corrects extent of background */
}
<div>Default Border</div>
<div class="adjusted">Corrected Border</div>
In the "corrected" div, the border becomes part of the margin visually rather than part of the padding.
Make your padding the size your your current padding + margin, then set your margin to 0 pixels. This will have the same effect.
I don't think this is possible but if you want to enclose the margin within a border then there can be a workaround.
Enclose the element with span and set the border for that span element as,
.inner{
padding: 5px;
margin: 5px;
}
.outer{
border: 1px solid black;
}
<div class="outer">
<p class="inner">Hello</p>
</div>
Here is a demo
I would like to ask what have I done wrong on my hover border-below function without re sizing the image? I have followed the guide given here under inner border but still my link when I hover the image still re size.
.navbar-div a img, .navbar-div a {
border: none;
overflow: hidden;
float: left;
}
.navbar-div a:hover {
border-bottom: 5px solid black;
}
.navbar-div a:hover img {
margin: -5px;
Here is my JSFiddle link.
Thank You
You have a constraint on the total height of the container for the anchor containing the image. When you add the border you are adding 5px to the height of the container, which will shrink the image since it is maintaining its aspect ratio to fill the smaller available height. Since margins are not considered when calculating the size of the container it is changing size. I changed it to change the size of the padding instead here.
.navbar-div a:hover {
border-bottom: 5px solid black;
padding-bottom: 5px;
}
You may consider trying a different, less complicated approach. Since you will always know your background color you could make the border invisible but always there by just changing the color as seen here.
You can use :after pseudo-element. Code:
.navbar-div a:hover:after {
content:"\a0";
display:block;
padding:2px 0;
line-height:1px;
border-bottom:2px solid #000;
}
http://jsfiddle.net/w4zvad1x/
You must change the
.navbar-div a:hover img {
margin: -5px;
}
What it is doing is to shrink the space inside the DIV, so the image will shrink also.
I'm trying to create a cool css3 effect where by when you hover over an image a border comes out from the middle of the image slowly. To do so I have a transparent border and then show the border and apply padding on hover, but when I add the padding it moves the image. Is there a way to keep the image from moving and still have the padding added on hover?
#dev:hover{
border:solid 3px #76c2af;
padding:10px;
}
img{
position: absolute;
left:64%;
margin-left:-128px;
border:solid 3px transparent;
border-radius: 80px;
transition-duration: 1s;
-webkit-transition-duration: 1s; /* Safari */
}
Example - http://jsfiddle.net/kqWZZ/1/
You need to displace the padding added on hover.
It seems as though the best approach is to add a margin initially and then remove it on hover.
jsFiddle example
#dev {
margin:10px;
}
#dev:hover{
border:solid 3px #76c2af;
padding:10px;
margin:0;
}
This essentially displaces the 10px of padding.
For positioning purposes, I changed left:64% to left:33%.
You also add a padding on hover, which moves the image. So either add the padding also to the image without hover, or dont add any padding at all.
Why not transfer the padding attribute on the image itself but not on its hovering state?
I edited your fiddle. Check it here
img{
padding:10px;
....
}
I am having trouble getting a background-image to overlay the border of another div. We have a sidebar panel with various sidebars, including a navigation menu. To the right is the content panel. We'd like anything selected on the sidebar to appear connected to the content panel:
In the example above, there is a background image on the Personal Info <li> tag. I'd like to extend this image one pixel to the right so that the line next to the selected value isn't visible.
Here is my CSS for the submenu (selected) and the Content area to the right:
.submenu-item li span{
padding: 4px 0 4px 16px;
min-height: 16px;
border-bottom:0px;
}
.submenu-item li{
font-size:12px;
border: none;
padding: 0px 0 0px 16px;
}
.submenu-item span.Active{
background-image: url(../images/submenu-select.png);
background-repeat: no-repeat;
}
#Content {
margin-left:190px;
border-left: 1px solid #b0b0b0;
padding: 20px;
background: #FFFFFF;
min-height:600px;
}
Is there a way to do this other than putting a right border on my sidebar (and excluding it on the list item tag)?
If you have a border on that right, you just can't eliminate that part of the border.
However, you're in luck. Try using margin-right: -1px; in your CSS. This will drag the
element to the right 1 pixel, and hopefully over the border. You may need to also set
position: relative;
z-index: 100;
Also, because it's over to the right 1 pixel, to make it align on the left with the others, you may need to make the active element 1 pixel wider.
Alex's solution should work, but another way to do it would be to remove the border-left CSS atrtribute from #Content and instead use a 1 pixel wide gray GIF or PNG image on the DIV containing the submenu items.
Like this:
#SubMenu { background: url(grayline.gif) #CCCCCC top right; }
That would remove the need to worry about the selected submenu element not being aligned.