css image left not working - html

I do not know why my left is not working on image.
it's not working if i try with #new_index_body_slide_image_2, nor with #new_index_body_slide_image_2 img
Here is my code:
#index_content {
position: absolute;
top: 200px;
}
#new_index_body_slide_image_2 {
position: absolute;
left: 30px; //not working
}
<div id="body" style="height:600px">
<div id="index_content">
<div id="index_content_slide">
<div id="new_index_body_slide_image_1">
<img src="images/content_img/kuca2.jpg">
</div>
<div id="new_index_body_slide_image_2">
<img src="images/content_img/new_gips.jpg">
</div>
</div>
<button onclick="test()">Click me</button>
</div>
</div>

It's working absolutely fine. By default div's will be rendered as block, so the second image will be positioned on the next line and 30px away from the left.
Explanation for the issue:
#index_content {
position: absolute;
top: 200px;
}
#new_index_body_slide_image_2 {
position: absolute;
left: 30px; //not working
}
img {
border: 1px solid red;
}
<div id="body" style="height:600px">
<div id="index_content">
<div id="index_content_slide">
<div id="new_index_body_slide_image_1">
<img src="http://i.imgur.com/8MqehqH.png">
</div>
<div id="new_index_body_slide_image_2">
<img src="http://i.imgur.com/pNgIqxQ.png">
</div>
</div>
<button onclick="test()">Click me</button>
</div>
</div>
In case you wish to position the images next to each other(on the same row). Try top: 0 on the second image.
Positioning image side by side:
#index_content {
position: absolute;
top: 200px;
}
#new_index_body_slide_image_2 {
position: absolute;
top: 0;
left: 30px;
/* not working */
}
img {
border: 1px solid red;
}
<div id="body" style="height:600px">
<div id="index_content">
<div id="index_content_slide">
<div id="new_index_body_slide_image_1">
<img src="http://i.imgur.com/8MqehqH.png">
</div>
<div id="new_index_body_slide_image_2">
<img src="http://i.imgur.com/pNgIqxQ.png">
</div>
</div>
<button onclick="test()">Click me</button>
</div>
</div>

change it to position:relative

Related

How do I get one div on top of my other div?

I'm trying to get the div with the product name amount price and total to the top of the div it's nestled in, but changing the position isn't working. Stuff like vertical alignment didn't work for me either. I made a screenshot of the page, the buttons are in the right place, it's just the sort of table that has to move to the top of the screen. This has to contain all kinds of products later on.
this is the html:
<div class="checkout">
<div class="container-fluid" style="position: absolute; bottom: 0;">
<!-- Added products overview-->
<div class="checkoutTable">
<div class="row">
<div class="col-4">Product Name</div>
<div class="col-2">Amount</div>
<div class="col-3">Price</div>
<div class="col-3 ">Total</div>
</div>
<hr style="background-color:white;">
<div class="row">
<div class="col-4">Product Name</div>
<div class="col-2">Amount</div>
<div class="col-3">Price</div>
<div class="col-3 ">Total</div>
</div>
</div>
<!-- -->
<!-- Buttons -->
<div class="row">
<a class="checkoutBtn" href="">
<div class="col-12 checkoutBtn">
<i class="fa fa-shopping-cart"></i> Checkout
</div>
</a>
</div>
<div class="row">
<a class="addDiscountBtn" href="#">
<div class="col-6-xs addDiscountBtn">
% Add Discount
</div>
</a>
<a class="cancelBtn" href="#">
<div class="col-6-xs cancelBtn">
<i class="fa fa-ban"></i> Cancel
</div>
</a>
</div>
</div>
</div>
This is the css:
.checkout{
background-color: #22303e;
height: calc(100vh - 50px);
color: white;
font-size: 13px;
}
.checkoutBtn{
background-color: #0090e3; height: 50px;
text-align: center;
line-height: 50px
}
.addDiscountBtn{
background-color:#f8ac59; height: 50px;
text-align: center;
line-height: 50px
}
.cancelBtn{
background-color: #ed5565; height: 50px;
text-align: center;
line-height: 50px
}
a.checkoutBtn{
width: 100%;
color: white;
}
a.addDiscountBtn{
width: 50%;
color: white;
}
a.cancelBtn{
width: 50%;
color: white;
}
a:hover{
text-decoration: none;
opacity: 0.9;
}
.checkoutTable{
vertical-align:top;
}
For container-fluid, do not use any inline styling like you are using style="position: absolute; bottom: 0;"
Example
<div class="checkout">
<div class="container-fluid"></div>
You are placing your div
<div class="checkoutTable">
in parent div
<div class="container-fluid" style="position: absolute; bottom: 0;">
And here the style= "bottom: 0;" that is making everything in it to go at the bottom of the page.
<div class="checkoutTable">
<!--content-->
</div>
<div class="container-fluid" style="position: absolute; bottom: 0;">
<!--content-->
</div>
there is more than one solution for this issue
you can add position like
.Class {
position : absolute;
top : 0;
}
.Class {
position :fixed;
top : 0;
}

