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;
}
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 am trying to achieve facebook alike image cover as follow, but unable to achieve desire effect. This is the css that i have try. As you all can see, the div content does not position correctly.
.profile {
position: relative;
}
.profile-cover img{
width: 100%;
}
.profile-photo {
position: absolute;
left: 20px;
bottom: -60px;
}
.profile-info {
padding-right: 120px;
}
<div class="profile">
<div class="profile-cover">
<img src="http://dummyimage.com/1200x300/000/fff" />
</div>
<div class="profile-details">
<div class="profile-photo">
<img src="http://dummyimage.com/100x100/eee/000" />
</div>
<div class="profile-info">
Profile info here
</div>
</div>
</div>
<div>
Remaining content here
</div>
I am not exactly sure if you wanted this because you just say the "the div content does not position correctly", but I'm quiet sure it's that.
So, if not, tell me.
Using the absolute positioning gets out of the flow the element. So, the next ones continues as if this element didn't exist. That's why the others were showing under this absolute element.
For next time, please precise which DIV by using its id, a class name or anything that we can know for sure the one you are talking about.
.profile {
position: relative;
}
.profile-cover img{
width: 100%;
}
.profile-photo {
display: inline-block;
margin-top: -60px;
margin-left: 20px;
}
.profile-info {
display: inline-block;
padding-right: 120px;
}
<div class="profile">
<div class="profile-cover">
<img src="http://dummyimage.com/1200x300/000/fff" />
</div>
<div class="profile-details">
<div class="profile-photo">
<img src="http://dummyimage.com/100x100/eee/000" />
</div>
<div class="profile-info">
Profile info here
</div>
</div>
</div>
<div>
Remaining content here
</div>
This is how I would do it ...
.profile {
margin-bottom: 15px;
}
.profile-cover img {
width: 100%;
}
.profile-photo {
display: inline-block;
margin-left: 20px;
margin-top: -24px;
}
.profile-info {
display: inline-block;
position: relative;
top: -25px;
left: 10px;
}
<div class="profile">
<div class="profile-cover">
<img src="http://dummyimage.com/1200x300/000/fff" />
</div>
<div class="profile-details">
<div class="profile-photo">
<img src="http://dummyimage.com/100x100/eee/000" />
</div>
<div class="profile-info">
Profile info here<br>
More info here
</div>
</div>
</div>
<div>
Remaining content here
</div>
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>
Description of Problem:
I'm attempting to arrange the kittens in a star-like pattern with 3 DIV "rows." I would like for the first top row's kitten to be centered on the page (easy enough); the second (or '#middle') row to have their cats left-aligned and right-aligned, respectively; and the third ('#bottom') row to have its cats aligned similar to the second row, but slightly indented on both sides. Again, like a star.
I know the float property essentially makes the element(s) absolutely positioned, which collapses the bottom two rows' height, so that's probably not the right answer. But I've also tried text-align and futzing with margins. My brain is fried. What am I doing wrong?
Fiddle:
http://jsfiddle.net/k97CG/1/
HTML Structure:
<div id="top">
<div id="container1" class="containers">
<div id="cat1">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
<div id="middle">
<div id="container2" class="containers">
<div id="cat2">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
<div id="container3" class="containers">
<div id="cat3">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
<div id="bottom">
<div id="container4" class="containers">
<div id="cat4">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
<div id="container5" class="containers">
<div id="cat5">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
CSS Structure:
.containers {
position: relative;
width: 125px;
height: 125px;
}
#top, #middle, #bottom {
position: relative;
width: 100%;
border: 1px solid red;
}
#container1 {
margin: 0 auto;
}
#container2 {
float: left;
}
#container3 {
float: right;
}
#container4 {
float: left;
}
#container5 {
float: right;
}
Is there a reason you can't just place them all in one div, then position them with CSS?
<div>
<img id="img01" src="img1">
<img id="img02" src="img1">
<img id="img03" src="img1">
<img id="img04" src="img1">
<img id="img05" src="img1">
</div>
then
div {
position:relative;
width:100%;
height:100%;
}
div img {
position:absolute;
}
#img01 {
top:x;
left:y;
} etc
As a rule, you shouldn't rely on HTML for visually styling content unless you have no other option. That's what CSS is for.
Is this the one you are looking for:
#top, #middle, #bottom {
position: relative;
width: 100%;
border: 1px solid red;
clear:both;
}
DEMO
So my logic of Div ID's and Classes must be WAY off.
Heres whats going on:
As you can see the blocks which say PS don't align center with the slider (Which is inside a container.
Here is my css:
/*Front Page Buttons */
#frontpage-Button-Cont {
height: 350px;
}
.button-cont {
width: 175px;
float: left;
margin-left: 10px;
margin-top: 10px;
height: 250px;
}
.thumbnail {
color: #fff;
font-size: 5em;
background: #1f4e9b;
width: 175px;
height: 135px;
text-align: center;
}
.pheader {
color: #DC143C;
min-width: 175px;
text-align: center;
}
.paragraph {
text-align: center;
}
#Align-content {
margin: 0 auto;
}
And here is the html:
<div id="frontpage-Button-Cont">
<div id="Align-content">
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
</div>
</div>
My theory is that I'm using classes incorrectly?
Thanks.
You can Add this to your CSS
#frontpage-Button-Cont {
width:100%;
}
#Align-content {
display:table;
}
With this your margin:o auto can work
View This Demo http://jsfiddle.net/VGPeW/
You need to make sure that the containing div (in this case frontpage-Button-Cont) is the same width as your slider above it. Then add the property text-align:center to the container. That should fix your issue.