11 replies [Last post]
Shmithers
Offline
newbie
Vancouver, Canada
Last seen: 9 years 37 weeks ago
Vancouver, Canada
Timezone: GMT-8
Joined: 2009-06-19
Posts: 9
Points: 5

TLDR version:
I need some ideas for how to code this mockup: http://test.nspratt.com/

Long winded version:
Hello everyone, first I'd like to thank everyone who takes the time to read my post and help me out. With out people like you the internet would be a very dark place indeed.

First I'd like to tell you my experience with CSS and HTML so you can get a better idea of where I am coming from. I took web development in high school (few years ago) where I learned basic HTML and CSS. A few years later I wanted to create a portfolio website, so I took on the task of learning CSS and HTML in more depth. I watched a (unfortunately out of date) training video on designing and making websites with the Adobe suite. I learned a good amount through the training, but not enough to make myself fully confident in designing a website. I tried anyway, but my code turned out to be a disaster, I had big problems with compatibility and many other issues. I gave coding a break and went on to other things. Now, a few months later I am ready to tackle CSS again, but need to know where to start. I've gone through a lot of the w3schools tutorials, and have talked to a few wannabe web designers, but with out a lot of success. I created a mockup design of what I think I would like, but am very much overwhelmed with where to start, how to do things properly (seeing as I would very much like to have a readable, nice looking, functional, and accessible website).

I have created a mockup image in Photoshop and hosted the image here: www.test.nspratt.com

