Jump to content


Website gallery help pleasae

Started by donkeymusic, Nov 27 2005 06:15 PM

8 replies to this topic

#1 donkeymusic

    Jedi In Training

  • Members
  • PipPip
  • 495 posts
  • Gender:Male
  • Location:Warrington, UK

Posted 27 November 2005 - 06:15 PM

Hello

Here is what i have to my site so far...

www.retrodesigner.co.uk

what i wanna get it looking like is the gallery below...

http://img.photobucket.com/albums/v489/don...etroGallery.jpg

WHat i wouldlike is sme advice on the best methods for me to recreate the mock up image.



Reading various tutorials i cam up with the following and wondered if it would work.

i want six frames within the content area, so what i do i create a list of six divs which i then use css to style and position.

Would this work or is there another better method?

thanks

Edited by donkeymusic, 28 November 2005 - 04:33 AM.

#2 Ckristian

    Honored X Staff

  • Members
  • PipPipPipPip
  • 1,334 posts
  • Gender:Male
  • Location:A blue-green "planet" Mostly harmless
  • Interests:Programming...

Posted 27 November 2005 - 10:18 PM

Fix your image link...

#3 donkeymusic

    Jedi In Training

  • Members
  • PipPip
  • 495 posts
  • Gender:Male
  • Location:Warrington, UK

Posted 28 November 2005 - 09:14 AM

done

#4 raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 28 November 2005 - 04:42 PM

Heres some code thats very close to your pic, give it a go:

-- Gallery Index -- gallery/index.html --
		<html>
	<head>
	<title>RetroGallery</title>
	<link rel="stylesheet" type="text/css" href="retro.css" />
	</head>
	
	<body>
	<div id="container">
	<div id="banner"><img src="yourbanner.jpg" width="570" height="280" alt="Retro Banner" /></div>
	<div id="navigation">
<a href="#">ABOUT RD</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="#">GALLERY</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="#">RD NEWS</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="#">CONTACT RD</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="#">LINKS</a>
	</div>
	
	<div id="content"><div id="padding">
<div id="card_1"><!--Content Here--></div>
<div id="card_2"><!--Content Here--></div>
<div id="card_3"><!--Content Here--></div>
<br />
<div id="card_4"><!--Content Here--></div>
<div id="card_5"><!--Content Here--></div>
<div id="card_6"><!--Content Here--></div>
<br />
<div id="left_nav">&laquo; Previous Gallery</div>
<div id="right_nav">Next Gallery &raquo; </div>
	<div style="clear: both;"></div>
	</div></div>
	
	<div id="copyright">ALL WORK SOLD REMAINS THE COPYRIGHT OF RETRODESIGNER 2004</div>
	
	</div>
	</body>
		</html>

-- The CSS File -- retro.css -- 
body{
  text-align: center; /*IE Center Hack*/
  background-color: #ffffff;
  margin: 0px;
}

a:link, a:active, a:visited, a:hover{
  color: #666666;
  text-decoration: none;
}
a img{
  border: 0px;
}


div#container{
  width: 570px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
}
div#banner{
  width: 570px;
  height: 280px;
  background-color: #dedede;
  border: 1px solid #000000;
}
div#navigation{
  width: 570px;
  height: auto;
  margin-top: 2px;
  text-align: center;
  background-color: #DEDEDE;
  border: 1px solid #000000;
  color: #666666;
  font-family: arial, sans-serif;
  font-size: 13px;
}


div#content{
  width: 570px;
  height: auto;
  margin-top: 2px;
  text-align: center;
  background-color: #DEDEDE;
  border: 1px solid #000000;
}
div#content #padding{
  padding: 7px;
}


div#card_1,
div#card_2,
div#card_3,
div#card_4,
div#card_5,
div#card_6{
  margin: 0px;
  padding: 0px;
  width: 180px;
  height: 200px;
  background-color: #ffffff;
  border: 1px solid #000000;
}

div#card_1{
  float: left;
}
div#card_2{
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}
div#card_3{
  float: left;
}

div#card_4{
  float: left;
  margin-top: 5px;
}
div#card_5{
  float: left;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
div#card_6{
  float: left;
  margin-top: 5px;
}

#left_nav{
  float: left;
  color: #666666;
  font-family: arial, sans-serif;
  font-size: 13px;
}
#right_nav{
  float: right;
  color: #666666;
  font-family: arial, sans-serif;
  font-size: 13px;
}


div#copyright{
  width: 570px;
  height: auto;
  margin-top: 2px;
  text-align: center;
  background-color: #DEDEDE;
  border: 1px solid #000000;
  color: #666666;
  font-family: arial, sans-serif;
  font-size: 13px;
}

That should give you a nice blank gallery template.
Then just change the width and height attributes to fit your actual site. Those are just example sizes based off your image.
Then all you gotta do is slap some images say...soprano.gif, pulpfiction.gif, twiggy.gif in the card divs. ^_^
Anyways good luck. :)

Edited by raenef, 28 November 2005 - 04:47 PM.

#5 donkeymusic

    Jedi In Training

  • Members
  • PipPip
  • 495 posts
  • Gender:Male
  • Location:Warrington, UK

Posted 28 November 2005 - 05:15 PM

wow, thanks i didnt expect someone to go to those lenghts to help so that i s very much appreciated an i will look at at that coding carefully and try and gtet my head round uit before including it into my site.

Thank You

#6 coolaid

    P2L Jedi Master

  • Members
  • PipPipPipPip
  • 1,435 posts
  • Gender:Male
  • Interests:i wonder..

Posted 28 November 2005 - 06:33 PM

that looks like pretty decent code, expect the way you display the images. instead you should just have something like below:

.card{
  margin: 2px;
  padding: 0;
  width: 180px;
  height: 200px;
  background-color: #ffffff;
  border: 1px solid #000000;
  float:left;
}

then after the first top row of images, add a div with a clear:
<div style="clear:both;" />
then begin with the next row of images.

oh and btw, raenef, i noticed you add px to 0.
you dont need to add a unit of measure to 0 because 0 lightyears = 0 meters = 0 centimeters ^_^

#7 donkeymusic

    Jedi In Training

  • Members
  • PipPip
  • 495 posts
  • Gender:Male
  • Location:Warrington, UK

Posted 29 November 2005 - 11:59 AM

do i not need to make ize settings for the clear div?

thanks

#8 raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 29 November 2005 - 04:23 PM

nope I wouldnt say so ^^ it just basically tells the browser your done floating things around now ;)

#9 donkeymusic

    Jedi In Training

  • Members
  • PipPip
  • 495 posts
  • Gender:Male
  • Location:Warrington, UK

Posted 01 December 2005 - 07:20 AM

Hello,

i am working through your examples and have several issues at the moment, the issues are related to the latest look of the site.

www.retrodesigner.co.uk

- With the gallery cards in place i am now trying to get the size and positions correct, as yet not changed anything and for some reason the copyright bar at the bottom had now decided to poisiton itself withint the main content box.

The main content box seems to have extended its width by an extra 10px which i have tried everything i know to reduce but i cant get rid of it

any ideas where i am going wong?

thanks

Edited by donkeymusic, 06 December 2005 - 04:56 AM.

Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design