Hi Guys,

 

I'm more of a front end designer and usually sit and work with photoshop whilst a coder shouts out image sizes and graphics to make to be put into websites. Well the time has come to learn the trade myself so I can get my portfolio site sorted and cut down on outsourcing the coding work to other people ( It's lazy and I don't learn anything from it.)

 

Anyway I thought I'd practice with the creation of my bands website. I have completed 2 pages and yes the code is sloppy. It loads just right in IE7 & Firefox so I'm pretty happy.

click here

However do any of you have tricks and tips when it comes to keeping html & css tidy and how do you get that strict 1.0 everytime. Is there some simple rules I should be abiding to.

 

Here is the test page so far uploaded for you to view.

 

The Homepage and Videos page are currently the only ones that work.

 

I don't wish for my coding skills to be slagged off (it's my first attempt at coding by hand and I can slag my coding off just fine on my own)

 

I just wish to have input on how I could tidy it all up a bit and create good habits for the future. Plus any code fixes would be appreciated It would be nice to be able to run this site through a validator and pass with flying colours.

 

Kindest regards to all & keep up the good work

 

Luke

That's a pretty nice site.

 

I am a web designer also, but I make a PSD and then send it to another freelancer to code.

That's how I make sites. I can code, I just suck a little bit.

I learnt all the code to put those pages together from a HTML & CSS BOOK FOR DUMMIES

 

I should study it a bit more I think. I would love to see some of your PSD to HTML websites.

 

Thanks

 

Luke

 

That's a pretty nice site.

 

I am a web designer also, but I make a PSD and then send it to another freelancer to code.

That's how I make sites. I can code, I just suck a little bit.

Your code doesn't look too bad actually mate. Well done.

 

I find it easier to code than design. Although I do enjoy the design side of it and always describe myself as a Web Designer.

It's a really nice design.

 

The errors you have been receiving through the validator are due to a missing </div> for the container div and a missing </head> tag. The best way to spot these sort of errors is to use a text editor which highlights both the opening and closing tags if you click on one of them. If they do not highlight when one is selected the other one of them will be missing.

 

I tend to use notepad++

 

