Forums | MacLife

avkills wrote:

Most people these days use CSS to layout the site.

-mark

I thought CSSs were used to "style" the look of it (bold, italics, font size, font style, etc).  Can you explain more?  Thanks.

I'd suggest getting this book and then going from there.  A good ole updated O'Reilly book on HTML/XHTML would help also.

-mark

I think here is a web-site for how to design web-sites and what to avoid.

Gipetto wrote:

You can learn a lot by simply starting at the beginning of this site and working your way forward.
http://www.alistapart.com/

I saw that site from the Designing With Web Standards site by, I think, Zeldman.

Sounds like you are asking how to design the architecture of your site.

In your example of the site here each link points to a new html page so the link to news or blogs would open news.html or blogs.html respectively in a normal site. This site is using a CMS so you don't see the served page name in the URL but if you wre designing your own site at the level you are at that is how you would do it.

Example:

Your home page has a navigation bar near the top somewhere.
On that nav bar you have these links:

Home : About Me : News : Forums : Links

You would need to make a new html page that each of those links when clicked on would take you to.

index.html <-- this would be home
about.html <-- this would be for About Me
news.html <-- this would be for News
forums.html <-- this would be for a forum
links.html <-- this would be for your links page

Then the way to make those words into links that take you to the page you want is wrap them in an a tag like this:

<a href="about.html">About Me</a>

That way if you click on the About Me link it directs the browser to the about.html page.

A common way to code a nav bar is to put it in an un ordered list and then style that list with CSS so the cod eon your page would look like this:


EDIT! DON"T USE THIS CODE Read on to find out why and use the one in the next code block.

<ul>
<li><a href="index.html">Home</a></li>
<li>:</li>
<li><a href="about.html">About Me</a></li>
<li>:</li>
<li><a href="news.html">News</a></li>
<li>:</li>
<li><a href="forums/forums.html">Forums</a></li>
<li>:</li>
<li><a href="links.html">Links</a></li>
</ul>

EDIT! This is the correct code Read on to find out why

<ul>
<li class="no_colon_bg"><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="news.html">News</a></li>
<li><a href="forums/forums.html">Forums</a></li>
<li><a href="links.html">Links</a></li>
</ul>

Now that you know the how you can make it look the way you want with css.

If you want to get more advanced you can start to put common parts of your site )like a header image and a nav bar) into php includes so you only have to edit them in one place and the changes flow to every page on your site.

If you want to get more advanced than that then you can move to creating a dynamic site where you create a few template pages and have the content in a database.

Last edited by Light Speed (2008-01-06 4:51 pm)

Light Speed wrote:

Code:

<li>:</li>

No, no, no!

Don't teach people such things! Do it right, or not at all!

,xtG
.tsooJ

Antonio wrote:

Alien wrote:

Light Speed wrote:

Code:

<li>:</li>

No, no, no!

Don't teach people such things! Do it right, or not at all!

,xtG
.tsooJ

I fail to see what's inherently wrong about his solution

It's not semantic; it makes no sense to say that a colon is an item in the list of navigation links.

but I suppose if you want semicolons, you could always:

Code:

 <li><a href="linky_here">Menu Link : </a></li>

Which would result in a cleaner list.

In a perfect world, if you wanted to insert some sort of decorative text, you would use CSS (li:after {content: ":";}), but that doesn't cover IE.

Miles wrote:

...but that doesn't cover IE.

Exactly. Also, one could argue that it's a part of the content, which is why it could (correctly) be placed in either the content or the presentation. It's a bit of a gray area, like images (I prefer to keep inline images in markup, background and decoration in the style sheet).

Light Speed wrote:

Miles wrote:

but that doesn't cover IE.

Ding ding ding .........

What he said. Again, I don't see an issue with having the semicolon in the list, just not as individual list item, less so for sake of semantics, and moreso for simply keeping the code clean and simple.

Miles wrote:

It's not semantic; it makes no sense to say that a colon is an item in the list of navigation links.

End of story.

A list is a list, the colon has absolutely nothing to do with that list, it is a visual separator and therefore should be handled by display layer (CSS).

Your list is :
• Home
• About
• News
• etc...

Not:
• Home
• :
• About
• :
• News
• :
• etc...

It simply makes no sense what so ever.  In addition to being semantically incorrect, it wrecks scalability by hardcoding display elements in the mark up.  Suppose you want to change style and don't want the colons?  You now have to hack the hack or change the markup.  Both defeating the purpose in the first place.

Using lists for navigation is semantically the correct way to go about things.  If you honestly don't see why handling display elements in the mark up is improper, then  why are you not just using tables?  Tables can be styled easily and work well with IE6.   It is exactly the same issue, using markup for display.

It is like buying a fully electric car to reduce fossil fuel usage and then putting a gas powered generator in the trunk for convenience.

Scott wrote:

Antonio wrote:

Also, one could argue that it's a part of the content...

One could also also argue the moon is made of cheese.  But both are arguments that fail.

A colon by itself as a block level element has no context.  Free floating punctuation is not content.  It is part of a sentence.  As a visual separator, it is also not content, it belongs squarely on display layer.  While there are a rare few things that may fall in the mystical "grey-area", this simply ain't one of them.

There is a simple way to tell if you are being semantic, simply turn off your style sheet. It become very apparent what is semantic and what is not.

And for every person who would agree with you, there would be someone who disagrees. And your simple way of telling is more in your head than not. Semantics is not one and the same as the simple separation of content and presentation, nor is the discussed gray area anything "mystical". There's also the matter of practices, and speak of which, as far as turning off the CSS, if I'm using semicolons to separate list items, depending on the situation, I might like them to still be there if I turn off my styles.

