I would like to put one image above another, but all answers I find are using position absolute with specific pixels. I want to achieve it in a responsiveness way, so I would like to avoid strict composition.
Now my code looks like:
<style>
.header{
margin:20px;
text-align:center;
}
.data{
text-align:center;
}
</style>
<body>
<h1>Hello Stack Overflow!</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
I would like to move the .logo img above the background img and, have different classes to move it:
Center center;
Center right;
Center left;
So, my goal is having the possibility to accomplish the following image with a class that can "move" my logo, but always maintaining it above the background image. Note that the background image could have not always the same size.
I did a plunkr to test with where you can reproduce it.
Although this answer uses absolute positioning it is responsive and should work they way you want. This answer also assumes that you have high quality background images that will not lose quality when scaled to a large size.
The logo is centered by default. There is a .logo-right and .logo-left class for side positioning.
There is a small edge case that the logo breaks out a little at small screens when the height of the background image is less than the logo. To account for this you can set the logo width to a percentage and also give it a max-width so that it doesn't enlarge too far if you are using a rasterized (non-svg) logo (see Snippet) .
.header {
margin:20px;
text-align:center;
position: relative;
}
.data{
text-align:center;
}
.background {
height: auto;
width: 100%;
}
.logo {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
max-height: 100px;
position: absolute;
right: 0;
top: 0;
width: auto;
}
.logo-right {
margin-right: 5%;
}
.logo-left {
margin-left: 5%;
}
<h1>Centered</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
<h1>Right</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo logo-right">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
<h1>Left</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo logo-left">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
Maybe something like this?
http://plnkr.co/edit/wd6wui?p=preview
<style>
.header {
margin: 20px;
text-align: center;
position: relative;
}
.img-container {
position: absolute;
top: 0;
width: 100%;
}
.data {
text-align: center;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
<div class="header">
<div class="img-container">
<img src="http://lorempixel.com/g/800/200/" class="background">
</div>
<div class="img-container">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
</div>
Not sure I understood your question ;)
wrapping the images in div will do the work
<div><img src="http://lorempixel.com/100/100/" class="logo"></div>
Related
I'm trying to simulate a shelf of books so that they look like this:
photoshop_mock_up
I can get the books to align just fine, but can't figure out how to make them retain their odd heights/widths, and not all just resize to the container:
HTML:
<div class="images-outer">
<div class="image-inner">
<img src="img/_0002_aristotle__poetics_and_rhetoric.png">
</div>
<div class="image-inner">
<img src="img/_0005_david_mamet__make_believe_town.png">
</div>
<div class="image-inner">
<img src="img/_0003_david_mamet__bambi_vs_godzilla.png">
</div>
<div class="image-inner">
<img src="img/_0006_annie_dillard__pilgrim_at_tinker_creek.png ">
</div>
</div>
CSS:
.images-outer {
height: 50%;
max-height: 50%;
display: flex;
vertical-align: bottom;
}
.image-inner img {
max-height: 100%;
}
img {
max-height: 100%;
}
This makes them look like this: web_page
Ideas?
In display: flex, you should use align-items to set vertical align and justify-content for horizontal align.
.images-outer {
height: 300px;
max-height: 50%;
display: flex;
align-items:flex-end;
justify-content:center;
background: black
}
.image-inner {
max-width:30px;
padding: 0px 5px;
}
.image-inner {
object-fit: contain;
object-position: bottom;
width: 100%;
}
<div class="images-outer">
<div class="image-inner">
<img src="https://picsum.photos/30/200" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/240" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/180" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/200" />
</div>
</div>
</div>
.image-inner img{
width:100%;
height:auto;}
This should help in sizing the images properly
Else, you could dive each image an individual class and give each it's individual height.
I have a page wherein I have multiple full-width <img>'s - I have to add a <button> and <h2> overlaid upon each image. Images will have variable heights, so elements within need to conform to the perimeter set by their width + height.
An image is styled thus:
CSS
.FullWidthImg {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
HTML
<div id="container"> <!--ONLY STYLING FOR container IS position: relative-->
<img src="xx" alt="xx" style="FullWidthImg"/>
<h2>TEXT GOES HERE</h2>
<button>i'm a button</button>
</div>
Most approaches suggest styling <h2> and <button> with position: absolute - this works if you have one image element and the image always has the same height, however neither is the case for me.
Another approach I've seen is making something like:
<div style="background-image: url(/img.com)">
<h2>TEXT GOES HERE</h2>
<button>i'm a button</button>
</div>
... And then positioning elements within, which could work but I'd like to avoid in-line styling if possible.
Are there any alternative approaches that would work for this use-case?
Building off your first suggestion, here's how you could accomplish your desired layout without inline styles.
.img-wrapper {
position: relative;
}
.img-wrapper img {
width: 100%;
}
.img-wrapper .overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.img-wrapper h2 {
margin: 0 0 .5em;
}
<div class="img-wrapper">
<img src="http://via.placeholder.com/600x150/eee/ddd" />
<div class="overlay">
<h2>Heading</h2>
<button>Button</button>
</div>
</div>
<div class="img-wrapper">
<img src="http://via.placeholder.com/600x400/eee/ddd" />
<div class="overlay">
<h2>Heading</h2>
<button>Button</button>
</div>
</div>
I'm new to HTML and CSS. For one of my projects, I need to put 16 images into a 4x4 grid of tiles on a webpage. These tiles cannot have gaps between them, and they need to stretch to fill the browser from side to side. They also should only scroll vertically. We are only allowed to use JavaScript or JQuery so I can only use HTML and CSS.
I wrote 4 div elements, each represents a row; inside each div, a span element holds 4 images - that's how I made the 4x4 grid. A code snippet looks like this:
/* One row in a div*/
<div class="map">
<span>
<img src="map_images/1.png">
<img src="map_images/2.png">
<img src="map_images/3.png">
<img src="map_images/4.png">
</span>
</div>
I also wrote a navigation bar that should float above the background images in the upper right corner:
/* 4 div elements of 4 rows before this code*/
<div id="nav">
<div>Foo</div>
<div>Boo</div>
</div>
For the above code, my stylesheet looks like this:
.map{
margin:0;
padding:0;
}
#nav {
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
However, I've encountered several problems at this point.
First, I still have column gaps and row gaps between all 16 images. No matter what values I set map margin and padding to, nothing changes. I even tried negative values, still nothing changed. Can someone tell me how to go about this problem, eliminating all gaps?
Secondly, I googled and learned that z-index can be used to make div float above background; however, this is no working here and it seems that div #nav stays in the upper right corner as a separate div that does take up space, instead of floating above. Any suggestions on this?
Float left and set the width to 25%. Also I show below how to create a floating menu using the :hover pseudo-class.
.map div img {
width: 25%;
float:left;
display: inline-block;
}
#nav {
width: 50px;
background-color: grey;
}
#nav ul {
margin: 0;
padding: 0;
width: 50px;
background-color: grey;
position: absolute;
display:none;
}
#nav:hover ul, #nav ul:hover {
display:block;
}
<div id="nav">
Menu
<ul>
<li>Foo</li>
<li>Boo</li>
</ul>
</div>
<div class="map">
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
</div>
I think you are looking for something like this? See fiddle http://jsfiddle.net/DIRTY_SMITH/q12bh4se/4/
Snippet :
body {
margin: 0px;
}
div {
width: 50%;
float: left;
}
img {
width: 50%;
float: left;
}
.top-left {
z-index: 9999;
position: absolute;
top: 0;
left: 0;
color: white;
}
.top-right {
z-index: 9999;
position: absolute;
top: 0;
right: 0;
color: white;
}
<h1 class="top-left">Top Left</h1>
<h1 class="top-right">Top Right</h1>
<div class="row-1-col-1">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-1-col-2">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-2-col-3">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-3-col-3">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
All I had to do was set float: left and width: 25% on the images in CSS
.map img{
float: left;
width: 25%;
}
DEMO
I want to make a responsive design with different images, for example:
<div id="home" class="page">
<div id="home_1" class="section"><!-- Page 1 -->
<div id="home_1_1" class="full">
<img src="images/home/home_1/home_1.png" class="full-image"></img>
</div>
</div>
<div id="home_2" class="section"><!-- Page 2 -->
<div id="home_2_1" class="full">
<img src="images/home/home_2/home_2_block1.png" class="full-image"></img>
</div>
<div id="home_2_2" class="full">
<img src="images/home/home_2/home_2_block2.png" class="full-image"></img>
</div>
</div>
<div id="home_3" class="section"><!-- Page 3 -->
<div id="home_3_1" class="full">
<img src="images/home/home_3/home_3_block1.png" class="full-image"></img>
</div>
<div id="home_3_2" class="full">
<img src="images/home/home_3/home_3_block2.png" class="full-image"></img>
</div>
</div>
</div>
home_1, home_2 and home_3 are seperate image blocks. but home_2_1 home_2_2 should have the same top position and they also should be below home_1.
this is my css:
#home{
width: 100%;
text-wrap: none;
white-space: nowrap;
}
.section{
position: relative;
display: inline-block;
width: 100%;
}
.full{
position: absolute;
top:0;
left:0;
}
.full-image{
width: 100%;
display: block;
}
The problem is that I see only one image, the others don't floats beside each other.
I hope somebody can help me with this.
I'm not quite sure what you mean, but have you tried just using floats?
Check this fiddle: http://jsfiddle.net/9Ryby/
.section {
clear: both;
}
.full-image {
width: 50%;
float: left;
}
I'm trying to create a grid layout for my portfolio site. I'm having trouble with getting it to work online. When I try a preview in dreamweaver it look just fine, but when uploaded it's all messed up.. Please help
http://www.kaspervanvliet.nl/index.html
HTML:
<div id="images-containter">
<div class="col">
<img src="images/k_Web-03.jpg">
<img src="images/curriculum_new.jpg">
<img src="images/Finnley's_2.jpg">
<img src="images/Justme_1.jpg">
</div>
CSS:
.images-containter {
position: relative;
width: auto;
height: auto;
}
.images-containter img{
width: 350px;
height: auto;
background: #fffff;
padding: 0px;
margin: 15px;
border: none;
}
.col {
width: 350px;
display: block;
float: left;
margin: 15px;
vertical-align: top;
align: center;
}
Set a width and height on your image tags. I assume you want it to all look the same cross browser. That would be the best bet.
Your code: my changes
<div class="col">
<img src="images/k_Web-03.jpg" **height="100" width="75"**>
<img src="images/curriculum_new.jpg" **height="100" width="75"**>
<img src="images/Finnley's_2.jpg" **height="100" width="75"**>
<img src="images/Justme_1.jpg" **height="100" width="75"**>
</div>
etc...
This takes some planning on your part, but you could simply allow them to click the image and see a full view. Otherwise, you're going to have different images with different aspect ratios and it will never look as good as you want it to.
Also, please don't structure your site with tables unless you're going to be using tabular data. It's a pain to edit in the long run.
EDIT**
The below html/css will give you the desired result. There are 4 divs with the class of "cols" those 4 divs are set up to be 4 columns. The images inside the div will stack, evenly spaced above and below. Also, the height will automatically adjust based on the width being constrained to 230px.
Let me know if you need anything else.
<!doctype html>
<html>
<head>
<style>
.wrap{
width:960px;
margin:0 auto;
}
.cols{
width:230px;
padding:5px;
float:left;
}
.cols img{
width:230px;
display:block;
margin:5px 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="cols">
<img src="images/k_Web-01.jpg">
<img src="images/k_Web-02.jpg">
<img src="images/k_Web-03.jpg">
</div>
<div class="cols">
<img src="images/k_Web-04.jpg">
<img src="images/k_Web-05.jpg">
<img src="images/k_Web-06.jpg">
</div>
<div class="cols">
<img src="images/k_Web-07.jpg">
<img src="images/k_Web-08.jpg">
<img src="images/k_Web-09.jpg">
</div>
<div class="cols">
<img src="images/k_Web-10.jpg">
<img src="images/k_Web-11.jpg">
<img src="images/k_Web-12.jpg">
</div>
</div>
</body>
</html>
You can also use css to set the heights and widths one time. Try this:
HTML:
<div class="img_container">
<div class="port"><img src="images/..."></img></div>
<div class="land"><img src="images/..."></img></div>
</div>
CSS:
.img_container {
width: 250px;
height: 250px;
background-color:grey;
}
.port {
width: 100px;
height: 200px;
}
.land {
width: 200px;
height: 100px;
}
That's better, because you cut the style from code.