So what I am trying to achieve is have the text in the left side sit on top of the image in the right side
<div class="body-content">
<div class="left-side">
<p>text</p>
</div>
<div class="right-side">
<div class="img-container>
<img/>
</div>
</div>
</div>
the problem is that it seems to not work at all when image off in another div.
I can get it working when everything is within the same div, so I'm not sure if what I am trying is even possible.
heres a slice that explains whats happening
http://jsfiddle.net/F3UQr/
All you are missing is a position attribute on the left-side.
For the z-index property to apply, the element also need to have a position other than static.
.left-side {
position: relative;
z-index:1;
}
http://jsfiddle.net/dean_simcox/MnYa8/
I think I see what you're trying to do. The z-index is set for ".left-side" but the position needs to be set as well for that to take effect. I set the position to "relative" but you can also do absolute, fixed, etc. Updated fiddle here: http://jsfiddle.net/JS26k/
.left-side
{
z-index: 1;
position: relative;
{
Related
I am working on a fiddle
I want to override a video on the top of a text. The HTML code which I have used in order to make a video/text is:
<div class="player-elements">
<div class="grid-stack">
<iframe class ="video" width="800" height="500" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
</div>
<div class="hello-world" style="">
<p>Hello World</p>
</div>
I am wondering what changes I should make in the CSS so that the video gets on top of the "Lorem ipsum dolor sit amet, consectetur adipiscing." text.
I tried by adding position:relative ,position:absolute and z-index but somehow it doesn't seem to work.
css is a styling language not a markup language to build content
your problem comes from a css code already exists
you can try to select to select positions for both of them absolute.
.grid-stack{
position: absolute;
}
.hello-world {
position: absolute;
}
First you need to learn how work with spect element :D after that you can done your job even with try and catch
z-index for implant to element needs a position
so there as you can see its fixd
http://jsfiddle.net/1hz8v4qc/43/
.player-elements {
z-index: 100;
position:relative;
}
.hello-world
{
text-align: center;
font-size: 50px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
}
Good Luck
Each page is made up of a stack of elements. z-index is a way we can add a layer to that stack. In order to create another stack we have to purposely set the position to fixed, absolute, or relative.
check out this SO answer for a more detailed response to this.
z-index values can be negative or positive but the default value is 0.
The different types of css positions are
Relative. This type of positioning is probably the most confusing and
misused. What it really means is "relative to itself". If you set
position: relative; on an element but no other positioning attributes
(top, left, bottom or right), it will no effect on it's positioning at
all, it will be exactly as it would be if you left it as position...
Absolute. This is a very powerful type of positioning that allows you
to literally place any page element exactly where you want it. You use
the positioning attributes top, left, bottom. and right to set the
location. Remember that these values will be relative to the next
parent element with relative (or absolute) positioning...
Fixed. This type of positioning is fairly rare but certainly has its
uses. A fixed position element is positioned relative to the viewport,
or the browser window itself....
You can read more Here
.hello-world{
position: fixed;
z-index: 1;
}
.player-elements{
position: fixed;
z-index: 2;
}
<div class='container'>
<div class="player-elements">
<div class="grid-stack">
<iframe class ="video" width="800" height="500" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
</div>
<div class="hello-world" style="">
<p>Hello World</p>
</div>
</div>
Try this fiddle the snippet doesn't seem to run the youtube video.
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
my html looks like this:
<div class="container">
<div class="header-content">
hello!
</div>
</div>
i've recently come into a situation where I need the 'header' to be 100% the window for a full-width background. usually i would do this css:
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
unfortunately, i am fairly deep into a framework and can't wrap the container. i need to construct it within the container.
<div class="container">
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
</div>
i can't figure out a way to accomplish this, and am wondering if this is possible.
if i use this css for header-background-color
background: blue;
left:0;
position: absolute;
width: 100%;
the element looks right, but the page flow is interrupted.
does anyone know if my target goal is reachable?
i made a bootply to illustrate this http://www.bootply.com/129060
You can use a child (>) selector to select the first container element and set its width to 100% and remove the padding.
.example-3 > .container {
width: 100%;
padding: 0;
}
This assumes you'll always have a wrapper around it with a unique class name (or use body if it's the first div), but this also allows you to remove the position: absolute which is causing the overlap and the height can stay dynamic.
See forked bootply: http://www.bootply.com/129065
I've added a button that inserts a paragraph into the div so you can see how it's not affected by changes in height.
Only thing I can think of is using a dumby element to maintain the vertical space (i.e. set the height), and then use absolute positioning on the full width content (as you mention). This is really ugly and won't be a good solution if the height of the content is dynamic.
See #content_dumby element in forked bootply: http://www.bootply.com/129063
I am trying to place divs next to each other of which the divs act like a sticky-footer using position:absolute and bottom:0
HTML: (note that I could have many of these with different id but the same class)
<div id="s6234" class="sticky">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class="sticky">
<div id="s_content">
Hello
</div>
</div>
CSS:
.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
jsFiddle: http://jsfiddle.net/ZqaDe/
Preview: http://jsfiddle.net/ZqaDe/show
EDIT:
I don't know how many divs there are every time. The divs there are appended dynamically. In the actual app, those div's can be deleted, moved or added so it they will keep changing every time. So basically I want a way so that the are placed every time next to each other.
EDIT 2:
I don't think I am able to wrap all div's inside a main sticky footer and set a float:left so that they are placed next to each other. In the real example, the position:absolute and bottoom:0 is set dynamically. Updated fiddle: http://jsfiddle.net/u2nda/
You could have an empty footer div in which you append the divs you are minimizing. You then just need to set the position to relative, float the div left and reset top and left to 0.
So your JQuery string would become:
$(this).parent().parent().appendTo("#footer")
.css('position','relative')
.css('float','left')
.css('height','45')
.css('top','0')
.css('left','0')
.find('#s_content').hide();
JSFiddle: http://jsfiddle.net/u2nda/2/
Edit
Or better still, change the position to static, that way you do not need to reset the top and left values:
$(this).parent().parent().appendTo("#footer")
.css('position','static')
.css('float','left')
.css('height','45')
.find('#s_content').hide();
JSFiddle: http://jsfiddle.net/u2nda/3/
Edit 2
Or even better, just append classes that do not overwrite your inline CSS:
.tabMe {
float: left;
height: 45px;
position: static;
}
.tabMe #s_head{
border: 0;
}
.tabMe #s_content{
display: none;
}
And your JQuery to show / hide could become:
$('#s_head button').on('click', function(){
var check = $(this).parent().parent();
if( !check.hasClass("tabMe"))
check.appendTo("#footer").addClass("tabMe")
else
check.appendTo("body").removeClass("tabMe")
});
JSFiddle: http://jsfiddle.net/u2nda/4/
You just need to move the second div to the right: #s7243 { left: 200px; }. If you had a third div, you'd need to move it over even more: #third-one { left: 400px; }.
I would place the divs in a main container that had my position absolute and then float your blocks.
Example http://jsfiddle.net/ZqaDe/3/
I think that best option would be to wrap your "sticky" divs. See my demo on jsfiddle
<div class="sticky">
<div id="s6234" class="left">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class="left">
<div id="s_content">
Hello
</div>
</div>
</div>
CSS:
.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
.left{float: left;margin-left: 10px;background: yellow;}
<div id="calendar">
<p>Text</p>
<div class="section">blah</div>
</div>
I'm applying the PNG to #calendar, in IE6 I use filter but it makes the content not clickable - I believe the way around this was to force everything inside to be positioned ( eg position:relative ) and have a z-index + hasLayout but sometimes it doesn't work.
Should I instead wrap all my stuff in another div and apply the png BG to a sibling node such like this, or what?
<div id="calendar">
<div id="calendar-bg"></div>
<div id="calendar-content">
<p>Text</p>
<div class="section">blah</div>
</div>
</div>
Then force the calendar-bg to be absolutely positioned and 100% width/height, and relatively position #calendar-content on top of it? Or is there some other hidden way that the mainstream png fixer scripts ( ala htc, jquery.pngFix ) work?
That is indeed the (only) correct solution to this problem I ever came across. You can't rely on your first solution (positioning the childs relatively), because the opacity filter in IE is thrown over all child elements, with the child elements not being clickable as a result.
So just make sure the png is not in the parent element of a clickable element.
So, create a parent with the property 'position: relative' (or absolute, depends on your layout) and insert two children for the background and the actual content.
Example:
<div id="calendar">
<div id="calendar-bg"></div>
<div id="calendar-content">
<p>Text</p>
</div>
</div>
#calendar { position: relative; }
#calendar #calendar-bg {
position: absolute;
left: 0;
top: 0;
height: 100%; /* Or the height and width in pixels if you know them */
width: 100%; }
#calendar #calendar-content {
position: relative;
z-index: 1; }
I believe the way around this was to force everything inside to be positioned ( eg position:relative ) and have a z-index + hasLayout but sometimes it doesn't work.
Position:relative doesn't trigger hasLayout. You should try something simple like zoom:1 with a z-index.
I'm pretty sure (going from my memory of dealing with a similar problem) that trying to relatively position stuff on top of a png in IE6 doesn't work, but specifying z-index does.