I haven’t filled alot of the styles yet, but mainly because I don’t even know where to start. Like is there a default checklist you go through? (position… absolute, center, width 100%)
The one issue I’ve faced so far is that when I put in the stylesheet:
#bigbutton {
background: url(http://www.yourvancouvermortgagebroker.ca/facebook/images/bigbutton.jpg) no-repeat center top;
}
-should my green lines be in a div of their own so I can style them?
-How do I get the photo to ‘align’ in the upper right corner?
-how do I get my icons to line up on the left hand side of my text?
-what’s the best way to get my buttons working?
If anyone can just give a me a swift teaching, I’d be indebted… I guess I’m just not sure what I should be adding to all my div styles… if you NEED to add positions, sizes etc…
haha… yeah, basically I’ve never made a page from scratch before, which is pretty sad… I feel like I will catch on super fast though.
The problem is that if I take a full CSS course (through lynda.com or something), most of it will be irrelevant/too much to take in at this point…
So I need to clean up my divs… hmm
<html>
<head>
<title>Your Vancouver Mortgage Broker</title>
<link rel="stylesheet" href="http://www.yourvancouvermortgagebroker.ca/facebook/styles/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="introholder">
<div id="title">
<img src="http://www.yourvancouvermortgagebroker.ca/facebook/images/logo.jpg">
</div>
<img src="http://www.yourvancouvermortgagebroker.ca/facebook/images/line.jpg">
<div class="intro1">
Buy a place in the most beautiful city in the world- it's not as hard as you think.
</div>
<img src="http://www.yourvancouvermortgagebroker.ca/facebook/images/line.jpg">
<div class="intro2">
$1,000/month supports a mortgage of $200,000.
</div>
<div id="vancouver">
<img src="http://www.yourvancouvermortgagebroker.ca/facebook/images/vancouver.jpg">
</div>
<div id="bigbutton">
</div>
</div>
<div id="bodyholder">
<img src="http://www.yourvancouvermortgagebroker.ca/facebook/images/dottedline.jpg">
<div class="info">
<div class="logo">
<img src="http://www.yourvancouvermortgagebroker.ca/facebook/images/bulb.jpg">
</div>
<div class="title">
why use a mortgage broker?
</div>
<div class="description">
There are a few reasons why you should use a Mortgage Broker instead of a bank...
</div>
<div class="learnmore">
</div>
</div>
<img src="http://www.yourvancouvermortgagebroker.ca/facebook/images/dottedline.jpg">
<div class="info">
<div class="logo">
<img src="http://www.yourvancouvermortgagebroker.ca/facebook/images/about.jpg">
</div>
<div class="title">
about me
</div>
<div class="description">
I'm a local Mortgage Broker based out of Vancouver, BC...
</div>
<div class="learnmore">
</div>
</div>
<img src="http://www.yourvancouvermortgagebroker.ca/facebook/images/dottedline.jpg">
<div class="info">
<div class="logo">
<img src="http://www.yourvancouvermortgagebroker.ca/facebook/images/rates.jpg">
</div>
<div class="title">
today's rates
</div>
<div class="description">
Brokers have access to lower rates than the general public...
</div>
<div class="learnmore">
</div>
</div>
<img src="http://www.yourvancouvermortgagebroker.ca/facebook/images/dottedline.jpg">
<div class="info">
<div class="logo">
<img src="http://www.yourvancouvermortgagebroker.ca/facebook/images/apply.jpg">
</div>
<div class="title">
apply now
</div>
<div class="description">
Apply online or book a meeting today...
</div>
<div class="learnmore">
</div>
</div>
</div>
<div id="askmeanything">
Have a question? <a href="http://www.yourvancouvermortgagebroker.ca/contact">Ask me anything</a>.
</div>
</div>
</body>
</html>
I disagree. In my mind, the best way to learn it is to do it, screw it up, and figure out how to do it better. If you’re doing this primarily as a self-education project, then keep at it. You’d do better to post specific questions in these forums instead of “How do I make this site better?” questions, which most people will ignore as little more than “Do it for me!” requests. (I know that’s not what you mean. )
Work on one element at the time. My first thought would be for you to create, or crib, a proper layout template, using a proper (HTML 4.01 Strict or XHTML 1.0 Strict if you must) doctype. What you have now is something that, well, I would have created when I was teaching myself code. There’s nothing wrong with finding simple, free layout templates on the Net and disassembling them to see how they work. There’s plenty out there; here’s one of many, many possible sources:
The idea is not to just find one you like, snag it, hang stuff off of it, and call it yours (though I’ve done that in the past!), but to figure out why it works. Pick a layout and save it as an original. Then make a copy and start tinkering with it to note the changes. See what breaks when you do what. Figure out how to fix it in a way that doesn’t just restore it to the original.
LOL, Oddz beat me to it. Now figure out WHY Oddz’s code works better than yours. Even better, see if you can whip out a stylesheet to go with Oddz’s HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Jackson Cunningham Vancouver Mortgage Broker</title>
</head>
<body>
<div id="container">
<div id="masthead">
<h1>Jackson Cunningham<br>Your Vancouver mortgage broker<br>604-374-7065<span></span></h1>
</div>
<div id="content">
<div id="teaser">
<img src="http://www.yourvancouvermortgagebroker.ca/facebook/images/vancouver.jpg" width="270" height="246">
<p>Buy a place in the most beautiful city in the world — it's not as hard as you think.</p>
<p>$1,000/month supports a mortgage of $200,000.</p>
</div>
<div id="why-use-broker">
<h2>why use a mortgage broker?</h2>
<p>There are a few reasons why you should use a Mortgage Broker instead of a bank…</p>
</div>
<div id="about-me">
<h2>About me</h2>
<p>I'm a local Mortgage Broker based out of Vancouver, BC…</p>
</div>
<div id="todays-rates">
<h2>today's rates</h2>
<p>Brokers have access to lower rates than the general public…</p>
</div>
<div id="apply-now">
<h2>apply now</h2>
<p>Apply online or book a meeting today…</p>
</div>
</div>
<div id="footer">
<p>Have a question? <a href="http://www.yourvancouvermortgagebroker.ca/contact">Ask me anything</a>.</p>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Jackson Cunningham Vancouver Mortgage Broker</title>
</head>
<body>
<div id="container">
<div id="masthead">
<h1>Jackson Cunningham<br>Your Vancouver mortgage broker<br>604-374-7065<span></span></h1>
</div>
<div id="content">
<div id="teaser">
<img src="http://www.yourvancouvermortgagebroker.ca/facebook/images/vancouver.jpg" width="270" height="246">
<p>Buy a place in the most beautiful city in the world — it's not as hard as you think.</p>
<p><span>$1,000/month</span><br>supports a mortgage of<br><span>$200,000.</span></p>
</div>
<div id="why-use-broker">
<h2>why use a mortgage broker?</h2>
<p>There are a few reasons why you should use a Mortgage Broker instead of a bank…</p>
</div>
<div id="about-me">
<h2>About me</h2>
<p>I'm a local Mortgage Broker based out of Vancouver, BC…</p>
</div>
<div id="todays-rates">
<h2>today's rates</h2>
<p>Brokers have access to lower rates than the general public…</p>
</div>
<div id="apply-now">
<h2>apply now</h2>
<p>Apply online or book a meeting today…</p>
</div>
</div>
<div id="footer">
<p>Have a question? <a href="http://www.yourvancouvermortgagebroker.ca/contact">Ask me anything</a>.</p>
</div>
</div>
</body>
</html>
That’s absolutely how you do it. Save Oddz’s files and make copies. Then play with it (the copies), tear them apart, move stuff around, see how many different ways you can break it, and figure out why. That’s how you learn it.
Lesson no. 1: Why doesn’t it validate? Sorry, Oddz!
It doesn’t validate because it lacks the mandatory ALT attribute for IMG, I suspect perhaps it was just a sneaky test to catch you out Max. Always start with simple pages don’t go straight to complex.
I know there is another big reason why it doesn’t work. But I thought that’d be too obvious unless it is another forum bug? Although ironically it would pass the Validation test.
I was talking about the CSS and the URL and post #9 but if you were referring to encoding that can be done via the server anyway. Although obviously normal people would place it before the TITLE element. Plus obviously it’s missing the LINK but that wouldn’t register.
In HTML the start and end tags for the HTML, HEAD and BODY elements are optional, but specifying the Document Type Definition, the character encoding and the TITLE are required.
However, it doesn’t necessarily have to use the META element hence why I didn’t say that before but normal people would use it.
Wow, you’re going into the weeds for a HTML 101 presentation. I was thinking more of standard, conventions, and “best practices” for general coding. You are correct, but I wouldn’t start down the “learn HTML the right way” path by going there.
Clam, don’t let the back and forth between Robert and me make you reluctant to jump in. (And he does know more about code than I do, I just like to beat up on him when I get the chance. Everything he’s said is accurate.)
I would consider that a compliment. He prefers to beat me up though it’s much more fun.
I’d agree if you are creating a HTML 4.01 document you should separate style from structure. It’s usually considered ‘very good practice’ to also declare the encoding via the META declaration and use external style sheets.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
[B]<meta http-equiv="Content-Type" content=
"text/html; charset=UTF-8">[/B]
<title>
YANC
</title>
<link rel="stylesheet" href="somestyle.css" type="text/css">
</head>
<body>
<p>
Yet Another Newt Comic...
</p>
</body>
</html>
Obviously depending upon your content; it may determine the charset value you use, etc.
)
Even better, see if you can whip out a stylesheet to go with Oddz’s HTML.