So I spent a couple hours searching, but all I've seeing is just standard help with adding text over an image, nothing that will put the text over the image, as it "falls" off the image.
I've attached an example of what I'm referring to.
I'm trying to do it in a way so the images stay right under each other and not create space between the, added another photo for reference on what I mean.
I've tried creating an img-container and add text but that doesn't allow me to have the text "fall" off the image. This is what I have so far (not including the text".
I've attempted to make the images as the body background but that didn't have the same design I'm looking for unfortunately, as the text will also serve as links in the future.
images stacked with no space
text falling off the image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
<div class="img-container">
<img src="images/top-image.jpg" alt="plants">
<img src="images/second-image.jpg" alt="benches">
<img src="images/third-image.jpg" alt="cactus">
<img src="images/last-image.jpg" alt="more cactus">
<img src="images/pasetta-studios" alt="pasetta studios">
</div>
<code>Designed by #PasettaStudios. </code>
</div>
</body>
</html>
And here is my CSS
#font-face {
src: url(fonts/Modric.ttf);
font-family: Modric;
}
#font-face {
src: url(fonts/Orkney-Regular.ttf);
font-family: Orkney;
}
#font-face {
src: url(fonts/Made-Bon-Voyage.otf);
font-family: Made-Bon-Voyage;
}
* {
box-sizing: border-box;
}
#wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-right: 50px;
padding-left: 50px;
}
body {
background-color: #262c2c;
}
.navbar {
max-width: 100%;
height: 100px;
margin-right: auto;
margin-left: auto;
}
/* links and text inside nav bar */
.navbar a {
float: left;
padding: 40px 0px 0px 0px;
background-color: #262c2c;
text-decoration: none;
font-size: 20px;
width: 25%; /* Four links of equal widths */
text-align: center;
color: #dae1e7;
font-family: Orkney;
}
h1 {
text-align: center;
font-family: Orkney;
}
img {
max-width: 100%;
height: auto;
display: block;
opacity: 50%;
margin-left: auto;
margin-right: auto;
}
p {
text-align: right;
font-size: 100px;
padding-left: 100px;
color: #dae1e7;
font-family: Modric;
font-size: 150px;
}
Try this:
<div class="img-container">
<div class="row">
<img src="images/top-image.jpg" alt="plants">
<span>Your text</span>
</div>
<div class="row">
<img src="images/second-image.jpg" alt="benches">
<span>Your text</span>
</div>
<div class="row">
<img src="images/third-image.jpg" alt="cactus">
<span>Your text</span>
</div>
<div class="row">
<img src="images/last-image.jpg" alt="more cactus">
<span>Your text</span>
</div>
<div class="row">
<img src="images/pasetta-studios" alt="pasetta studios">
<span>Your text</span>
</div>
</div>
.img-container {
width: 500px;
height: auto;
}
.row{
position: relative;
width: 100%;
}
.row span {
position: absolute;
color: white;
top: 0;
}
.row:nth-child(odd) span {
left: -20px;
}
.row:nth-child(even) span {
right: -20px;
}
What you have to do is put your Image in a Container, along with your text. The text is then positioned absolute and with a negative margin or left and right values instead of only setting top values.
<div class="img-container">
<img src="img1.jpg" alt="Image 1">
<p class="lefttext">Left</p>
<p class="righttext">Right</p>
</div>
<div class="img-container">
<img src="img2.jpg" alt="Image 2">
<p class="lefttext">Left</p>
<p class="righttext">Right</p>
</div>
For multiple images, just repeat this code.
And your CSS:
.img-container {
position:relative;
margin:0;
padding:0 40px;
}
.img-container img {
border:0;
}
.img-container p.lefttext {
position:absolute;
top:50px;
margin-left:-40px;
}
.img-container p.righttext {
position:absolute;
top:120px;
width:100%;
text-align:right;
margin-right:—40px;
}
Alternatively, you could do
.img-container p.lefttext {
position:absolute;
top:20px;
left:0;
}
.img-container p.righttext {
position:absolute;
top:120px;
text-align:right;
right:0;
}
If the position of the text over the image should change for each picture, simply remove the ˋtop:..pxˋ from your CSS and add ˋstyle="top:50px;"ˋ to each image tag.
Related
I would like to add some texts next to centered images. I want to keep images in the center of my page and texts just floating on sides of pictures (without moving images to the sides of the page)
my goal
This is my code (with a random free image for question purposes only):
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
}
.img1 {
margin: 0 auto;
width: 200px;
display:block;
}
.text1 {
text-align: right;
float: left;
}
.img2 {
margin: 0 auto;
width: 200px;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
}
.text2 {
text-align: left;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1" alt="img1">
<div class="text1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
<div class="row2">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2" alt="img1">
<div class="text2">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
I've tried using inline-block for images, but then I couldn't center them. In general, the texts somehow push the images away from the center and I cannot find a similar case as mine online. Thank you in advance for any hints.
easiest way with your code is to use position absolute
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
position:relative;
}
.img1 {
margin: 0 auto;
width: 200px;
display: block;
}
.text1 {
text-align: right;
position:absolute;
top:20%;
left:15%;
}
.img2 {
margin: 0 auto;
width: 200px;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
position:relative;
}
.text2 {
text-align: left;
position:absolute;
top:20%;
right:15%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1" alt="img1">
<div class="text1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
<div class="row2">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2" alt="img1">
<div class="text2">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
or we could do this with flex: when you use absolute it takes the element out of the regular dom flow. Better yo use flex, makes responsive designs easier
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
display:flex;
align-items:center;
}
.img1 {
margin: 0 auto;
display: block;
}
.text1{
text-align:right;}
.r1{
width:30%;}
.img2 {
margin: 0 auto;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
display:flex;
align-items:center;
}
.text2 {
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1">
<div class="text1 r1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1 r1" alt="img1">
<div class='r1'> </div>
</div>
<div class="row2">
<div class='r1'> </div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2 r1" alt="img1">
<div class="text2 r1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
These divs have an image with overlapped text, which looks how I want it to at full size.
However, when I resize down to small mobile size the text goes to the top of the image and the divs overlap.
How can I make this so that on resize the text goes to the bottom of the image, but most importantly, the containers don't overlap?
.container {
position: relative;
font-family: Arial;
clear:both;
}
.text-block {
clear:both;
position: absolute;
bottom: 30px;
right: 10px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
font-family: Arial;
clear:both;
}
.text-block {
clear:both;
position: absolute;
bottom: 30px;
right: 10px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<h2>Image Text Blocks</h2>
<p>How to place text blocks over an image:</p>
<div class="container">
<img src="https://via.placeholder.com/250x150" alt="Nature" style="width:90%;">
<div class="text-block">
<h4>Nature</h4>
<p>What a beautiful sunrise</p>
</div>
</div>
<div class="container">
<img src="https://via.placeholder.com/250x150" alt="Nature" style="width:90%;">
<div class="text-block">
<h4>Nature</h4>
<p>What a beautiful sunrise</p>
</div>
</div>
</body>
</html>
Allow the block level elements (.text-blocks) to stack as they naturally will for small viewports. Then apply absolute positioning after your preferred breakpoint using a media query.
.container {
font-family: Arial;
}
.container img {
display: block;
width: 100%;
}
.text-block {
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
#media ( min-width: 48em ) {
.container {
position: relative;
}
.container img {
width: 90%;
}
.text-block {
position: absolute;
bottom: 30px;
right: 10px;
}
}
<h2>Image Text Blocks</h2>
<p>How to place text blocks over an image:</p>
<div class="container">
<img src="https://via.placeholder.com/250x150" alt="Nature">
<div class="text-block">
<h4>Nature</h4>
<p>What a beautiful sunrise</p>
</div>
</div>
<div class="container">
<img src="https://via.placeholder.com/250x150" alt="Nature">
<div class="text-block">
<h4>Nature</h4>
<p>What a beautiful sunrise</p>
</div>
</div>
I want to align an image and h1 in the same line. I have attached my source code and it doesn't work. can someone tell what's wrong with it.
<head>
.header img{
float: left;
width: 2px;
height: 3px;
background: #555;
}
.header h1{
position: relative;
top: 18px;
left: 10px;
}
<title> home page </title>
</head>
<body>
<div class="header">
<img src="greenlock.jpg" alt="logo" />
<h1> UNIVERCITY OF GREENLOCK <h1>
</div>
use display : inline-block
.header img{
display:inline-block;
width:10px;
height:3px;
background:#555
}
.header h1{
display:inline-block;
position: relative;
}
<div class="header">
<img src="greenlock.jpg" alt="logo" />
<h1> UNIVERCITY OF GREENLOCK <h1>
</div>
you can also use float:left to image and float:right to the header
.header img{
float:left;
width:10px;
height:3px;
background:#555
}
.header h1{
flaot:right;
position: relative;
}
<div class="header">
<img src="greenlock.jpg" alt="logo" />
<h1> UNIVERCITY OF GREENLOCK <h1>
</div>
Please try this code:
.header img{
width:2px;
height:3px;
background:#555;
vertical-align: middle;
}
.header h1{
display: inline-block;
vertical-align: middle;
}
In a situation like this, where the image is essentially part of the heading, I would have the image which sits beside the <h1>, not as an <img> at all but as a background style rule applied to the <h1>:
h1 {
margin: 18px 0 0 10px;
padding-left: 30px;
font-size: 16px;
line-height: 24px;
text-transform: uppercase;
background: url('http://placehold.it/24x24') no-repeat left top rgb(255,255,255);
}
<header>
<h1>University of Greenlock</h1>
</header>
OK i got the container bit working but there is an issue i want the image to resize it self depending on the screen resolution so it doesn't look weird.
this is my code so far
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="CSS/main.css">
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Contact</li>
</ul>
<div class="main_image"></div>
<div class="image123">
<div class="imgContainer">
<img src="Image/test_image_slot.jpg"/>
<p>This is image 1</p>
</div>
<div class="imgContainer">
<img src="Image/test_image_slot.jpg"/>
<p>This is image 2</p>
</div>
<div class="imgContainer">
<img src="Image/test_image_slot.jpg"/>
<p>This is image 3</p>
</div>
<div class="imgContainer">
<img src="Image/test_image_slot.jpg"/>
<p>This is image 4</p>
</div>
</div>
</body>
</html>
main.css
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #360836;
text-align:center;
}
li {
display:inline;
}
li a {
display: inline-block;
color: #d14977;
text-align: center;
padding: 14px 16px;
text-decoration: none;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
li a:hover {
color: white;
}
div.main_image {
content:url(../Image/everest.jpg);
max-width: 100%;
height: auto;
width: auto\9;
}
.imgContainer{
float:left;
}
what can i do to make the image resize it self or may be I'm asking the wrong type of question i just want to make the 4 image in one row and auto resize the image depending on screen resolution without using javascript just html and css.
.imgContainer{
width:25%;
}
.imgContainer img{
max-width:100%;
//or: width:100%;
}
This should make it work... Basically, we set the width at 25% because 25x4 = 100, and then set a max width on the images inside so they do not stretch the container.
imgContainer { width: 25%; }
imgContainer img { width: 100%; height: auto; }
should do it
Using "display: table" combined with "display: table-cell" you solved your problem.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #360836;
text-align: center;
}
li {
display: inline;
}
li a {
display: inline-block;
color: #d14977;
text-align: center;
padding: 14px 16px;
text-decoration: none;
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
li a:hover {
color: white;
}
.main_image {
width: 100%;
min-height: 50px;
background-color: #ccc;
}
.imgContainer {
display: table-cell; /*IE8+ and non-IE */
background-color: #efefef;
text-align: center;
}
.image-wrap {
display: table; /*IE8+ and non-IE */
width: 100%;
}
</style>
</head>
<body>
<ul>
<li>
<a class="active" href="#home">Home</a>
</li>
<li>
Contact
</li>
</ul>
<div class="main_image"></div>
<div class="image-wrap">
<div class="imgContainer">
<img src="Image/test_image_slot.jpg" />
<p>This is image 1</p>
</div>
<div class="imgContainer">
<img src="Image/test_image_slot.jpg" />
<p>This is image 2</p>
</div>
<div class="imgContainer">
<img src="Image/test_image_slot.jpg" />
<p>This is image 3</p>
</div>
<div class="imgContainer">
<img src="Image/test_image_slot.jpg" />
<p>This is image 4</p>
</div>
</div>
</body>
</html>
Try
.imgContainer {
width:25%;
height: auto;
}
.imgContainer img {
width:100%;
height: auto;
}
Anyway, get in touch with BOOTSTRAP - it's VERY helpful.
When you need to scale images in bootstrap you just simply add - for example - class col-lg-3 (12/4=3), to put 4 images in a row - think about it buddy ;-)
I'm arranging a couple of block level elements next to an image and have used the following HTML/CSS to position everything:
<style>
#logo p {
font-size: 24px;
margin-left: 220px;
margin-top: -27px;
}
#logo img {
position: absolute;
top: 10px;
}
#logo #a {
padding-top: 43px;
}
</style>
<div id="logo">
<p id="a">Label A</p>
<p id="b">Label B</p>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
</div>
(Editable version here: http://jsfiddle.net/49cAv/1/)
To get the two P elements closer I've used a combination of margin-top: -27px; and padding-top: 43px; which seems a bit clunky.
Is there a better / cleaner way of doing this?
Here is my solution:
html
<div id="logo">
<div id="imgCont">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
</div>
<div id="labelCont">
<p id="a">Label A</p>
<span style="clear:left"></span>
<p id="b">Label B</p>
</div>
</div>
css
*{
padding:0;
margin:0;
}
#logo p {
font-size: 24px;
}
#logo img {
position: relative;
}
#imgCont{
float:left;
}
#labelCont{
float: left;
padding: 15px;
}
fiddle