A few things I am confused about:
-How many style sheets to use (why would you use many sheets over one)
-How many divs to use for a simple layout (I've seen websites with 5 divs for a two column website)
-How to properly setup divs for formatting
-Which DOCTYPE to use.
-Whether using a content management system for a simple website like mine is a good idea or not.

I know this is a general cry for help, and many tutorials may cover some (or all) of these questions I have, I am hoping that I might receive some advice and/or suggestions on coding the specific layout that I have and problems I may encounter with trying to code the design.

Thank you very much,

Nathan Spratt

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 1 hour ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Shmithers wrote:TLDR

Shmithers wrote:

TLDR version:
I need some ideas for how to code this mockup: http://test.nspratt.com/

Ah, perfect. You must have known I was reading. Wink

Shmithers wrote:

Long winded version:
Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

Wink

Shmithers wrote:

A few things I am confused about:
-How many style sheets to use (why would you use many sheets over one)

One is sufficient.

Shmithers wrote:

-How many divs to use for a simple layout (I've seen websites with 5 divs for a two column website)

Use as few as possible. After a quick look, probably 3 to 5 for your layout.

Shmithers wrote:

-How to properly setup divs for formatting

No idea what that question means.

Shmithers wrote:

-Which DOCTYPE to use.

New pages, Strict doctype. HTML or XHTML, who cares which. XHTML is cleaner and easier.

Shmithers wrote:

-Whether using a content management system for a simple website like mine is a good idea or not.

I use a CMS for all my sites. I wrote a very simply one and I like it because it doesn't have all that junk that I never used in the complex open source CMS'.

By the way, don't use a scroll bar for the pictures. Look into the jQuery cycle plugin instead. You'll thank me later.

Shmithers
Offline
newbie
Vancouver, Canada
Last seen: 9 years 37 weeks ago
Vancouver, Canada
Timezone: GMT-8
Joined: 2009-06-19
Posts: 9
Points: 5

Quote: By the way, don't use

Quote:

By the way, don't use a scroll bar for the pictures. Look into the jQuery cycle plugin instead. You'll thank me later.

I really like the idea of a scroll bar, more gallery like, it keeps people going through images when they see more, instead of clicking through images one by one and panoramas can be super wide with out them being super tiny. Is there any way to have a horizontal scroll bar with out it being a major pain in the rear end?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 42 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Verschwindende wrote: XHTML

Verschwindende wrote:

XHTML is cleaner and easier.

I think that's probably a case of personal preference.

But yeah, don't use a scrollbar on your gallery: use something like this instead: http://devkick.com/lab/galleria/

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 41 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I pretty much agree with

I pretty much agree with Verschwindende's answers for everything, including the scroller... please don't rely on Javascript alone. Have a working scroller and then throw JS on top of it. While I've gotten plain HTML/CSS horizontal sites/scrollers working, without JS your menu on the left won't work correctly cross browser (FF was the only one I was happy with).

The link Tyssen linked to, which I see without JS because I haz it off, is fine: I click on the image and I get a long page, and while scrolling sideways is jawsome, scrolling up and down is easier for most people. More people have up-and-down mouse wheels if they have a wheel (logitech has a mouse that can scroll sideways but who the heck has those besides grafixy people? : ) If it looks like you need to choose between jawsome and easy-to-use, choose the latter. Visitors hate working hard to see your site.

I prefer HTML4.01 Strict over XHTML simply because it's cleaner (there are fewer characters, without all the closing slashes that browsers actually consider bad HTML and have learned to ignore lawlz) but ultimately it doesn't matter, so long as you know your XHTML page only has a seXy X and isn't real XHTML (with all that funky XMl stuff in it). Don't use the <?xml...?> prologie thingie even if you see it on the W3C website. That's for real XML documents, not XHTML sent ass HTML, and will put IE6 in Quirks Mode (think Geocities era).

Quote:

I created a mockup design of what I think I would like, but am very much overwhelmed with where to start, how to do things properly (seeing as I would very much like to have a readable, nice looking, functional, and accessible website).

Always always always, start with the HTML. Write good HTML and the CSS won't be 10 times more complicated than necessary.

Write HTML without regard to how it looks (unless you need sandbags) and make sure it would make logical, accessible, semantic sense with no styles, properly written like a college paper. Use the right element for the job: headers for headers, tables for tables, lists for lists, forms for forms...
What is good HTML only comes with time. If you do things right, a few years after building this website, you'll look at your code with a mixture of horror and embarassment : )

I'm no expert, but I fake one on teh Internets

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 9 years 38 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

CMS

I agree with the v man (sorry, but god knows how to spell that without looking at it) it is a good idea to always use a CMS, but having used roll my own and open source I say use Wordpress every time.

A wise man once said, don't try to write a content management system like Wordpress (which is what I based mine on) when someone has alreadydone all the hard work for you.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 1 hour ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Tyssen wrote: Verschwindende

Tyssen wrote:
Verschwindende wrote:

XHTML is cleaner and easier.

I think that's probably a case of personal preference. ...

I'm sure you're correct. I just prefer the structure of the XHTML rules. Close and quote and keep it all small. Wink

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 42 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Verschwindende wrote: Close

Verschwindende wrote:

Close and quote and keep it all small. Wink

That's what I do with HTML4/5 but save having to type out extra / at the end of elements.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 41 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Spelling

Quote:

I agree with the v man (sorry, but god knows how to spell that without looking at it)

copy-pasta : )

Tyssen wrote:

That's what I do with HTML4/5 but save having to type out extra / at the end of elements.

Me too (well, not the 5).

I'm no expert, but I fake one on teh Internets

Shmithers
Offline
newbie
Vancouver, Canada
Last seen: 9 years 37 weeks ago
Vancouver, Canada
Timezone: GMT-8
Joined: 2009-06-19
Posts: 9
Points: 5

I know I am making mistakes, but don't know what they are:

Hellooo everyone!

I have spent a good number of days learning and working on my website. I know with absolute certainty that I am doing something quite wrong with regards to the positioning of the elements on the page. I have changed the same website from the mock up page to the work in progress page. (www.test.nspratt.com) If any of you would be kind enough to check out my html and css it would help me immensely.

A few questions:

As far as positioning goes, I believe I have to have at least my main div (div#background) set to relative to use the centering trick "margin-left:auto; margin-right:auto;" I am rather confused about how to position elements otherwise, some people say relative, some say fixed, and other say absolute.

If you have any suggestions and thoughts on how to efficiently lay out the elements in the page so that it will be very consistent between browsers (if you want a real scare look at my website in IE6 or IE7) it would be greatly appreciated.

Thank you very much everyone!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 41 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Here goes

Okay. Here goes. Half are opinion (it wouldn't be a stomme post if it didn't have a liberal addition of opinion now would it?).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="author" content="Nathan Spratt" />
	<meta name="robots" content="all" />
	<title>Nathan Spratt Photography</title>
 
	<link rel="icon" type="image/gif" href="favicon.ico" />
	<link rel="stylesheet" type="text/css" href="nsp.css" />
</head>

You should always state a language. Not only bots can easily see which language this page is generally written in, but also other user agents such as screen readers. Imagine a Dutch-defaulted screen reader trying to read out your Engrish with Dutch pronunciation : )
To catch as many user agents as possible, I recommend doing this both ways...
So since you've chosen the XHTML setup, you'd need this:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

You can give it a British accent with en-gb if you want : )
and then this:
    <meta http-equiv="content-language" content="en" />

