PDA

View Full Version : Trying to create a photo portfolio website.


tjohnson26
10-06-2009, 04:14 AM
Hi

I am just getting started on dreamweaver and creating my first site, I am trying to make a scroll function on my site for images like this.... http://www.johnbarone.co.uk/index.php/photography/index2/

Was wondering if anyone could give us a bit of info on how to go about doing this?

Many thanks

edbr
10-06-2009, 04:57 AM
define a div with scroll attributes . so in your styles ieither on page in the head or your seperate css file have something like
#photos {
width:400px; height:205px; overflow-x:scroll; overflow-y: hidden ;}
this should give you horizontal scroll bars 9content being larger than the div so there is some thing to scroll)

tjohnson26
10-07-2009, 12:51 AM
Thanks

any chance you could do us a quick step by step?

Thanks

edbr
10-07-2009, 03:49 AM
sorry just very pressed for time at present but heres is a coded page try working with it
<!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>
<style>

.photos { width:1000px;
height:205px; position:relative; float:left;}

#scroll{position:relative; float:left; width:400px; height:205px;overflow-x:scroll; overflow-y:hidden ;}
</style>
</head>

<body>

<div id="scroll">
<div class="photos">


<img name="image" src="my.jpg" width="200" height="200" alt="" style="background-color: #FF0000" />
<img name="image" src="my.jpg" width="200" height="200" alt="" style="background-color: #00F" />

<img name="image" src="my.jpg" width="200" height="200" alt="" style="background-color: #FFF" />
<img name="image" src="my.jpg" width="200" height="200" alt="" style="background-color: #000" /></div>

</div>
</body>
</html>

thenewmoon
10-09-2009, 03:35 PM
Hello,
I hope you doing well with your website, I want also to make my own website.
I like the site which you put it, it is look simple and professional.

Good luck