I'm developing a responsive site and I have an issue that I've never tought I could have It xD
I have an image inside a div wrapper... and just want to put an icon font with :after selector when that wrapper/img has one class...
Trouble comes on z-index, for z-index works I need to "absolute" that img, but if I do that wrapper's height not contains img... and I can not put my :after element relative to img or wrapper well
I have this issue here: http://codepen.io/MrViSiOn/pen/VYpedg
* {
box-sizing: border-box;
}
div {
float: left;
width: 24%;
height: auto;
margin-right: 1em;
border: 1px solid blue;
padding: 1em;
position: relative;
overflow: visible;
}
img {
max-width: 100%;
border-radius: 50%;
padding: 15px;
border: 1px solid #aaa;
z-index: 10;
position: absolute;
}
div:after {
content: "\e60c";
position: absolute;
color: #234;
font-family: "Nubelo";
bottom: 0;
left: 45%;
font-size: 2em;
z-index: 1;
}
<link rel="stylesheet" href="http://i.icomoon.io/public/temp/d53e6aab62/Nubelo/style.css">
<div>
<img src="http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303" />
</div>
<div>
<img src="http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303" />
</div>
Thank you, If you need more information, just tell
Thanky you Marcel Burkhard...
I didn't know that using position:relative enables z-index.
That's the answer!
Related
I'm not sure how to add a semi-transparent color overlay that has centered text in it that says "NOW PLAYING" to a fluid thumbnail image when it is active. How do I go about doing this?
Centering the text vertically won't be so easy, but you can get 95% of the way there with a relatively positioned wrapper div and a CSS pseudo class: http://jsfiddle.net/ChrisLTD/FWtA3/
HTML:
<div class="thumbnail active"><img src="http://placekitten.com/300/300"></div>
CSS:
.thumbnail { position: relative; display: inline-block; }
.thumbnail.active:after { content: "NOW PLAYING"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); box-sizing: border-box; -moz-box-sizing: border-box; padding: 10px; text-align: center; color: #fff; font-weight: bold; }
.thumbnail img { display: block; }
I am setting a wrapper to be full screen with a slight opacity. Within that wrapper I have another div which is to be centered on the screen. All works, but the opacity is being applied to the inner div (loading icon and some text).
The html cannot change in the sense that .dataTables_processing will always be a wrapper no matter what.
html:
<div class="dataTables_processing">
<div class="dataTables_processing_custom">
<i class="fa fa-spinner fa-spin"></i> Please wait...
</div>
</div>
css:
.dataTables_processing {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-left: 0;
padding: 0;
background-color: #333;
opacity: 0.05;
cursor:wait;
z-index:9998;
}
.dataTables_processing_custom {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 30px;
margin-left: -100px;
text-align: center;
color:#3276b1;
font-size: 14px;
z-index:9999;
}
.dataTables_processing_custom i{
font-size:30px;
vertical-align:middle;
}
When the CSS style opacity is applied to the parent, it does it to all it's children, try using a RGBA method for a background instead:
.parent {
background: rgba(0,0,0,0.5);
}
I'm trying to absolutely position a child div element relative to the bottom limit of its parent div so that the it would be maintained at the bottom and will continue to assume the width of its parent even if its parent get re-sized dynamically. The problem is that if I set the parent div position to relative using css from head of document it doesn't seem to accept the positioning made and the child div gets positioned to the body instead breaking the layout.
You can check my code here Broken div
CSS:
#player {
width: 640px;
height: 360px;
background-color: #aaa;
border: 1px solid #555;.
position: relative;
}
#player div.controls {
width: 100%;
height: 26px;
line-height: 26px;
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
background-color: #222;
opacity: 0.5;
}
#player span.control {
padding-left: 10px;
padding-right: 10px;
margin-right: 5px;
cursor: pointer;
}
#player span.control:hover {
background-color: #555;
}
#player span.control:first-child {
margin-left: 5px;
}
HTML:
<div id="player">
<div class="controls">
<span class="control playpause" title="play/pause"></span>
<span class="control volume" title="volume"></span>
<span class="control resize" title="maximize/restore"></span>
</div>
</div>
The extra . (dot) on the following statement (line 5) is the problem:
border: 1px solid #555;.
The Browser simply ignores the position: relative that follows it.
I have a div block that overlays on top of its parent div, but when the window is resized, the child div moves around like crazy. How can I prevent that from happening. Here is the link to my site: http://raider.grcc.edu/~ryanduffing/recordstore/
Here is the relevant CSS code, and HTML code:
<div id="overlayDescription" class="my_corner">
<span id="overHeader"><span id="chevron">ยป</span>THE CORNER</span>
<span id="overHeader2">RECORD SHOP</span>
<p id="overContent"></p>
</div>
<div id="pictureBox">
<img src="img/storefront.jpg" />
</div>
#pictureBox{
margin-top: 10px;
margin-left:auto;
margin-right:auto;
width: 940px;
height: 420px;
position: relative;
z-index: 1;
}
#overlayDescription{
font-size: 11px;
position:absolute;
top: 290px;
right: 489px;
height: 265px;
border: 1px solid #FFFFFF;
width: 240px;
color: #FFFFFF;
background-color:rgba(0,0,0,.9);
z-index: 2;
border-radius: 100px 0 0 0;
}
#overlayDescription span#overHeader{
font-family: Arial Narrow;
position:relative;
font-size: 25px;
left: 80px;
top: 10px;
}
#overlayDescription span#chevron{
position:relative;
left: -5px;
font-family: Arial Narrow;
font-size: 35px;
color: yellow;
}
#overlayDescription span#overHeader2{
font-family: Arial Narrow;
color: yellow;
position:relative;
top: 10px;
left: 80px;
font-size: 25px;
}
#overlayDescription p#overContent{
position:absolute;
padding-left: 25px;
}
You have to make the child's absolute position relative to its parent.
#content {
position: relative;
}
#overlayDescription {
top: 140px;
right: 327px;
/* rest of the styles for this element */
}
It's because you give your child div absolute position means that this element is positioned relative to the first parent element that has a position other than static.
But as I can see from your website, all parent divs of your #overlayDescription div are static positioned element since static is the default position value.
So currently, your div are positioned according to your html element which is your window so you need to give one of its parent another position method rather then static then you'll be fine, for example:
#content {
position: absolute;
}
Set position: relative; on div.content.
Then set right: 0px; on #overlayDescription and adjust the top value to get it to sit in the right spot vertically.
Continuing my last question on this thread (Play button centred with different image/video sizes), I will open this one regarding to #Marc Audet request.
Basically I had this code:
.playBT{
width: 50px;
height: 50px;
position: absolute;
z-index: 999;
top: 25%;
left: 25%;
margin-left: -25px;
margin-top: -25px;
}
However I can't use the example given by Marc on the last thread, because the play button doesn't work as expected when the video size changes...
Here is the code
You need to tweak your HTML a bit, here is one way of doing it:
<div id="video-panel">
<div id="video-container" class="video-js-box">
<div id="play" class="playBT"><img class="imgBT" src="http://2.bp.blogspot.com/-RnPjQOr3PSw/Teflrf1dTaI/AAAAAAAAAbc/zQbRMLQmUAY/s1600/player_play.png" /></div>
<video id="video1">
<source src="http://video-js.zencoder.com/oceans-clip.mp4"/>
</video>
</div>
<div id="video-controls">
<div id="footerplay"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/play.png" /></div>
<div id="footerpause"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/pause.png" /></div>
<div id="progressbar">
<div id="chart"></div>
<div id="seeker"></div>
</div>
</div>
</div>
and the CSS is as follows:
#video-panel {
border: 4px solid blue;
padding: 4px 50px;
}
.video-js-box {
width: auto;
height: auto;
outline: 1px dotted blue;
position: relative;
display: block;
}
video {
outline: 1px dotted blue;
margin: 0 auto;
display: block;
}
#play {
position:absolute;
top: 50%;
left: 50%;
outline: 1px dotted red;
}
.imgBT{
width:50px;
height:50px;
vertical-align: bottom;
margin-left: -25px;
margin-top: -25px;
}
#video-controls {
outline: 1px solid red;
overflow: auto;
}
#footerplay {
float: left;
margin-left: 27px;
}
#footerpause {
float: left;
margin-left: 27px;
}
#progressbar {
float: left;
outline: 1px dotted black;
display: inline-block;
width: 200px;
height: 27px;
margin-left: 27px;
}
#footerplay img, #footerpause img{
height:27px;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/EnDHw/
Explanation & Details
User a wrapper div to keep everything tidy, video-panel, and use a separate div for the video video-container and for the controls video-controls.
The play button and the <video> element are positioned with respect to the video-container and note the negative margin trick to position the arrow button image.
The control elements can be positioned in their own div video-controls. I simply floated them to the left with a 27px left margin.
This should help you get started. The outlines and borders are for illustration only and are optional.
Good luck!