Scrollbar cuts images - html

Sample:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;}
a {display:block;}
img {border:0;}
</style>
</head>
<body>
<div>
<img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt="">
<img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt="">
<img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt="">
<img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt="">
<img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt="">
</div>
</body>
</html>
As you see the right part of images are cut. I know I can estimate the scrollbar width and give a fixed width to the div, but I wonder if there's a better approach.

as there are no reset css that why its may problem
but you can try this to add an css attributes on div
div{padding-right: 25px;}
its may output as better

Related

How to make an image gallery like one implemented in Instagram? (all images with the same size)

What I mean is, my image gallery (that a made using html code from a premade template that I found in the internet) is like this, all pictures have different sizes:
But with Instagram, they all look the same size:
My question is: How do I make all images have the same size? Is there a already made template somewhere?
Edit: It seems that even if pictures have different sizes, which is expected, Instagram kinda "crops" the image and shows only a portion of it to keep the same size, but not making it distorced. This is what I want...
Set a specific height and width to all the images, You can do this using CSS:
<style>
img {
height: 100px;
width: 100px;
}
</style>
This Should Help
body{
background: black;
}
.style{
float: left;
padding: 10px;
}
img {
height: 150px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
</body>
</html>

Can't edit images in divs css

I am trying to build a website and I am making a collection of images that I want to be in a row with a margin of around 20 pixels (the images are in a div that is repeated for however many images there are). When I run the code the images appear in an weird configuration in that they seem to be layered. When I add 'img' to the div class the images then appear in a column which is not what I want. I have created a very simple website example with three repeated images that I want to be in a row. In previous websites I have been able to make the images appear in a row (the way I want it to be), but now this simply will not work. I will provide my code. Any help would be appreciated :).
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<div class="heading">
<h1>Test</h1>
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
</body>
</html>
Updated correct CSS:
.image{
display: inline-block;
width: 333px;
height: 250px;
margin: 50px;
}
.image img {
width:100%;
height: 100%; *addition made by myself*
UPDATE
When I run the edited code and add 6 images the images do not resize. Is there a fix to this issue?
UPDATE Adding height: 100%; seems to have solved the issue. I will update the question to layout all steps in solving the problem.
Just add .image img {width:100%;}
so that the images will cover their entire parent div and won't be overlapped
.image{
display: inline-block;
width: 333px;
height: 250px;
margin: 20px;
}
.image img {
width:100%;
}
.heading{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<div class="heading">
<h1>Test</h1>
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
</body>
</html>
Hello check if is ok ?
.image img{
display: inline-block;
width: 333px;
height: 250px;
margin: 20px;
}
.heading{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<div class="heading">
<h1>Test</h1>
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
</body>
</html>

I cannot get div to move up

I cannot get Slogan! (id h2) to raise above the picture. h1 is perfectly fine, but not h2.
I am new to CSS, HTML, and Stackoverflow if that meens anything.
I appreciate the help in advance.
The HTML:
<html>
<head>
<link href="HomePage.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Icon">
<div id="h1">Name</div>
<img src="RightArrow.jpg" class="img-circle">
<div id="h2">Slogan!</div>
</div>
The CSS:
#h1{
line-height:120px;/*to lower it*/
position:absolute;
left:-150px;
font-size:38.5px;
}
#h2{
line-height:-300px/*to raise it*/
position:absolute;
right:400px;
font-size:38.5px;
}
#Icon{
position:relative;
margin-top:25px;
margin-bottom:100px;
margin-left:600px;
}
Line height should not be used to move anything. Use relative or absolute positioning. However, here's a simpler solution:
<html>
<head>
<link href="HomePage.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Icon">
<div id="h1">Name</div>
<div id="h2">Slogan!</div>
<img src="RightArrow.jpg" class="img-circle">
</div>
What do you exactly want to do???
Raise above image can be done just by
<div id="h2">Slogan!</div>
<img src="RightArrow.jpg" class="img-circle">
I am not getting what u want to do???
Please be more specfic about your requirement...

Print Preview White Border around image in IE and Firefox

