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;
}
Related
I am trying to do something basic (beginner in programming).
I try to take a large image and a smaller container, and move the image up or down inside while the user scrolls.
So you can .
Move the yellow up or down while the user can see the red in the same position (kept in doc flow).
If i create an image using this :
<div class="cvrContainer top left">
<div class="cvrPhoto" id="photo0" style="background-image: url(https://picsum.photos/900/850);"></div>
</div>
Should i set cvrPhoto to be larger then cvrContainer say 200% ?
How do i move it up/down with JS while keeping overflow hidden.
I do not ask how to calculate, only how to set it and move the only yellow inside
If you want to create simple parallax effect, you can achieve this effect by position fixed, add position: fixed on .cvrPhoto div.
.cvrContainer {
padding: 30px;
width: 100%;
height: 2000px;
overflow: auto;
background: url(https://picsum.photos/900/850);
}
.cvrPhoto {
height: 300px;
width: 200px;
position: fixed;
top: 57px;
background: yellow;
}
<div class="cvrContainer style=" background-image: url(https://picsum.photos/900/850); "">
<div class="cvrPhoto"></div>
</div>
I solved it by using css for the inner image (not background image but img tag) :
.prlxPhoto
{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
and move it left/right for example with :
var e = document.getElementById("1");
e.style.marginLeft = equotion+'px';
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.
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>
I have a div, which acts as a page, and it only has a gif. Though the gif appears at the upper left corner of the page. I want to make it appear in the middle of the page. Below you can find my HTML and CSS that I tried, but it doesn't seem to be working.
<div id="correctGIF" data-role="page" data-add-back-btn="false">
<img src="images/correct.gif">
</div>
.correctGIF > img {
position: absolute;
left: 50%;
top: 50%;
}
Assuming that your div is the size of the page and has position:relative then
#correctGIF > img {
position: absolute;
left: 50%;
top: 50%;
display:block;
}
will get you most of the way.
However, what it does is put the top/left corner of the image at the 50% position and so it is not exactly centered.
If you know the size of the image you can adjust it with negative margins like so
margin-top: - [Insert 50% of image height] px;
margin-left: - [Insert 50% of image width] px;
So, for instance
margin-top: -100px;
margin-left: -100px;
for a 200x200 image.
If you do NOT know the size of the image (perhaps you'll be changing it often) then you can dispense with the negative margins and just use.
transform: translate(-50%, -50%);
This adjusts the final position of the image based on its OWN dimensions regardless of what they might be.
You are using class selector instead of id selector in css.
You can change that to id selector as:
#correctGIF > img {
position: absolute;
left: 50%;
top: 50%;
}
Alternatively, you can apply a styling to div to display as table and center it then:
<div style="display:table-cell; vertical-align:middle; text-align:center" data-role="page" data-add-back-btn="false">
<img src="images/correct.gif">
</div>
wrong css selector
#correctGIF > img {
position: absolute;
left: 50%;
top: 50%;
}
I try to create a plugin for personal use, that will place clouds in my web page randomly.
Lets see now what is my idea:
I have create an image with all my clouds.
In my CSS I have create a general class called .cloud that is applyed to all cloud elements and four classes .cloud_1 .cloud_2 .cloud_3 .cloud_4 for each cloud element I like to place in my document.
Here are the css classes I use:
.cloud
{
display: block;
position: absolute;
background: transparent url(../img/clouds.png) no-repeat 0px 0px;
}
.cloud_1
{
width: 800px;
height: 350px;
background-position: 0px 0px;
z-index: 1;
}
.cloud_2
{
width: 800px;
height: 469px;
background-position: 0px -350px;
z-index: 2;
}
.cloud_3
{
width: 800px;
height: 405px;
background-position: 0px -819px;
z-index: 3;
}
.cloud_4
{
width: 630px;
height: 314px;
background-position: 0px -1225px;
z-index: 4;
}
From the other hand I use jQuery to place generate and place my clouds randomly into my document with random top and left.
The problem I have is that, if I set the position to absolute for .cloud selector the clouds that go out of the document width they activating the horizontal scroll bar. If I set it to fixed, the clouds are attached to the same position while I scroll down and so on.
What is the best solution in order to place my clouds with no horizontal scroll bar and not stay fixed in the same position ?
Extra info
I forgot to tell you that the clouds will animated to the right !
Produced code example
<div class="cloud cloud_3"></div>
and jQuery will adding style attributes like that:
<div class="cloud cloud_3" style="top: 280px; left: 120px;"></div>
Also jQuery will change the left css position in order to animated
Place all the clouds in a <div> with overflow: hidden, and make it the full size of your document. Set that div to z-index: -1 so that it is behind the rest of your content.
Put the clouds into a containing div withoverflow: hidden set on it. Then when the left position of the cloud is greater than the width of the containing div, move it back to the left so it will scroll accross to the right again.