only because I've heard some user agents look at the html tag while others look at the meta tag. I think you can also set language on the HTTP headers too. Of course, it makes sense to keep this meta tag above the <title> tag, so that the title of the page is also read out correctly.
If you decided to have a haut French title, while the rest of the page is in Engrish, you can set page default to en and then
<title lang="fr">haw haw, bagettes!</title>

According to the specs, the lang attribute is supposed to be limited to the element you put it on, so stuff after the title should go back to engrish.

Make use of your meta description tag. A sentence or two stating what that particular page is about (great for google to grab on a page with little other text such as photo pages). If someone's searching for keywords your page has, but Google can't find a decent sentence to display on the results page, it can and will use your meta description tag and show that instead. So make it nice, short and sweet. "Nathan Spratt's photography web site and gallery: weddings, family photos, commercial work, and more."
or some such thing.

<!--Begin Background Content-->
	<div id="background">
		<img src="Images/background.jpg" alt="" width="960" height="600" />

So close. You're even calling it "background.jpg" so this means it's presentational. It doesn't say anything, just makes the site look pretty. Anything for teh pretties in general belong in CSS.

So you already have this in css:

div#background{
	position: 			relative;
	top:				20px;
	height: 			600px;
	width:				960px;
	margin-left:		auto;
	margin-right:		auto;
	border: 			1px #333 solid;
}

You can add this:
background: url(Images/background.jpg) 0 0 no-repeat;
to #background.
the 0 0 is left: 0px and top: 0px and any numbers you use there are from left and from top respectively.

Quote:

