I am designing a page which has the following HTML structure.
<div id="event">
<div id="event-image">
<div id="event-image-background">
</div>
<img src="image_url_here">
</div>
<div id="event-title">
EVENT 1
</div>
<div id="event-details-summary">
Event Summary Here
</div>
<div id="event-description">
</div>
</div>
And I am using the following CSS for the structure.
#event{
position: relative;
}
#event-image{
text-align: center;
margin: 0px auto;
border: 1px solid #fff;
box-shadow: 0px 5px 10px -7px #CCC, -5px 10px 10px -7px #CCC;
overflow: hidden;
}
#event-image-background{
background: url('image_url_here') no-repeat;
background-size: cover;
opacity: 0.1;
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
}
#event-image img{
opacity: 1;
z-index: 3;
border: 1px solid rgba(204, 204, 204, 0);
}
The problem I am facing is that the background that I have applied to event-image-background is overflowing into the other divs, namely event-title and others that follow. I am not really good at CSS, and have no clue what's going wrong. Kindly help.
Thanks :)
PS: I dont really want to use the max-height option, as the image that I will be adding via img src will have variable height for each event.
Try adding overflow: hidden; to #event-image-background.
Protip, I'd recommend favoring styling on classes (e.g. .event-image-background and <div class="event-image-background">) rather than ids. See: http://css-tricks.com/the-difference-between-id-and-class/.
Related
I want to create the white border seen in the image below with CSS. White border that is set 25px inside the window. Iv'e tried to use box-shadow inset however was not able to create the space between the edge of the window.
I used this css:
border: 3px solid white; //took this out but still no luck
box-shadow: inset 0 0 0 5px #FFFFFF;
I also tried without the normal border as well.
I think I can create an overlay div that has a padding or margin and give it a border, but the problem is the content needs to be scrollable and clickable below it.
The goal:
The white box just above the icons.
Use a pseudo element
.parent {
position: relative;
height: 200px;
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.content {
height: 600px;
background: url(http://lorempixel.com/600/600/abstract/1) no-repeat center center / cover;
}
.parent:after {
content: '';
position: absolute;
left: 25px;
top: 25px;
right: 40px;
bottom: 25px;
border: 2px solid white;
}
<div class="parent">
<div class="wrapper">
<div class="content">
</div>
</div>
</div>
Use a transparent border to set the shadow where you want it.
The remaining problem is to extend the image to the borders. Use background-origin for this.
.test {
height: 250px;
width: 400px;
background-image: url(http://lorempixel.com/600/400);
background-origin: border-box;
background-size: cover;
border: 50px transparent solid;
box-shadow: inset 0px 0px 5px 5px cyan;
}
<div class="test">
</div>
hope this help.
body{
background: #000;
}
.wrapper{
width: 500px;
padding: 25px;
border: 3px solid #CCC;
}
.content{
border: 1px solid #fff;
padding: 15px;
color: #fff;
height: 400px;
}
<div class="wrapper">
<div class="content">
this is your content div with white border
</div>
</div>
I created a round-image using following HTML
<div class="thumb">
<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img">
</div>
and CSS
.thumb{
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 50%;
}
I tried adding a new circle around the rounded image, failed eventually. How am I supposed to do this? Should I create a new div and add this rounded image inside it and style that div to make it round? I tried to achieve circled image in this google link https://www.gmail.com/intl/en/mail/help/about.html which is placed right below the slider.
Here is my fiddle of what I've gotten so far http://jsfiddle.net/adityasingh773/rzsmpmc9/
This is not so elegant solution, because it requires extra-html, but looks pretty fine, imho: (didn't experiment with pseudo-elements, maybe similar result can be achieved).
<div class="thumb-wrapper">
<div class="thumb">
<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img">
</div>
</div>
CSS:
.thumb-wrapper {
width: 170px;
height: 170px;
overflow: hidden;
border-radius: 50%;
background-color:#fefefe;
position:relative;
box-sizing:border-box;
border:1px solid #dedede;
-webkit-box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
-moz-box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
}
.thumb{
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 50%;
position:absolute;
left:8px;
top:9px;
box-sizing:border-box;
}
DEMO: http://jsfiddle.net/rzsmpmc9/5/
Tried adding an border?
<div>
<img class="thumb" src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img">
</div>
.thumb{
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 50%;
border:2px solid white;
box-shadow:0 0 0.5em white;
}
Optionally you may use an box shadow to produce a solid shadow, since the shadow doesn't compute within the element positioning and size, avoiding interference in your current layout.
you can simply add a border to your existing css
border: 3px blue solid;
http://jsfiddle.net/rzsmpmc9/2/
You can achieve same style as the link you have provided if u'll use an image, which is the most plausible way, but if you play with box-shadow u will most likely get the same thing.
box-shadow:2px 2px 4px green, -2px -2px 4px red;
check this.
If you can't see this problem then please try take a look at this codepen, here you should see what I mean.
I've tried several ways to fix it. Below in comments you can see one of them. Still it seems to render 1px rugged border between proper border and dropped shadow.
If it depends on browser renderer then is it a bug?
How to fix it properly for all modern browsers.
html{
background-color: #554343;
}
div{
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
border-radius: 50%;
border-width: 0; /* no result
border-width: 2px; // uncommented no result
border-style: solid;// uncommented no result even with inset*/
background-color: white;
box-shadow: inset 1px 1px 150px, inset -1px -1px 150px;
}
<div>
</div>
EDIT:
Tried also this way but without positive result:
html{
background-color: #554343;
}
.container{
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
border-radius: 50%; /* tried 49.5% but it's not acceptable */
box-shadow: inset 1px 1px 150px #000, inset -1px -1px 150px #000;
}
.content{
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: white;
z-index: -1;
}
<div class="container">
<div class="content">
</div>
</div>
https://code.google.com/p/chromium/issues/detail?id=442335
Seems like opened Chrome bug. I couldn't come up with a solution for your case. Please vote this issue on bug tracker if you want it to be fixed sooner!
The breadcrumbs part of the page is shifted to the right (in Firefox) with no apparent reason.
HTML:
<div class="region region-header">
<section id="block-easy-breadcrumb-easy-breadcrumb" class="block block-easy-breadcrumb">
<section class="content">
<div id="breadcrumbs-one">
</section>
</section>
</div>
CSS:
#breadcrumbs-one
{
border-width: 1px;
border-style: solid;
border-color: #FFFFFF #FFFFFF #E7E7E7;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
overflow: hidden;
width: 100%;
}
Here is the link to site:
http://www.vegus.lv/kursi
It's not in english.
Hope you can help.
try this please add clear:left on this below class
.region-header {
clear: left;
left: -19px;
position: relative;
top: -1px;
width: 953px;
}
OR
add float:left on this below class
.region-header {
float: left;
left: -19px;
position: relative;
top: -1px;
width: 953px;
}
I assume the issue is in #main. when you change your margin to -7px auto 40px; The things work.
Also, if you do not want to make changes to #main, you need to change the padding of #header, #footer CSS with 10px 10px 8px; values respectively.
There are 1px issues that have a conflicting inheritance or structural differences that tend to change the layout styles of some elements if not calculated properly.
Hope this helps.
Just add in CSS float :left.
#breadcrumbs-one {
border-width: 1px;
border-style: solid;
border-color: #FFFFFF #FFFFFF #E7E7E7;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
overflow: hidden;
width: 100%;
float: left;
}
hey there i wonder if any of you have come across a similar issue? i am working on an ad section of the webpage and its got a really cool background that i would like to carry on into sections of the elements so i have a box that hold a box for a rss feed into updates made on the website and then i have a box for adverts. here is my html:
<div class="side">
<div id="ad">
bla
</div>
<div id="rss_news">
double bla
</div>
</div>
and the css:
.side {
float: left;
background-color: black;
width: 300px;
min-height: 710px;
padding: 0 0 0 0px;
margin-top: 25px;
border: 1px solid white;
border-radius: 8px 8px 8px 8px;
opacity: 0.3;
}
#ad {
border: 1px solid blue;
height: 320px;
max-height: 350px;
margin: 15px;
opacity: 1;
}
#rss_news {
border: 1px solid yellow;
height: 320px;
max-height: 350px;
margin: 15px;
opacity: 1;
}
as you can see and as i was anticipating the side class immits his attributes on the ones nested within him. is there a way that i could somehow tell the other id tags to ignore that opacity?
thanks in advance :D
There is no way to make descendants ignore the parent's opacity.
You can use rgba/hsla colors to get a partially transparent background, without affecting the children's visibility. Example:
.side {
background-color: rgba(0,0,0, 0.3);
}
Demo: http://jsfiddle.net/ywQy5/
See also:
MDN: hsla colors
MDN: rgba colors
You can use css3 rgba property for this & for IE you can use IE filter.Write like this:
.side{
background-color: rgba(0,0,0, 0.5);
background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE*/
zoom: 1;
}