need a little bit of hel please

[doyle369]

need a little bit of help please

I want to add a portfolio to my page like this one

www.mrleesimpson.co.uk | Portfolio of North East based website & graphic designer Lee Simpson. » Portfolio


but just without the light box


My portfolio page - Will Doyle | Portfolio


I want it to go below the grass

So how to I make a portfolio like that?

( adding space for the portfolio to go there.. adding them image...)

Im fairly new to web design and have had alot of help from a freind making my website


thanks

Will

 

[horrorshow75]

Nothing special just xhtml/css and a link to the lightbox js

XHTML:

<div id="content-portfolio">

	
		
			<div class="post" id="post-140">
				<h2 class="title-header">Recent Projects</h2>

					<div class="portfolio-item">
<div class="left"><a rel="lightbox" href="http://www.mrleesimpson.co.uk/wp-content/uploads/2008/12/a1_creations_lrg.jpg" rel="lightbox[140]"><img src="http://www.mrleesimpson.co.uk/wp-content/uploads/2008/12/a1_creations.png" alt="Graphic Design Portfolio Theme Design" width="450" height="200" /></a></div>
<div class="right">

<h2>Graphic Design Portfolio Theme Design</h2>
<div class="details"><em>Concept Project</em></div>
<p>Wordpress theme design based on the Portfolio Theme by <a title="WP Daily" href="http://www.dailywp.com">WP Daily</a>. Concept and site created for fictional website design company just for fun to test the robustness of the theme.</p>
<p class="view"><a href="http://www.mrleesimpson.co.uk/wp-content/uploads/2008/12/a1_creations_lrg.jpg" title="View Graphic Design Portfolio Theme" rel="lightbox[140]">View Project→</a></p>
</div>
</div>
<div style="clear:both"></div>
<div class="portfolio-item">
<div class="left"><a rel="lightbox" href="http://www.mrleesimpson.co.uk/wp-content/uploads/2008/goldielocks_lrg.png" rel="lightbox[140]"><img src="http://www.mrleesimpson.co.uk/wp-content/uploads/2008/goldielocks_1.png" alt="Goldielocks | UK Musician" /></a></div>
<div class="right">
<h2>Goldielocks | UK Musician</h2>

<div class="details"><em>coming soon</em></div>
<p>Website currently in production for UK rapper and producer Goldielocks. Once finished the site will bring together various feeds from other websites including MySpace, Flickr and YouTube. Development in association with Zenify.</p>
<p class="view"><a title="View Goldielocks website concept" rel="lightbox" href="http://www.mrleesimpson.co.uk/wp-content/uploads/2008/goldielocks_lrg.png" rel="lightbox[140]">View Project →</a></p>
</div>
</div>
<div style="clear:both"></div>
<div class="portfolio-item">
<div class="left"><img src="http://www.mrleesimpson.co.uk/wp-content/uploads/2008/amazingtunes_1.png" alt="amazingtunes | Independent Music Download Site" /></div>
<div class="right">
<h2>amazingtunes | Independent Music Download Site</h2>
<div class="details"><a href="http://www.amazingtunes.com">www.amazingtunes.com</a></div>
<p>Ongoing front end development, design and art direction for <em>amazing</em>tunes an independent music download site. <em>amazing</em>tunes helps people discover and share new music, and provides a platform for unsigned artists to showcase their talents.</p>

<p class="view"><a title="View amazingtunes" href="http://www.amazingtunes.com">View Site →</a></p>
</div>
</div>
<div style="clear:both"></div>
<div class="portfolio-item">
<div class="left"><img src="http://www.mrleesimpson.co.uk/wp-content/uploads/2008/allwords_1.png" alt="All Words | Copywriters" alt=""/></div>
<div class="right">
<h2>All Words | Copywriters</h2>
<div class="details"><a href="http://www.allwords.co.uk/">www.allwords.co.uk</a></div>
<p>Wordpress based CMS and Blog site to showcase the work of Manchester based commercial copywriters. The brief was to create a site that was ‘fun’ and ‘colourful’ whilst maintaining a professional outlook, they were also very keen to continue using the current ‘face icons’ which were given an update.</p>

<p class="view"><a title="View All Words" href="http://www.allwords.co.uk/">View Site →</a></p>
</div>
</div>
<div style="clear:both"></div>
<div class="portfolio-item">
<div class="left"><img src="http://www.mrleesimpson.co.uk/wp-content/uploads/2008/benita_johnson_1.gif" alt="Benita Johnson | Acoustic Singer/Songwriter"/></div>
<div class="right">
<h2>Benita Johnson | Acoustic Singer/Songwriter</h2>
<div class="details"><a href="http://www.benitajohnson.co.uk/">www.benitajohnson.co.uk</a></div>
<p>Wordpress based blog and content managed website for Bristol based singer/songwriter Benita Johnson. Benita needed a website that she could use to promote her music and live gigs away from MySpace as well as sell her merchandise, but keep up to date easily.</p>
<p class="view"><a title="View Benita Johnson" href="http://www.benitajohnson.co.uk/">View Site →</a></p>
</div>

</div>

CSS:

/*** Portfolio Page ***/
#content-portfolio {float:left;width:940px;padding-top:10px;line-height:160%;}
#content-portfolio .portfolio-item {padding-bottom:20px;margin-bottom:20px;overflow:auto;}
#content-portfolio .portfolio-item .left img, #content-portfolio .about .right img {border:1px solid #dddddd;padding:4px;background-color:#FFFFFF;}
#content-portfolio .portfolio-item .right h2, #content-portfolio .page h2 {font-size:17px;font-family:Georgia, "Times New Roman", Times, serif;margin-bottom:15px;font-weight:normal;}
#content-portfolio .page .head {}
#content-portfolio .portfolio-item .right, .page {line-height:18px;width:470px;}
#content-portfolio .portfolio-item .right p.view {float:right;font-size:12px;margin:15px 0 0 0;}
#content-portfolio .portfolio-item .right .details {margin-bottom:15px;border-bottom:1px solid #dddddd;border-top:1px solid #dddddd;padding:3px 0;}
#content-portfolio .portfolio-item .right .details a {color:#101010;text-decoration:none;background-color:transparent;border-bottom:none;}
#content-portfolio .portfolio-item .right .details a:hover {color:#101010;text-decoration:none;background-color:transparent;border-bottom:none;}

 

[HEIBURDERBINS]

What a Refreshing Place

Hey guys, it's been way too long since I've popped my head in to say hello to everyone. I've been around looking at all the comments and replies to everyone, but I've not signed up until now ! This forum is very informative and I'm hoping to learn more.

I look forward to sharing ideas with everybody! I can already tell how friendly everyone is! So I just wanted to say hello to everyone. I look forward to getting to know everyone as we exchange messages on this board.

I'm pretty happy to be here!