I believe I have to have at least my main div (div#background) set to relative to use the centering trick "margin-left:auto; margin-right:auto;"

Position: relative is not necessary to auto-margin anyone into centering heaven. All you need is
-a block element (divs are blocks by nature)
-a set width (can be any unit, including %) who is under 100%
-margins less than the remaining possible space (obviously "auto" will adjust to whatever you need, and be auto-magically equal on both sides). I mean if you gave such a large box as #background a left and right margin of like 800px and my screen isn't big enough to work with that, definitely the left margin would be honoured and the box would be 800px from the left.

Which is useful to know because if you didn't want to auto-margin and center something, but instead want it x-units away from its container's left edge, you can use margin-left: thatunit and it does the same thing.

Auto margins will center horizontally but unfortunately not vertically. A pity. And they center within that box's container.

Since you want #background to start 20px from the top of the body, logically you would use margins for that:
#background {
margin: 20px auto 0;
}
(top, sides, bottom if you don't want 20px on the bottom)

Mostly because of margin collapse, I'll move large boxes away from the tops of their containers usually by putting padding-top on the container.

So in your case, the body (who is the container of #background) I'd give padding-top: 20px and then #background no longer needs the position: relative, or the coordinates. You leave margin: auto for margins and let the body's padding do the work of keeping the #background away from the top.

Moving the image to #background's background means one less HTML element.
You can now do pretty much the same thing with #background to keep #allcontent spaced away from all four sides: give #background however much padding makes sense to let that background image show, pushing the #allcontent where you want it.

Just make sure to change your height and width statements. Adding padding on a box is like adding padding on a human. People get bigger when you pad them with fat. Padding is a lot like fat.
So if you needed 15px of padding on each side of #background (I didn't look to see how far away #allcontent really is from the edge of the image in #background), then you'd take the width (960px) and minus 30px (15px on each side) to get
width: 930px;
padding: 0 15px;
To add top-bottom padding (let's say also 15px) then you'd need to subtract that from #background's height:
height: 570px;
width: 930px;
padding: 15px; (all four sides)

etc. Normally we'd say, "be careful setting height on stuff" because content can grow bigger than heights you state. However your setup is a little more different and maybe you'll do something else to accommodate any text-enlargement.

		<div id="topleftd">
 		 <img src="Images/featured.gif" alt="featured" width="114" height="27" />
        </div>

Now, looking at the page visually, what we see is text. It sure looks like a header. I mean, it's the name of the content presented on the page: featured images. It's one of your image categories we can see in your sidebar.

Depending on how you think of the way your site is set up, "featured" could either be an h1 (the name of the page, or the name of most of the content on the page) or an h2 (if you believe something else is the name of your page... possibly on the main/home page alone, "Nathan Spratt photography" is the h1).
So I'd at least remove the div and you could wrap the image in a header tag (or, you could to the more code intensive Gilder-Levin image replacement).

<h2 id="featured">
  <img src="Images/featured.gif" alt="featured" width="114" height="27" />
</h2>

Even though it's an image, its alt text is considered the text of a header. Now it has meaning: stuff underneath this image has something to do with "featured".

		<div id="toprightd">
 
				<img src="Images/rightarrow.gif" alt="scroll right" width="24" height="18" /></div>

I realise this is a placeholder for something. Likely an anchor who goes to the next image for those without Javascript, and with Javascript on, that anchor will set off an event handler who does some wild scrolly stuff. And I believe most people would use an anchor there since normally (in plain HTML) it would go to a new page with a new image, rather than the <button> element (who is meant to exist for random scripts on a page).
You can make the code above an anchor with a class or id, and you could float it to the right inside #allcontent.
Again either it can wrap around an image or use more complicated image replacement. If it were just wrapping an image:
<a class="next" href="url-next-image"><img src="Images/rightarrow.gif" alt="scroll right" width="24" height="18" /></a>

Possibly "next image" is better text, since that would be true for everyone, while for those without scripts "scroll right" might mean nothing. The next image might be a page reload or, like that link Tyssen had, it would be below the previous image and not to the right. Depending on what you do.

To make positioning all the other things inside easier, I'd separate #allcontent into 2 sub boxes: sidebar and main (or whatever names you want). Like this.

I'm not sure what the Nathan Spratt image is. You put it in the menu, and that might be correct if it is a link who goes home... but in general you'll see more clickable logos separate from any Home link in the menu. I think I'd tend to have the name/logo separate from the rest of the menu.
There are multiple ways to skin a dumb cat and multiple ways to code a website, but there are some ideas. I like to start out with what boxes do normally and work with that directly.

I'm no expert, but I fake one on teh Internets

Shmithers
Offline
newbie
Vancouver, Canada
Last seen: 9 years 37 weeks ago
Vancouver, Canada
Timezone: GMT-8
Joined: 2009-06-19
Posts: 9
Points: 5

Thank you so much for your

Thank you so much for your advice here. I have been very busy with other things, but I will be spending an entire weekend on the website so I will put all your good ideas to use very soon. Thank you, it is very much appreciated.