Rotate and place element flush to parent element's edge, regardless of content length

How can the tabs be always positioned flush to the right hand side of the container, when rotated and have child text of an unknown width?
Without rotation right: 0; on the .tab would be fine but the rotation throws it off.
body {
margin: 0;
}
.container {
background-color: pink;
padding: 3rem;
position: relative;
}
.tab {
position: absolute;
right: 1rem;
transform: rotate(-90deg);
padding: 1rem;
background-color: green;
margin-right: -2.45rem;
top: 5rem;
}
<body>
<div class="container">
<h1>Button</h1>
<div class="tab">
<button class="tab-button" type="button">Button</button>
</div>
</div>
<hr>
<div class="container">
<h1>Longer button</h1>
<div class="tab">
<button class="tab-button" type="button">Longer Button</button>
</div>
</div>
</body>
Adjust the transform-origin and add some translation then you can use right:0.
body {
margin: 0;
}
.container {
background-color: pink;
padding: 3rem;
position: relative;
}
.tab {
position: absolute;
right: 0;
transform: rotate(-90deg) translateY(-100%);
transform-origin: top right;
padding: 1rem;
background-color: green;
top: 2rem;
}
<div class="container">
<h1>Button</h1>
<div class="tab">
<button class="tab-button" type="button">Button</button>
</div>
</div>
<hr>
<div class="container">
<h1>Longer button</h1>
<div class="tab">
<button class="tab-button" type="button">Longer Button</button>
</div>
</div>
body {
margin: 0;
}
.container {
background-color: pink;
padding: 3rem;
position: relative;
}
.tab {
position: absolute;
right: -39px;
transform: rotate(-90deg);
padding: 1rem;
background-color: green;
top: 5rem;
min-width: 100px;
}
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js">
</script>
</head>
<body>
<div class="container">
<h1>Button</h1>
<div class="tab">
<button class="tab-button" style="width: 100%; white-space: nowrap" type="button">Button</button>
</div>
</div>
<hr>
<div class="container">
<h1>Longer button</h1>
<div class="tab">
<button class="tab-button" style="width: 100%; white-space: nowrap" type="button">Longer Button</button>
</div>
</div>
</body>
</html>

Why is overlay unresponsive?

So i have a container/div in which i have six photos in it. In every photo i want to have an overlay when i hover over it. But the overlay covers the entire div and not just the photo dimensions. Maybe the problem is that i have class?
Wouldn't it be bad to have six css for every separate photo?
Here is the html:
<div id="info-pics">
<div id="info-pics-container">
<div class="info-pic-top">
<img src="service-1.jpg" alt="service-1" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Ύστερα από συνεννόηση με εσάς αναζητούμε τις πιο προσιτές και κατάλληλες δυνατότητες και
ταιριαστά σχέδια ώστε να πετύχουμε ένα όμορφο αποτέλεσμα.
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-2.jpg" alt="service-2" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-3.jpg" alt="service-3" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-4.jpg" alt="service-4" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-5.jpg" alt="service-5" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-6.jpg" alt="service-6" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
</div>
</div>
Here is the CSS:
#info-pics {
position:relative;
height:800px;
}
#info-pics-container {
background-color:grey;
position:absolute;
width:75vw;
height:30vw;
left:13%;
top:15%;
}
/* Container needed to position the overlay. Adjust the width as needed */
.info-pic-top {
float: left;
width: 33.33%;
height:50%;
padding: 5px;
}
/* The overlay effect (full height and width) - lays on top of the container and over the image */
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 100%;
transform: scale(0);
transition: .3s ease;
}
/* When you mouse over the container, the overlay text will "zoom" in display */
.info-pic-top:hover .overlay {
transform: scale(1);
}
/* Some text inside the overlay, which is positioned in the middle vertically and horizontally */
.overlay-text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
Just add position:relative
.info-pic-top {
float: left;
width: 33.33%;
height:50%;
padding: 5px;
position:relative;
}
You missed to add position: relative to the selector info-pic-top. Try this code.
.info-pic-top {
float: left;
width: 33.33%;
height:50%;
padding: 5px;
position: relative;
}

