I want to become a Web Designer / Developer...

Associate
OP
Joined
10 Jan 2008
Posts
1,677
Location
Nottinghamshire
Cheers FabienO. I did the same but doesnt work. In IE 9 the content doesnt center. It does work better in firefox but when you start to put content in it spills over and out of the layout all together. I'll have another look tomorrow and get back to you. Thanks again.

RoEy
 
Associate
Joined
19 Jun 2010
Posts
1,695
Location
Southampton City Centre
IE center fix is quite simple. you text-align: center; the body, then left the wrapper. IE Rules :(.

Text doesn't overspill on FF for me, works fine in IE 8 and chrome too.

Here's a slightly newer update. I threw in a default reset too

Code:
<html>
<head>
<style type="text/css">
td,th,tr,thead,tfoot,tbody,caption,table,legend,label,form,fieldset,li,ul,ol,dd,dt,dl,center,i,u,b,var,tt,sup,sub,strong,strike,small,samp,s,q,kbd,ins,img,font,em,dfn,del,code,cite,big,address,acronym,abbr,a,pre,blockquote,p,h6,h5,h4,h3,h2,h1,iframe,object,applet,span,div,body,html{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent}td,th,tr,thead,tfoot,tbody,caption,table,legend,label,form,fieldset,li,ul,ol,dd,dt,dl,center,i,u,b,var,tt,sup,sub,strong,strike,small,samp,s,q,kbd,ins,img,font,em,dfn,del,code,cite,big,address,acronym,abbr,a,pre,blockquote,p,h6,h5,h4,h3,h2,h1,iframe,object,applet,span,div,body,html,:focus{outline:0}body{line-height:1}ul,ol{list-style:none}q,blockquote{quotes:none}q:after,q:before,blockquote:after,blockquote:before{content:'';content:none}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
</style>

<style type="text/css">
body {background: #ffc573 url('http://www.fabieno.com/img/bodybg.jpg') repeat-x; text-align: center;}
div#wrapper { margin: 0 auto; width: 960px; text-align: left; }
div#banner { height: 200px; }
div#content { background-color: #fff; height: 600px; }
div#footer { position: relative; background-color: #A66100; margin-top: -80px; padding-top: 80px; height: 250px; z-index: -1;}
</style>

<title></title>
</head>
<body>
<div id="wrapper">
  <div id="top_title"><p>Beatles Beatles Beatles Beatles Beatles Beatles Beatles Beatles Beatles Beatles Beatles Beatles Beatles Beatles Beatles Beatles Beatles Beatles Beatles</p></div>
  <div id="banner"></div>
  <div id="menu"><p>Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu Menu </p></div>
  <div id="content"><p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p> </div>
</div>

<div id="footer"></div>    <!-- Outside of Wrapper !-->

</body>
</html>

I don't have IE9.
 
Associate
OP
Joined
10 Jan 2008
Posts
1,677
Location
Nottinghamshire
That's fab, fab! I changed the contents height to 100% from your 600px and it works fine. I'll try and dissect what you actually did and I need to look into having a reset css file. Thanks again mate, great stuff.

RoEy
 
Permabanned
Joined
9 Aug 2009
Posts
12,236
Location
UK
Wow RoEy - I'm very impressed with the speed you've picked this up. You've produced something that looks great, has content seperated from presentation, and your source is neatly formatted. A perfect start - you're already better than some people who call themselves professionals. Keep it up.

Don't worry too much about the 100% height thing - it's accepted as one of the things XHTML/CSS doesn't do - occasionally you'll need to stick a table in, and that's what the Transitional DOCTYPE is for.

Whilst standards exist for good reasons, in the real world your customers don't appreciate this - so they'll gladly sacrifice validation to get the visual effect they want. A more useful way to measure your success, is to test your site in as many different web browsers as you can get your hands on - unfortunately in the real world many business still use IE6, which will present you with various challenges :)

Further reading:
http://www.tutorio.com/tutorial/pure-css-image-rollovers
http://www.alistapart.com

The next step after this is to learn some basic server-side code. If you have PHP web hosting, start by learning php_include to avoid duplication of things like navigation. Then try displaying the current year in a copyright notice.
 
Last edited:
Associate
OP
Joined
10 Jan 2008
Posts
1,677
Location
Nottinghamshire
Ah right, sorry about that. I throw in heights to just show you what the content looks like. Just remove the height attributes from the divs that change vertically with content. Doesn't need any value.

Cheers again Fab. I didnt realise you could overlap divs with relative positioning, -margin and z-index. I just thought it was something you did with absolute. Thanks again mate.

Wow RoEy - I'm very impressed with the speed you've picked this up. You've produced something that looks great, has content seperated from presentation, and your source is neatly formatted. A perfect start - you're already better than some people who call themselves professionals. Keep it up.

Don't worry too much about the 100% height thing - it's accepted as one of the things XHTML/CSS doesn't do - occasionally you'll need to stick a table in, and that's what the Transitional DOCTYPE is for.

Whilst standards exist for good reasons, in the real world your customers don't appreciate this - so they'll gladly sacrifice validation to get the visual effect they want. A more useful way to measure your success, is to test your site in as many different web browsers as you can get your hands on - unfortunately in the real world many business still use IE6, which will present you with various challenges :)

