I've been trying to make a responsive image with text on it. My problem is that I can't make the structure and behavior to this whole component.
Any tips for how I can make it?
Try something like this.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
.hero {
height: 100%;
width: 100%;
background: url('https://images.unsplash.com/photo-1633934243950-03a086c09e41?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
background-size: cover;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: white;
padding-left: 40px;
padding-top: 40px;
background: rgba(0,0,0,0.35);
}
<div class="hero">
<div class="overlay">
<h1>Hello World</h1>
<p>Some other text goes here</p>
</div>
</div>
Create a div with the image and another div inside, place all your text in the inner div and position it absolute on top of the image.
Here are 2 approaches for it
.image-container{
width:100%;
height:40rem;
position:relative;
}
img{
width:100%;
object-fit:cover;
}
p{
position:absolute;
font-size:4rem;
color:red;
font-weight:bold;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.image-container-two{
height:40rem;
width:100%;
background:src("https://unsplash.it/700");
background-size:cover;
display:flex;
justify-content:center;
align-items:center;
}
.text-two{
font-size:4rem;
color:red;
font-weight:bold;
}
<div>
<div class="image-container">
<img src="https://unsplash.it/500" />
<p> This is some text </p>
</div>
<div class="image-container-two">
<div class="text-two">This is also some text </div>
</div>
</div>
Related
I wants to make a structure of: top, middle and bottom.
I wants that the top will be 30px from the top, bottom 30px from the bottom and that the text in the middle will be exactly the same distance from bottom to top (this is my main problem).
And of course that my goal that it will be adapted to all the resolutions.
Thanks in advance :)
You could use absolute positioning.
You can play around with the Codepen link here
HTML:
<div id="top">this is top</div>
<div id="middle">
<span class="full_center">middle is here</span>
</div>
<div id="bottom">bottom down below</div>
CSS:
The trick lies in the .full_center class
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#top {
background-color: #ccc;
height: 30px;
position: relative;
top: 30px;
}
#middle {
background-color: aliceblue;
min-height: calc(100vh - 60px);
height: auto;
}
#bottom {
height: 30px;
background-color: #ccc;
position: relative;
bottom: 30px;
}
.full_center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
Try Using display:flex;. It's the closest I could draw from your question. Here I used background-color:red; to show the 30px distance from top and bottom.
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.outer{
width:100%;
height:100vh;
background-color:red;
padding:30px 0;
}
.inner{
height:100%;
width:100%;
background-color:green;
display:flex;
align-items:center;
}
p{
width:60%;
margin:0 auto;
text-align:center;
color:white;
font-size:2em;
}
<div class="outer">
<div class="inner">
<p>This is text<br>
This is text<br>
This is text<br>
This is text<br></p>
</div>
</div>
i want to center a image and place some text under it.
The picture should be everytime in the middle of the screen, doesnt matter how i scale the viewport. Also the text has to be under the picture everytime.
The Backgroundcolor has to be #EF762F
It worked for me on one screen with this
https://jsfiddle.net/j2Lec36d/ , but if i watch it on another screen, with other resolution, the text is not centered under the image anymore.
Also the span has to be positioned absolute left with -100%, jQuery slides it then to 50%
HTML:
<div id="sh_start">
<img src="test.jpg"></img>
<span>Test</span>
</div>
CSS:
body, html { font-family: arial; font-size: 12px; margin:0; padding:0; width: 100%; height: 100%; background-color:#fff;overflow:hidden;}
#sh_start img {display: block;padding:5% 0 0 30%;width: 40%; height: auto; position:absolute; top:5%;left:0; right:0; bottom:0;}
#sh_start span {width: 100%; height: auto;display:block;position:absolute;top:58%;left:50%; color:#fff; font-family:ReplicaPro-Bold;font-size:50px;opacity:0.4;}
#sh_start {display:block;background-color:#EF762F;position: absolute; top:0;left:0;width:100%; height: 100%; overflow:hidden;}
You can do this quite simple using flexbox:
$(document).ready(function(){
$( "#sh_start span" ).animate({
left: "50%",
left: "toggle"
}, 5000, function() {
// Animation complete.
});
})
#sh_start img {display: block;width: 40%; height: auto; }
#sh_start span{width: 100%; height: auto;display:block; color:#fff; font-family:ReplicaPro-Bold;font-size:50px;opacity:0.4;
position: relative; left: 100%;
}
#sh_start {display:block;background-color:#EF762F;position: absolute; top:0;left:0;width:100%; height: 100%; overflow:hidden;display:flex;align-items: center; justify-content: center;flex-direction: column;text-align: center;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="sh_start">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQNjQ76c71y3CL0xrOhpl3wf3W5X3Mi3ddv1SUH3UbkPBz3SWPAuw">
<span>Test</span>
</div>
You can try to use the framework bootstrap and do like this:
HTML:
<div class="container">
<div class="row text-center">
<div class="col-lg-12">
<img src="http://placehold.it/700x400" class="img-responsive" alt="">
<h1>Text under image</h1>
</div>
</div>
</div>
CSS:
img {
margin: 0 auto;
}
The image CSS:
#sh_start img {
display: block;
padding: 5% 0 100px 0;
width: 40%;
height: auto;
margin: 0 auto;
}
The span CSS:
#sh_start span {
width: 100%;
height: auto;
display: block;
position: relative;
bottom: 20px;
// left: -100%;
left: 0;
color: #fff;
font-family: ReplicaPro-Bold;
font-size: 50px;
opacity: 0.4;
text-align: center;
}
And the container CSS:
#sh_start {
background-color: #EF762F;
}
You can just animate the left property of the span from 100% to 0.
You can see the code in action here: https://jsfiddle.net/7pnrq1xd/1/
I'm not entrirely sure what your restrictions are or if they are restrictions at all but why not just do this to your span:
left:0;
text-align:center
#sh_start {
display:block;
background-color:#EF762F;
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
overflow:hidden;
}
#sh_start img {
display: block;
padding:5% 0 0 30%;
width: 40%;
height: auto;
position:absolute;
top:5%;
left:0;
right:0;
bottom:0;
}
#sh_start span{
width: 100%;
height: auto;
display:block;
position:absolute;
top:58%;
left:0;
color:#fff;
font-family:ReplicaPro-Bold;
font-size:50px;
opacity:0.4;
text-align:center;
}
<div id="sh_start">
<img src="test.jpg"></img>
<span>Test</span>
</div>
First Create a DIV Tag where you will place both your image and caption.
<div class="imagewrapper">
<img src="imagehere.jpg">
<p class="imagecaption">Image Caption Here</p>
</div>
Now Code your CSS Something like this.
.imagewrapper {text-align:center}
.imagewrapper img {max-width:100%}
Do not forget to add styling for your image caption class. With above code your image and text will stay in center on any screen size.
Hope that helps.
Regards
Manoj Soni
I have removed the position:absolute declarations, and compacted the CSS code
#sh_start
{
background-color:#EF762F;
width:100%;
height: 100vh;
float:left;
}
#sh_start img, #sh_start span
{
float:left;
width:40%;
height:auto;
margin-top:5%;
margin-left:30%;
text-align:center;
}
#sh_start span
{
color:#fff;
font-family:ReplicaPro-Bold;
font-size:50px;
opacity:0.4;
margin-top:1px;
}
Then in the HTML I have fixed the 'img' closing tag.
<div id="sh_start">
<img src="test.jpg" />
<span>Test</span>
</div>
Live demo: https://jsfiddle.net/j2Lec36d/10/
I'm trying to center a div inside a parent div based on the dimensions of the parent div. I have tried using:
display: inline-block;
because I have seen other questions where this was used to center the div but I am not having luck.
BOX1 should be centered insdie of test
<div class="tab-pane" id = "test">
<div id="Box2">
<h1> Graph Text </h1>
</div>
<div id="BOX1">
</div>
</div>
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
display: inline-block;
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
http://jsfiddle.net/bahanson/xvL2qvx0/5/
try this :demo
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
margin:0 auto;
width: 500px;
height: 300px;
background: lightgrey;
position:relative;
z-index:1;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
<div id="test" class="tab-pane">
<div id="BOX1">
<div id="Box2">
<h1> Graph Text </h1>
</div>
</div>
</div>
Adding this to the box 1 css does what you want and will keep the child centered if the parent width changes.
left: 50%;
margin-left: -250px;
http://jsfiddle.net/xvL2qvx0/6/
If you don't need IE8 support you can just use:
left: calc(50% - 250px);
You should read up on normal flow and CSS positioning.
http://webdesign.about.com/od/cssglossary/g/bldefnormalflow.htm
But basically, a div will always position relative to the parent div.
If you add margin: 0 auto; to a div, it should horizontally position it within the parent div
#BOX1 {
display: inline-block;
margin-left:100px;
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
}
use margin-left command to adjust it to the centre....
Seen as though you are using absolute positioning you can simply give it a top,right,left and bottom of 0 and use margin:auto to centre it both horizontally and vertically.
This benefits from be able to use relative (percentage) sizing if you want and there's no maths involved. Furthermore, if you later change the dimensions (maybe via a media-query for mobile devices) you don't need to recalculate messy margins or offsets - just change the size and it will be centred.
#BOX1 {
display: block;
width: 500px; /* it will still work if you change the size */
height: 300px; /* the dimensions could be percentages if you like */
background: lightgrey;
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
http://jsfiddle.net/xvL2qvx0/7/
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
<div class="tab-pane" id = "test">
<div id="Box2">
<h1> Graph Text </h1>
</div>
<div id="BOX1">
</div>
</div>
I'm trying to make a 4 split landing page with an icon and a text underneath it, centered both horizontally and vertically inside each div. I tried various solutions, non of which seems to work, so i'm posting what i have so far. Here's a jsfiddle http://jsfiddle.net/W8gs3/
HTML:
<div id="rect1">
<p><img src="icon.png"/></p>
<p>Sound</p>
</div>
<div id="rect2">rect2</div>
<br />
<div id="rect3">rect3</div>
<div id="rect4">rect4</div>
<br />
CSS:
/* CSS Document */
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
div {
padding:0;
margin: 0;
width:50%;
height:50%;
float: left;
}
#rect1 {
background: #0066FF;
}
#rect2 {
background-color: #CC0033;
}
#rect3 {
background-color: #669966;
}
#rect4 {
background-color: #FFCC33;
}
br {
clear: left;
}
If you add an additional div into your html:
Sound
<div id="rect2" class="outer">
<div class="inner">rect2</div>
</div>
<div id="rect3" class="outer">
<div class="inner">rect3</div>
</div>
<div id="rect4" class="outer">
<div class="inner">rect4</div>
</div>
You can use the following styles:
div.outer {
padding:0;
margin: 0;
width:50%;
height:50%;
float: left;
display:table;
}
div.inner {
display:table-cell;
width:100%;
height:100%;
text-align:center;
vertical-align:middle;
}
Example
According to my understanding you want to align img to center, below is my suggestion
Make the img tag inline which you want to center align.
#rect1 p img {
display: inline;
width:30px;
height:30px;
}
#rect1 p {
text-align:center;
}
hope this will solve your problem
Add this code
HTML
<section>
<div id="rect1">
<p><img src="icon.png"/></p>
p>Sound</p>
</div>
<div id="rect2">rect2</div>
</section>
<section>
<div id="rect3">rect3</div>
<div id="rect4">rect4</div>
</section>
CSS
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
section{
position:relative; height:50%; width:100%; display:table;
}
div {
padding:0;
margin: 0;
width:50%;
height:50%;
display:table-cell;
text-align:center;
vertical-align:middle;
}
#rect1 {
background: #0066FF;
}
#rect2 {
background-color: #CC0033;
}
#rect3 {
background-color: #669966;
}
#rect4 {
background-color: #FFCC33;
}
Here is a working fiddle http://jsfiddle.net/W8gs3/14/
you can make center the image and text using the below CSS. check the DEMO.
#rect1, #rect1 p img {
background: #0066FF;
display:inline-block;
text-align:center;
}
#rect1 p{
margin:0;padding:0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
If ancient browser support is not an issue, you can use css3 flexbox as follows:
div {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:0;
margin: 0;
width:50%;
height:50%;
float: left;
}
JSFiddle
try this
div {
padding:0;
margin: 0;
width:50%;
height:50%;
float: left;
text-align: center; /*add this*if it is necessary in the middle of all the elements*/
}
I have got the following code:
HTML:
<div id="mapWrapper" style="height: 624px;">
<div class="box" id="map">
<h1>Campus</h1>
<p>Description Campus Map.</p>
<img src="abc.png">
</div>
</div>
CSS:
.box {
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
padding: 3px;
overflow:hidden;
height:100%;
}
#mapWrapper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
overflow: hidden;
padding: 10px;
}
#map {
display: inline-block;
position: relative;
}
#map img {
height: 100%;
}
I want the image to take the rest of the height, that is free in the map-div. Currenty the image is set to 100% and that is why it runs out of the box at the bottom. Can someone help? Thanks!
Why not use a display:table setup, the advantage of this is that you can add as much content as you want to the first 'row' and the image will take up the remaining space (whatever is left from the table height minus the first row of content) and scale accordingly.
Demo Fiddle
HTML
<div class='table'>
<div class='row'>
<div class='cell'>
<h1>Campus</h1>
<p>Description Campus Map.</p>
</div>
</div>
<div class='row'>
<div class='cell'></div>
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
height:624px;
width:100%;
max-height:624px;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
}
.row:first-of-type >.cell {
height:1%;
}
.row:last-of-type >.cell {
height:100%;
background-image:url(http://www.gettyimages.co.uk/CMS/StaticContent/1357941082241_new_banner-700x465.jpg);
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
}