I got an ul with multiple li, what I need is that each li fit 50% of the view-port width, floating to the right, and a dynamic height, because could be expanded and collapsed, but without affect the full row.
This is how it should look normally:
This is how it should look with an item expanded:
I tried in so many ways but without successful. Is important to me not to use javascript for it, just CSS.
check this link: codepen.io
<div class="collapse">
<input id="big-text-collapse" type="checkbox">
<label for="big-text-collapse" onclick>Big text</label>
<div class="collapse__content">
<strong>I'm always collapsible</strong>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat lectus mi, vel consectetur massa vulputate in. Donec vestibulum, dui non facilisis congue, ex nisi bibendum urna, in lacinia enim dolor sed risus. Nunc tristique malesuada mauris, at
accumsan velit aliquam vitae. Sed ultricies risus sit amet velit consequat lacinia. Sed non ornare erat. Suspendisse convallis velit dapibus orci sollicitudin malesuada.
</p>
</div>
Related
I'm trying to use background image on wordpress however it isn't working any help would be appreciated.
I have used inline styling for background image as I found other answers on here saying to do this but it still won't work.
<div class="container">
<div class="left" style =" <?php echo get_template_directory_uri(); ?>background-image: url('/img/img/6c0bfc47-d8d3-41f4-9c17-7fca574b5efc.jpg');">
</div>
<div class="right">
<h1>Windows and Glass</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dui a tortor facilisis, a ornare enim pretium. Duis turpis neque, porta tincidunt vehicula vitae, congue sed elit. Aliquam erat volutpat. Pellentesque lacinia ipsum vulputate, pretium ligula vitae, auctor augue. Ut volutpat ipsum quis ligula cursus, et pulvinar elit sollicitudin. Duis eu interdum libero. Sed dignissim fermentum eros id dapibus.</p>
</div>
</div>
I have to add an animation to a fixed position DIV, that contains a modal window.
Without the animation css instruction (animation:navslide .5s ease forwards;), the modal window works as expected, occupying the entire screen. However, with the css animation, the modal window shows up inside the fixed position DIV.
Why is the modal window behaving like this? Is there any way for the DIV to have an animation, that does not intrude in the modal window's positioning in the page?
Here is a demo of the issue.
First of all, why do You have modal inside header element - this is wrong. Usually it is best to put modal element in body or other root element. Your demo fixed below.
<div class="wrap">
<div class="topHeader">
<button onclick="document.getElementById('id01').style.display='block'">Open Modal</button>
</div>
<div id="id01" class="modal">
<div class="modal-content">
<span onclick="document.getElementById('id01').style.display='none'" class="close">close</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum sagittis ipsum, vitae
ultrices libero blandit at. Curabitur blandit porta turpis, eu tincidunt tortor ultrices ac. </p>
</div>
</div>
<div class="pagecontent">
<h1>A title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum sagittis ipsum, vitae ultrices
libero blandit at. Curabitur blandit porta turpis, eu tincidunt tortor ultrices ac. Phasellus tempus risus
molestie, porttitor odio eget, varius mi. Nullam rutrum, justo eu sollicitudin gravida, enim quam
scelerisque enim, id pharetra orci lectus nec magna. Sed imperdiet tortor ex, id pulvinar nulla tincidunt
vitae. Duis commodo aliquam mi, id pretium eros ornare vitae. Praesent ac nunc eget nisl mattis consectetur
nec quis orci. Etiam elit nunc, molestie et tortor ac, tristique aliquet metus.</p>
</div>
But if You want to keep the modal inside the header I can't help You as there's some overflow conflict in header because of translate.
Okay I have 3 divs The outside div is a column. All 3 div heights are dynamically generated by its contents.
<div class="outer" style="display:flex; flex-direction:column; float:left;">
<div class="text 1" style="float:left; flex:1; background:red;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna. Nulla facilisi. Nulla gravida congue viverra. Vivamus maximus lacus dolor, sit amet vestibulum orci maximus tristique. Nam non metus nisl. Mauris gravida magna sed dolor venenatis malesuada. Sed in rutrum erat. Sed dictum est neque, sit amet consequat dolor dictum eget. Fusce sit amet dolor orci. Curabitur tempus vel erat ac dictum. Proin vel congue velit. Nam venenatis erat neque, at convallis mauris eleifend ultrices. In hac habitasse platea dictumst</p></div>
<div class="text 2" style="float:left; flex:1; background:blue;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna.</p></div>
</div>
I have applied inline CSS for display Flex. Im working in Firefox, however I do have the cross browser CSS, but im just focused on getting it working here in Firefox and understanding this first.
The goal of what im trying to accomplish here is to make text 2 the exact same height as text 1.
Im new to this whole flex thing, im fairly certain im doing this completely wrong, ive been reading articles for a few hours and everything I try doesnt work. So im assuming im understanding this all wrong.
Im not sure if it matters, but this is being done within wordpress. Also everything is floating left
I apologize if this is trivial but im at a loss, and Stackoverflow never fails me. Any help would be greatly appreciated.
You are not far from what you wanted to do. Please notice that I removed the white spaces from your class names as white spaces are the separator for multiple classes. .1 and .2 are invalid class names.
You should use flex-direction: row; as you want the layout to be horizontally arranged. I used the flex shorthand property to reach the desired result, which stand for flex-grow, flex-shrink and flex-basis.
.outer
{
display: flex;
flex-wrap: row nowrap;
}
.text1, .text2
{
flex: 1 0;
}
.text1
{
background-color: gray;
}
.text2
{
background-color: darkgray;
}
<div class="outer">
<div class="text1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna. Nulla facilisi. Nulla gravida congue viverra. Vivamus maximus lacus dolor, sit amet vestibulum orci maximus tristique. Nam non metus nisl. Mauris gravida magna sed dolor venenatis malesuada. Sed in rutrum erat. Sed dictum est neque, sit amet consequat dolor dictum eget. Fusce sit amet dolor orci. Curabitur tempus vel erat ac dictum. Proin vel congue velit. Nam venenatis erat neque, at convallis mauris eleifend ultrices. In hac habitasse platea dictumst</p></div>
<div class="text2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna.</p></div>
</div>
Also it is not necessary to use float on flex elements. But it should have no effect what so ever, as of the w3c:
float and clear do not create floating or clearance of flex item, and
do not take it out-of-flow.
I'll try and explain this challenge... I have three divs, ordered for mobile first in a bootstrap WordPress theme.
[1] NAV
[2] CONTENT
[3] SIDEBAR
This code, works fine:
<div class="container">
<div class="row">
<div class="col-md-4"><p>NAV</p></div>
<div class="col-md-6 col-md-pull-right" ><p>MAIN CONTENT : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et diam et erat imperdiet scelerisque ac a leo. Etiam eu ultrices tortor, a aliquet felis. Morbi sit amet placerat mi. Nulla feugiat id sem non faucibus. Nunc tortor turpis, faucibus non nisi sit amet, bibendum tincidunt arcu. Duis id risus porttitor, porttitor massa eget, elementum ligula. Proin ullamcorper, lacus quis porta luctus, dolor enim hendrerit massa, varius gravida est ipsum quis elit. Quisque ex felis, commodo a placerat non, egestas eu turpis. Praesent sit amet lobortis tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta nibh non erat suscipit, et rhoncus mauris finibus. In hac habitasse platea dictumst. Quisque quam mauris, sagittis ut orci eget, tempor sollicitudin nunc. Mauris consequat ex quis dolor viverra, ac dictum eros dapibus.</p></div>
<div class="col-md-4 col-md-pull"><p>SIDEBAR</p></div>
</div>
</div>
However, on full desktop view, the sidebar displays after the main content finishes, and I need it to display directly beneath the left hand side nav - i.e.
[1 ------ NAV -------] [2------------------CONTENT -----------------]
[3 ----SIDEBAR----] [2------------CONTENT CONTINUED-----]
------------------------- [2------------CONTENT CONTINUED-----]
Instead, it displays like this.
[1 ------ NAV -------] [2------------------CONTENT -----------------]
________________[2------------CONTENT CONTINUED-----]
________________[2------------CONTENT CONTINUED-----]
[3 ----SIDEBAR----]
I don't usually do advanced CSS like this, and have been let down by my contractor, if anybody could help, and at least let me know if this is possible or not that would be much appreciated.
Also this is my first post here, so apologies if this isn't in standard format etc.
Regards
Simon
I am making a list of blurbs with images that can be used anywhere throughout our site. I want it to be really flexible, not have a specified width, and work properly with no image and with different sizes of images. If the text for a block is longer than its image, I want the text not to wrap under the image.
I made a fiddle of pretty much exactly how I want it. https://jsfiddle.net/4dbgnqha/1/
Now the problem is, our senior developer told me I can't use overflow:hidden to clear the float or to prevent the wrap because:
"Overflow hidden spawns an object to wrap around the element you specified that on. By doing so it is able to constrain the perceived viewable area on that element. This invokes quarks mode in IE, which has a cascading effect for other elements on that page and how they will be interprited"
So whether or not I agree with that, I can't use it. I also can't use a clearfix hack because he said:
"clearfix dumps before:: and after:: elements into the DOM, we don’t want this sort of thing to be complicating layout, especially when we’re traversing through the DOM dealing with dynamically added elements and potential 3rd party code"
Now, I tried to find a way to build the layout without these hacks, but I haven't quite been able to get it with the constraints I want (no fixed width on the images, or the container).
Here's the sample CSS (with the "hacks"):
.item {
overflow: hidden;
margin-bottom: 20px;
}
.item img {
float:left;
margin-right: 10px;
}
.item p {
margin: 0;
overflow: hidden;
}
For this specific example you could use display: table-row / table-cell (unless your dev has a beef with this too)...
.item {
margin-bottom: 20px;
display: table;
}
.item img {
margin-right: 10px;
display: table-cell;
vertical-align: top;
}
.item p {
margin: 0;
display: table-cell;
vertical-align: top;
}
<div class="container">
<div class="item">
<img src="//placehold.it/100x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
<div class="item">
<img src="//placehold.it/150x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="item">
<img src="//placehold.it/100x200">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
<div class="item">
<img src="//placehold.it/100x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
</div>
Fiddle version
Browser support is pretty universal - CANIUSE