Firefox and IE display the border around image while doing print preview. It is a simple page with two div each div contains one image width of 400px and the container div is 800px. I do not want the white border in between the two images which I am getting while doing print preview. Is there anything I am doing wrong here?? (in chrome it does not display the white border.)
I have tried this code also for print css but no luck..
<style type="text/css" media="print">
.test{float:none;display:inline; border:none;}
img{border:0;}
</style>
The code is:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="print">
.test{float:left; display:inline; border:none;}
</style>
</head>
<body>
<div style="width:800px;margin:0px auto;">
<div class="test" style="float:left;width:400px;">
<img src="1334300111712.jpg">
</div>
<div class="test" style="float:left;width:400px;">
<img src="1334300115318.jpg">
</div>
</div>
</body>
</html>
Try adding this CSS:
img { border: 0; }

Change image on hover

How can I change this exact code to do the hovering effect on mouseover?
I tried following some of the other questions and answers, but I could not really follow them.
So the HTML is:
<img src="R3.jpg" width=700 height=300 />
<div>
<img src="SSX.jpg" height=100 width=120 />
<img src="MaxPayne3Cover.jpg" height=100 width=120 />
<img src="NC.jpg" height=100 width=120 />
</br>
</div>
Now what I want to do is change the big size image when the mouse hovers over the small images.
Try this it`s so easy and the shortest one, just change the Image's URL:
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</a>
Try the following code. It's working
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
I modified the code, like it will work with some delay in it.. But still, it is not animating..
function changeImage(img){
// document.getElementById('bigImage').src=img;
setTimeout(function() {document.getElementById('bigImage').src=img;},1250);
}
Or do like this:
<a href="SSX.html">
<img src="SSX.jpg"
onmouseover="this.src='SSX2.jpg';"
onmouseout="this.src='SSX.jpg';"
height=100
width=120 />
</a>
I think this is the easiest way.
No JavaScript needed if you are using this technique
<div class="effect">
<img class="image" src="image.jpg" />
<img class="image hover" src="image-hover.jpg" />
</div>
the you will need css to control it
.effect img.image{
/*type your css here which you want to use for both*/
}
.effect:hover img.image{
display:none;
}
.effect img.hover{
display:none;
}
.effect:hover img.hover{
display:block;
}
remember to give some class to div and mention it in your css name to avoid trouble :)
The easiest way for Roll Over image or Mouse Over image for web pages menus
<a href="#" onmouseover="document.myimage1.src='images/ipt_home2.png';"
onmouseout="document.myimage1.src='images/ipt_home1.png';">
<img src="images/ipt_home1.png" name="myimage1" />
</a>
<script type="text/javascript">
function changeImage(img){
img.src=URL_TO_NEW_IMAGE;
}
</script>
<a href="RR.html"><img id="bigImage"
onmouseover="changeImage(document.getElementById('bigImage'));"
src="R3.jpg"
width=700
height=300/></a>
<div>
<a href="SSX.html" ><img src="SSX.jpg" height=100 width=120/></a>
<img src="MaxPayne3Cover.jpg" height=100 width=120/>
<a href="NC.html" ><img src="NC.jpg" height=100 width=120/></a>
</br>
</div>
If you don't want to do Javascript you can use CSS and :hover selector to get the same effect.
Here's how:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Image hover example</title>
</head>
<body>
<div class="change_img"></div>
</body>
</html>
stylesheet.css
.change_img { background-image:url('img.png'); }/*Normal Image*/
.change_img:hover { background-image:url('img_hover.png'); }/*On MouseOver*/
Just Use this:
Example:
<img src="http://nineplanets.org/planets.jpg"
onmouseover="this.src='http://nineplanets.org/planetorder.JPG';"
onmouseout="this.src='http://nineplanets.org/planets.jpg';">
</img>
Works best with the Pictures being the same size.
Copy This
<img src="IMG-1"
onmouseover="this.src='IMG-2';"
onmouseout="this.src='IMG-1';">
</img>
Here is a simplified code sample:
.change_img {
background-image: url(image1.jpg);
}
.change_img:hover {
background-image: url(image2.jpg);
}