I have a semi complicated website, and tucked inside a bunch of <div> is an image, I need that image to be moved up x number of pixels. I have the overflow hidden, so that it will cut the image off at the bottom (as expected) but I can't get the image to move where I want it to with the width maintaining 100%, and the image coming from the bottom
Here is a jsfiddle of the code
#DIV_8 {
cursor: pointer;
border-style: solid;
border-width: 1px;
height: 200px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
width: 300px;
overflow: hidden;
}
#DIV_9 {
max-height: 250px;
width: 100%;
height: auto;
display: inline-block;
vertical-align: bottom;
max-width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Seems to work by adding:
#DIV_9 {
position: relative;
top: -20px;
}
Adjusting top moves the image up and down.
https://jsfiddle.net/y197yjp2/
Is this what you are looking for?
#DIV_8 {
position: relative;
cursor: pointer;
border-style: solid;
border-width: 1px;
height: 200px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
width: 300px;
overflow: hidden;
}
#DIV_9 {
position: absolute;
bottom: -20px;
width: 100%;
height: auto;
display: inline-block;
max-width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#DIV_9 img {
width: 100%;
}
<div id="DIV_1">
<div id="DIV_2">
<div id="DIV_3">
<div id="DIV_4">
<div id="DIV_5">
<div id="DIV_6">
<div id="DIV_7">
<div id="DIV_8">
<div id="DIV_9">
<img src="http://img11.deviantart.net/a412/i/2012/145/9/9/google_chrome_by_juniorgustabo-d513nlo.png" width="360" height="308" alt="brazil" id="IMG_10" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Just use negative a negative margin-top
#DIV_8 {
cursor: pointer;
border-style: solid;
border-width: 1px;
height: 200px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
width: 300px;
overflow: hidden;
}
#DIV_9 {
max-height: 250px;
width: 100%;
height: auto;
display: inline-block;
vertical-align: bottom;
max-width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: -20px;
}
Related
I'm not able to make the img respect the parent's container when it has more items above it.
Html
<div class="box">
<h4>Some random text that will overflow the image</h4>
<div class="box2">
<img class="img" src="https://images-na.ssl-images-amazon.com/images/I/71Yd98vOJTL._AC_SY679_.jpg" alt="Poster not available"/>
</div>
</div>
CSS:
.box {
border: 1px solid;
border-radius: 3px;
margin: .3rem;
text-align: center;
padding: 2rem 0;
height: 300px;
}
.box2 {
border: 1px solid;
border-radius: 3px;
text-align: center;
height: 100%;
border-color: red;
display: inline-block;
box-sizing: content-box;
}
.img {
height: 100%;
width: 100%;
object-fit: contain;
box-sizing: content-box;
}
h4{
box-sizing: border-box
}
Fiddle: https://jsfiddle.net/dsxhy57k/1/
Image:
One way to achieve that is to use the CSS Flexible Box Layout combined with overflow: hidden
*{
box-sizing: border-box;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.box {
display: flex;
flex-flow: column;
border: 1px solid;
border-radius: 3px;
margin: .3rem;
height: 300px;
}
.box2 {
flex: 2 ;
overflow: hidden;
background-color: green;
border: 1px solid red;
border-radius: 3px;
padding: 1rem;
}
.box2 img{
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="box">
<h4>Some random text that will overflow the image</h4>
<div class="box2">
<img class="img" src="https://images-na.ssl-images-amazon.com/images/I/71Yd98vOJTL._AC_SY679_.jpg" alt="Poster not available"/>
</div>
</div>
An other would be using the calc function to set the height of your element .box2
.box {
border: 1px solid;
border-radius: 3px;
margin: .3rem;
text-align: center;
padding: 2rem 0;
height: 300px;
}
.box2 {
border: 1px solid;
border-radius: 3px;
text-align: center;
/*height: 100%;*/
height: calc(100% - 32px);/*here 32px is the space reserved for the h4, this cold well be the height of the h4*/
border-color: red;
display: inline-block;
box-sizing: content-box;
}
.img {
height: 100%;
width: 100%;
object-fit: contain;
box-sizing: content-box;
}
h4{
box-sizing: border-box
}
<div class="box">
<h4>Some random text that will overflow the image</h4>
<div class="box2">
<img class="img" src="https://images-na.ssl-images-amazon.com/images/I/71Yd98vOJTL._AC_SY679_.jpg" alt="Poster not available"/>
</div>
</div>
My page-button-container is not start on a new like even though i am using display: block. it is going under my test-pics-container. Why is this and how can I fix it? I figured out that if I reload float: right from my page-button-container it works (but then its not floating to the right.
I want it to look something like this:
.test-lookup-container {
position: relative;
display: block;
width: 1000px;
height: auto;
margin: 0 auto 0 auto;
padding: 20px 26px;
box-sizing: border-box;
background-color: purple;
}
.page-buttons-container {
position: relative;
display: block;
width: 400px;
height: 70px;
margin: 0;
padding: 0;
float: right;
background-color: orange;
}
.test-pics-container {
position: relative;
display: block;
width: 900px;
height: auto;
margin: 0 auto 0 auto;
padding: 0 26px;
box-sizing: border-box;
background-color: red;
}
.test-item {
position: relative;
display: inline-block;
width: 250px;
height: 700px;
margin: 0;
padding: 0;
background-color: #ececec;
}
<div class="test-lookup-container">
<div class="page-buttons-container">
ssssssssssssssss
</div>
<div class="test-pics-container">
<div class="test-item">
<img alt="" src="test.png">
</div>
</div>
</div>
You need to clear floating element <div style="clear: both;" ></div>
.test-lookup-container {
position: relative;
display: block;
width: 1000px;
height: auto;
margin: 0 auto 0 auto;
padding: 20px 26px;
box-sizing: border-box;
background-color: purple;
}
.page-buttons-container {
position: relative;
display: block;
width: 400px;
height: 70px;
margin: 0;
padding: 0;
float: right;
background-color: orange;
}
.test-pics-container {
position: relative;
display: block;
width: 900px;
height: auto;
margin: 0 auto 0 auto;
padding: 0 26px;
box-sizing: border-box;
background-color: red;
}
.test-item {
position: relative;
display: inline-block;
width: 250px;
height: 700px;
margin: 0;
padding: 0;
background-color: #ececec;
}
<div class="test-lookup-container">
<div class="page-buttons-container">
ssssssssssssssss
</div>
<div style="clear: both;" ></div>
<div class="test-pics-container">
<div class="test-item">
<img alt="" src="test.png">
</div>
</div>
</div>
Don't use float to create layouts, it has so many problems a beginner cannot understand or deal with.
Is this what you want to create?
.test-lookup-container {
position: relative;
display: block;
width: 1000px;
height: auto;
margin: 0 auto 0 auto;
padding: 20px 26px;
box-sizing: border-box;
background-color: purple;
}
.page-buttons-container {
position: absolute;
width: 400px;
height: 70px;
background-color: orange;
right: 0;
top: -70px;
}
.test-pics-container {
position: relative;
display: block;
width: 900px;
height: auto;
margin: 0 auto 0 auto;
padding: 0 26px;
box-sizing: border-box;
background-color: red;
margin-top: 70px;
}
.test-item {
position: relative;
display: inline-block;
width: 250px;
height: 700px;
margin: 0;
padding: 0;
background-color: #ececec;
}
<div class="test-lookup-container">
<div class="test-pics-container">
<div class="page-buttons-container">
page-buttons-container
</div>
<div class="test-item">
test-item
</div>
</div>
</div>
The easiest way is to add the following rule.
.test-pics-container { overflow: hidden; }
But if overflow property hides some content, that is positioned outside of .test-pics-container, you can use "clearfix" approach.
.clearfix:after { content: ""; display: table; clear: both; }
Then you can use it like this:
<div class="test-pics-container clearfix">
...
</div>
I have the following simple HMTL and CSS code which you can also find in the JSfiddle here:
body {
height: 500px;
}
.image {
width: 100%;
height: 30%;
background-color: blue;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image_details {
height: 100%;
width: 100%;
background-color: yellow;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image img {
height: 100%;
width: 100%;
display: block;
float: left;
background-color: red;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.prev_button {
float: left;
width: 20%;
background-color: blue;
}
.next_button {
float: right;
width: 20%;
text-align: right;
background-color: blue;
}
<div class="image">
<div class="image_details"> <img src="http://placehold.it/101x101"> </div>
</div>
<div class="prev_button"> PREVIOUS </div>
<div class="next_button"> NEXT </div>
As you can see in the code above I want to have an image and a prev and next button. However, instead of having the prev and next buttons below the image I would like to have them on the left center and on the right center in the image.
What do I have to change in my code to make this work?
One easy method is to use absolute positioning. Insert the buttons as children of .image and set the parent to position: relative. The children need position: absolute; and have to be positioned, as you can see in my full example. I also remove the heights from your CSS so avoid stretching the img.
body * {
box-sizing: border-box;
}
.image {
width: 100%;
background-color: blue;
border-style: solid;
border-width: 1px;
position: relative;
}
.image_details {
width: 100%;
background-color: yellow;
border-style: solid;
border-width: 1px;
}
.image img {
width: 100%;
display: block;
background-color: red;
border-style: solid;
border-width: 1px;
}
.prev_button, .next_button {
width: 20%;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: blue;
}
.prev_button {
left: 0;
}
.next_button {
right: 0;
text-align: right;
}
<div class="image">
<div class="image_details"><img src="http://placehold.it/101x101"></div>
<div class="prev_button">PREVIOUS</div>
<div class="next_button">NEXT</div>
</div>
With the code below I want to create a mobile menu button <container> inside my <navigation>. All this works fine so far.
However, somehow the mobile menu button does not stay inside the <nav> . (See the green container compared to the yellow navigation)
I am guessing it has something to do with the fixed px for the width and the height. However, when I change those to a %-width the bars completely dissapear.
What do I have to change in my code so the <container> remains inside the surrounding <nav>?
You can also find my code here
body {
margin: 0;
}
.header {
width: 80%;
height: 10%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
display: inline-block;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
<div class="header">
<nav class="navigation">
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</div>
Remove height: 10%; from .header, it's taking 10% height of html
body {
margin: 0;
}
.header {
width: 80%;
/* height: 10%; */
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
display: inline-block;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
<div class="header">
<nav class="navigation">
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</div>
The margin settings for the bar and the bar itself are too high. Try the CSS below
.bar1, .bar2, .bar3 {
width: 35px;
height: 1px;
background-color: #333;
margin: 3px 0;
transition: 0.4s;
}
I need to have shadows in the img element, but since it's wraped in a div that's got overflow: hidden, the shadows are hidden as well. What could I adjust here to make the shadows appear?
.slider-content .slider-image{
position: relative;
float: left;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*width: 20%;*/
cursor: pointer;
z-index: 120;
max-width: 218px;
max-height: 135px;
margin-right: 1.7%;
}
.slider-content .slider-image img{
width: 100%;
height: 135px;
position: relative;
box-shadow: 0 0 10px 5px #222;
}
The markup is as follows:
<div clss="slider-content">
<div class="slider-image">
<img src=".." />
</div>
<div class="slider-image">
<img src=".." />
</div>
</div>
Since you img will always fill the .slider-image, put the shadow on the .slider-image element.
.slider-content .slider-image{
position: relative;
float: left;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*width: 20%;*/
cursor: pointer;
z-index: 120;
max-width: 218px;
max-height: 135px;
margin-right: 1.7%;
box-shadow: 0 0 10px 5px #222;
}
.slider-content .slider-image img{
width: 100%;
height: 135px;
position: relative;
}