Further reading:
http://www.tutorio.com/tutorial/pure-css-image-rollovers
http://www.alistapart.com

The next step after this is to learn some basic server-side code. If you have PHP web hosting, start by learning php_include to avoid duplication of things like navigation. Then try displaying the current year in a copyright notice.

billysielu, thank you for your kind words and encouragement. They really do mean a lot to me. I must confess I have a little OCD when it comes to this as I really do like to make things perfect. I've started to code another site for our feeder school and I've now learnt about commenting sections of XHTML and CSS which makes it even clearer.

With regard to the server side stuff I was wondering about how I would not have to repeat navigation as in the past I've used libraries to achieve this. I'll spend a few more weeks with the XHTML/CSS as I have nearly finished my book and I have the CSS - the missing manual by David Sawyer McFarland to go through next.

Once again, hearing comments like yours keeps me going, it truly does because I have off days where I think, am I being realistic here, can I possibly teach myself all of this within 6 months to get a job? But I am determined to keep going.

I just need to stay on track and have some sense of direction.

Thanks for the links.

RoEy
 
Soldato
Joined
15 Sep 2009
Posts
2,876
Location
Manchester
HTML4 was replaced by XHTML a long time ago.

Completely incorrect - HTML 4.01 is still the standard, as IE6/7/8 (Unsure about IE9) cannot support XHTML in the way that W3 standards use XHTML as you still must (even with a registry hack) declare the MIME type as HTML therefore not using XHTML.

IE does not support the application/xhtml+xml MIME type, and will prompt the user to download the page if it's served as such. You can make IE recognise this MIME type through a registry hack, but it will still treat it as HTML.

Please see this link for more information on correct information and feel free to browse the posters posts and/or threads for more statements and data on this, however the majority of the internet see using XHTML 'strictness' as using XHTML when they're merely using HTML 4.01 with XHTML styles.

More data on this - don't particularly want to de-rail the thread, however if the OP wants to be an excellent web developer then this is something he should learn more about. Of course serving 'XHTML' as HTML 4.01 MIME types is popular among professionals too.

Why XHTML - What is the point?

FAQ - HTML
 
Associate
OP
Joined
10 Jan 2008
Posts
1,677
Location
Nottinghamshire
Thanks for the info Throrik. I'll look into that but have to take all of this one step at a time otherwise I'll go into overload. Bookmarked the links.

Thanks again though,

RoEy
 
Soldato
Joined
12 Jan 2009
Posts
6,407
Im doing the same as the OP. I want to become a web designer so signed up to lynda.com and got some books learnt html, css, sql and some php. Id say Im now competant enough to make a decent site for a small business. But ive hit a critical blocked wall... I cant get work!

All the web dev/designer jobs ask for 3 years plus experience not someone like me who has self taught. Going freelance is an option, but how do you get yourself known? The thing is eberyone can code, but not everyone has the creative side needed to make new sites that are different from the rest. Im feeling dejected and as though ive wasted my time learning all this.
 
Associate
OP
Joined
10 Jan 2008
Posts
1,677
Location
Nottinghamshire
Im doing the same as the OP. I want to become a web designer so signed up to lynda.com and got some books learnt html, css, sql and some php. Id say Im now competant enough to make a decent site for a small business. But ive hit a critical blocked wall... I cant get work!

All the web dev/designer jobs ask for 3 years plus experience not someone like me who has self taught. Going freelance is an option, but how do you get yourself known? The thing is eberyone can code, but not everyone has the creative side needed to make new sites that are different from the rest. Im feeling dejected and as though ive wasted my time learning all this.

Damn mate,

