This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I am working on with 2 images styles and I'm having an annoying problem here, probably because I don't know much yet. What I'm trying to do is to get a second image on the first image to be like a sticker (if you see the jsFiddle on bottom you will understand more)
Problem is that from my default CSS I have on every image I upload on my blog to have a border:2px solid #fff (on the round). But I don't want this CSS to be applied on the second image i have in front of the first.
I am doing this by over-riding the default CSS with <style> tag on the post.
.post img {border: 0px solid #fff; //default : 2px solid;
-moz-box-shadow:none ; // default ....
-webkit-box-shadow:none ; // default ....
box-shadow:none } // default ....
body { background-color:black;
}
Also on the first image I add the style again like
style="clear: left; float: left; margin-bottom: 1em; border: 2px solid #fff!important;-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8); margin-right: 1em;
This way the CSS is overwritten so no border or shadow is applied on any image, but the first image has the borders and shadows applied via its style. The second image gets nothing from CSS.
Problem is when I do this, there is a small gap from the image to bottom-border
and I cant figure out why.
Here is the link click
Just give the image
display:block;
see updated fiddle
it should now looks like
I see that you used the div tag to contain and control image properties and position. Remember that by default the div tag creates a small margin around itself so divisions floating or fixed on the same page and z-index will not collide. To fix this problem and allow div wrapped objects to snuggle up to each other use negative margins, usually for the top and left positions. Just a few pixels will do.
{
margin-left:-3px;
margin-top:-3px;
}
Try this on the extra image(s) you add, not the original, unless to need to trim its position as well. The -3px was just a guess. It could be as high as -10px or more. This code will move the images, so adjust the negative margin to taste.
You should remove your 1em margins from the bottom and right side of the first div before trying negative margins to make them extra close.
Related
This question already has an answer here:
How to make a border overlay child div?
(1 answer)
Closed last month.
I'm trying to convert this design from Illustrator into a UI element in vanilla HTML and CSS (design was given to me from a designer to recreate). I need the inner box with the cyan and white outlines to be clickable, like a button, but not the outer light blue area that surrounds the text.
Originally, I figured I could just use a box shadow to create the second, offset white border, but the box-shadow will only be shown in the bottom and right edges of the box, and won't show it inside the cyan border.
I was thinking that maybe I could do another DIV with absolute positioning to offset it, but I'm not sure how to choose the size for that second DIV as I want this button to scale based on viewport width.
How would I go about doing this? I want to avoid the option of saving it as an SVG or image as it would then be hard to create the "a" element to fit only the text portion with a clickable link.
You can do it like below:
button {
font-size: 30px;
padding: 10px 20px;
border: solid #fff;
border-width: 0 5px 5px 0;
box-shadow:
-5px -5px 0 cyan,
-5px -5px 0 inset cyan,
5px 5px 0 inset #fff;
background: none;
cursor: pointer;
}
body {
background: lightblue;
}
<button>Click here </button>
Good day! I apologize for my English.
the question is:
by task, a block is created in the center of the page with the elements.
1picture
all lements have a box-sizing: border-box;
at the cursor position above the elements - all elements get transparency, except for one cursor over it. this position is done.
2picture
At the beginning of the frame, the elements are specified in part:
.content>div:not(:last-child) {
border-bottom: 5px solid #fff;/*всем элементам кроме последнего нижняя рамка*/
}
.content>div:nth-child(2n):not(:nth-child(10)) {
border-right: 5px solid #fff;/*всем чётным кроме последнего рамка справа*/
}
.content>div:nth-child(2n-1):not(:nth-child(4n-1)) {
border-right: 5px solid #fff;/* выборка оставшихся элементов рамка справа*/
}
to avoid doubling the borderers. by task - a single boarder is displayed.
this is the form
3picture
Further. when you move the cursor over an element, the element gets opacity: 1; and the mapping of all four Borders.
since the borderers are partially installed, with .element: Hover {} add the missing border. Border - the top is installed without problems, to display a single board - set the margin - top: -5 pixels, while the element is stretched vetically without pulling the bottom element behind it. if you set a horizontal border, left or right,then the element is compressed and two boundaries are displayed, the neighboring element and the neighboring one. when you move 5 pixels to the left, the element does not stretch, and the moving element pulls after it.
picture4
The question: what parameters to set to an element that would show a single frame with four sides when hovering, and the element did not move.
All the code: https://github.com/evgenjnr/weather-forecast-test.git
Page of result task: https://evgenjnr.github.io/weather-forecast-test/
Using only HTML & CSS, inline-block, without float, flex-box.
Instead of borders you can use box-shadow: inset 0 0 0 2px white, 0 0 0 3px white; that way you don't have to handle each case individually.
https://codepen.io/anon/pen/LeeWqr
decided to install elements of the content box on all sides of the border at once, setting the width through calc (width - 5px) and margin - left -5px
now copy to GitHub
Ok, this is an interesting one.
I have a <h1> header that appears in a box (I mean an on-screen visible box, like border:solid 3px white). The box itself as well as the text inside needs to have a shadow. The box can't be a fixed width, as the text inside the box changes from page to page.
Here's the issue: I have it working perfectly except in IE9, where the shadow only appears on the box, not the text.
If I remove display:inline from the CSS, then it works right in IE9, but then the box is the width of the entire container, instead of wrapping just around the text. So I think the key to the solution is just finding a better way to center the text and the box inside of the container, so display:inline; can be dropped.
The markup is very simple:
<style>
.container {
width:500px;height:200px;padding:50px;background:#eee;
text-align:center;
}
h1 {
font-size:34px;
color:white;
padding:25px;
border:solid 3px white;
letter-spacing:7px;
display:inline;
box-shadow: 0 0 6px #666;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
filter:glow(color=black, strength=1); /* IE9 stupid proprietary shadow */
}
</style>
<div class='container'>
<h1>Testing</h1>
</div>
And you can play with it here: http://jsfiddle.net/j434X/4/
Thank you.
I added a margin property in the h1. This makes it possible to get rid of display: inline; and still get the same result, but longer text skips to another line. Kind of like if you had a set width, which I know you didn't want. Here's the fiddle anyway, if it helps
I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go
http://jsfiddle.net/e5Sxt/2/
html
<div id="content">
<p>Generic Content</p>
<button class="button">Search</button>
</div>
css
#content{
width: 500px;
height: 500px;
background-color: black;
padding: 50px;
color: white;
}
button{
margin-top: 50px;
padding: 20px;
text-align: center;
background-color: #333;
box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
border: none;
cursor: pointer;
}
The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.
I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.
Thanks!
The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).
There is a CSS feature called border-image, which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.
With border-image, you could simply specify a small image with your two colours and transparent middle section. Job done.
Learn more about border image here: http://css-tricks.com/understanding-border-image/
However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.
Full browser support details can be found here: http://caniuse.com/#search=border-image
If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.
Of course, you can only use this solution if you aren't already using :before and :after for something else.
Hope that gives you some ideas.
I think the only way to do this is by using a wrapper unfortunately. I'm not sure if it is possible to get the transparency through the button background.
Although, if you know the background color, you can use that in the border obviously, but of course this won't work for background gradients.
Here is a proposed jsFiddle showing knowing the color, and another using a wrapper:
http://jsfiddle.net/eD6xy/
HTML:
<div class="box one-div">(1 div, know color)</div>
<div class="two-div">
<div class="box">(2 divs, pure transparent)</div>
</div>
CSS:
/*
With one div, works fine with a constant color (#abc)
But with gradient, probably won't match up correctly
*/
.one-div {
margin: 15px 10px;
border: 5px solid blue;
box-shadow: 0 0 0 5px #abc,
0 0 0 10px red;
}
.two-div {
margin-top: 30px;
padding: 5px;
border: 5px solid red;
}
.two-div > .box {
border: 5px solid blue;
}
Guys I have been trying lots of different options from cutting up to building in html/css. nothing seems to really work :(
How would you guys go about doing this ?
Link:- http://www.flickr.com/photos/gavinwynne/6902590869/
The simplest way is to use a thick border and a inset box shadow. Browser support is somewhat limited, though. It basically comes down to IE9+ and modern browsers (ref).
demo
body {
min-height: 300px;
border: 24px solid #666;
box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
-moz-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
padding: 35px;
}
One of the most common ways about doing it would be to cut the image in 3 pieces as shown in the below picture:
Where piece 1 would be shown first, then make piece 2 height equal to 1px and repeat it on the y axis through CSS and then put piece 3 at the bottom in order to "close" the container
Your html could be in the form of:
<div class="div_top"></div>
<div class="div_middle"> your content here </div>
<div class="div_bottom"></div>
Update
Css would be something similar to this :
.div_top {
background-image:url('top_bg.jpg');
background-repeat:no-repeat;
width:800px;
}
.div_middle {
background-image:url('middle_bg.jpg');
background-repeat:repeat-y;
width:800px;
}
.div_bottom {
background-image:url('bottom_bg.jpg');
background-repeat:no-repeat;
width:800px;
}
You'd probably want to set a fixed height for your top and bottom divs, since they have no content and wont actually expand to show the background image.