Hi

 

I am building my site to show my portfolio off and try and get some work and its proving harder than I thought it would be.

I dont hand code i use Dreamweaver to do most stuff but finding it really hard to learn and remember css. Like i want to add 3 divs in the grey box left right and centre but every time i do it it messes up the page how do i do it?

 

http://img3.imageshack.us/img3/3017/filecusersmatthew20wain.jpg

 

And also then i need to build a portfolio type page like this

 

http://www.justinmaller.com/showcase.html

 

 

Thanks

If you want three divs side by side, first create a #container div with a width that suits the rest of the page. Let's say that it's 500px wide. Inside you put three divs with float: left; making sure that the widths plus side margins plus side padding plus side borders equal the width of #container:-

CSS

#container { width: 500px; overflow: hidden; /* plus any other styles for positioning*/ }
#left {width: 200px; float: left; }
#middle, #right { width: 150px; float: left; }

A container with only floated divs inside will have no height. The overflow: hidden is to make the parent container realise that there are divs inside because floated divs have no height so you have to trick the #container to give itself a height with overflow: hidden;

(Another method is to add clear: both; to a following div style as Lev has suggested in the next post which will avoid the following div moving up over the floated divs if the #container has no height and no overflow: hidden; ).

 

HTML markup:-

<div id="container">
<div id="left">.........</div>
<div id="middle">.........</div>
<div id="right">.........</div>
</div>

clear:both;

Thanks that worked dont know what i was doing wrong. any ideas on how to build a portfolio page like the one above?

Thanks that worked dont know what i was doing wrong. any ideas on how to build a portfolio page like the one above?

 

What do you want to copy from it exactly? The layout or the roll over effects etc? The curved borders I believe are done fairly easily in CSS3 and I would take a wild guess that the roll over effects are all done in CSS too.

 

The menu top right would probably be JavaScript as it pops down quite smoothly (however, doesn't look positioned right in firefox?)

What do you want to copy from it exactly? The layout or the roll over effects etc? The curved borders I believe are done fairly easily in CSS3 and I would take a wild guess that the roll over effects are all done in CSS too.

 

The menu top right would probably be JavaScript as it pops down quite smoothly (however, doesn't look positioned right in firefox?)

 

 

I want mine so when you click the thumbnail image it opens up a bigger image and description.

I want mine so when you click the thumbnail image it opens up a bigger image and description.

 

 

Sounds like a type of lightbox.

are there any easier ones to use.

are there any easier ones to use.

 

I've only ever used a light box once and to my knowledge they were all quite tricky for a beginner really. Easy to set-up and use but then tricky to actually edit/customise.