http://tree-leaves.comuf.com/
In this website, I want to fix the leaves position just over the branchs of the tree in spite of resizing the window.
For this, I used percentage in the CSS positioning, but when I resize the window, I can see that the leaves aren't perfectly aligned with the branchs.
How can I do to position the leaves with more precision, knowing that the tree and the leaves change their dimensions when we resize the window ?
HTML code :
<pre>
<div id="leaves">
<img src="images/leaf1.svg" id="l_1">
<img src="images/leaf1.svg" id="l_2">
<img src="images/leaf1.svg" id="l_3">
</div>
<div id="content">
<img src="images/tree.svg" id="tree">
</div>
</pre>
CSS code :
#content {
float: left;
width: 100%;
text-align: center;
background: linear-gradient(to bottom, transparent 0%,transparent 85%,#893700 85%,#893700 100%);
}
#tree {
width: 80%;
left: 10%;
z-index: 10;
}
#leaves {
background-color: red;
}
#leaves img {
width: 5%;
}
#l_1 {
margin: 0;
margin-bottom: -4%;
margin-left:5.7%;
transform: rotate(-35deg);
}
#l_2 {
margin: 0;
margin-bottom: 0%;
margin-left: 12.9%;
}
#l_3 {
margin: 0;
margin-bottom: -4%;
margin-left: 7%;
transform: rotate(-5deg);
}
What you can try is using viewport units, such as vw. I have played around seems working good, i.e. for first leaf on the left:
#f_1 {
margin-bottom: -4vw;
margin-left: 5.7vw;
transform: rotate(-35deg);
}
You can just use browser Web Inspector/Developer Tools to adjust the values for each leaf, and save it when you're happy with them all. Obviously, you can also do it on the branches too.
http://caniuse.com/#feat=viewport-units
Related
TL;DR: How to keep the div children proportional to the div itself?
I have a div, containing various elements like text, images, icons etc. It keeps 16:9 aspect ratio and fills as much viewport it can, while resizing the browser window, the div (with background different from the body background) changes size well, though the contents are staying the same size which is bad because I'm trying to make a presentation website which needs to look the same at various resolutions. How do I make the child elements align and resize properly inside the div?
I tried using viewport units though it didn't turn out really well.
My Code:
I tried using % units to set font size and then use em to scale other things but it didn't work. I also tried using only % units to set all properties but it did not work either
body {
background: black;
user-select: none;
margin: 0;
height: 100vh;
}
.container2 {
overflow: auto;
box-sizing: border-box;
resize: both;
overflow: auto;
max-width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.presentation-place {
user-select: none;
background: white;
top: 50%;
transform: translate(0, -50%);
position: absolute;
align-items: center;
aspect-ratio: 16 / 9;
}
#media screen and (max-aspect-ratio: 16 / 9) {
.presentation-place {
width: 100vw;
}
}
#media screen and (min-aspect-ratio: 16 / 9) {
.presentation-place {
height: 100vh;
}
}
.slide {
font-size: 100%;
position: absolute;
top: 0;
bottom: 0;
margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;
background: red;
background-position: center center;
}
.title1 {
margin-left: 1em;
font-size: 6em;
position: absolute;
margin-top: 2em;
}
<html>
<body>
<div class="container">
<div class="presentation-place">
<div class="slide s1">
<h1 class="title1">test</h1>
</div>
</div>
</div>
</body>
</html>
Make sure to avoid specific units like cm, px etc because those are fixed units no matter the scale of the site itself or the monitor, the use of Units like % since vh/vw didnt work. % scales relative to the size of the monitor or website, so this should help. Alternativly you could use aspect-ratio because it scales relative to the size of the parent element
I need help keeping my CSS tooltip on screen for my website. It unfortunately is too big for the website near the edge of the screen and also is WAY too big for any mobile device and doesn't position correctly (probably because I plan to add very large descriptions in each tooltip). I would like to just use CSS but would be willing to use JS as I'm starting to think that may be the only way to do it correctly, but I'm having a lot of trouble figuring out how to make it work.
I basically had copied over the code from another website with many tweaks if it helps you understand my code better: https://www.w3schools.com/css/css_tooltip.asp
The only results I could find online were about centering the tooltip on the screen which strangely didn't work and code using SCSS which I'm not experienced with and would prefer not to use.
Here is my partial HTML and CSS code:
body {
overflow-x: hidden;
overflow-y: scroll;
}
.ref {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.ref .versekjv {
visibility: hidden;
width: 250px;
background-color: black;
color: #fff;
text-align: left;
padding: 5px;
border-radius: 6px;
z-index: 98;
position: absolute;
top: 100%;
left: 50%;
margin-left: -125px;
flex-direction: column;
}
.ref .versekjv::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.ref:hover .versekjv {
visibility: visible;
}
.redletters {
color:red;
}
#media screen and (max-width:1000px){
.ref .versekjv {
font-size: 1rem;
max-width: 20rem;
position: fixed;
bottom: auto; top: 13%;
left: 78%;
text-align: left;
transform: translate(-50%);
transform: translateX(-50%);
white-space: normal;
z-index: 98;
}
.ref .versekjv::after {
border-color: transparent;
}
}
<li class="box"><a>
<div class="innerbox">Reference</div>
<div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u></div>
<div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u>; <u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>Verse Num.</i> Verse Text</p></span></u></div>
</a></li>
Thank you so much for your help!
First, you need to get the DOM object of your tooltip,
let tooltip = document.querySelector(".ref .versekjv")
Then, you can use the js method "getBoundingClientRect", which gives you an object that has top, right, left and bottom fields which give you the distances of your element from top, right, left and bottom of the viewport. If your element is fully visible inside the element, all four fields would be positive numbers, otherwise it means it's partly invisible, for example a left field of "-10" means about 10px of length of your elements is beyond the left edge of the viewport.
What you can do is that you always check the top, left, ... distances of your element, and if they are negative numbers, manually change them and thus position your element correctly, which could be achieved like this:
tooltip.style.left = 20
My engagement-filtercontainer div used to sit directly above my engagement-graphcontainer unless it was expanded via button click, in which case it drops down into the graphcontainer overlapping. Now the engagement-filtercontainer has grown in size because of additional content and it overlaps my graph container which contained my svg. I need it to dynamically not do this even if my filter increases in size.
I have some divs that are contained in this order:
<div class="Engagement-Container">
<div class="Engagement-Body">
<div class="Engagement-Graph" id="graph">
<div class="Engagement-FilterContainer"
</div>
<div class="Engagement-GraphContainer"
<svg
class="Engagement-GraphSVG"
xmlns="http://www.w3.org/2000/svg"
version="1.1 ">
</svg>
</div>
</div>
</div>
</div>
Notice that the engagement-filtercontainer and graphcontainer are both within the engagement-graph div, and that my svg is contained within the graphcontainer.
In the below image you can see that the filter now with more content expands into the area (I have hidden with css thats why im showing it in dev mode, ive tried various methods to work around this but I think i need a definitive solution.
The CSS:
engagement-graph(parent div)
.Engagement-Graph {
position: absolute;
width: 100%;
height: 100%;
font-size: 100%;
vertical-align: baseline;
overflow: hidden;
#include tablet() {
width: 65%;
}
}
Engagement-graph-container (contains the svg graph that i want to protect from unwanted overlap)
.Engagement-GraphContainer {
position: relative;
width: 100%;
height: calc(100% - 56px);
top: 0;
background-color: $gray-bg-color;
transition: height $filter-slide-duration, top $filter-slide-duration;
#include tablet() {
background-color: white;
height: 100%;
}
svg {
width: 100%;
height: 100%;
}
&--WithFilter {
height: calc(100% - 480px) !important;
top: 480px !important;
#include landscape {
height: calc(100% - 436px) !important;
top: 436px !important;
}
}
}
Filter-container (that is overlapping)
.Engagement-FilterContainer {
overflow: overlay;
display: table;
position: absolute;
width: 100%;
z-index: 10;
transition: transform $filter-slide-duration;
transform: translateY(-486px);
visibility: hidden;
&--Visible {
transform: translateY(0) !important;
}
#include landscape {
transform: translateY(-436px);
}
}
I wish for the filter to work as usual so when its expanded it will appear into the screen but when it is not, I don't want it encroaching upon the graph, no matter how large it gets. When the filter was smaller it was fine it never came into the screen, so it must not be dynamic in how it is sized.
Thank you if you can help.
I'm doing a single page application where you're suppose to be able to open multiple customized windows on the page(not browser tabs/windows, but windows created with DOM). I want the windows to stack on top of each-other with a certain XY-offset. I've tried added a transform: translate(5%, 5%)to the divs after the first div, but it simply isn't working.
I want them to stack like this:
But right now, they´re just stacking on top of each other.
HTML:
<main>
<div class=window><div class=app></div></div>
<div class=window><div class=app></div></div>
<div class=window><div class=app></div></div>
</main>
CSS:
main {
transition: margin-left .5s;
padding: 20px;
position: fixed;
margin-left: 100px;
width: 100%;
height: 100%;
top: 0;
}
.window {
z-index: 1;
left: 0;
top: 0;
width: 250px;
height: 400px;
}
Any ideas?
Try adding position: absolute to all the divs and use left: <num>px and top: <num>px to position them. Make sure the containing element is position: relative, otherwise the divs will be absolutely positioned relative to the "viewport".
See this article for more on absolute positioning.
Ok, this works with some caveats: http://codepen.io/anon/pen/dNbqgE
html:
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
css:
.card {
width: 100px;
height: 200px;
outline: 1px solid #cc0000;
position: absolute;
background: #ddd;
}
.card:nth-of-type(n + 1) {
transform: translate(5%, 5%);
}
.card:nth-of-type(n + 2) {
transform: translate(10%, 10%);
}
.card:nth-of-type(n + 3) {
transform: translate(15%, 15%);
}
.card:nth-of-type(n + 4) {
transform: translate(20%, 20%);
}
.card:nth-of-type(n + 5) {
transform: translate(25%, 25%);
}
The caveat is that you have to define a new nth-of-type rule for each level of card you need. If you're using less, sass, or other css build tool you can pretty easily setup a macro to generate any number of these.
transform: translate(...) applies to the element itself, not to the parent, so maybe that's the case it doesn't work for you. I would use a similar approach like the one mentioned by Jason Cemra. Check out this another answer, maybe it helps you: How to use transform:translateX to move a child element horizontally 100% across the parent
to position of window div's, we have to set x-y position relative to a known reference. if all win div's are in a same parent, we have use different offset for them: eg: transform: translate(5%, 5%); for first div, transform: translate(10%, 10%); for second div, and so on.
another way is to nest them in each other such that the same value of offset can be used for all divs, but as their parent have different position, they get desired position:
<html>
<head>
<style type="text/css">
#main {
transition: margin-left .5s;
padding: 20px;
position: fixed;
margin-left: 100px;
width: 800px;
height: 500px;
top: 0;
}
.window {
position:absolute;
z-index: 1;
left: 0;
top: 0;
width: 250px;
height: 400px;
border:1px solid navy;
transform: translate(5%, 5%); /* this is relative to current position */
}
</style>
</head>
<body>
<div id=main>
<div class=window><div class=app>w1</div>
<div class=window><div class=app>w2</div>
<div class=window><div class=app>w3</div>
</div>
</div>
</div>
</div>
</body>
</html>
I use Bootstrap 3.3.4 and I want to know which way is better to align texts or items in carousel.
here is a exemple from a slider. How can I align text like this and stay at any screen resolution at the same place. I use top: x, right: x but every time when I resize the window, text climb above and not stay at middle anymore.
CSS for align
.carousel-caption {
position: absolute;
right: 15%;
bottom: 40%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
Just basic bootstrap slider. But If I use bottom 40% for exemple to rise text at middle of the page works. But if I use smaller displays the text rise and stay almost on top.
In this exemple text stay fixed on every device.
<div class="wrap">
<div class="display-table">
<div class="display-cell">
<h1>Title in here</h1>
</div>
</div>
</div>
<style>
.wrap {
width: 100%;
height: 400px;
}
.display-table {
width: 100%;
height: 100%;
display: table;
}
.display-cell {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
</style>
This allows fixed vertical alignment and should work cross browser. Just note the fixed height applied to .wrap must be present for the children to inherit 100% height!
Hope this helps :)
Hope, Try this demo that centers text vertically in the Bootstrap carousel.
Here is the Fiddle.
All I do here is give the div a height that contains the text and then position it with this css...
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}