I need to design the below elements:
1st Parent element - Menu
Child element - popup
2nd parent element - Body
I need to bring popup to the front then body and then menu.
is this possible?
Html
<div class="menu">
<div class="popup">
Test content
</div>
</div>
<div class = "body-content"></div>
CSS
.menu {
z-index: -1;
}
So now my body content will come front ,menu will go back. But now i tried to click popup div. it just behind the body content. I need to bring that front.
Stack layer
1. Popup
2. Bodycontent
3. Menu
Thanks in advance.
Your Question is not that easy to understand without an example, code showcase, or any other example.
But I think you can do what you want to do by using negative z-index.
Edit: I see you have edited your question, but it is still not that easy to know what you mean.
But here is my best guess:
http://codepen.io/Type-Style/pen/rjOzWa
.popup {
/* decoration */
border: 2px dotted;
background: rgba(255,125,0,0.6);
/* place above menu and body-content */
position: relative;
z-index: 1;
top: 30px; /* create overlap for demo */
}
.body-content {
background: rgba(255,0,0,0.6);
position: relative;
z-index: -1;
bottom: 30px; /* create overlap for demo */
}
div {
/* just decoration styles */
width: 350px;
margin: 0 auto;
padding: 10px 0;
}
.menu {
background: rgba(50,50,255,0.6); /* opaque background color for understanding */
}
.popup {
/* smaller for decoration */
width: 300px;
border: 2px dotted;
background: rgba(255,255,0,0.6);
/* place above menu and body-content */
position: relative;
z-index: 2;
top: 25px; /* create overlap for demo */
}
.body-content {
background: rgba(255,0,0,0.6);
position: relative;
z-index: 1;
bottom: 40px; /* create overlap for demo */
}
<div class="menu">
Menu Test Content: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
<div class="popup">
Test content popup. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
<div class="body-content">
Body-Content and more random Text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. <br />body-content test-content: malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
</div>
I think what you want is a popup over everything.
I don't understand the need of having the content above the menu.
But this is the way I did it.
Note: the position: relative; is needed in order to make z-index work on the particular element.
By using relative, the dimensions the element occupies still remain.
If you don't want that, you can define
position: absolute;
This makes positioning a little bit trickier, since it is placed to its nearest non-static parent element.
Related
I'm trying to make two elements overlap without using the position CSS property because it isn't supported by email clients. I've basically solved it by using a table with table-layout: fixed. See the code snippet below (the position-based implementation is there too, just for the sake of comparison). However, when these elements aren't empty, it doesn't work exactly the way I want it to. See the picture or run the snippet to see. While the content of the blue block does overlap the red block's both background and content, the background of the blue block is rendered under the content of the red block, overlapping only its background (and the border). Can anyone think of a way to make it overlap the content as well?
It works the same way in Chrome, Firefox and IE11, so I believe it's not a random implementation of an undefined behavior. There must exist some logic behind this. Why do backgrounds of elements nested in tds behave in such a strange way? I'm really surprised to learn that something can sneak in between an element's content and background.
Note: negative margins can't be a solution as they're not supported by mail clients.
html, body { margin: 0; padding: 0; }
#a, #aa { border: 1px #faa solid; color: #800; width: 95px; height: 180px; background: #fcc; }
#b, #bb { border: 1px #aaf solid; color: #008; width: 100px; height: 150px; background: #ccf; }
#a { position: absolute; top: 0px; left: 200px; }
#b { position: absolute; top: 50px; left: 270px; }
#t { table-layout: fixed; width: 0px; border-collapse: collapse; }
#atd, #btd { vertical-align: top; padding: 0; }
#bb { margin-top: 50px; margin-left: 70px; } /* OR #btd { padding-top: 50px; padding-left: 70px; } */
<div id=a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<img src="http://lorempixel.com/160/40">Nullam lectus ante, auctor id lacinia vitae.
</div>
<div id=b>Proin laoreet convallis odio, a tempus sem faucibus ut. Pellentesque habitant morbi tristique senectus.</div>
<table id=t>
<tr>
<td id=atd>
<div id=aa>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<img src="http://lorempixel.com/160/40">Nullam lectus ante, auctor id lacinia vitae.
</div>
</td>
<td id=btd>
<div id=bb>Proin laoreet convallis odio, a tempus sem faucibus ut. Pellentesque habitant morbi tristique senectus.</div>
</td>
</tr>
</table>
So I have two divs next to each other which have the class .category and they are supposed to be responsive.
<div class="content">
<div class="category">
<img src="images/category1.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor.
</p>
</div
<div class="category">
<img src="images/category2.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
</p>
</div>
</div>
This is my CSS:
.content {
width: 100%;
background: red;
}
.category {
max-width: 470px;
background: #ffffff;
display: inline-block;
vertical-align: top;
position: relative;
}
When I start resizing the window, the second .category block moves underneath the first .category block. However, I want both the .category blocks to reduce in width and stay next to each other.
Anybody got any suggestions?
First, you have some typographic errors in your HTML Markup (you are missing the > sign on the closing div tag of the first category div).
Second, you should be using percentage widths for responsive elements like this :
FIDDLE
CSS :
.content {
width: 100%;
background: red;
}
.category {
max-width:470px;
width: 50%;
background: #ffffff;
float:left;
vertical-align: top;
position: relative;
}
add float:left; to .category in css and use either % or a css media query
#media(min-width:something;){
.category {
width: something;
}
}
to set the width of the elements.
I have three divs. A container div, that contains two child divs inside. The first child div has a fixed width, but height should be determined by the text inside (it's a message box). Right after that div on the same line, should be another div one line high (basically, the time) and it should be located at the bottom of the parent div (like, if the first child div contains say 5 lines, then the second child div must be right after the first child div, at the level of the lowest line of the first child (of the message box))
Basically, I'm trying to recreate this thing:
Notice how the time is right next to the message?
Anyway, for this I figured I needed to make my time div the size of the parent div. How would I go about doing it?
Thanks in advance
So, this would be the HTML
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod </p>
</div>
<div class = "dateandtime">11:37AM</div>
</div>
And CSS:
.yellowmessage { */ Parent div /*
padding:0 2% 0 0;
float:left;
}
.themessage {
font-size:2.5em;
display: inline-block;
border-radius:20px;
padding:3% 0 3% 0;
max-width:90%;
background-color:rgb(246,227,143);
float:left;
}
.dateandtime {
float:left;
}
You can use this, There is an answer here about your question.
I have added time to that. I have done some changes.
Live Demo **http://jsfiddle.net/mek5Z/1348/**
Fiddle
Assuming that this is your HTML structure:
<div class="yellowmessage clear">
<div class="themessage">
<p contenteditable="true">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
</div>
<div class="dateandtime">11:37AM</div>
</div>
<div class="bluemessage clear">
<div class="themessage">
<p contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare risus vulputate consequat semper. Quisque facilisis facilisis pulvinar. Maecenas aliquam, orci id rhoncus tempus, lacus tellus mattis diam, eget elementum eros dui vel leo.</p>
</div>
<div class="dateandtime">11:49AM</div>
</div>
This could be your CSS
.yellowmessage, .bluemessage {
position: relative;
margin: 5% 2%;
}
.themessage {
font-size:1.85em;
border-radius:20px;
padding: 0 2%;
max-width: 90%;
box-shadow: inset 0 -4px rgba(0, 0, 0, 0.07), inset 0 22px 25px rgba(255, 255, 255, 0.58), 0 3px 11px rgba(0, 0, 0, 0.28);
}
.yellowmessage > .themessage {
float: left;
background-color: #FFF980;
}
.bluemessage > .themessage {
float: right;
background-color: #A7DBD8;
}
.dateandtime {
position: absolute;
bottom: 0;
font-size: 80%;
}
.bluemessage > .dateandtime {
left: 0;
}
.yellowmessage > .dateandtime {
right: 0;
}
For example, I have a div, and some text content inside of it, like this:
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu sapien
sed massa placerat rutrum. In tristique purus eget porta pharetra.</div>
Now I want to add an icon from FontAwesome into the background, like this:
Notice that, I'd like the div to "crop" the icon a little bit, which I failed to do. Because when the icon is displayed as a block, you cannot crop it by using overflow: hidden.
Does anyone know how to achieve this effect?
You can do this using relative and absolute positions.
Here is a rough example to get you started: http://jsfiddle.net/n57uf/1/
<div class="parent">
<i class="icon-star-empty icon-4x child"></i>
<p class="content">Lorum ipsum lorum ipsum etc tect</p>
<div>
.parent {
position: relative;
border:1px solid black;
height: 200px;
width: 200px;
overflow: hidden;
}
.child {
position: absolute;
top: -15px;
left: -20px;
}
.content {
padding: 10px;
font-size: 16pt;
}
you can try the following code inside any div.
It will not interfere with other elements.
<i class="fa fa fa-microchip fa-10x" style="color: white;position: absolute;right: 10px;top: 10px;opacity: 0.3;"></i>
I came up with a solution:
<div class="wrapper">
<i class="icon-star"></icon>
<div>Lorem ipsum dolor sit amet ...</div>
</div>
and float both children to the left, and set them to have negative margins.
Update: Awww ... Jason beat me to it.
i've been going over this one for about two days.
example
it's a fairly complicated design, so to reduce code pasted here i've recreated the main structure on this jsfiddle and included the simplified code at the end of this post:
http://jsfiddle.net/rwone/zwxpG/10/
scenario
i have a container with numerous <li>'s containing a div (containing dynamic content from a database) that initially has the property display: none.
on hovering over an image in these <li>'s however, i wish to show the div.
it is working, however the div appears to be beneath other elements in the container which has a fixed height and overflow-y: auto.
what i've tried
i have tried combinations of z-index's and absolute and relative positioning, but i haven't been able to find a solution yet.
i've isolated two causes in the code below and the jsfiddle (shown as /* comments */) but these do not work on the live test site.
question
my question is therefore, is there another way to enforce that the hover state div is shown on top of and outside of the container that is enclosing it?
it is not an ideal solution that i can fix these issues in the jsfiddle but not the live site, but i just thought i'd ask if there was another way to approach this altogether?
thank you.
html
<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<ul>
<li>
hover me #1
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
<li>
hover me #2
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
</ul>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>
css
#wrapper {
width: 300px;
}
#hbar_one {
background: #cc0000;
height: 50px;
}
#hbar_two {
background: #ffcc00;
height: 50px;
}
#container_b {
height: 50px;
/* cause one - on its own, this causes the undesired 'underneath' effect */
overflow-y: auto;
}
ul li {
display: inline;
/* cause two - on its own, this causes the undesired 'underneath' effect */
position: relative;
}
#container_c {
display: none;
}
ul li:hover #container_c {
background: #00AFF0;
display: block;
width: 200px;
height: 200px;
position:absolute;
top: -20px;
left: 50px;
z-index: 999;
overflow: hidden;
}
#hbar_three {
background: #cccccc;
height: 50px;
}
#hbar_four {
background: #000000;
height: 50px;
}
update
in response to answer below, here is further information on the actual content that is being displayed upon hover (everything within the #container_c div). each <li> has its own unique content:
<li class=".class1 .class2">
<img src="http://path/to/image.jpg">
<div id="container_c">
<h4>title</h4>
<div id="container_c_left">
<span id="cl1">text</span>
<span id="cl2">text</span>
<span id="cl3">text</span>
</div>
<div id="container_c_right">
<span id="cr1">text</span>
<span id="cr2">text</span>
</div>
<span id="cc1">text</span>
<span id="cc2"><a class= "linkclass" href="http://path/to/link.html">link</a></span>
</div>
</li>
You only want to display one of these hover elements at a time?
Put a single DIV outside of the main body and make it hidden.
Then use javascript to adjust its position and content every time you hover over an LI.
No need to give every LI its own DIV.
Store the contents inside a data attribute
<li id=something data-some-content="Hello joe">
Then you can retrieve it with jQuery like so
$("#something").data('some-content')
Your CSS styles are correct but in your HTML you have two <div> elements with the id='container_c' and that's invalid, IDs are unique and you can't give same id to two or more elements. If you two ore more elements to be given same style then try class='container_c' and in the CSS change the #container_c to .container_c
Check this fiddle for the fixed version
http://jsfiddle.net/DeepakKamat/zwxpG/13/
the solution was a mixture of #NoPyGod's jquery suggestion and to have a better understanding of how absolute and relative positioning work.
basically, when absolute and relative positioning are applied to a div, this position is relative to the position of the last element that had absolute or relative positioning defined and is a 'container' of the div you are working with.
to escape from the 'container' that had overflow: auto and a fixed height and width, i had to remove erroneous positioning back till a parent div that was not constrained by overflow and height and width restraints that were impacting on the hover state div.
a working jsfiddle is here:
http://jsfiddle.net/rwone/eeaAr/
i also implemented #Deepak Kamat's suggestion to only have one id per page and change the rest of the div's to be identified by classes.
i subsequently read the article below that made more sense to me this time and after working in this context:
http://css-tricks.com/the-difference-between-id-and-class/
thank you to all for your assistance!
html
<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
some amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
more amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
even more amazing html
</div>
</div>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>
css
#wrapper {
width: 300px;
}
#hbar_one {
background: #cc0000;
height: 50px;
}
#hbar_two {
background: #ffcc00;
height: 50px;
}
#container_b {
height: 100px;
overflow-y: auto;
}
.hidden_db_data_div {
display: none;
background: #00AFF0;
width: 120px;
height: 150px;
color: red;
position:absolute;
overflow: hidden;
z-index: 999;
}
img {
width: 50px;
height: 50px;
}
.magic {
display: inline;
}
#container_a { position:relative; }
#hbar_three {
background: #cccccc;
height: 50px;
}
#hbar_four {
background: #000000;
height: 50px;
}
script
$(".magic").hover(
function () {
$(this)
.find('.hidden_db_data_div')
.css({'left':$(this).position().left+20 + "px", 'top':'-20px'})
.fadeIn(200);
},
function() {
$(this)
.find('.hidden_db_data_div')
.fadeOut(100);
}
);