Your coding is pretty good (I'd expect it to be valid), you can use a bit of shorthand with the css but it's not essential.

 

 

I enclose an amended index.html file.

 

Paul

index.htm

The video section will be harder to validate.

 

I have not had to embed any youtube video into a site before so I'm not really able to advise you on this.

 

Seems to be a good article on this here:

http://www.sampletheweb.com/2006/09/10/how-to-embed-youtube-and-google-video-without-breaking-validation/

Thanks for all the help guys. I am grateful for all the tips and hints you have for me .

The video page will validate.

 

I followed the guide set out here:

http://blog.artesea.co.uk/2008/05/youtube-and-embedding-correctly.html

 

Though I found you need to remove the last part of the code generated by the youtube embed section and replace it with &hl=en

eg

the embed src is "

but you add

"

 

I also removed the paragraph tags surrounding the youtube1 div.

 

I attach a copy of the html.

video.html

Wow guys your help is really appreciated when I posted the topic I wasn't expecting people to dive in and fix my code for me. I am extremely grateful and when I actually have some money I'll send you a donation via paypal PaulB.

 

I'll keep you updated on the progression of the site.

 

Thanks again

 

Luke

Wow guys your help is really appreciated when I posted the topic I wasn't expecting people to dive in and fix my code for me. I am extremely grateful and when I actually have some money I'll send you a donation via paypal PaulB.

 

I'll keep you updated on the progression of the site.

 

Thanks again

 

Luke

 

Also Luke, you can use HTML Tidy online to auto-magically tidy it all up nicely. It's also good to comment as you go so that if you or another web designer has to make updates down the line they know what's what.

 

Oh also use some kind of CSS basis, like a reset if you haven't already.

Edited October 1, 200917 yr by dejabrew

I attached a file with the wrong videos in yesterday (that file was my first go at working through the tutorial!).

 

Below is the updated file.

videos.html

I have done some more to the site but in the process I have somehow messed up the video page.

 

Someone please help me fix it

 

CLICK HERE

 

Thanks in advance

 

Luke

 

(also the new bit I added on the homepage is a <UL> with pictures. I'm struggling to get the list centered or atleast have the same distance at both ends. Any help would be also appreciated in this part.

Whats the problem?

 

Sory mate, i've looked at your video page and the videso are there. What is it supposed to look like?

There is supposed to be a black background that stretches down the the grey footer which seems to have gone awol.

is that wallpaper looking background that starts halfway down?

is that wallpaper looking background that starts halfway down?

The pattern bg is the body background. If you take a look at the homepage you'll see that the black content bg stretches down from the bottom of the header to the top of the footer. I wish to get the same to happen in the videos page. I think I messed something up in the CSS when making changes to the homepage that has effected the videos page. I just can't seem to diagnose what and how to get this back to normal.

 

Your help is heavily appreciated

it may be because you have set the height of centre to 535px.

try removing the height.

you've given news a height as well.

Unless you know exactly how high your content is going to be, I wouldn't give a height.

I think I've fixed it thanks to your help. Although there is still a small issue. I'm getting a very small gap between the bottom of the black and the footer. I have reuploaded so you can see it.

 

Luke

can you try making the container black instead?

can you try making the container black instead?

 

I've set the container to black with no fruition stressful this web coding stuff isn't it

its good fun isn't it

 

Its annoying when it turns out to be something simple.

 

Try setting the container background to white for a sec to see if it makes any difference.

Try setting the videos id background color to black.

I've set the container to black with no fruition stressful this web coding stuff isn't it

 

add background-color:#00000 to your #videos div

 

edit: paul got there first ha

Nice work fella,

 

In regards to getting Strict 1.0 every time, there are a couple of conventions you just have to stick to, nothing radical really.

 

For instance a strict doc type requires that your forms have a nested fieldset, you can hide it with CSS, but just a convention you have to stick too in order to achieve the semantic markup that web standards is looking for.

 

You will find out these conventions by either reading the W3 docs or validating all your pages and learning from your mistakes along the way. Markup and CSS is just a set of rules you have to follow.

Hey mate that is not bad work at all especially if you are not used to coding and your coding is not that sloppy at all, you use divs and css which is a big plus. If you are looking to make sure that your documents always validate, remember things like closing blank tags such as images with a /> for example <img src="example.jpg" alt="this is an example"/>, which I think you have done. Like one of the lads said using comments can save you time as you know where to look for your content and where everything is situated. Also I noticed you have a list try and format it like so and this will help mate. The W3C validator helps immensely when you run your pages through it. It will tell you where your errors are and this can help fix formatting problems on your pages. Remeber and select xhtml strict 1.0 for the doc type. At first you may be a little put of if you see 18 errors but 1 error can have a knock on effect of 6 for example so you really only have to fix 3. Doesnt take long to learn and people here are always here to help. Hope this helps.

 

<div id="maincontent">

<ul>

<li>example 1</li>

<li>example 2</li>

<li>example 3</li>

<li>example 4</li>

</ul>

</div>

Hey mate that is not bad work at all especially if you are not used to coding and your coding is not that sloppy at all, you use divs and css which is a big plus. If you are looking to make sure that your documents always validate, remember things like closing blank tags such as images with a /> for example <img src="example.jpg" alt="this is an example"/>, which I think you have done. Like one of the lads said using comments can save you time as you know where to look for your content and where everything is situated. Also I noticed you have a list try and format it like so and this will help mate. The W3C validator helps immensely when you run your pages through it. It will tell you where your errors are and this can help fix formatting problems on your pages. Remeber and select xhtml strict 1.0 for the doc type. At first you may be a little put of if you see 18 errors but 1 error can have a knock on effect of 6 for example so you really only have to fix 3. Doesnt take long to learn and people here are always here to help. Hope this helps.

 

<div id="maincontent">

<ul>

<li>example 1</li>

<li>example 2</li>

<li>example 3</li>

<li>example 4</li>

</ul>

</div>

 

Thank you very much for your great advice. I will keep up the hard work and be back to let you know what I've been upto

 

Thanks

 

Luke