j05hr

Verulam, did you go to Townsend?

Cool, I'm in Radlett and went to school in St Albans.

I guess you didn't have a contract stating who owned what at the end? You got paid for it though yeah? There's not a lot you can really except for chalking it down to experience and having a contract stating that you have a credit written in the footer.
 
I do a lot of work for freelance graphic designers who don't know how to make websites so the clients are through them and they design the site so they put designed by graphic designer in the footer even though I did the code, I still put the websites in my portfolio stating what I did. You could do the same although you might not want to if they've made horrible edits.

These people always contact me too.
 
"Your windows subscription has expired you need to buy a new one."
 
"Oh, really? I don't have Windows I use Macs" Line goes dead
 
I quite like playing on with them for ages right up until they try to ask you for your card details and then tell them you work in IT support.
 
The scarey thing is how many people are vulnerable to these sorts of things where they think their computer will break if they don't listen to them and just do whatever they say.

These people always contact me too.
 
"Your windows subscription has expired you need to buy a new one."
 
"Oh, really? I don't have Windows I use Macs" Line goes dead
 
I quite like playing on with them for ages right up until they try to ask you for your card details and then tell them you work in IT support.
 
The scarey thing is how many people are vulnerable to these sorts of things where they think their computer will break if they don't listen to them and just do whatever they say.

The quickest way is to take the div id/class and put
 

display: none;
 
in your CSS.
 
People say this isn't the right way to do it because it still loads, it's just "hidden". There will be other scrips that actually get rid of it, but if it's not about load time, this is the quickest solution.

Some inspiration for you
 
http://dribbble.com/search?q=dashboard

With the James Taylor method and the one in the sample in your first post, the main containers with the equal height backgrounds are all width: 100% and overlap each other, so a space between them isn't possible as I understand it.
 
You would probably do it if you had two divs with % widths and float: left; to be side by side and a margin to create the space between them and both with backgrounds and use javascript/jQuery to find out the div with the greatest height which is applied to both divs. See
http://www.socreative.tv/blog/equal-css-columns-with-jquery/
a much simpler code for simple divs with a float and margin to create the space between them but it won't work if people have javascript disabled.
 
Alternatively I'm fairly sure you can do it using display:table (if you want to use tables for page structure, although perhaps divs with display:table don't qualify as tables) but display:table doesn't work in IE6/7. See item 17f here:-
http://www.wickham43.net/firefoxbackground.php
which shows three divs with equal height (ignore the lime colored nested div in the center azure div). If you make all divs % width it should work although I haven't tested it. The example doesn't have any div widths because they are all equal inside a page container.
 
