I'm trying to place an a book (img2) on a bookshelf (img1), and the following code is positioning the book based on the window and not the position of the bookshelf. I was wondering if anyone knew how to make the book position based on the bookshelf. Right now the book is resizing properly but not positioning itself right.
<style>
.bookcontainer {
}
.img1 {
max-width: 100%;
max-height: 90%;
position: absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
.img2 {
position:absolute;
right: 40%;
top: 15%;
width: 50%;
max-width:50%;
}
</style>
<div class="bookcontainer">
<img class="img1" src="/assets/shelfbg.png">
<img class="img2" src="/assets/book.png">
</div>
The parent container must have the css position set too, so let the bookshelf img define space and let the book be absolute this way:
.bookcontainer {
position: relative;
}
.img1 {
width: 100%;
}
.img2 {
position:absolute;
right: 40%;
top: 15%;
width: 50%;
max-width:50%;
}
That way, using percents you can adjust the book position and size relative to its parent container.
Related
I'm not sure how to position these images on a webpage properly - here's a rough outline of the positioning (the squares are the images).
I know I need to use absolute positioning because the images overlap each other, but I'm not sure how to make this responsive without using a lot of media queries.
Here's the code for my attempt:
<section id="homepage">
<img src={Square} alt="blah" className='image image1'/>
<img src={Square} alt="blah" className='image image2'/>
<img src={Square} alt="blah" className='image image3'/>
</section>
#homepage {
height: 100vh;
background: #ffb6b6;
}
.image {
position: absolute;
width: 20vw;
}
.image1 {
top: 18vh;
left: 27vw;
}
.image2 {
top: 30vh;
left: 50vw;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.image3 {
top: 40vh;
right: 27vw;
}
Any help is really appreciated!
This will work if you want them overlapping but works best in an equal x and y view as shown on your example. If you do not want them overlapping, change the image size to 33.3 Let me know if I have understood your problem correctly.
If you want them to stay fixed then put them in a fixed size container and adjust the image size accordingly, there is enough for you to play around with hopefully.
The images have been placed inside DIVs as it makes positioning easier I think anyway.
body {
padding:0;
margin:0;
background: #ffb6b6;
}
#homepage {
height: 100vh;
width: 100vw;
background: #ffb6b6;
display:flex;
align-items:center;
justify-content:center;
}
.image {
width: 50vw;
height: auto;
}
.image1 {
position:absolute;
z-index:1;
top: 0;
left:0;
}
.image2 {
position: absolute;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
}
.image3 {
position:absolute;
z-index:3;
bottom:0;
right:0;
}
<div id="homepage">
<div class='image1'><img src='https://randomuser.me/api/portraits/med/men/41.jpg' alt="blah" class='image'/></div>
<div class='image2'><img src='https://randomuser.me/api/portraits/med/men/42.jpg' alt="blah" class='image'/></div>
<div class='image3'><img src='https://randomuser.me/api/portraits/med/men/43.jpg' alt="blah" class='image'/></div>
</div>
I have looked up some tips about how to center a div in the middle of the page. I used this method:
width: 750px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -375px;
So, now that the div is in the middle of the page, I need some images inside of it to line up directly on top of one another. If I do this, I can fade them out using jQuery, revealing the new image.
Now, I tried many different techniques to line them up, but none work when they are centered like this.
HTML:
<div class="choose" align="center">
<h2 id="question">Rock, paper, or scissors?</h2>
<img src="Images/Rock.png" id="rock">
<img src="Images/Result/Red Rock.png" id="Selected" style="opacity:1">
<img src="Images/Paper.png" id="paper">
<img src="Images/Result/Red Paper.png" id="Selected" style="opacity:1">
<img src="Images/Scissors.png" id="scissors">
<img src="Images/Result/Red Scissors.png" id="Selected" style="opacity:1">
</div>
CSS:
.choose {
width: 750px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -375px;
}
.choose img {
margin-left: 5px;
margin-right: 5px;
width: 150px;
}
How do I do it?
This is a rock paper scissors game if you hadn't noticed. Here's what I've made so far.
You can position the images with absolute in the same coordinates so they stack on top of each other.
When your element has a specific width, left:0; right:0; margin:auto; is a cool way to horizontally center it in its relative parent. Same method works for vertical centering.
.choose img {
width:150px;
height:150px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
You can also use this method to offset elements from the center.
.choose img.rock {
left:-300px;
}
.choose img.sci {
left:300px;
}
Rock will be 300 to the left and scissors 300 to the right.
http://jsfiddle.net/P8g3C/
I am trying to create the layout above. I am not getting the scroll bar to the right side of the content.
Also, suggest if there is any alternate way which better than my current approach
My html code is
<div class="header"></div>
<div class="content">
<div class="content-left">Menu</div>
<div class="content-right">Content which should be scrollable</div>
</div>
<div class="footer"></div>
My CSS is
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.header {
position: fixed;
width: 100%;
height: 100px;
top: 0;
left: 0;
background-color: aqua;
}
.content {
position: fixed;
top: 100px;
bottom: 35px;
left: 0;
width: 100%;
}
.content-left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height:100%;
background-color: aquamarine;
}
.content-right{
position:absolute;
top:0;
left:200px;
width:100%;
height:100%;
overflow:auto;
background-color:blanchedalmond;
}
.footer {
position: fixed;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: yellow;
}
You can just remove width:100% of .content-right:
Update:
Because you use absolute positiong for the .content-right we can just set the left and right for it to make the width dynamic:
.content-right{
position:absolute;
top:0;
/* add this */
right:0;
left:200px;
height:100%;
overflow:auto;
background-color:blanchedalmond;
}
Demo.
It's because you are assigning a width of 100% to .content-right, yet already occupy 200px with the menu column, hence pushing the scrollbar off.
Try this:
.content-right {
width:calc(100% -200px);
}
Alternately, you can remove the width property altogether, as #King King suggested
Here's a Fiddle of your original demo code showing the fix in action.
Please correct a width of class .content-right{ width:61%;}. because you have give a width of 100% that why you are not able to see a overflow scroll.
I've been sitting at this problem now for about 4h. Way to long I suppose. So here I am:
I would like to distribute div containers vertically as soon as the viewport exceeds a specific height. Here's a sketch of an example.
HTML:
<div class="bubu">
<div class="center1"></div>
<div class="center2">
<div class="element"></div>
</div>
<div class="center3"></div>
<div class="center4">
<div class="element"></div>
</div>
<div class="center5"></div>
</div>
CSS:
* {
margin:0;
padding:0
}
body {
margin:0;
text-align:center;
background: no-repeat fixed center center #030303;
allowtransparency:true
}
.bubu {
background-color:#eee;
position: absolute;
height: 100%;
width:500px;
left: 50%;
margin-left: -275px;
/* width / 2 */
}
.center1 {
background-color:red;
position: relative;
height: 10%;
width:100%
}
.center2 {
background-color:yellow;
position: relative;
height: 35%;
width:100%
}
.center3 {
background-color:red;
position: relative;
height: 10%;
width:100%
}
.center4 {
background-color:yellow;
position: relative;
height: 35%;
width:100%
}
.center5 {
background-color:red;
position: relative;
height: 10%;
width:100%
}
.element {
background-color:#123456;
position: absolute;
height: 250px;
width:500px;
top:50%;
margin-top: -125px;
/* width / 2 */
}
Since margin:auto 0; will not do the job (will convert to 0 in height) I tried all different kinds of solutions. This (jsfiddle) is the one that only came close to it.
What I did was basically to add five classes, three of them height:10%; and two of them containing my containers height:35%;
Everything surrounded by one container height:100%;
As you can see, every time the container expands (my example size) off 500px the center expands twice.
How on earth can I solve this??
I assume you want to do some responsive design.
So what about using bootstrap?
It has a very flexible Grid system and it works out of the box on the most devices.
I have looked all over the web for this answer but it seems to me that in order to horizontally center an image in div with absolute position, I need to know the dimensions of the image, but it's dynamic.
Here is my html:
<header>
<div id="elogo">
<img src="http://www.ftiweb.com/images/eStore/eStore_wht50.png">
</div>
<div id="nav">TOUR | MENU</div>
</header>
<div id="content">
<img class="ipad" src="http://ftiweb.com/images/eStore/Ipad_hand.png">
</div>
<footer>
<div id="foot">© FTIeStore 2013 • Privacy Policy</div>
</footer>
and here is the .css I'm using:
#content {
width: 70%;
height: 80%;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -35%;
display: table-cell;
img.ipad {
max-width: 100%;
max-height: 100%;
position: absolute;
bottom: 0px;
display: block;
}
The goal is just to have the image stay at the bottom/center of the page and re-size to fit the browser window. If I'm over-complicating this, please feel free to suggest an alternative.
Here is a link to a js.fiddle:
bottom-centered img - js.fiddle
If you want it to be absolute position do it like this:
http://jsbin.com/aveped/1/edit
img {
width:20%;
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
margin:auto;
}
The parent needs to have position relative, or it will be positioned against the body.
You dont need width for this, I just included width because my image is so big.
left = center position - half the width of the image
img {
position: absolute;
bottom: 0;
left: 50%; /*half the container width*/
margin-left: -250px; /*half the width of the image*/
}