Last edited by Antonio (2007-12-23 5:06 am)

Antonio wrote:

And for every person who would agree with you, there would be someone who disagrees.

First off, highly doubtful.  Colons are simply not content, you would be hard pressed to find almost anyone who understands the concept to agree with that statement.  And they would still be wrong.  Colons are an artificial separators duplicating the purpose of a list in the first place.  The list provides separation itself, colons (especially when given their own line) are redundant.

While you may want to disagree, the authority on HTML spells it out pretty clearly:
http://www.w3.org/QA/Tips/unordered-lists

Antonio wrote:

And your simple way of telling is more in your head than not.

Not really, a page stripped of the presentation layer is a clear representation of how the content is actually structured.

Antonio wrote:

Semantics is not one and the same as the simple separation of content and presentation...

I never suggested they were, but are interdependent.  You cannot effectively separate content from presentation if you don't understand your content (or what content is). And if you understand it, you can apply the proper semantic mark-up.  You can wrap every element in the page with just a span and you would still have separation, though you would lack semantic markup.  Though the reverse isn't true.  If you don't have proper separation, it won't be semantic.

In the example colon example, you have neither semantic code or proper separation.  The are simply not meaningful content, and as they only serve as visual element, they are not proper separation.

Antonio wrote:

nor is the discussed gray area anything "mystical".

Sorry, "mythical" is the term I meant to use.  99.9999% of the time is cut and dry.  People usually only speak of grey areas when they don't understand the concepts at work. 

Antonio wrote:

if I'm using semicolons to separate list items, depending on the situation, I might like them to still be there if I turn off my styles.

Well... if you like them there, so be it.  However personal preference side, that still doesn't make them meaningful content.  Unless of course you were creating a list of punctuation marks.   Otherwise a list of pages on a site (as in the navigation example) is pointless to include some random punctuation marks.  It fails both meaningful content and content organization (the whole point of semantic markup). 

Look at it this way, a list is simple a hiearcal group of related elements. How is a page related to a colon?  Which makes more sense:
Home, About, News and Contact.
or
Home, :, About, :, News,: and Contact.

Remove the whole concept from html and web presentation.  How would write it on paper, what would be the grammatically proper way?  If you think of it in those terms, it should be a pretty simple concept to grasp.

Scott wrote:

Antonio wrote:

And for every person who would agree with you, there would be someone who disagrees.

First off, highly doubtful.  Colons are simply not content, you would be hard pressed to find almost anyone who understands the concept to agree with that statement.  And they would still be wrong.  Colons are an artificial separators duplicating the purpose of a list in the first place.  The list provides separation itself, colons (especially when given their own line) are redundant.

While you may want to disagree, the authority on HTML spells it out pretty clearly:
http://www.w3.org/QA/Tips/unordered-lists

Antonio wrote:

And your simple way of telling is more in your head than not.

Not really, a page stripped of the presentation layer is a clear representation of how the content is actually structured.

Yes, it shows how it's structured, nothing more, nothing less. You've failed to disprove anything by pointing that out.

Scott wrote:

Antonio wrote:

Semantics is not one and the same as the simple separation of content and presentation...

I never suggested they were, but are interdependent.  You cannot effectively separate content from presentation if you don't understand your content (or what content is). And if you understand it, you can apply the proper semantic mark-up.  You can wrap every element in the page with just a span and you would still have separation, though you would lack semantic markup.  Though the reverse isn't true.  If you don't have proper separation, it won't be semantic.

Yes, you suggested just that, and continue to do so in your example. In doing so, you make standards and semantics one and the same.

Scott wrote:

Antonio wrote:

nor is the discussed gray area anything "mystical".

Antonio wrote:

if I'm using semicolons to separate list items, depending on the situation, I might like them to still be there if I turn off my styles.

Well... if you like them there, so be it.  However personal preference side, that still doesn't make them meaningful content.  Unless of course you were creating a list of punctuation marks.   Otherwise a list of pages on a site (as in the navigation example) is pointless to include some random punctuation marks.  It fails both meaningful content and content organization (the whole point of semantic markup). 

Look at it this way, a list is simple a hiearcal group of related elements. How is a page related to a colon?  Which makes more sense:
Home, About, News and Contact.
or
Home, :, About, :, News,: and Contact.

This example doesn't work, because he's not using commas. Also, he's making a link menu, not writing a business report or an essay. The colons aren't grammatical items.

Scott wrote:

Remove the whole concept from html and web presentation.  How would write it on paper, what would be the grammatically proper way?  If you think of it in those terms, it should be a pretty simple concept to grasp.

This doesn't work either, anymore than it would work when using it to judge magazine layout, for the same reason your previous above example doesn't work. When graphic design is involved, typography comes into play. In typography, type isn't necessarily grammatical -this isn't 1997.
Again, he's making a link menu, not writing a business report or an essay -The colons aren't grammatical items.

Scott wrote:

Sorry, "mythical" is the term I meant to use. People usually only speak of grey areas when they don't understand the concepts at work.

Your argument here is more ego than reality, and you lose my attention, along with any chance of convincing me you're right about any of it, even if you are (which you're not). Especially in an industry where there are multiple ways of doing most things, and most of those ways aren't necessarily wrong.
Changing "mystical" to "mythical"? Why bother? Again, it's ego, personal preference, and personal interpretation or use of standards.

He's doing it the best way, as he wants the colons to inherit the same styles as the other list items, because, in the end, he's writing less code and taking less time (best practices) by taking advantage of inheritance without sacrificing usability. If you turn off his styles, the colons aren't going to inhibit the reader's ability to read his page, nor will they break his links or prevent the reader's ability to select them.

Last edited by Antonio (2007-12-23 9:18 pm)