How can I wrap text around image using Bootstrap?

I want to wrap text around image as shown below:
How can I do it?...
I would be very grateful for the information. Thanks to all.
You can make use of the position: absolute inside a relatively positioned container and use the top and left properties to align it.
.img-circle-wrap {
position: relative;
width: 500px;
height: 500px;
}
.img-circle {
position: absolute;
left: 30%;
top: 30%;
}
.img-circle-wrap span {
position: absolute;
}
.text-1 {
top: 20%;
left: 20%;
}
.text-2 {
top: 20%;
left: 70%;
}
.text-3 {
top: 50%;
left: 10%;
}
.text-4 {
top: 50%;
left: 80%;
}
.text-5 {
top: 80%;
left: 20%;
}
.text-6 {
top: 80%;
left: 70%;
}
.text-7 {
top: 20%;
left: 45%;
}
.text-8 {
top: 80%;
left: 45%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="img-circle-wrap">
<img src="http://placehold.it/200x200" alt="..." class="img-circle">
<span class="text-1">Text 1</span>
<span class="text-2">Text 2</span>
<span class="text-3">Text 3</span>
<span class="text-4">Text 4</span>
<span class="text-5">Text 5</span>
<span class="text-6">Text 6</span>
<span class="text-7">Text 7</span>
<span class="text-8">Text 8</span>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-6">
Text here
</div>
<div class="col-sm-6">
Text here
</div>
<div class="col-sm-3">
Text here
</div>
<div class="col-sm-6">
<img src="img.jpg" class="img-responsive"/>
</div>
<div class="col-sm-3">
Text here
</div>
<div class="col-sm-6">
Text here
</div>
<div class="col-sm-6">
Text here
</div>
<div class="col-sm-6">
Text here
</div>
<div class="col-sm-6">
Text here
</div> `enter code here`
</div>
</div>
</div>

Side banner on a webpage

How would I make it so the banners along the top and bottom of this page (http://i.imgur.com/SxjbCJV.jpg) are instead at both sides of the page?
I currently have them both fixed to the top and bottom of the page:
#header {
position: fixed;
top: 0;
width: 100%;
height: 66px;
z-index: 999;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 66px;
z-index: 999;
}
And the HTML:
<body>
<div id="wrapper">
<a href="project.html">
<div id="header">
<button id="next-button" href="project.html"><i class="fa fa-arrow-circle-right fa-4x"></i>
</button>
</div>
</a>
<div id="main">
<div id="splash">
<div id="name">
<h1 class="wow animated flipInX">Max Wilson</h1>
</div>
<div id="profile">
<img src="img/Logo.png" class="wow animated rollIn" data-wow-delay="1s">
</div>
<div id="subtext">
<h2 class="wow animated fadeInUp" data-wow-delay="2s">Aspiring Developer </h2>
</div>
</div>
</div>
</div>
<a href="project.html">
<div id="footer">
<button id="prev-button" href="project.html"><i class="fa fa-arrow-circle-left fa-4x"></i>
</button>
</div>
</a>
Have you tried floating the header and footer to the left?
For example:
#header {
position: relative;
float: left;
width: 50px;
height: 500px;
background-color: #44f;
}
#footer {
position: relative;
float: left;
width: 50px;
height: 500px;
background-color: #44f;
}
#wrapper{ text-align: center;
margin-left: auto;
margin-right: auto;
}
#main{ width: 800px;
float:left;
}
Here's a simple and interesting method: giving the body display: flex and the content flex-grow: 1 so it occupies all the available space and pins the other elements to either side.
<div class="side">
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
</div>
<div id="content">
<p>asdfasdf</p>
</div>
<div class="side">
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
</div>
body {
display: flex;
}
.side, #content {
padding: 10px;
}
.side {
background: blue;
}
#content {
flex-grow: 1;
background: grey;
}
https://jsfiddle.net/JackHasaKeyboard/rz86xwxh/2/