I have a fixed header and a image below the header.
The image has a property position: fixed.
Now for some devices the image is not in the center as It should be.
Here's the fiddle for it.
The left side has more spaces than the right hand side.
Also above the image, I want to add a p tag which is not showing up for some reason.
Please let me know what's wrong here.
<div class="content-wrapper new-class">
<div class="container">
<div class="row">
<div class="col-xs-12 ">
<div class="center-logo description">
<img src="http://i.imgur.com/ECTLTbK.png" alt="" class="img-responsive">
<P class="step1description" See price</p>
</div>
</div>
</div>
</div>
</div>
Checkout this solution:
body, html {
margin:0;
padding:0;
}
.content-wrapper {
position: relative;
overflow: hidden;
width: 100%;
background-color: #333230;
}
.content-wrapper .center-logo {
position: fixed;
width: 100%;
top: 125px;
left:0;
text-align: center;
margin: 5px 0 15px;
z-index: 1001;
background-color: #333230;
}
.content-wrapper .center-logo img {
margin: 0 auto;
}
.center-logo p.step1description {
position: relative;
top: -30px;
width: 220px;
text-align: center;
color: #fff;
font-size: 12px;
margin: 0 auto;
}
.description {
margin:30px 0 30px 0 !important;
}
.content-wrapper .content {
text-align: center;
width: 100%;
}
.new-class{
padding-bottom: 134px;
top: 134px;
}
<div class="content-wrapper new-class">
<div class="container">
<div class="row">
<div class="col-xs-12 ">
<div class="center-logo description">
<img src="http://i.imgur.com/ECTLTbK.png" alt="" class="img-responsive">
<p class="step1description"> See price</p>
</div>
</div>
</div>
</div>
</div>
You have some typos on html and css! - Here you can find a working fiddle: http://jsfiddle.net/sebastianbrosch/cxumhp9k/1/
Add left:0 on .content-wrapper .center-logo
.content-wrapper .center-logo { left:0;}
Related
How i can place my div with button, form and other content on an image like this picture. I have already placed the text on this image using this code:
.img-wrap {
position: relative;
}
.img-wrap h1 {
position: absolute;
left: 41.5%;
bottom: 45%;
background: rgba(255, 255, 255, 0.9);
height: 20%;
width: 17%;
padding: 3% 0px 0px 2.4%;
font-size: 2.3vw;
font-weight: bold;
color: rgba(0, 0, 0, 1);
font-family: Alegreya Sans black;
}
<div class="container-fluid">
<div class="row">
<div class="img-wrap">
<img src="...\images\main-foto.jpeg" class="img-responsive">
<h1>Funny Island</h1>
</div>
</div>
</div>
I tried to place my div on the same way, but it doesn't work.
.img-wrap {
position: relative;
}
.img-wrap div {
position: absolute;
width: 1000px;
height: 900px;
background-color: grey;
}
<div class="container-fluid">
<div class="row">
<div class="img-wrap">
<img src="...\images\main-foto.jpeg" class="img-responsive">
<h1>Funny Island</h1>
<div>
</div>
</div>
</div>
</div>
Thanks for the help
Add the image as a background image on .img-wrap. You can then add the buttons, text etc inside the div.
.img-wrap {
position: relative;
background-image: url( 'http://placekitten.com/500/300' );
background-size: cover;
text-align: center;
padding: 50px;
color: red;
}
<div class="container-fluid">
<div class="row">
<div class="img-wrap">
<h1>Funny Island</h1>
<div>
<p>Some text here</p>
<button>Button here</button>
</div>
</div>
</div>
</div>
You can use a negative on themargin-bottom of the element that you wish to contain the image. This will pull the element containing your form content up and above the element with the image inside it. See below for a demo:
.image-container {
height: 50vh;
background: red;
margin-bottom: -200px;
}
.content-container {
height: 150vh;
max-width: 960px;
margin: auto;
background: blue;
}
<div class="image-container"></div>
<div class="content-container"></div>
Another option is to add top or left properties to img-wrap div to position it where you want.
.img-wrap div{
position: absolute;
width:1000px;
height: 900px;
background-color: grey;
top:100px;
left:100px;
}
I have this flip box which looks like this
When I hover on it, it would turn around and would look like this.
I want to know, how do I move the text to the right only, I tried putting text-align: right; on my css but it didn't work. Am I doing it wrong?
Here's my CSS and HTML:
.box9 {
background-color: #4C586F;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 45px;
}
.box10 {
background-image: url("../img/commended/erwin.png");
background-size: 50%;
background-repeat: no-repeat;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 45px;
}
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box9">
<p style="font-size:180%; color: white">Kudos!</p>
</div>
</div>
<div class="back">
<div class="box10">
<p style="font-size:180%; color: black">sdasdsadas</p>
</div>
</div>
</div>
</div>
I would do it like this, setting text-align: right in the back view and to center in the front view, vertical centering of the p tag and also changing some other settings (no padding [therefore changed width and height settings] and some other details):
.box9 {
background-color: #4C586F;
width: 340px;
height: 240px;
margin: 0 auto;
text-align: center;
}
.box10 {
background-image: url(http://placehold.it/150x250/);
background-size: auto 100%;
background-repeat: no-repeat;
width: 340px;
height: 240px;
margin: 0 auto;
text-align: right;
}
.box9 p,
.box10 p {
margin: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.box10 p {
padding-right: 20px;
}
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box9">
<p style="font-size:180%; color: white">Kudos!</p>
</div>
</div>
<div class="back">
<div class="box10">
<p style="font-size:180%; color: black">sdasdsadas</p>
</div>
</div>
</div>
</div>
I'm very new to css and I am trying to have a text caption in the bottom of my images, like so:
I have 3 images in 3 different bootstrap columns.
.img-preview {
display: block;
margin: 0 auto;
object-fit: cover;
min-height: 300px;
max-width: 350px;
}
.img-container {
width: 100%;
height: auto;
padding: 0;
background-position: center top;
}
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="col-md-4 col-sm-6">
<img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg">
<h3><span>Maler<br />und<br />Tapezierarbeiten</span></h3>
</div>
<div class="col-md-4 col-sm-6">
<img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg">
</div>
<div class="col-md-4 col-sm-6">
<img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg">
</div>
</div>
I tried a lot of possible solutions but nothing really worked.
Tried this for example https://css-tricks.com/text-blocks-over-image/ but when I resized my window, the text caption didn't fit anymore.
What is the best way to achieve this effect?
you can simply do with Position:absolute , try with this answer
.relative_box {
position:relative;
width:400px;
float:left;
}
.relative_box img {
width:100%;
}
.relative_box h3 {
position:absolute;
bottom:0;
left:0;
background:#000;
color:#fff;
width:100%;
margin:0;
padding:10px
}
<div class="relative_box">
<img src="https://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg" alt="" />
<h3><span>Maler<br />und<br />Tapezierarbeiten</span></h3>
</div>
You can do it using CSS Positioning. But you need to change the structure a little bit. Have a look at the snippet below:
.img-holder {
min-height: 300px;
max-width: 350px;
margin: 0 auto;
position: relative;
}
.img-holder h3 {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
background: rgba(65, 55, 91, 0.8);
color: white;
bottom: 0;
left: 0;
width: 80%;
height: 30%;
margin: 0;
padding: 10px;
text-align: center;
}
.img-preview {
display: block;
margin: 0 auto;
object-fit: cover;
min-height: 300px;
max-width: 350px;
}
.img-container{
width: 100%;
height: auto;
padding: 0;
background-position: center top;
}
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="col-md-4 col-sm-6">
<div class="img-holder">
<img class="img-container img-preview" src="http://placehold.it/200x200">
<h3><span>Maler<br />und<br />Tapezierarbeiten</span></h3>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="img-holder">
<img class="img-container img-preview" src="http://placehold.it/200x200">
<h3><span>Maler<br />und</span></h3>
</div>
</div>
</div>
Hope this helps!
I've got the following setup http://jsfiddle.net/47x60k4w/529/.
HTML
<div class="header">
header
</div>
<div class="inner_block">
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
</div>
<div class="footer">
footer
</div>
The inner_block should overlap the header class and the footer should be placed right behind the inner_block.
In my solution I just don't get the footer behind the inner_block without doing not responsible stuff like calling a margin-top with x.xem on it. I just found some links with z-index stuff which didn't worked for me because the inner_block lost his passed height and width from the nested block.
The result should look like this beautiful mockup.
Do you have any ideas?
Thanks in advance.
So I made the following changes to your code:
Remove the position: absolute for the inner-block.
As you are floating the contents of the inner-block you have clear the floats so that the parent container will not lose height.
.inner_block:after {
content: '';
display: block;
clear: both;
}
Whenever using floats, remember to clear it.
Added position: relative to the inner_block to position it over the header and footer.
Added display: block to the img so that you can remove the small space below it characteristic on inline elements (the default display).
Also tinkered a bit with the margins and widths to achieve the layout.
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block {
position: relative;
/*width: 100%;*/
border: solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top: -2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
background-color: white;
}
.inner_block:after {
content: '';
display: block;
clear: both;
}
.column {
max-width: 30%;
float: left;
margin-right: 2.5%;
}
.column:first-child{
margin-left: 2.5%;
}
.column:last-child{
margin-left: 0;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
Hope this gives you a head-start. Check it out and let me know your feedback on this. Thanks!
Alternate Solution:
So here is a solution using a flexbox which is easier to set up:
First remove the floating container and the clearfix.
Now Wrap the inner_block with another div
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
Using display: flex allows the images to take the available space along the row and justify-content: center aligns it along the center. Check this out!
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block_wrapper">
<div class=" inner_block ">
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg " />
</div>
</div>
</div>
<div class="footer ">
test
</div>
You can even try something as below, your codes were fine just set your .footer margin-top equal to the height of .header and .inner_block using css calc() function.
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
background-color:red;
width:100%;
height:50px;
margin-top:calc(100% - 82%);
}
.inner_block{
position: absolute;
width:90%;
border:solid 1px black;
padding: 5px;
background-color:white;
margin:-2.5% calc(100% - 97%);
}
.column {
width:30%;
float:left;
margin:0 1.6%;
}
.column img {
max-width:100%;
height:auto;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
is this what you were looking for ?
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
clear:both;
background-color:red;
width:100%;
height:50px;
}
.inner_block{
position: absolute;
width:100%;
border:solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top:-2.5%;
background-color:white;
}
http://jsfiddle.net/8y4e8L08/
.header {
height: 200px;
width:800px;
background-color:#000;
margin:20px;
}
.header {
margin-bottom: -25px;
}
.inner_block {
width: 35%;
height: 150px;
margin: auto 200px;
background-color:#FFF;
border:1px solid #000;
margin-top: -45px;
}
.column{
max-width:20%;
float:left;
border: 2px soid #999;
margin:25px;
}
.column img{
max-width:100%;
height:auto;
}
.footer {
height: 100px;
margin-top: -25px;
margin:20px;
background-color:#F00;
width:800px;
}
.content {
position: relative;
z-index: 1;
}
<div class="header"></div>
<div class="inner_block">
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
</div>
<div class="footer">
</div>
Well just using the z-index won't always work. You also need to specify the 'position' property as well so as to define the z-index wrt some position of the frame.
Z-index is a property which defines the 'depth' or 'height' of an element. If your <header> has z-index of '100' and; <div> element defined inside the header, usually it would be shown above it but once you define the z-index:50; since 50<100, <div> element would be hidden behind it.
Example of z-index
1) http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
2) https://css-tricks.com/almanac/properties/z/z-index/
Hope it helps.
Demo: http://codepen.io/malte/pen/kDlbt
I am using an absolute positioned wrapper to center an image in a thumbnail frame. (Only) On mobile safari, the image won't be displayed. if you inspect the .image-pos container you'll see that the height is properly set to its parent's size. applying a fixed px height to it will make the image show up... Does anyone know how to fix that?
It's working on any Desktop browser...
HTML:
<div class="wrapper">
<div class="thumb-grid">
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/016e551de2f53d58e7f4acd68279e6a1.JPG&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
</div>
</div>
CSS:
.wrapper {
width: 600px;
margin: 30px auto 0
}
.thumb-grid {
text-align: justify;
}
.thumb-grid:after {
content: '';
display: inline-block;
width: 100%;
}
.thumb {
position: relative;
display: inline-block;
width: 31.5%;
height: 0;
padding-top: 29%;
margin-bottom: 6%;
}
.image {
height: 73%;
overflow: hidden;
position: absolute;
text-align: center;
top: 0;
width: 100%;
vertical-align: top;
display: block;
border: 1px solid #eee;
}
.image-pos {
height: 100%;
left: 50%;
margin-left: -300px;
position: absolute;
text-align: center;
width: 600px;
}
.image-pos img {
height: 100%;
max-height: 100%;
min-height: 100%;
max-width: none;
width: auto;
display: inline;
border: 0;
}
.details {
height: 27%;
position: absolute;
top: 73%;
}
.details h5 {
margin: 0;
padding-top: 5px;
}
Demo: http://codepen.io/malte/pen/kDlbt