Hey guys i really need some help here:)
my problem is that i got 2 dynamic width div's inside a div, they go from 460 to 640px (just an example) and my site spands from 960px to 1300px, so when my site is 1300px wide i want both div's to be on the same line with a width of 640px, and when the site is 960px i want the div's to be on the same line with a width of 460px.
my problem is that, when the sites get smaller (dragging the width of the browser), they drop below each other.
here is some code: http://jsfiddle.net/EKYLe/2/
Here is the html:
<div class="Content">
<div class="box-container">
<div class="box">
<h2>Nyheder</h2>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
<div class="box">
<h2>Nyheder</h2>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
as you can see when u move the size of the windows they drop blow each other.
regards Nicklas
If you want to control their position, you should put them inside a table. That way they always will remain in column 1 and column 2 of the tablerow. And you can align them inside the page without much trouble.
Related
I am trying to indent elements based on the heading tag they are under. I am doing this currently by using the sibling selector:
p{
padding-left: 0;
}
h1 + p, h1 + ul{
padding-left: 1em;
}
h2 + p{
padding-left: 2em;
}
However if have two or more paragraphs under a heading then the padding defaults back to zero.
Is there a way to set padding of all elements under h1 tag to the same value and all elements under the h1 tag to a different value (only using CSS)?
Thanks for the help!
You could do something like this:
h1+div {
padding-left: 1rem;
}
h2+div {
padding-left: 2rem;
}
<h1>My Title</h1>
<div>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
</div>
<h2>My Title</h2>
<div>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
</div>
There is also a way to achieve the same effect using only CSS, but I wont especially reccommend it:
h1 ~ p, h1 ~ ul {
padding-left: 1rem;
}
h2 ~ p, h2 ~ ul {
padding-left: 2rem;
}
<h1>My title</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<h2>My title</h2>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 2 years ago.
I am trying to achieve the fluid height of the .flex-item containers according to the content pushed into them , beside also maintaining the display: flex behavior in it such that there is no whitespace left horizontally or vertically between the .flex-item and packing them beside each other in all the space provided.
As you run the code and observe the output i do not want to affect my second .flex-item due to the lengthy content in the first .flex-item, it should stick to the height of it's content and yet be aligned to other flex-items.
<!DOCTYPE html>
<head>
<title>question</title>
<style>
body{
display: flex;
flex-wrap: wrap;
}
div.flex-item{
width: 200px;
text-align: center;
background: linear-gradient(180deg, #eeeeee, #cccccc);
border: 1px solid #efefef;
margin: 12px;
}
</style>
</head>
<body>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
</body>
The align-items property set to flex-start will resolve this issue.
However, if you want the items lower items to fill out the empty space in the right column, you will need to use a Javascript library such as Masonry (https://masonry.desandro.com/).
<!DOCTYPE html>
<head>
<title>question</title>
<style>
body{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
div.flex-item{
width: 200px;
text-align: center;
background: linear-gradient(180deg, #eeeeee, #cccccc);
border: 1px solid #efefef;
margin: 12px;
}
</style>
</head>
<body>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
</body>
I need to stack few sticky header elements like this:
https://webthemez.com/demo/sticky-multi-header-scroll/index.html
There are solutions for this question in stackover in here. But in my case my sticky headers have dynamic heights. Therefore not possible to hard code top position for stick headers. My code is like below:
html
<div class="sticky-header1">
Header 1 with dynamic height
</div>
<div>
Header 1 content
</div>
<div class="sticky-header2">
Header 2 with dynamic height
</div>
<div>
Header 2 content
</div>
css
.sticky-header1,
.sticky-header2
{
position: sticky;
}
Is it possible to set stacked sticky header in this scenario? Pure CSS solution is preferred.
maybe u need to use javascript like this:
firstdiv =document.querySelector(".first");
secondiv =document.querySelector(".second");
thirdiv = document.querySelector(".third");
const fheight = firstdiv.offsetHeight;
const sheight = secondiv.offsetHeight;
secondiv.style.top= `${fheight}px`;
thirdiv.style.top= `${fheight+sheight}px`;
body {
margin:0;
min-height:200vh;
border:2px solid;
}
.first {
height:50px;
background:red;
position:sticky;
top:0;
}
.second {
height:60px;
background:blue;
position:sticky;
}
.third {
height:80px;
background:green;
position:sticky;
}
<div class="first"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="second"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="third"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
I don't think you can achieve that only with CSS. Even if you ever managed to it will be very fragile and you need to have into account that there's some browsers that won't accept the sticky position! I would go with a javascript based solutions instead
It is not possible using pure CSS, you when if the known or constant height element and not increase element then it's possible (it's not good). Another way you use simple javascript and just calculation for element height and set CSS position top property.
Is there a more elegant way of achieving this via CSS? The idea is to shape text like an Arc.
Thanks!
#p1 {
text-indent: 0;
}
#p2 {
text-indent: 10px;
}
#p3 {
text-indent: 20px;
}
#p4 {
text-indent: 30px;
}
#p5 {
text-indent: 40px;
}
#p6 {
text-indent: 30px;
}
#p7 {
text-indent: 20px;
}
#p8 {
text-indent: 10px;
}
#p9 {
text-indent: 0px;
}
<p id="p1">Lorem ipsum dolor sit amet</p>
<p id="p2">Lorem ipsum dolor sit amet</p>
<p id="p3">Lorem ipsum dolor sit amet</p>
<p id="p4">Lorem ipsum dolor sit amet</p>
<p id="p5">Lorem ipsum dolor sit amet</p>
<p id="p6">Lorem ipsum dolor sit amet</p>
<p id="p7">Lorem ipsum dolor sit amet</p>
<p id="p8">Lorem ipsum dolor sit amet</p>
<p id="p9">Lorem ipsum dolor sit amet</p>
If you want a perfect arc you can use shape-outside to create a circle or ellipse that the text will follow.
You can see how this works
However support is spotty to say the least.
div{
shape-outside: circle(50%);
width: 140px;
height: 140px;
float: left;
}
<div></div>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
You can achieve the same result with one class and one rule on that class. The trick is to repeat the elements inside each other:
.blubb {
margin: 5px 0 5px 10px;
}
<div class="blubb">
Lorem ipsum dolor sit amet
<div class="blubb">
Lorem ipsum dolor sit amet
<div class="blubb">
Lorem ipsum dolor sit amet
<div class="blubb">
Lorem ipsum dolor sit amet
<div class="blubb">Lorem ipsum dolor sit amet</div>
</div>
<div class="blubb">Lorem ipsum dolor sit amet</div>
</div>
<div class="blubb">Lorem ipsum dolor sit amet</div>
</div>
<div class="blubb">Lorem ipsum dolor sit amet</div>
</div>
<div class="blubb">Lorem ipsum dolor sit amet</div>
As Dale said, use shape-outside for a pure css solution. However due to browser support we have to find a lower-level solution.
Contains comments for non-jQuery solution, code contains jQuery.
var ps = 9;//paragraphs
var i = 1;//start id
var x = 0;//left position
var amount = 50;
for(i=1;i<ps;i++){
//calculate left position in arc
//(i/ps) gets value between 0 and 1, Math.PI is to make it radians for sine, *amount is max indent
//bearing in mind this bit can be changed to give more desired effect.
x = Math.sin(((i-1)/(ps-1))*Math.PI)*amount;
//get element using jquery and set its text-indent to x
//otherwise you could use document.getElementById('p'+i); and textIndent JS property if you dont want jQuery.
$('#p'+i).css('text-indent', x+'px');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1">Lorem ipsum dolor sit amet</p>
<p id="p2">Lorem ipsum dolor sit amet</p>
<p id="p3">Lorem ipsum dolor sit amet</p>
<p id="p4">Lorem ipsum dolor sit amet</p>
<p id="p5">Lorem ipsum dolor sit amet</p>
<p id="p6">Lorem ipsum dolor sit amet</p>
<p id="p7">Lorem ipsum dolor sit amet</p>
<p id="p8">Lorem ipsum dolor sit amet</p>
<p id="p9">Lorem ipsum dolor sit amet</p>
I have a tooltip div, which has modified border on top to look like arrow, which is done by some before and after attributes. But when I use overflow: auto on that div, that "arrow" disappears.
How it should looks without overflow:auto;:
http://jsfiddle.net/nmvh4L6g/1/
How it looks with overflow: auto;:
http://jsfiddle.net/nmvh4L6g/2/
Sorry for my english and thanks for any help!
In top of my head, you can use an internal div, like:
<div id="tooltipNotifikace">
<div>Lorem impsum dolor sit amet</div>
</div>
And in CSS, you use the overflow in the internal div:
#tooltipNotifikace > div {
max-height: 500px;
overflow-y: auto;
}
JSFiddle: http://jsfiddle.net/nmvh4L6g/7/
You don't really need to set the overflow-y to auto. The tooltip will adjust its height automatically until it reaches the max-height value of 500px you have set.
Edit:
I guess I'm feeling magnanimous today:
/* Based on http://css-tricks.com/bubble-point-tooltips-with-css3-jquery/ */
.tooltipWrap {
position: fixed;
right: 6px;
top: 20px;
}
#tooltipNotifikace, .arrow:after {
background: #fff;
border: 2px solid #0dbe48;
}
#tooltipNotifikace {
color: #1bc204;
text-align: center;
padding: 0px 0px 0px 0px;
width: 350px;
max-height: 300px;
overflow-y: auto;
background: #fff;
border: 2px solid #0dbe48;
z-index:1;
}
.arrow {
width: 70px;
height: 18px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
top: -16px;
}
.arrow:after {
content: " ";
position: absolute;
left: 20px;
top: 10px;
width: 25px;
height: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
z-index:2;
}
<div class="tooltipWrap"><div id="tooltipNotifikace">Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet.</div><div class="arrow"></div></div>
JSFiddle.