13 replies [Last post]
cocobella
cocobella's picture
Offline
newbie
Last seen: 11 years 20 weeks ago
Timezone: GMT+1
Joined: 2010-08-04
Posts: 8
Points: 9

Hi All
first of all thanks for any responses gathered!

i really like the make up of this website

http://www.creativeexchangeagency.com/#p=Artists/Karen_Collins/Portfolio/Overview

but really don't want to use flash

how can I get close to recreating this with CSS?

many thanks
C

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Yes, its a simple layout. You

Yes, its a simple layout. You will need a little help from jquery to achieve the roll-over effects.

cocobella
cocobella's picture
Offline
newbie
Last seen: 11 years 20 weeks ago
Timezone: GMT+1
Joined: 2010-08-04
Posts: 8
Points: 9

Ok, so far I get the layout

Ok, so far I get the layout part
My first page will be a landing page
then page 2 will be my thumbnail gallery
then how do would i get the thumbs to load as slide with left and right navigation?

#content {
	margin-right: auto;
	margin-left: auto;
	width: 800px;
 
 
	}
 
#header {
	padding: 1em;
	margin-bottom: 1em;
	width: 780px;
	margin-right: auto;
	margin-top: 1px;
	margin-left: -10px;
}
#thumbs {
	width: 800px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding: 5px;
}
#thumbs img {
	padding: 0px;
	margin: 5px;
}
#footer {
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: 10px;
	font-family: Didot;
	color: #999999;
}

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

jquery can handle the slides,

jquery can handle the slides, and its just a matter of positioning your navigation where you want it with css

http://tutzone.net/2009/11/free-image-carousels-for-web-developers.html

cocobella
cocobella's picture
Offline
newbie
Last seen: 11 years 20 weeks ago
Timezone: GMT+1
Joined: 2010-08-04
Posts: 8
Points: 9

Thankyou will give it a go x

Thankyou will give it a go x

cocobella
cocobella's picture
Offline
newbie
Last seen: 11 years 20 weeks ago
Timezone: GMT+1
Joined: 2010-08-04
Posts: 8
Points: 9

also - how does the image

also - how does the image resizing work, you'll notice everything on the screen scales to the size of the window if you re-size the window

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

keep in mind that this is a

keep in mind that this is a flash website. You can set up something very similar with a liquid css layout. That means you size most or everything in percents. for example:

#sidebar {width: 15%;}

cocobella
cocobella's picture
Offline
newbie
Last seen: 11 years 20 weeks ago
Timezone: GMT+1
Joined: 2010-08-04
Posts: 8
Points: 9

ok so can this be applied to

ok so can this be applied to div tags or would i have to use tables or Ap Tags
have only recently watched a tutorial and still getting my heag around it all

many thanks for your input Smile

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

it can be applied to almost

it can be applied to almost everything

cocobella
cocobella's picture
Offline
newbie
Last seen: 11 years 20 weeks ago
Timezone: GMT+1
Joined: 2010-08-04
Posts: 8
Points: 9

ok so I have managed to get

ok so I have managed to get the page to resize according to the viewer - but its not working with safari not really sure where to go from here? style sheet below xx

#container {
	width: 100%;
	height: 50%;
	margin-left: 11%;
	margin-right:11%;
 
 
}	
 
#header {
	width: 100%;
	padding-right: 50px;
	padding-left: 50px;
}
#thumbs {
	height: 50%;
	width: 75%;
	margin-top: 2%;
	margin-right: 11%;
	margin-left: 11%;
	align:center;
}
 
#thumbs img {
	padding: 5px;
	height: 20%;
	width: 20%;}
 
 
#footer {
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: 13px;
	font-family: Didot;
	color: #999999;
	padding-right: 50px;
	padding-left: 50px;
	width: 100%;
}
 
 
.title {
	font-family: Didot;
	font-size: 20px;
	font-style: normal;
	font-weight: lighter;
	color: #A7A7A7;
	line-height: 5px;
}
a:link {
	text-decoration: none;
	color: #999999;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #CCCCCC;
}
a:active {
	text-decoration: none;
}

cocobella
cocobella's picture
Offline
newbie
Last seen: 11 years 20 weeks ago
Timezone: GMT+1
Joined: 2010-08-04
Posts: 8
Points: 9

any ideas? checked the

any ideas?
checked the browser support and its the code in my style sheet as shown above

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

can you post a link, or show

can you post a link, or show us all your code, html/css

cocobella
cocobella's picture
Offline
newbie
Last seen: 11 years 20 weeks ago
Timezone: GMT+1
Joined: 2010-08-04
Posts: 8
Points: 9

<!DOCTYPE html PUBLIC

<!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>Seun Shote | London Fashion &amp; Beauty Photography</title>
<style>
 
 
</style>
<link href="../assets/pagelayout.css" rel="stylesheet" type="text/css" />
</head>
 
<body><div id="header" class="title"> SEUN SHOTE PHOTOGRAPHY
  <hr width="101%" noshade="noshade" color="#CC0099"  />
  London Fashion &amp; Beauty Photographer
</div>
<hr width="101%" noshade="noshade" color="#CC0099" />
 
<div id="container"><div id="thumbs" class="thumbs">
 
<img src="../assets/images/thumbs/pete8.jpg" width="150" height="150" /><img src="../assets/images/thumbs/bbg1.jpg" /><img src="../assets/images/thumbs/clem5b.jpg" /><img src="../assets/images/thumbs/discoprincess5.jpg" /><img src="../assets/images/thumbs/elenarocks8.jpg" /><img src="../assets/images/thumbs/story1-06.jpg" width="150" height="150" /><img src="../assets/images/thumbs/Grease2 .jpg" /><img src="../assets/images/thumbs/J3 .jpg" /><img src="../assets/images/thumbs/leomie4.jpg" /><img src="../assets/images/thumbs/pete8.jpg" /><img src="../assets/images/thumbs/sophie3.jpg" /><img src="../assets/images/thumbs/Vintage Beauty .jpg" /><img src="../assets/images/thumbs/pete.jpg"/></div> </div>
</body>
</html>

thanks xx

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Please post a link, we cant

Please post a link, we cant see the images.