Edit: this does exactly what you want, fluid widths , rounded corners and equal heights and it validates:-

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test</title> <style type="text/css"> #displaytable { display: table; } #displaytablecell1 { display: table-cell; border- radius: 10px; width: 37%; vertical-align: top; background: skyblue; } #displaytablecell2 { display: table-cell; border- radius: 10px; width: 61%; vertical-align: top; background: lime; } #displaytablecell3 { display: table-cell; width: 2%; } /*widths for #displaytablecell1 and #displaytablecell2 and the 2% for #displaytablecell3 must total 100% or less; widths for #displaytablecell1 and #displaytablecell2 can be omitted and they will be equal and fill remaining space beside #displaytablecell3*/ </style> </head> <body> <div id="displaytable"> <div id="displaytablecell1"> <p> Content in #displaytablecell1 with display: table-cell; vertical-align: top; background: skyblue; </p> </div> <div id="displaytablecell3">   </div> <div id="displaytablecell2"> <p> Text in div #displaytablecell2 with display: table-cell; vertical-align: top; background: lime;<br> All display: table-cell divs are inside containing div #displaytable with display: table;<br> More text<br> More text<br> More text </p> </div> </div><!--end of #displaytable--> </body> </html>
To form the space I added a blank div between the others (not very good but margin won't work as display:table is inline and if converted to block the equal heights disappear).

Do research on a liquid static liquid layout. It is based on the exact same principle to get this to work the way it is, yet this is much easier. In this case, your center column is also liquid.
 
And to figure out how it is done, use Firebug in Firefox or some other browser developer tool.
 
Essentially, your structure will be the following for the primary containers:
 

.primary, .secondary, .tertiary { position: relative; width: 100%; height: 500px; float: left; overflow: hidden; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .primary { right: 0; background-color: #f00; } .secondary { right: 30%; background-color: #00f; } .tertiary { right: 40%; background-color: #ccc; }
 
Then, inside .tertiary, you will have 3 child containers, all on the same level:

.cell1, .cell2, .cell3 { position: relative; float: left; overflow: hidden; } .cell1 { left: 70.5%; width: 30%; } .cell2 { left: 70.5%; width: 39%; } .cell3 { left: 71.5%; width: 30%; }
 
As for the HTML:

<div class="primary"> <div class="secondary"> <div class="tertiary"> <div class="cell1"></div> <div class="cell2"></div> <div class="cell3"></div> </div> </div> </div>

If you want a fluid two-column code with fluid widths and equal heights, have a look at this:-
http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
 
The explanation of the method is for a three-column example here:-
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
 
If you don't understand the code, just copy his 2 column source code entirely and change the content. He's put it online for people to use his code. You can add rounded corners, add border-radius: 10px; to his #container2 and #container1 styles.

Hi Beth
 
You are correct, you can't just take any pictures that you find online. What you can do, if you find a specific image you like, is write to them and get their written consent to use their image. Not sure how well this works as I've never personally tried it myself but seen it suggested a few times before. Guess it's how nice the owner of the image is.
 
"Royalty free images" is what you want to search on Google to get lists of websites you can use.
 
http://www.sxc.hu/ - is the best free option I've come across
 
http://www.istockphoto.com/ - best paid for option

http://top100.nma.co.uk/section.php?section_id=1
 
You will need to sign up but it is a list of the top 100 agencies based on their income. Granted it's from 2010 but there are still many of the top UK agencies in there.

I haven't looked at the scripts, but yeah it will create the HTML on the fly. So you would click on a browse button in the back end select the picture. You would have a script that uploads the image automatically and then puts the image name in the database which will then create the HTML on the fly to say <img src="whatever you saved your file as" />

No one can really help with what you should put in there as the whole idea of design is just that. It's not just I'll plonk this here and that there and hope it looks ok.
 
 
Here are some designs on motorbikes that you can hopefully use for inspirtation.
 
One I picked out
 
http://www.behance.net/gallery/Yamaha-R1-Hotsite/499106
 
And lots of others, click on the thumbnails and it will show you their web design
 
http://www.behance.net/?content=projects&field=102&search=motorbike&sort=appreciations&time=all&page=1

Yeah, that's pretty much the way to do it
 
 
Sure. The following are recommended for web designers:
 
Typography Stuff. If you can't master typography you will have a VERY hard time with design. Bringhurst's book is like the Bible, read it twice. Lupton's book is more practical and is best used as a workbook. I had a design instructor who said that the ONE skill that he never saw in novice designers was a proficiency with typography, so that's one good way to set yourself apart from other designers.
http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881792063/ref=sr_1_1?ie=UTF8&qid=1315228664&sr=8-1
http://www.amazon.com/Thinking-Type-2nd-revised-expanded/dp/1568989695/ref=sr_1_1?s=books&ie=UTF8&qid=1315228703&sr=1-1
 
This Steve Krug book (and his other works, but this one especially) are great to begin understanding usability. Web designers who understand UX are very rare, so you can really land awesome agency jobs if you can pick it up.
http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=sr_1_1?s=books&ie=UTF8&qid=1315228714&sr=1-1
 
Sitepoint has a ton of great books, but these are helpful for designers. The form design book is huge in making pretty, usable and semantic forms. Every designer should know jQuery if they plan on coding. There are too many good XHTML/HTML5/CSS books out there, so take your pick.
http://www.amazon.com/Principles-Beautiful-Web-Design-2nd/dp/098057689X/ref=sr_1_2?s=books&ie=UTF8&qid=1315228725&sr=1-2
http://www.amazon.com/Fancy-Form-Design-Sitepoint-Bolton/dp/0980576849/ref=sr_1_8?s=books&ie=UTF8&qid=1315228725&sr=1-8
http://www.amazon.com/jQuery-Novice-Ninja-Earle-Castledine/dp/0980576857/ref=sr_1_11?s=books&ie=UTF8&qid=1315228725&sr=1-11
 
These two are great for inspiration. Whenever I'm in the early stages of a project I sketch, browse through these to see how other people have treated the same tasks, etc. They are organized by site type, color schemes, etc. to make finding something relevant easy.
http://www.amazon.com/Web-Designers-Idea-Book-Ultimate/dp/1600610641/ref=sr_1_2?s=books&ie=UTF8&qid=1315228777&sr=1-2
http://www.amazon.com/Web-Designers-Idea-Book-Vol/dp/160061972X/ref=sr_1_1?s=books&ie=UTF8&qid=1315228777&sr=1-1
 
Buy all of these books. No questions asked, these are top notch reference books for the newest tech out there.
http://www.abookapart.com/products/
 
That's all I can think of off the top of my head. I think we should put a "recommended reading" list together anyways, so maybe this will be a good start.
 
 
Seriously. Graphic designers typically make terrible web designers. However, both disciplines rely on the same principle: Design is Communication. I think people think design is supposed to be revolutionary and ground-breaking and beautiful and "artsy", but in reality a simple site with a couple copywritten paragraphs and a contact form can be more beneficial for a business. Business owners only care about results, so making something that communicates (or in our case, converts visitors) is the number one measure of success. It doesn't mean that it can't be beautiful, but make function beautiful, don't try to make something beautiful function well.

I don't agree with that. It's xelance I guess which is meant to be like excellence which is not like elance. If you can't have names because it looks remotely like something else people would be suing each other all the time.

Because it was designed by bevidesign? Haha
 
Sorry couldn't resist

Yeah they accept just PSDs but as has been said generally the level of PSDs has to be higher than if you have a fully coded Wordpress site. If you go on the site, on the navigation they have a button for PSDs PSD link

In my experience:
 
 
Most of the time clients don't want to be confused by stock image charges. Build the cost of them into your design costs. Don't buy them until the design has been approved.
 
 
I charge the majority of my clients between £20 and £350 per year for hosting depending on their requirements and budget. Part of the charge covers my overheads, part of it covers supporting the "I can't get my email to work on my blackberry!" phone calls.
 
Don't under charge for hosting as you'll find it comes back to bite you when you've got 200 clients expecting their hosting for free.
 
Just explain it's an essential cost. If the client knows enough to want to host elsewhere that's their choice, but normally if the developer hosts it everything runs more smoothly.
 
 
You should be able to find some templates on the web; but you'll need to tweak them to your own needs.

Try making the width smaller of testimonials.

The reason the content is pushed to the right is because of the padding that we added back in.
 

padding: 45px 45px 35px 90px;
 
It goes clockwise so up right bottom left
 
So
 
Top: 45px
Right: 45px
Bottom: 35px
Left: 90px
 
You will obviously not want it to have such a big space from the left so you will want to make that 90 much lower and just play around with all the numbers till you are happy with how it looks.
 
Also don't worry about people judging you on here, it's a forum to help each other out and if you aren't asking you aren't improving. Maybe one day I might need some help from you to do with graphics, it's what forums are for.

You can do but it's ok to put it in the other one too. It's probably better to keep them together so you don't have loads of different stylesheets but it's completely up to you what you want to do.

Here is the CSS used for it, I got rid of the padding for you and made it so the text is centre aligned.
 

#testimonials{ width: 375px; text-align: center; background:url('../img/quotes.png') no-repeat 20px 20px rgba(178,178,169,0.2); min-height:90px; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px; } #testimonials li{ display:none;} #testimonials li:first-child{ display:block;} #testimonials ul{ list-style:none;} #testimonials p.text{ font-size:24px;} #testimonials p.author{ color: #878787; font-size: 16px; font-style: italic; text-align: right; margin-top:10px; } #testimonials p.author a, #testimonials p.author a:visited{ color:#6aa42a; }
 
Here is the quotation mark but not sure if you are allowed to use it?

Hi Josh,
 
I'm guessing one or both of the users have the email account setup in their Outlook as POP3. Try changing it to IMAP. That way the email is stored on the server for both users to view. With POP3, the first user to connect to the server will download the received email, removing it from the server, preventing the other user from seeing it.

Really simple way to do a form in CSS
 
HTML

<body> <form action="" method="post" class="contact"> <div> <label for="contactname" class="fixedwidth">Contact Name</label> <input type="text" name="contactname" id="contactname"/> </div> <div> <label for="telephone" class="fixedwidth">Telephone Number</label> <input type="text" name="telephone" id="telephone"/> </div> <div> <label for="email" class="fixedwidth">Email Address</label> <input type="text" name="email" id="email"/> </div> </form> </body>
 
CSS

form.contact label.fixedwidth { width: 240px; float: left; }
 
And then it just gives it a fixed width so all the inputs line up correctly.