I have this:
<html>
<head>
<title></title>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<style type='text/css'>
body {
background-color: #000;
}
</style>
</head>
<body>
<img src="1.jpg" height="100%" style="float: left;" />
<img src="2.jpg" height="100%" style="float: left;" />
<img src="3.jpg" height="100%" style="float: left;" />
<img src="4.jpg" height="100%" style="float: left;" />
</body>
</html>
This is big images. But my browser show me two images side by side and next in a new line.
I want to disply it all in one line. How to do it?
Stop floating the images and set white-space: nowrap on the body or some other wrapper element.
body {
white-space: nowrap;
}
and:
<body>
<img src="1.jpg" height="100%" />
<img src="2.jpg" height="100%" />
<img src="3.jpg" height="100%" />
<img src="4.jpg" height="100%" />
</body>
Demo: http://jsfiddle.net/ambiguous/4Udam/
Just set really big value to body width:
body {
width:5000px;
}
But this will introduce horizontal scrolling, you should know, that people hate to scroll horizontally. Why do you not use some kind of lightbox effect?
Apply clear: left to your images as well.
<img src="1.jpg" height="100%" style="float: left;" />
Related
I am a graphic designer(freelance) using css to build a page of images it is 3 columns and 5 rows, the page works fine and when you resize the browser it goes down to 2 columns and then 1 column, the only problem is that the columns snap top the left of the browser , when i want them to remain in the center. I have looked at a few methods from here but could not get any to work. I am new to CSS layouts but not HTML. I am trying to do this without bootstrap as i want to learn CSS as i did with HTML.
here is a link to the page i am trying to build
Here is the code i am using , i am not sure if it is right...thanks`
<style type="text/css">
body {
background-color: #F3F3F3;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 18px;
color: #000;
}
#center {
display: block;
position: relative;
top: -12px;
width: 169px;
margin: auto;
}
#wrapper {
display: block;
border: 2px;
border-color: #FF30;
margin-left: auto;
margin-right: auto;
min-width: 340px;
max-width: 1040px;
}
</style>
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1" />
<title>Kieron Livingstone</title>
</head>
<div id="center">
<img src="img/page/tagname2.gif" width="169" height="28">
</div>
<div id="wrapper">
<img src="img/ns_o.jpg" name="shaman_nike" width="340" height="200" border="0">
<img src="img/mos.jpg" name="Image11" width="340" height="200" border="0">
<img src="img/bo.jpg" name="Image12" width="340" height="200" border="0">
<img src="img/nw.jpg" name="Image13" width="340" height="200" border="0">
<img src="img/n_f.jpg" name="Image14" width="340" height="200" border="0">
<img src="img/s.jpg" name="Image15" width="340" height="200" border="0">
<img src="img/fr.jpg" name="Image17" width="340" height="200" border="0">
<img src="img/n_o.jpg" name="Image16" width="340" height="200" border="0">
<img src="img/h_f.jpg" name="Image18" width="340" height="200" border="0">
<img src="img/ztm.jpg" name="Image19" width="340" height="200" border="0">
<img src="img/gg.jpg" name="Image19" width="340" height="200" border="0">
<img src="img/1234.jpg" name="Image19" width="340" height="200" border="0">
<img src="img/nm.jpg" name="Image19" width="340" height="200" border="0">
<img src="img/bab.jpg" name="Image19" width="340" height="200" border="0">
<img src="img/nm.jpg" name="Image19" width="340" height="200" border="0">
</div>
</body>
</html>
The issue is that there's not anything centering the content of your wrapper div at the moment. It just happens to look OK when the viewport's width is >= 1040px because 3 images that are 340px wide fill it up completely, and your margin-left: auto and margin-right: auto take care of centering the wrapper div in the window.
If you add
text-align: center;
to
#wrapper
{
...
}
then that will take care of centering the things inside your wrapper div.
**I got text in a div after 10 the margin works with it but for some reason the padding does not work. So if someone could tell me what is wrong??? It is a html5 taskbar/10 images in a row which i comment out when needed. **
HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Waylon's Unturned</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../css/main.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="mainHeader">
<img src="../img/logo.jpg">
<nav><ul>
<nav><ul>
<li>Home</li>
<li class="active">Donate</li>
<li>Forum</li>
<li>Contact</li>
</ul></nav>
</header>
<div class="mainContent">
<div class="content">
<article class="topcontent">
<header>
<h2>About donations</h2>
</header>
<content>
<p>Thank you for considering a donation, all of the donations will be used to improve the server, website and forum.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="BF766GY6YY8XN">
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/nl_NL/i/scr/pixel.gif" width="0" height="0">
</form>
</content>
<h1><center><tt><b>Our Donation Goal :</b></tt></center></h1>
<p>We try to get 30 euro's each month to keep all of our servers, the website and the forums running.</p>
<div class="taskbardiv">
<img class="taskbar" src="../img/loadingbarblack.png" width="1" height="40">
<!--<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">-->
<p class="taskbarp">0% Complete</p>
</div>
</article>
</div>
</body>
</html>
CSS3:
.taskbarp{
color: #82a213;
float: right;
font-size: 5;
padding-left: 20px;
margin: 10;
}
.taskbar{
border-radius: 5px;
}
.taskbardiv{
background: black;
border-radius: 10px;
padding-top: 6px;
}
I'll try to help, although I don't know if I really understand your question:
Always use measurements (like px, em or %) when working in CSS! Your font-size as well as your margin are missing them, so they will simply be ignored by the browser.
Both paddings work as expected but padding-left doesn't make much sense when you're floating the text to the right side of the container.
That's all I can see for now, hope that helps you.
The background image in the shadow_div is not appearing as it is expected to be .
Although rest of the images are loading and appearing properly which are in mySlider div
but what about the background-image of the shadow_div?
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
});
</script>
<style type="text/css">
.mySlider
{
width:800px;
height:480px;
overflow:hidden;
margin:10px auto;
}
.shadow_div
{
background-image:url(Images\shadow.png);
background-repeat:no-repeat;
background-position:top;
width:510px;
height:296px;
margin:-90px auto;
}
</style>
</head>
<body>
<div id="my_image_slider" class="mySlider">
<img src="Images\audi.jpg" alt="" title="Audi India"/>
<img src="Images\bmw.jpg" alt="" title="BMW India" />
<img src="Images\aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img src="Images\bugatti.jpg" alt="" title="Buggatti APAC" />
<img src="Images\koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div><br />
<div class="shadow_div" ></div>
</body>
</html>
you are using Backslash \ symbol.
<img src="Images\audi.jpg" alt="" title="Audi India"/>
you should use Forward Slash / Symbol . also make sure image path is right.
<img src="Images/audi.jpg" alt="" title="Audi India"/>
Here you can see the image in class .shadow_div is appearing. See the DEMO.
Your image is not getting correct path: try this below, as you are using forward slash '\'
instead of backslash '/'
<img src="Images/audi.jpg" alt="" title="Audi India"/>
<img src="Image/bmw.jpg" alt="" title="BMW India" />
<img src="Image/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img src="Image/bugatti.jpg" alt="" title="Buggatti APAC" />
<img src="Image/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
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);
}
Every other browser is rendering this correctly.
<body>
<div>
<div><img src="img/logo_top.png" width="168" height="85" alt="Logo top" /></div>
<div><img src="img/logo_bottom.png" width="168" height="83" alt="Logo bottom" /></div>
</div>
</body>
It's the same thing without the divs, and with a < br /> between images.
Update:
Here is my HTML, with doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
img {border: none;}
body {font-size: 0px;}
</style>
</head>
<body>
<div>
<div><img src="img/logo_top.png" alt="Logo top" /></div>
<div><img src="img/logo_bottom.png" alt="Logo bottom" /></div>
</div>
</body>
</html>
If it's the issue I think it is, it should be fixed if you add this CSS:
img {
vertical-align: top
}
Or this:
img {
display: block
}
Try removing the whitespace between the first </div> and the second <div>. Sometimes these CRLF whitespace characters are interpreted by the browser as an indication of physical space.