My problem is that when I re-size the browser window, instead of allowing the user to scroll in the horizontal direction, they simply disappear. As you can see, I have a div called product list, and my aim is to add a scroll bar when they do not fit on the screen. However, I still want avoid using the scroll bar for the entire page.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: 0px;
overflow-y:hidden;
}
.productList {
overflow-x: scroll;
overflow-y:scroll;
position:fixed;
height:75%;
min-width:3000px;
max-width:5000px;
}
.header
{
height:10%;
border-bottom: 1px groove black;
font-size:100px;
font-family:Verdana;
}
.menu {
width: 800px;
/* border-top-style: groove;*/
/*border-bottom-style: groove;*/
/*border-bottom-color: Black;*/
font-family: Georgia;
border:2px groove black;
border-left:0px;
height:4%;
}
.menuitem {
/*/border-top: 1px groove black;*/
border-bottom: 1px groove black;
text-decoration: none;
display: inline-block;
text-align: center;
padding: 4px;
cursor: pointer;
background-color: White;
color: Black;
font-weight: bold;
}
.menuitem:hover {
/*/border-top: 1px groove black;*/
border-bottom: 1px groove black;
text-decoration: none;
display: inline-block;
text-align: center;
padding: 4px;
cursor: pointer;
background-color: #505050;
color: White;
font-weight: bold;
}
.product
{
display:block;
width:200px;
float:left;
}
.logo {
width: 200px; /*should be the same as product width*/
height: 100px; /*was 100px*/
position: fixed;
background-color: white;
display: block;
/*margin-bottom:100px;*/
}
.logos
{
width:1400px;
}
.search
{
height:11%;
border:1px groove gray;
}
</style>
</head>
<body style="">
<div>
<div class="header">
Header
</div>
<div class="menu">
<div class="menuitem">Home</div>
<div class="menuitem">Home</div>
<div class="menuitem">Home</div>
<div class="menuitem">Home</div>
</div>
<!--should insert the serach bar here -->
<div class="search">Sökfunktioners utrymme. TODO: show/hide funktion
<br />
Sökfält1, etc
</div>
<!--<div class="logos">
<img src="images/hm-logo.png" class="logo"/>
<img src="images/mq-logo.jpg" class="logo" />
<img src="images/kapp-ahl-logo.svg" class="logo" />
<img src="images/dressmann-logo.png" class="logo" />
<img src="images/jack-jones-logo.jpg" class="logo" />
<img src="images/lindex-logo.svg" class="logo" />
<img src="images/brothers-logo.png" class="logo" />
</div>-->
<div class="productList">
<div class="product">
<img src="images/hm-logo.png" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/hmprod.jpg" width="200" />
<img src="ex/hmprod.jpg" width="200" />
<img src="ex/hmprod.jpg" width="200" />
</div>
<div class="product">
<img src="images/mq-logo.jpg" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/jack-jones-logo.jpg" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/kapp-ahl-logo.svg" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/dressmann-logo.png" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/jack-jones-logo.jpg" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/lindex-logo.svg" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/brothers-logo.png" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/brothers-logo.png" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/brothers-logo.png" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<!-- <div style="clear:both;"></div>-->
</div><div style="clear:both;"></div></div>
</body>
</html>
Related
I know there are several threads on the "overlapping images" topic, but I can't find one that addresses my specific problem.
I have five circular images and I need to display them with slight overlap, kind of like how a deck of cards looks when it's laid out in a fan.
Here is what it should look like:
Here is what I currently have:
All the code examples I've found are aimed at overlapping two square images and I can't figure out how to translate to this scenario. Any help would be greatly appreciated.
I've tried messing around with grid layout and negative margins, but it was just a huge mess.
I can't share the source code but I've recreated the exact same HTML/CSS with dummy data in this codepen.
Code:
.main-container {
height: fit-content;
padding-top: 3rem;
}
#icons-container {
display: flex;
position: relative;
justify-content: center;
}
.icon {
height: 40px;
width: 40px;
border-radius: 50%;
border: 1px solid white;
}
<div class="main-container">
<div id="icons-container">
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon1" />
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon2" />
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon3" />
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon4" />
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon5" />
</div>
</div>
</div>
You can use margin-right/margin-left on the icon . To overlap, let margin-right have negative values
.main-container {
height: fit-content;
padding-top: 3rem;
}
#icons-container {
display: flex;
position: relative;
justify-content: center;
}
.icon {
height: 40px;
width: 40px;
border-radius: 50%;
border: 1px solid white;
margin-right: -15px;
}
<div class="main-container">
<div id="icons-container">
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon1">
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon2">
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon3">
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon4">
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon5">
</div>
</div>
</div>
There are seven images of different size and I want to put all the images below the big image. Can any one please help me to solve this?
.imagelist img{
width: 100px;
border: 2px solid black;
font-size: 0;
}
<div class="wrapper">
<img src="images/wide.jpg" width="100%" alt="wide-image">
</div>
<div class="imagelist">
<img src="images/a.jpg" width="100px;">
<img src="images/b.jpg" width="100px;">
<img src="images/c.jpg" width="100px;">
<img src="images/d.jpg" width="100px; height:90px;">
<img src="images/e.jpg" width="100px;">
<img src="images/f.jpg" width="100px;">
<img src="images/g.jpg" width="100px;">
</div>
You can use the following solution:
.imagelist img {
float:left;
width:calc(100% / 7 - 4px);
border:2px solid black;
font-size:0;
}
.imagelist {
clear:both;
}
<div class="wrapper">
<img src="http://placehold.it/350x350" width="100%" alt="wide-image">
</div>
<div class="imagelist">
<img src="http://placehold.it/350x350">
<img src="http://placehold.it/350x350">
<img src="http://placehold.it/350x350">
<img src="http://placehold.it/350x350">
<img src="http://placehold.it/350x350">
<img src="http://placehold.it/350x350">
<img src="http://placehold.it/350x350">
</div>
<div id="divT">
<img class="divTimg" src="divT/00.jpg" alt="img">
<img class="divTimg" src="divT/01.jpg" alt="img">
<img class="divTimg" src="divT/02.jpg" alt="img">
<img class="divTimg" src="divT/03.jpg" alt="img">
<img class="divTimg" src="divT/04.jpg" alt="img">
<img class="divTimg" src="divT/05.jpg" alt="img">
<div class="clear"></div>
</div>
css
#divT{
overflow-x:hidden;
}
.divTimg{
float:left;
width:17%;
cursor:pointer;
border-right:2px ridge gold;
}
05.jpg is placed in a new line, bellow the rest of images, but I need to keep them all in one line, and if there is no space enough - the last image should be visible partly.
I tried with various values of overflow-x for the parrent div, but without success.
To achieve the 'scrolling off to the side effect' you need to create a wrapper element, that contains a much wider element that then contains your images. This then allows you to shrink or grow the visible section, while having the hidden content appear scrollable.
<div class="scroll">
<div class="scroll_wrapper">
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
// images
</div>
</div>
And then the CSS
.scroll {
width: 200px; // how much you want to see at once
overflow: auto;
}
.scroll_wrapper {
width: 600px; // this can be any number higher than the total width of the elements inside it
}
.scroll_image {
background: red;
height: 10px;
width: 50px; // just to test the scrolling
}
The jsfiddle for this can be found here
Just wrap your image list with another wrapper:
<div id="wrapper">
<div id="divT">
<img class="divTimg" src="divT/00.jpg" alt="img">
<img class="divTimg" src="divT/01.jpg" alt="img">
<img class="divTimg" src="divT/02.jpg" alt="img">
<img class="divTimg" src="divT/03.jpg" alt="img">
<img class="divTimg" src="divT/04.jpg" alt="img">
<img class="divTimg" src="divT/05.jpg" alt="omg">
<div class="clear"></div>
</div>
</div>
Add some styles:
#wrapper {
overflow:hidden;
}
#divT {
width:105%;
}
I have two questions
1) How can I remove a y-scrollbar.
2) How can I make images scroll to the left instead of down?
Any advise? Any help is much appreciated.
Here is my example:
HTML
<div class="ProjectGallery">
<img src="images/Thumb/10.jpg" data-title="<?=$title10?>" />
<img src="images/Thumb/11.jpg" data-title="<?=$title11?>" />
<img src="images/Thumb/12.jpg" data-title="<?=$title12?>" />
<img src="images/Thumb/14.jpg" data-title="<?=$title14?>" />
<img src="images/Thumb/15.jpg" data-title="<?=$title15?>" />
<img src="images/Thumb/17.jpg" data-title="<?=$title17?>" />
<img src="images/Thumb/18.jpg" data-title="<?=$title18?>" />
</div>
CSS
.ProjectGallery{height:300px;overflow:scroll;float:left;}
.ProjectGallery img{float:left;width:100%;height:100px;}
<div class="gallery-container">
<div class="gallery">
<div class="thumbnails">
<img src="images.png"/>
<img src="images.png"/>
<img src="images.png"/>
<img src="images.png"/>
<img src="images.png"/>
<img src="images.png"/>
</div>
</div>
</div>
.gallery
{
border: 1px solid black;
height: 120px;
width: 200px;
overflow: hidden;
overflow-x: scroll;
}
.thumbnails
{
width: 1000px;
}
.gallery-container img
{
width: 200px;
height: auto;
}
.thumbnails img
{
width: auto;
height: 100px;
display: block;
float: left;
border: 1px solid #ddd;
margin: 1px;
}
try this
Try this
HTML
<div class="ProjectGallery">
<img src="images/Thumb/10.jpg" data-title="<?=$title10?>" />
<img src="images/Thumb/11.jpg" data-title="<?=$title11?>" />
<img src="images/Thumb/12.jpg" data-title="<?=$title12?>" />
<img src="images/Thumb/14.jpg" data-title="<?=$title14?>" />
<img src="images/Thumb/15.jpg" data-title="<?=$title15?>" />
<img src="images/Thumb/17.jpg" data-title="<?=$title17?>" />
<img src="images/Thumb/18.jpg" data-title="<?=$title18?>" />
</div>
CSS
.ProjectGallery{height:300px;overflow:scroll;white-space:nowrap}
.ProjectGallery img{width:100%;height:100px;display:inline;}
I have h2 tags inside divs which I need to change colour on div hover, if the cufon is turned off, the h2 tag changes colour fine, but when cufon is turned on, it doesn't change colour. Here's my code:
Cufon
Cufon.set('fontFamily', 'DIN');
Cufon.replace('.listing_04 li a .bx1 .right .head_bx h2', {
hover: true,
hoverables: { a: true, div: true }
});
CSS
.listing_04 li a .bx1 .right .head_bx h2 {
color: #e91397;
font-size: 16px;
padding: 0px;
margin: 0px;
}
.listing_04 li a:hover .bx1 .right .head_bx h2 {
color: #ffff00;
}
Code
<div class="listing_04">
<ul>
<li> <a href="#">
<div class="bx1">
<div class="left"> <img src="images/friends_only.jpg" alt="" border="0" class="img_border01" />
<div class="staring_bx"> <img src="images/star1.png" border="0" /> <img src="images/star1.png" border="0" /> <img src="images/star1.png" width="16" height="15" border="0" /> <img src="images/star2.png" width="16" height="15" border="0" /> <img src="images/star2.png" width="16" height="15" border="0" /></div>
</div>
<div class="right">
<div class="head_bx">
<h2><strong>The Party Girls</strong></h2>
My Favourites</div>
<p> By : <b>Modi</b><br />
19 Jan 2010 # 20:20<br />
Views : <strong>1542484</strong><br />
Comments : <strong>84 </strong></p>
</div>
<div class="clear"></div>
</div>
</a> </li>
<li> <a href="#">
<div class="bx1">
<div class="left"> <img src="images/img_07.jpg" alt="" border="0" class="img_border01" />
<div class="staring_bx"> <img src="images/star1.png" border="0" /> <img src="images/star1.png" border="0" /> <img src="images/star1.png" width="16" height="15" border="0" /> <img src="images/star2.png" width="16" height="15" border="0" /> <img src="images/star2.png" width="16" height="15" border="0" /></div>
</div>
<div class="right">
<div class="head_bx">
<h2><strong>The Party Girls</strong></h2>
My Favourites</div>
<p> By : <b>Modi</b><br />
19 Jan 2010 # 20:20<br />
Views : <strong>1542484</strong><br />
Comments : <strong>84 </strong></p>
</div>
<div class="clear"></div>
</div>
</a> </li>
<li> <a href="#">
<div class="bx1">
<div class="left"> <img src="images/resticted_image.jpg" alt="" border="0" class="img_border01" />
<div class="staring_bx"> <img src="images/star1.png" border="0" /> <img src="images/star1.png" border="0" /> <img src="images/star1.png" width="16" height="15" border="0" /> <img src="images/star2.png" width="16" height="15" border="0" /> <img src="images/star2.png" width="16" height="15" border="0" /></div>
</div>
<div class="right">
<div class="head_bx">
<h2><strong>The Party Girls</strong></h2>
My Favourites</div>
<p> By : <b>Modi</b><br />
19 Jan 2010 # 20:20<br />
Views : <strong>1542484</strong><br />
Comments : <strong>84 </strong></p>
</div>
<div class="clear"></div>
</div>
</a> </li>
</ul>
<div class="clear"></div>
</div>
Example URL: http://dev.splished.360southclients.com/test.php In this test I've disabled cufon for you to see that the h2 colour change works when you hover over the .bx1 div, click "turn cufon on" to see it with the cufon.
You don't need to use jquery. You just weren't properly setting the color. Try this:
Cufon.replace('.listing_04 li a .bx1 .right .head_bx h2', {
hover: {
color: 'yellow'
},
hoverables: { a: true, div: true }
});
By using the hoverables setting you will be able to add the hover effect to as many elements as you like.
I managed to get it working using jQuery, here is what I have done to fix this issue, if anyone else is having this problem:
/* jQuery and Cufon for div hover */
$(".bx1").hover(function() { //handlerIn
//change the colour
var h2 = jQuery(this).find("h2");
Cufon.replace(h2, {
color: '#ffff00'
});
}, function() { //handlerOut
//revert the colour
var h2 = jQuery(this).find("h2");
Cufon.replace(h2, {
color: '#e91397'
});
});