All right, this should be simple. Basically, what I'm trying to do here is create the layout for a carousel image gallery. JSFiddle is here...
http://jsfiddle.net/G5Us4/1/
CSS...
.gallery {
margin-left: auto;
margin-right: auto;
width: 600px;
background-color: #000000;
height: 300px;
overflow: hidden;
white-space: nowrap;
}
.image {
margin-right: 300px;
margin-top: 50px;
position: relative;
height: 200px;
}
#image {
margin-left: -600px;
width: 287px;
}
#image-two {
width: 231px;
}
#image-three {
width: 242px;
}
HTML...
<div class="gallery"
><img src="../images/templateone.jpg" id ="#image" class="image" alt=""
/><img src="../images/templatetwo.jpg" id="#image-two" class="image" alt=""
/><img src="../images/templatethree.jpg" id="#image-three" class="image" alt=""/>
</div>
It's so simple, and I've been afraid to ask, for fear of missing something stupidly simple. I've looked around online, and I simply cannot figure out why this simple margin is not working.
The effect I'm trying to get is that all of the images are in a horizontal line with large right margins separating them from the other images. Now that I have that done, I need to add a negative margin on the first image so that the last image starts in the center of the stage, and the other two are outside of the hidden to the left.
For some strange reason the first image does not want to go outside the image to the left. Help please!
Thanks in advanced!
P.S. end of the tags are in front of the tags to prevent a small space between the images that occurs if there is a line break in the code.
Firstly, change id="#image-three to id="image-three" in your HTML. Remove the # on image one and two also.
<img src="../images/templateone.jpg" id ="image" class="image" alt=""/>
<img src="../images/templatetwo.jpg" id="image-two" class="image" alt="" />
<img src="../images/templatethree.jpg" id="image-three" class="image" alt=""/>
Secondly, to get it how you described, just increase that negative margin.
#image {
margin-left: -920px;
width: 287px;
}
See - jsFiddle
remove # from ids in your html Code,
<div class="gallery"
><img src="../images/templateone.jpg" id ="image" class="image" alt=""
/><img src="../images/templatetwo.jpg" id="image-two" class="image" alt=""
/><img src="../images/templatethree.jpg" id="image-three" class="image" alt=""/>
</div>
Related
I'm creating a row with a number of images of a specific height and width in HTML and CSS. An example of what I'm doing can be seen here on Imgur.
Each image is simply an <img> tag floated to the left to remove whitespace and overall, it works successfully. However, when the browser is minimised, the end image disappears due to there being inadequate space to display it. An example of this can be seen on the above Imgur link.
Is there a way, in CSS, to crop the overflow so that a cropped version of the image (while maintaining the same height) is shown rather than no image?
Update: My code, at present, is as follows:
<div class="userbar">
<a href="#">
<img src="img.jpg" alt="Image">
</a>
... and so on, about 60 times
</div>
CSS (written in SASS then compiled):
.userbar {
max-height: 64px;
}
.userbar a {
float: left;
}
.userbar a img {
display: inline-block;
height: 64px;
width: 64px;
}
Use a container to wrap your images and make the container flex and hide the overflow-x. Is this you're looking for?
.image-container {
width: 100%;
display: flex;
overflow-x: hidden;
}
<div class="image-container">
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
</div>
I've looked at other questions asking similar things, but the answers for them don't seem to work for my problem. I have a website that contains two divs on either side of a news slider, which is also in a div. The side divs are both floating to their respective sides. The problem is, when I make the window smaller, they (adLeft and adRight) overlap the center sliderDiv and go behind it. I've tried various things like making a min-width, overflow be hidden, or changing padding and margins, but I never see any difference. Any help would be greatly appreciated!
Here's the website: http://thehummingbirdplace.com/
Here's the relevant html:
<div id="adLeft">
<a href="http://www.amazon.com/Kathleen-Ball/e/B007QNUTC8/ref=ntt_athr_dp_pel_1/" target="_blank">
<img src="_images/advertisements/autumn.png" width="200" height="300" alt="Autumn's Hope" />
</a>
<br><br>
<a href="http://www.romancestorytime.com/" target="_blank">
<img src="_images/advertisements/loveCowboy.png" width="200" height="300" alt="For the Love of a Cowboy" />
</a>
</div>
<div class="clear">
</div>
<div id="adRight">
<a href="http://www.jeanjoachimbooks.com/" target="_blank">
<img src="_images/advertisements/lovesLastChance.png" width="200" height="300" alt="Love's Last Chance" />
</a>
<br><br>
<a href="http://www.jeanjoachimbooks.com/" target="_blank">
<img src="_images/advertisements/loversLiars.png" width="200" height="300" alt="Lovers and Liars" />
</a>
</div>
<div class="clear">
</div>
<div class="sliderDiv" id="slider">
<img src="_images/podcast/123013_slider.png" width="851" height="323" alt="Later in Life Romances" />
<img src="_images/podcast/122313_slider.png" width="851" height="323" alt="Christmas Contemporary Romances" />
<img src="_images/podcast/121613_slider.png" width="851" height="323" alt="Christmas Historicals" />
<img src="_images/podcast/120913_slider.png" width="851" height="323" alt="Christmas Novellas" />
<img src="_images/podcast/archive_slider.png" width="851" height="323" alt="Archive" />
</div>
And here is the css that applies to it:
#adLeft {
width: 200px;
margin-right: 50px;
float: left;
margin-left: 20px;
}
#adRight {
width: 200px;
margin-left: 50px;
float: right;
margin-right: 20px;
}
.clear {
float: clear;
}
.sliderDiv {
margin-right: auto;
margin-left: auto;
width: 851px;
position: relative;
z-index: 1;
margin-top: -48px;
}
I believe you were on the right track with using min-width, as you can use it on the body of the page to prevent it from scaling down to the point of overlap.
Adding:
body {
min-width: 1400px;
}
to your styles should do the trick. The min-width needs to be applied to body because that's the overall container which everything else is inheriting width from, and positioning against.
Alternatively, if you do not want your page to get cut off once the screen gets smaller than that minimum width, you can use media queries to hide or move the left and right side images so that they are no longer in a position to cause overlap.
A media query is used like so:
#media only screen
and (max-width: 1400px){
#adLeft, #adRight {
/* Some sort of styles here */
}
}
I hope that helps, let me know if you have any questions,
Cheers!
I have three images numbered 1, 2 and 3.
I want to display them using CSS like demonstrated here.
I currently have them inside a <span> and have tried various combinations of position and float. I can get them to be display consecutively but I cannot get image 2 to be position above image 3. Here's my code:
<img src="1.gif" style="padding-right: 4px;"/>
<span>
<img src="2.gif" style="float: top;">
<img src="3.gif" style="float: bottom;">
</span>
There's no such things as float top or bottom.
To achieve a visual like your example try this:
<div style="float;left">
<img src="1.gif" style="padding-right: 4px;"/>
</div>
<div style="float:right">
<img src="2.gif" style="display:block;">
<img src="3.gif" style="display:block;">
</div>
You want to set the images to display: block (so they'll end up on top of one another), and float the first image to the left.
CSS:
.stack img {
display: block;
}
.leftside {
padding-right: 4px;
float: left;
}
HTML:
<img src="http://placekitten.com/100/100" class="leftside"/>
<div class="stack">
<img src="http://placekitten.com/50/50">
<img src="http://placekitten.com/g/50/50">
</div>
See this in action here: http://codepen.io/paulroub/pen/zFEjH
Change your css to this:
img {
float:left;
margin-right: 4px;
}
span img {
float: left;
margin: 0;
}
span img:last-child {
margin-top: 50px;
margin-left: -50px;
}
Fiddle: http://jsfiddle.net/FLTU7/
I have two divs with two images:
<div id="div1">
<div id="div2">
<img src="img1" />
</div>
<img src="img2" />
</div>
Second one is some smaller than first. How can I put second image on first image without using
#div2{
position: absolute;
}
I need to get similar result but without using position absolute property;
The main issue is that there are a lot of other elements, in parent div, not only div2.
Negative margins
You can do lots with negative margins. I've created an example with just two images without any divs.
img {
display: block;
}
.small {
margin: -202px 0 0 0;
border: 1px solid #fff;
}
.small.top {
position: relative;
margin: 0 0 -202px 0;
}
<img src="http://www.lorempixel.com/300/300">
<img class="small" src="http://www.lorempixel.com/200/200">
And some text
<img class="small top" src="http://www.lorempixel.com/200/200">
<img src="http://www.lorempixel.com/300/300">
And some more text
My question to you is why must you do this WITHOUT
#div2 {
position: absolute;
}
If the problem you are encountering is because it's absolute to the page and not the div then make sure #div1 has the following:
#div1 {
position:relative;
}
Its not a good approach to use negative margins. Especially when email templating, gmail reject negative margin and positions. So another way is
<div class='wrapDiv' style='width: 255px;'>
<div class='divToComeUp' style='
float: left;
margin-top: 149px; width:100%;'>This text comes above the .innerDiv
according to the amount of margin-top that you give</div>
<div class='innerDiv' style='width:100%; height:600px'>
Inner div Content
</div>
</div>
You could nest div2 inside div1:
<div id="div1">
<img src="\img1.png" />
<div id="div2">
<img src="\img1.png" />
</div>
</div>
So basically i have this wrapper div, and all the elements inside it are floated elements. Only thing is the border of the wrapper div does not include the floated elements in it. Example:
<div id = "wrapper>
<div id = "content"></div>
</div>
heres the css:
#wrapper
{
width: 1000px;
margin-left: auto;
margin-right: auto;
border: 1px solid;
}
#content
{
border: 1px solid;
width: 850px;
height: 400px;
display: block;
float: left;
}
Basically #content is not enclosed within #wrapper's border, but still aligns within it, why is this?
You need to "clearfix" the container div.
Floated elements are not considered when calculating the dimensions of a container, however there are several workarounds to get what you want.
The Simplest
Just add a div like this one as the last child in your container div:
<div style="clear:both"></div>
As #Pekka comments there are many other ways to achieve the effect (without extra markup) listed in this SO question:
What methods of ‘clearfix’ can I use?
Because the point of float is to allow you to do things like
If you want to arrange elements in a row (with optional wrapping), then look to use Flexbox instead. It is a layout tool designed for that.
div {
display: flexbox;
border: 2px solid blue;
}
img {
margin: 3px;
}
<div>
<img src="https://placekitten.com/100/100" alt="">
<img src="https://placekitten.com/100/200" alt="">
<img src="https://placekitten.com/200/100" alt="">
<img src="https://placekitten.com/150/150" alt="">
<img src="https://placekitten.com/75/100" alt="">
<img src="https://placekitten.com/100/75" alt="">
<img src="https://placekitten.com/75/75" alt="">
<img src="https://placekitten.com/105/95" alt="">
</div>
If floats are the right tool for your use case, then Ed Eliot describes a large collection of different ways to make a container expand to contain it's floating children. I generally recommend setting overflow: hidden on it (to establish a new block formatting context).
div {
overflow: hidden;
border: 2px solid blue;
}
img {
float: left;
margin: 3px;
}
<div>
<img src="https://placekitten.com/100/100" alt="">
<img src="https://placekitten.com/100/200" alt="">
<img src="https://placekitten.com/200/100" alt="">
<img src="https://placekitten.com/150/150" alt="">
<img src="https://placekitten.com/75/100" alt="">
<img src="https://placekitten.com/100/75" alt="">
<img src="https://placekitten.com/75/75" alt="">
<img src="https://placekitten.com/105/95" alt="">
</div>