How do I move my first thumbnail left an and have no space at end on right side?
charisma 0 Newbie Poster
JorgeM 958 Problem Solver Team Colleague Featured Poster
In general, you can float the element to the left and have a right margin of 0px. This depends also on the elements that sorround the target element.
For example, the style applied would be float:left;margin-right:0px.
charisma 0 Newbie Poster
is it in this code?
<style type="text/css">
body {
background: #00546b;
margin-top: 20px;
}
h2 {
color: #eee;
font-family: Verdana;
}
.gallery {
width: 770px;
margin: 0 auto;
text-align: center;
}
#scroll_box {
width: 770px;
margin: 10px 0;
overflow: auto;
}
.thumbnails {width: 2925px;}
.thumbnails img {
height: 80px;
border: 4px solid #000;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview img {
border: 4px solid #000;
padding: 1px;
height: 350px;
}
</style>
JorgeM 958 Problem Solver Team Colleague Featured Poster
Yes, that "code" is called CSS.
.thumbnails img {
height: 80px;
border: 4px solid #000;
padding: 1px;
margin: 0 10px 10px 0;
Without seeing all of your HTML and CSS, its hard to tell you exactly what you need to do. Again the general idea is that if you want to "shift" an element to the left, you can do so using various methods. One is to use the float:left; style.
In the code I pasted, you can see that you are applying a right margin of 10px. The margin property has for values, margin: top right bottom left. so you are applying a 0px margin for the top, 10px for the right, 10px for the bottom, and 0px for the left. You also have a 1px space around the element (top, right, bottom, and left) you are applying to the images. The padding is between the element and the border.
charisma 0 Newbie Poster
<!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" />
<link rel="stylesheet" href="nav_files/css3menu1/style.css" type="text/css" />
<title>Patio's</title>
<style type="text/css">
body {
background: #00546b;
margin-top: 20px;
}
h2 {
color: #eee;
font-family: Verdana;
}
.gallery {
width: 770px;
margin: 0 auto;
text-align: center;
}
#scroll_box {
width: 770px;
margin: 10px 0;
overflow: auto;
}
.thumbnails {width: 2925px;}
.thumbnails img {
height: 80px;
border: 4px solid #000;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview img {
border: 4px solid #000;
padding: 1px;
height: 350px;
}
</style>
<script type="text/javascript">
var GB_ROOT_DIR = "./patio/";
</script>
<script type="text/javascript" src="./patio/ajs.js"></script>
<script type="text/javascript" src="./patio/ajs_fx.js"></script>
<script type="text/javascript" src="./patio/gb_scripts.js"></script>
<script type="text/javascript" src="./patio/iwebalbumpics.js"></script>
<link href="./patio/gb_styles.css" rel="stylesheet" type="text/css" />
<link href="./patio/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="170" border="0" align="center" cellpadding="4" cellspacing="4">
<tr>
<td width="750"><img src="images/new banner.gif" width="755" height="173" alt="banner" /></td>
</tr>
<tr>
<td><div align="center"><center><ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="index.html" title="Home" style="width:51px;height:16px;line-height:16px;">Home</a></li>
<li class="topmenu"><a style="width:159px;height:16px;line-height:16px;"><span>Interlocking stone </span></a>
<ul>
<li class="subfirst"><a href="retaining_walls.html" title="Retaining Walls">Retaining Walls</a></li>
<li><a href="sidewalks.html" title="Sidewalks">Sidewalks</a></li>
<li><a href="drive_ways.html" title="Driveways">Driveways</a></li>
<li><a href="patio.html" title="Patio's">Patio's</a></li>
</ul>
</li>
<li class="topmenu"><a style="width:114px;height:16px;line-height:16px;"><span>Landscaping</span></a>
<ul>
<li class="subfirst"><a href="boulders.html" title="Boulders">Boulders</a></li>
<li><a href="yard_leveling.html" title="Yard Levelling">Yard Levelling</a></li>
<li><a href="hauling.html" title="Hauling">Hauling</a></li>
<li><a href="window_wells.html" title="Window Well & Foundation Dig">Window Well & Foundation Dig</a></li>
</ul>
</li>
<li class="topmenu"><a style="width:89px;height:16px;line-height:16px;"><span>Demoliton</span></a>
<ul>
<li class="subfirst"><a href="step_demo.html" title="Step demo">Step Demo</a></li>
<li><a href="commercial.html" title="Commercial Concrete Floors & excavation">Commercial Concrete Floors & excavation</a></li>
<li><a href="driveway_demo.html" title="Driveway Demo">Driveway Demo</a></li>
<li><a href="garage.html" title="Garages">Garages</a></li>
<li><a href="interiorgutouts.html" title="Interior Gutouts">Interior Gutouts</a></li>
<li><a href="specialty.html" title="Specialty">Specialty</a></li>
</ul>
</li>
<li class="topfirst"><a href="testimonials.html" title="Testimonials" style="width:114px;height:16px;line-height:16px;">Testimonials</a></li>
<li class="topmenu"><a style="width:96px;height:16px;line-height:16px;"><span>Contact us</span></a>
<ul>
<li class="subfirst"><a href="contactus.html" title="">Contact</a></li>
<li><a href="about.html" title="About us">About us</a></li>
</ul>
</li>
</ul>
<ul id="css3menu2" class="topmenu">
<br>
<h2 align="center">Patio</h2>
</ul>
</center>
</div></td>
</tr>
</table>
<div class="preview" align="center"> <img id="preview"img src="patio1/pat1.jpg" /> </div>
<div class="gallery">
<div id="scroll_box">
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" id="img1"img src="patio1/pat1.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" id="img2"img src="patio1/pat2.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img3.src" id="img3"img src="patio1/pat3.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img4.src" id="img4"img src="patio1/pat4.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img5.src" id="img5"img src="patio1/pat5.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img6.src" id="img6"img src="patio1/pat6.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img7.src" id="img7"img src="patio1/pat7.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img8.src" id="img8"img src="patio1/pat8.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img9.src" id="img9"img src="patio1/pat9.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img10.src" id="img10"img src="patio1/pat10.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img11.src" id="img11"img src="patio1/pat11.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img12.src" id="img12"img src="patio1/pat12.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img13.src" id="img13"img src="patio1/pat13.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img14.src" id="img14"img src="patio1/pat14.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img15.src" id="img15"img src="patio1/pat15.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img16.src" id="img16"img src="patio1/pat16.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img17.src" id="img17"img src="patio1/pat17.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img18.src" id="img18"img src="patio1/pat18.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img19.src" id="img19"img src="patio1/pat19.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img20.src" id="img20"img src="patio1/pat20.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img21.src" id="img21"img src="patio1/pat21.jpg" alt="Image Not Loaded"/>
<!--end .thumbnails--></div>
<!--end scroll_box--></div>
<!--end gallery--></div>
<div>
<center>
<p>Copyright 2011 REN Hauling</p>
<h4>Website designed by <a href="http://www.cjwebconsulting.com" target="_blank">CJ Web Consulting</a> </h4>
</center></div>
</body>
</html>
JorgeM 958 Problem Solver Team Colleague Featured Poster
To move the thumbnails located at the bottom of the screen to default to the left, just add float:left; to this section. It will look like this.
.thumbnails img {
height: 80px;
border: 4px solid #000;
padding: 1px;
margin: 0 10px 10px 0;
float:left;
What did you mean by:
have no space at end on right side?
I do not see any space on the right side of the thumbnails. I have a copy of your code, no pictures of course, but that is OK because there is an outline so I get the overall format. Is there anything else you need help with on this page?
charisma 0 Newbie Poster
JorgeM 958 Problem Solver Team Colleague Featured Poster
I just checked the page using your link, I don't see a gap or I don't understand what you mean.
Do you see this problem across different browsers. A screenshot of what you see may help.
charisma 0 Newbie Poster
I only see the gab in Opera, IE 9 and firefox. should I even worry about it? File attached
JorgeM 958 Problem Solver Team Colleague Featured Poster
I am not at a computer, but I think if you remove the .thumbnails {width: 2925px;}
I think that will take care of it. If not, I can help you some more later today.
One way or another I think it's worth the the time to get these little issues resolved.
charisma 0 Newbie Poster
What browser are you useing?
JorgeM 958 Problem Solver Team Colleague Featured Poster
I accessed your page with IE9 and Chrome and both look good to me. No gap at the end of the thumbnails. see attached pic.
charisma 0 Newbie Poster
Cool. I was able to fix it, and looked at it with all browseres.
JorgeM 958 Problem Solver Team Colleague Featured Poster
awesome, good news!
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.