That doesnt sound too good. Although, Ive seen lots of web dev jobs that don't say 3 years experience. I wouldnt let that put you off. You just have to go for it and sell yourself so if you don't have 3 years experience let them know that you have strengh in other areas.

If you don't mind me asking, how long did it take you to learn? How old are you?

Really hope you find something mate. I hope I'm not wasting my time also.

RoEy
 
Soldato
Joined
12 Jan 2009
Posts
6,407
I've been learning on and off for the past two years. It's time for me to act on what I know. It does make you feel dejected when they say " were looking for someone with more commercial experience'. If only there was a place where you could like "volunteer" to make web sites for businesses and gain experience that way. I'm 26 by the way.
 
Associate
OP
Joined
10 Jan 2008
Posts
1,677
Location
Nottinghamshire
I've been learning on and off for the past two years. It's time for me to act on what I know. It does make you feel dejected when they say " were looking for someone with more commercial experience'. If only there was a place where you could like "volunteer" to make web sites for businesses and gain experience that way. I'm 26 by the way.

I feel for you mate. It's daft when they say things like that. If they all want 3 years experience how do you get the experience? lol Well I've only been doing it 3 weeks, coding that is. Been working with Dreamweaver, fireworks and flash for 4 years on and off but nothing serious. I'd love to go freelance but it's pretty risky when starting out and there's no way I'm going to be able to pay for my mortgage doing it.

Have you got a portfolio? Surely that would interest potential employers?

RoEy
 
Associate
Joined
19 Jun 2010
Posts
1,695
Location
Southampton City Centre
Im doing the same as the OP. I want to become a web designer so signed up to lynda.com and got some books learnt html, css, sql and some php. Id say Im now competant enough to make a decent site for a small business. But ive hit a critical blocked wall... I cant get work!

All the web dev/designer jobs ask for 3 years plus experience not someone like me who has self taught. Going freelance is an option, but how do you get yourself known? The thing is eberyone can code, but not everyone has the creative side needed to make new sites that are different from the rest. Im feeling dejected and as though ive wasted my time learning all this.

I just got my first job as a Junior Web Designer, no experience, self-taught. I had an incomplete portfolio - www.FabienO.com - but somehow still got it. So it's possible, just gotta keep at it. If you don't have qualifications, you really need a portfolio.

It was also recommended to me by Tripnologist (just before I got this job), that I should contact web agencies and offer to do free work maybe every Saturday. 4 days a month but after 6 months you can put that down as 6-months work experience. Might be worth a shot?
 
Soldato
Joined
26 Dec 2003
Posts
16,522
Location
London
I've been learning on and off for the past two years. It's time for me to act on what I know. It does make you feel dejected when they say " were looking for someone with more commercial experience'. If only there was a place where you could like "volunteer" to make web sites for businesses and gain experience that way. I'm 26 by the way.

Try and get work experience somewhere. Of our last four employees, two were taken on after impressing on placements — so if you're talented but perhaps can't demonstrate that on paper, it's a potentially good way in.
 
Last edited:
Soldato
Joined
10 Apr 2006
Posts
7,848
Location
North West
Go to agencies direct with a nicely written email, not waffle though about the work you've done and if they have any placements or opportunities for a junior position.

I got my job 2 years ago with only 6 months freelance experience and it's at one of the best places agencies outside of London. A lot of agencies will hire at some point throughout the year, you just need to get your name in there at the right time.
 
Associate
OP
Joined
10 Jan 2008
Posts
1,677
Location
Nottinghamshire
It was also recommended to me by Tripnologist (just before I got this job), that I should contact web agencies and offer to do free work maybe every Saturday. 4 days a month but after 6 months you can put that down as 6-months work experience. Might be worth a shot?

That's really good advice and exactly the type of thing I'm looking to do. I will certainly look to do that after Christmas. I really want to put some of the skills I'm learning into practice so a real project would be great.

There is hope!

RoEy
 
Soldato
Joined
12 Jan 2009
Posts
6,407
I spent pretty much all day today looking for Web Developer jobs. All I want is someone to give me the opportunity to get my foot in the door and start coding for them. I am so so eager and passionate to learn words can't express it!

The jobs I've seen have essential and then desirable skills. Under essential we have HTML, CSS, JavaScript. Under desirable there's ASP.net, php, MySql. I know they will want someone who posses most of those skills so my chances are slim to none.

Sometimes I feel like jacking it all in and sticking with dead end support jobs. How can a guy get a break!?
 
Back
Top Bottom