The end result should look something like the picture attached (Link to illustation).
Each part of the picture is individual png images drawn in Illustrator and each of these have their own CSS class.
My problem is how to make the position of each individual block (png) in order to make them look like this.
Which CSS attributes can I play around with to position them like this.
I realized also that they cannot be centered vertically because then they will not appear to be in the middle of each other.
I have used ng-repeat earlier to draw circles (as round div's), but then I get all the circles in only one dimension.
Any ideas how this can be done and what I need to have in mind when doing it?
Fiddle is here: https://jsfiddle.net/tyt4ft3g/1/
Whatever you have attempted is absolutely correct and is the best possible way of doing that object.
Basically you have to provide position: absolute to all your img elements and have a common position: relative parent. You have to position them correctly with the right and bottom properties so that each image appears on the center of its predecessor.
Also, provide a higher z-index to the images on top (i.e the smaller images on the left should have a higher z-index than the ones on the right in decreasing order).
Updated fiddle.
Refer code for a better perspective:
.parent {
width: 300px;
height: 200px;
position: relative;
}
.copper {
height: 30px;
right: 72px;
bottom: 28px;
position: absolute;
z-index: 3;
content: url(http://i.imgur.com/LeIGPou.png);
}
.ins {
height: 60px;
right: 37px;
bottom: 16px;
position: absolute;
z-index: 2;
content: url(http://i.imgur.com/3bMaW3t.png);
}
.power {
height: 70px;
right: 0;
bottom: 16px;
position: absolute;
z-index: 1;
content: url(http://i.imgur.com/jFYquAI.png);
}
<div class="parent">
<img class="copper">
<img class="ins">
<img class="power">
</div>
Related
I have the following website, where a parent div that scales dynamically with browser size contains a child div with an image. The desired effect is as follows: https://shibori-demo.squarespace.com/workshops-shibori/
My pug code is as follows:
article.eventlist-event.eventlist-event--upcoming.eventlist-event--hasimg.eventlist-hasimg.eventlist-event--multiday
a.eventlist-column-thumbnail.content-fill(href=`${link}`)
img(src=`${img_src}`, alt=`${img_src}`
, style='position: static; float:left; width: 100%; object-fit: contain'
)
This code achieves the following effect (the parent div is red for effect): https://lingxiaoling-1.appspot.com/code.
Some examples:
In conclusion I would like the images to be:
1. centered relative to the parent div
2. resize according to the size of the parent div so that it fills the parent div
3. does not overflow the parent div.
There is couple solutions.
a) The easiest way to make it work is to use backgrund-image instead of img tag:
.image {
background-image: url(url-to-image);
background-size: cover;
}
b) If the image proportions are always the seme, you make it work with img:
.parent {
position: relative;
}
.img {
position: absolute;
height: 100%;
width: auto;
top: 0;
left: 0 // or if you want to center it left: 50%; transform: translateX(-50%)
}
c) or you can make a parent the same width-height ratio as parent:
.parent {
width: 100%;
height: 0;
padding-top: cacl(100% * (width of pic / height of pix));
position: relative;
}
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
There are probably many others.
I cannot enter your website, and you didn't provide enough of your markup and styles to reproduce exact problem, so this is all i can recommend from what you wrote above.
If neither solution will solve your problem, you will need to post more markup and css, to get help.
How do you pin items to the place where they appear when they are first encountered on the screen?
I have a few elements that have their position set to absolute. After you first encounter the item, I would like them to become fixed to that position when you continue to scroll on the screen.
(ie, item on the bottom left corner of the screen and would like to keep it pinned there when scrolling after the item is encountered)
I've been using ScrollMagic, but when the items are pinned they are shifted to the middle.
EDIT Figured something out using jQuery
To make an element move with your screen in a fixed position, you can to the following:
yourElement{
position: fixed;
top: 300px;
left: 400px;
}
Hope this helps!
You have to work with layers, take a look:
.layer1{
position: fixed;
z-index: 1000;
bottom: 10px;
left: 10px;
background-color: red;
height: 30px;
width: 30px;
}
.layer2{
height: 1000px;
}
<div class="layer1"></div>
<div class="layer2">
Normal content
</div>
I have an outer "container" div in which I want to position inner divs which, in turn, will contain text (in the form of a "p" element) that is vertically and horizontally centered. It looks like this:
Blue part: section of outer container
Green: The "inner divs," whose black text is, as you can see, indeed vertically and horizontally centered.
I accomplished this with relative positioning:
<div class="container" id="c">
<div id="node1" class="node" style="position: relative; top: 50px; left: 50px;"><p class="numtext" id="node1text">1</p></div>
<div id="node2" class="node" style="position: relative; top: 100px; left: 100px;"><p class="numtext" id="node2text">2</p></div>
<div id="node3" class="node" style="position: relative; top: 150px; left: 150px;"><p class="numtext" id="node3text">3</p></div>
</div>
The relevant sections of the CSS I used follow:
div.container {
margin-left: auto;
margin-right: auto;
position:relative;
overflow-y: auto;
}
div.node {
border-radius: 50%;
text-align: center;
}
p.numtext {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
line-height:100%; /* This vertically centers the text in the parent div, found on stackoverflow */
}
So far, so good. However, the problem is that if I remove the middle "2" node, the position of the "3" node also changes! (Likewise, if I remove the "1" node, the positions of the other 2 change.) It moves up and to the left slightly, but not all the way to where 2 was before. See picture:
Yet, everything else in the code is the EXACT SAME! So I assumed relative positioning had something to do with it, and I was right; if I changed that (for instance, the div lines would now read like:)
<div id="node1" class="node" style="position: absolute; top: 50px; left: 50px;"><p class="numtext" id="node1text">1</p></div>
I get something very different looking:
This, actually, looks closer to what the code "should" output, because the nodes are only separated by a small distance that looks more like 50 pixels (for reference, the size of each node is 75.6px). But, obviously, the vertical alignment of the text is WAY out of whack, and for good reason - the nodes [green] are now positioned absolutely, so the text, which is positioned "relatively," is now positioned relative to the container [light blue], not the node (I don't think I explained that properly, but what I'm referring to is similar to this case, I think: Absolute positioning inside absolute position).
So, I think I need to keep all three elements (outer div, inner div, and inner text) relatively positioned, but I don't know how to make the inner divs' positions independent of each other. Any thoughts?
I am also amenable to solutions that ditch the idea of relative positioning, and absolutely position both the inner div and the text, but I still need the text to be centered within the green circle (however note that the circles also can change size [and the text along with them], and the text may have multiple digits, and maybe I might even want to switch to a different font later on, so it seems like a difficult problem to ensure vertical alignment).
Correct me if I am wrong, but isn't this what you are trying to do?
http://jsfiddle.net/h2h6qro4/
.container {
position: relative;
width: 300px; /* for demo only */
margin: 0 auto;
}
.circle {
position: absolute;
width: 60px; /* whatever your circle size */
line-height: 60px; /* whatever your circle size */
text-align: center;
border-radius: 50%;
background: #a0f4b6;
}
.circle-1 {
top: 50px;
left: 50px;
}
.circle-2 {
top: 100px;
left: 100px;
}
.circle-3 {
top: 150px;
left: 150px;
}
I have asked questions like this and have not really got an answer that really helped me! I know it is probably very easy and i just can't figure it out!
I have been studying jQuery for a few days now and have the basics down but cant create the right function to make this effect happen! Please visit the website below!
There are a few things i would like to know about! The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.) The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
The next part i would like to know is when you click one of the icons a whole another window pops out. I kind of have an idea of how these both happen but i cant put all the pieces together. Please help me out! I know it cannot be that difficult. Even if you know of any jQuery plugins that can help achieve these results, would be even better!
http://intothearctic.gp/en/
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}
you can do that using position: absolute like mentioned by fizzix before, and for each of your question with this html example
<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>
1 The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.)
This can be achieved with jQuery on document ready, and using setTimeout if you want to further delay it, then add a class to the element, like this
CSS :
#sidemenu {
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
jQuery :
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
2 The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
This can be achieved with only CSS on hover, what you need is put the floating element inside the element you want to hover, in this example submenu-inner inside submenu, then add some CSS
#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}
firstly, the inner element is transparent and positioned more to the right using left, then on hover, set the position right beside the container, by setting the left CSS again to the width of the container
3 The next part i would like to know is when you click one of the icons a whole another window pops out
it's the same with number 1, except this one triggered by onClick event
here's the working example on JSFIDDLE
I dont think any plugin is required.
You can use translate to keep the menu hidden.transform:translate(90%)
Please refer this example:JSFIDDLE
The entire site is using absolute positions. This means that they are positioned on the page with pixel co-ordinates. They then using jQuery animate to move the top and left positions.
I have made a brief example of how to do this HERE. You can edit this to your liking.
If you are interested in seeing what the site was built with, you can see a whole list HERE
So I have two images, one is a half of a ribbon and the second one is a full ribbon with facebook etc links on it. I need to have the first one in the middle of a page, so when you click it it would expand out. I figured i need to use hidden overlay or something but I am totally new at javascript.
Can someone provide an example or help me with this?
I tried to understand what you want and tell me if this is what you meant.
You can wrap the two images in two sepatare divs and then wrap them in a div with position relative.
Then you give to the two divs position absolute.
On the click of the first div you change the second div left position (or the top if you want a vertical effect).
Here is the html with divs only:
<div style="position: relative">
<div id="frontDiv">
aaaaaaaaaaaa
</div>
<div id="backDiv">
bbbbbbbbbbb
</div>
</div>
Here the CSS:
#frontDiv{
height: 20px; width: 45px;
background: red; position: absolute;
z-index: 1; left: 0px; top: 0px;
}
#backDiv{
height: 20px; width: 30px;
background: blue; position: absolute;
z-index: 0; left: 0px; top: 0px;
}
And here the javascript (in jQuery):
$("#frontDiv").click(function(){
$("#backDiv").animate({"left":"45px"}, 300); //{"top":"20px"} for vertical effect
});
At the end you can position the wrapper div wherever you want.
Full example at this fiddle: http://jsfiddle.net/w7RVe/