It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index ‹ Programming ‹ HTML Forum

Picture alignment

Post a reply

Picture alignment

Postby louismoore16 on Sun Nov 07, 2010 9:49 am

Hello,
This may be a pretty easy thing to do but how do you move a image to the right hand side of the page?
Ive tryed float and other css procedure but can seem to get it to work
any advice?
Cheers
louismoore16
 
Posts: 3
Joined: Sun Nov 07, 2010 9:46 am
Top

Re: Picture alignment

Postby Snowhawk on Sun Nov 07, 2010 3:29 pm

Try this

Code: Select all
<align="left">


I find sometimes you just need:

Code: Select all
<center>


Also don't forget to end the command with a forward slash like this:

Code: Select all
</right>
Snowhawk
 
Posts: 4
Joined: Sun Nov 07, 2010 3:50 am
Top

Re: Picture alignment

Postby louismoore16 on Sun Nov 07, 2010 3:56 pm

Thanks but im not sure if that will work.. see if i float left it will not move to the right hand side of the page and html doesnt recognise <right> as a valid procedure does it?
il include my codes
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}

.boxed {
position:absolute;
   left:25%;
  border: 2px black;
  border-style: plain;
  width: 700px;
  height: 800px;
}


.boxed1 {
position:absolute;
   left:25%;
  border: 1px blue;
  border-style: dotted;
  width: 700px;
  height: 350px;
  text-align:center;
  float: left;
  padding:2px;
  background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}
.image1 {
border: 1px blue solid;
width: 200px;
height:100px;
float:left;
}
.image2 {
border: 1px blue solid;
width: 200px;
height:100px;
float:right;
}
.image3 {
border: 1px blue solid;
width: 200px;
height:100px;
float:right;
}

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 3px;
left: -1000px;
border: 0px;
visibility: hidden;
color: blue;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 400px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>
</a>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="360s.jpg" width="198px" height="98px" border="0" /><span><img src="360s.jpg" /><br />Xbox 360 Slim</span></a>
</div>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="ps3.jpg" width="198px" height="98px" border="0" /><span><img src="ps3.jpg" /><br />Play station 3.</span></a>
</div>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="wii.jpg" width="198px" height="98px" border="0" /><span><img src="wii.jpg" /><br />Nintendo Wii</span></a>
</div>
<br>
<br>
</br>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv1.jpg" width="198px" height="98px" border="0" /><span><img src="tv1.jpg" /><br />Sony Bravia KDL-40W2000</span></a>
</div>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv2.jpg" width="198px" height="98px" border="0" /><span><img src="tv2.jpg" /><br />Toshiba Regza AV61 (32AV615DB)</span></a>
</div>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv3.jpg" width="198px" height="98px" border="0" /><span><img src="tv3.jpg" /><br />Samsung B550 (LE40B550)</span></a>
</div>
<br>
<br>
</br>

<div class="image1">
<a class="thumbnail" href="#thumb"><img src="ttg.jpg" width="198px" height="98px" border="0" /><span><img src="ttg.jpg" /><br />Tom Tom GO</span></a>
</div>

<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat2.jpg" width="198px" height="98px" border="0" /><span><img src="sat2.jpg" /><br />Garmin nuvi 3790T</span></a>
</div>

<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat3.jpg" width="198px" height="98px" border="0" /><span><img src="sat3.jpg" /><br />Navigon 8450 Live</span></a>
</div>
<br>
<br>
</br>

<div class="image2">
<a class="thumbnail" href="#thumb"><img src="iphone.jpg" width="198px" height="98px" border="0" /><span><img src="iphone.jpg" /><br />iPhone 4</span></a>
</div>

<div class="image2">
<a class="thumbnail" href="#thumb"><img src="bbt.jpg" width="198px" height="98px" border="0" /><span><img src="bbt.jpg" /><br />Blackberry torch</span></a>
</div>

<div class="image2">
<a class="thumbnail" href="#thumb"><img src="gphone.jpg" width="198px" height="98px" border="0" /><span><img src="gphone.jpg" /><br />google HTC phone</span></a>
</div>
<br>
<br>
</br>

<div class="image3">
<a class="thumbnail" href="#thumb"><img src="cod.jpg" width="198px" height="98px" border="0" /><span><img src="cod.jpg" /><br />Call of duty: Black ops</span></a>
</div>

<div class="image3">
<a class="thumbnail" href="#thumb"><img src="fifa.jpg" width="198px" height="98px" border="0" /><span><img src="fifa.jpg" /><br />Fifa 2011</span></a>
</div>

<div class="image3">
<a class="thumbnail" href="#thumb"><img src="f1.jpg" width="198px" height="98px" border="0" /><span><img src="f1.jpg" /><br />Formula 1 2010</span></a>
</div>
<br>
<br>
</br>

<script type="text/javascript">


<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"
}
//-->
</script>
</body>
</html>


louismoore16
 
Posts: 3
Joined: Sun Nov 07, 2010 9:46 am
Top

Re: Picture alignment

Postby pep1439 on Fri Dec 03, 2010 11:09 am

Use this to align image right :

Code: Select all
<p><img src="favourite.gif" alt="HTML IMAGE EXAMPLE" align="right" width="50" height="50"/>
The bottom image has its align attribute set to "right", so the text flows around it to left.The bottom image has its align attribute set to "right", so the text flows around it to left. </p>
pep1439
 
Posts: 7
Joined: Wed Dec 01, 2010 2:11 pm
Top

Re: Picture alignment

Postby tommys on Sat Dec 04, 2010 8:12 pm

Snowhawk wrote:Try this

Code: Select all
<align="left">


I find sometimes you just need:

Code: Select all
<center>


Also don't forget to end the command with a forward slash like this:

Code: Select all
</right>


Good advice! =)
louismoore16
And which of these pictures do you want to float? Use float:right in css and everything will be good!
tommys
 
Posts: 13
Joined: Thu Dec 02, 2010 5:23 pm
Top
Post a reply

Who is online

Users browsing this forum: No registered users and 3 guests