26 replies [Last post]
johnnywalker
johnnywalker's picture
Offline
Regular
Last seen: 14 years 46 weeks ago
Joined: 2007-01-14
Posts: 18
Points: 0

Hello! Please someone help me! Smile I'm so fed up. I've got books, searched articles, tried to find CSS sites that have done what I'm trying to achieve, and after an entire day I'm completely fed up.

I'm sure the problem I'm having trying to create a three column layout without tables is very easy to solve, but I'm unable to do it. Any help is GREATLY appreciated, thank you!

Firstly, this is what I'm aiming for:
http://www.thunderpeel2001.com/webtest2/aim.jpg

It's partially a pet project and partially an exercise in trying to improve my antiquated HTML and CSS skills. My aim is to hand code the entire site using strict XHTML (none of this transitional nonsense Smile) without tables, using the "correct" methods.

I've got fairly far, in terms of the structure, but I'm really stuck on the layout.
http://www.thunderpeel2001.com/webtest2/lastcrusade/header.html

As you can see, my navigation bar is "sagging". I can modify the code to fix this, but I'm not 100% sure what I'm supposed to be doing: The idea is that the left column (housing the navigation) would have a repeating background filling the space between the bottom of the navigation and the bottom of the page (this image: http://www.thunderpeel2001.com/webtest2/images/border_left.gif). This would hopefully be dynamic, obviously, so that no matter how much text was on a particular page, it would look nice and continuous. The same goes for the right.

No matter how much fiddling around with the code I do, I can't get this border image to go down to the bottom of the page, while still keeping my navigation images/buttons at the top of the left column. Also, my footer image doesn't seem to want to come out and play either! I'm left to trial and error, which isn't very productive after several hours!

I've begun to question if I should use absolute positioning (I know, I know - I've read posts here saying it's bad) for the left navigation buttons themselves, or whether I should just stack them in the HTML code, or use a list....... but I want to use CSS for laying things out, not HTML!

I've used AP for the layout in general because it's NOT designed to change with people's screen resolution (I think it's small enough for most). The only thing I've tried to do is add more image to the right, to prevent image-wrapping ugliness on higher resolutions.

Any advice is much appreciated... especially if you can follow what I'm talking about!

If what I've written doesn't make sense, please don't be afraid to ask a question!

Thanks a lot!
- Johnny Walker

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well start by putting in the

Well start by putting in the html end tag. Without that it's a miracle the page renders at all.

You've ended the body, but not the html element. In xhtml every element must be closed. Please use the validator before posting a question as the sticky message at the top of the forum asks.

CSS rules are specified as applying to valid html, xml, or xhtml. If you don't supply valid code you can't expect any given rule to work any particular way. If you are lucky you won't crash the browser.

Also your design process is backwards. You shouldn't be worried about a sexy layout until you have content, and content that is marked up with valid semantic html. As is you are just designing in a vacuum.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

johnnywalker
johnnywalker's picture
Offline
Regular
Last seen: 14 years 46 weeks ago
Joined: 2007-01-14
Posts: 18
Points: 0

Ed Seedhouse wrote:Well

Ed Seedhouse wrote:
Well start by putting in the html end tag. Without that it's a miracle the page renders at all.
...
CSS rules are specified as applying to valid html, xml, or xhtml. If you don't supply valid code you can't expect any given rule to work any particular way. If you are lucky you won't crash the browser.

I think that's over-stating it a little, don't you think? A missing , while horrendously poor coding, is not likely to end the world. The reason it's missing is because I intend to use SSIs when I get the structure sorted, but I haven't got that far. My bad, I should have checked my code before I posted. Sorry. (It's now fixed.)

Quote:
Please use the validator before posting a question as the sticky message at the top of the forum asks.

With the addition of the the code is now Valid XHTML Strict: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.thunderpeel2001.com%2Fwebtest2%2Flastcrusade%2Fheader.html

Quote:
Also your design process is backwards. You shouldn't be worried about a sexy layout until you have content, and content that is marked up with valid semantic html. As is you are just designing in a vacuum.

Who says I don't have content? I have stacks of it on my old website that I'm going to be importing into this new one... But even if I didn't, this would still be a valid exercise in learning how to write valid XHTML & CSS. (Also: In case you hadn't noticed, the "design" has been completed, it has yet to be "implemented", however.)

I am happy to hear that you consider my layout to be "sexy", though. Thanks!

Any ideas on how to solve my HTML problems?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Quote:Well start by putting

Quote:
Well start by putting in the html end tag. Without that it's a miracle the page renders at all.
Quote:
I think that's over-stating it a little, don't you think?

Well, as you are using a strict doctype to put browsers into standards mode, I think "miracle" isn't much too strong, if any.
Quote:
while horrendously poor coding, is not likely to end the world.

Now who is exaggerating? Smile I said "crash the browser", which doesn't hardly seem to be equivalent to ending the world.

Quote:
Who says I don't have content? I have stacks of it on my old website that I'm going to be importing into this new one

Well I think it's best to extract that content, and then code it up semantically, and then take a look at what you should do to make the content most accessible as well as good looking. So I still think you have your design process backwards, sorry.

Quote:
But even if I didn't, this would still be a valid exercise in learning how to write valid XHTML & CSS.

I don't think that's really much of a goal, myself. Shucks, even I can do that without much fuss. I'm more impressed with a meaningfully marked up page that is also valid.

I find that getting the markup meaningful is much the harder project, but rewards me by making the CSS design (and positioning if useful) much easier and less time consuming. But feel free to go your own way.

I love giving good advice because I know no one will follow it so then I get to say "told ya so".

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

johnnywalker wrote:Any ideas

johnnywalker wrote:
Any ideas on how to solve my HTML problems?

Sorry, I find your whole approach too complicated and confusing. You seem to be trying to do a reasonable straightforward two column layout, but all the graphics are there for what? I mean, 15 separate graphics just to do a header? All you really need is an h1 element and a background graphic.

Also you've got absolutely positioned elements all over the place. A sure-fire way to get into bad cross-browser problems. You can do that layout with a couple of divs and a single float, and no other positioning at all.

And I just noticed you are using graphics for text! Egads! That's an accessability no-no.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

johnnywalker
johnnywalker's picture
Offline
Regular
Last seen: 14 years 46 weeks ago
Joined: 2007-01-14
Posts: 18
Points: 0

Quote:Well I think it's best

Quote:
Well I think it's best to extract that content, and then code it up semantically, and then take a look at what you should do to make the content most accessible as well as good looking. So I still think you have your design process backwards, sorry.

Baffling. The only reason I can think for your comments is if, for some bizarre reason, you think that the "aim.jpg" is what I used to design the website. If that's the case then let me correct you: It's something I quickly threw together before I posted this message in order to show potential helpers where the majority of the text for the site would sit, hopefully paint a clearer picture for what I'm attempting, and nothing more. I wasn't expecting it to be critiqued.

This is the third time I have created a website for said content, and I'm completely aware of how it will look.

Quote:
I don't think that [learning to write Valid XHTML and CSS code is] really much of a goal, myself. Shucks, even I can do that without much fuss. I'm more impressed with a meaningfully marked up page that is also valid.

It may not be impressive to you but I imagine there was a time when you didn't know how to do it, either!

Perhaps it would help if I explained my self-imposed exercise: I designed how I wanted a website to look in Photoshop, like most graphic designers do, and then I set myself the challenge of not just turning it into HTML, but into Valid XHTML with CSS. In short: I don't want to be limited by my own (lack of) technical knowledge, but rather I'd like to be able to imagine what I want and make it happen.

This is the first time I've seriously attempted to do this in Valid XHTML with CSS. Please forgive my technical ignorance, but I'm trying to unlearn a million bad HTML habits I've taught myself over the years.

Quote:
Sorry, I find your whole approach too complicated and confusing. You seem to be trying to do a reasonable straightforward two column layout, but all the graphics are there for what? I mean, 15 separate graphics just to do a header? All you really need is an h1 element and a background graphic.

The 15 graphics used are for a reason: I didn't want the user to be able to click on an area that was not the "button". (I hate that.) But, the problem was, depending on which button was highlighted, the surrounding background "lighting" was changed, so the background variations needed to be separated from the button.

One way to do this would be to create three different 70KB graphics for the logo, a total of 210KB (and that's not even including the rest of the buttons), which would look uglier while it loaded and seems wasteful to me. The other way was to reduce the entire top navigation (not just the header), including all possible lighting variations, to a total of 100KB by breaking them into 15 very small files.

That seems more efficient to me and stopped the user from being able to click on the area surrounding the button.

Quote:
You can do that layout with a couple of divs and a single float, and no other positioning at all.

Without using tables? Brilliant, sounds easy. Please tell me how.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Quote:Baffling. Firstly, as

Quote:
Baffling. Firstly, as I've already explained, this is partially an exercise in self-teaching myself to code XHTML and CSS "properly".

Well, this is the twenty first century, doing it "properly" means coding your html/xhml semantically. That just means using html elements that reflect the meaning of the text. So we surround paragraphs with P tags. Headings we use H1 to H6 tabs depending on the heading level. We have one H1 to a page, the top level header or page title. We put navigation links into a list, usually a UL element, because that's what navigation is - a list of links. And so on. for each chunk of meaning in our content we use an appropriate tag that reflects that meaning.

DIVs we use after we've done all that to group elements for special purposes, such as positioning.

We use the natural flow of html elements to position stuff as much as possible.

We make the site usable even if the browser doesn't know about CSS. Turn off images and CSS and take a look at what you have there now. What's left? Not much, I'd bet. Don't forget people will be using your page who won't ever see it, or will use PDFs or even Cell phones to look at it.

In short we separate concerns. HTML/xhtml are for semantic markup, to convey the meaning of the content.

CSS is for styling and layout, including positioning.

There's lots of good articles right here on this site that show you how to do this. Have a look around.

I'll attempt to deal with your other question in the next post.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Quote:You can do that layout

Quote:
You can do that layout with a couple of divs and a single float, and no other positioning at all.
Quote:
Without using tables? Brilliant, sounds easy. Please tell me how.

First of all, it is already well documented on this site. Look around - especially the "How To" section.

Say you want a header, two columns, a footer. The left (or right) column is for navigation links. Pretty standard setup.

We use an H1 element for the header. If you want a fancy graphic use CSS to put it in the background. H1 is a block element so it occupies the top of your page. It improves your seach engine ranking too, for free.

Navigation comes next. A UL element with anchors for the navigation placed in each LI element therein. Give it a class or ID for styling hooks. Now your content. A bunch of paragraphs, headers, and so on, surrounded by a single DIV with a class or ID of, say "content". Then an H2 element for the footer. That's it.

Float the UL element left, or right for navigation on the left. That's all the positioning you do.

Oh, and give the UL a width. If you want a column then you adjust the margin of your content div to give it enough room to float on the left or the right, whichever you want. Give the body element a background image or color. Make the navigation UL and the content DIV transparent.

That's basically it. Any other "positioning" you do by adjusting margins.

If you want a tabbed menu you have to do a little more fancy stuff with CSS, but you can use the exact same markup for it.

If you want to see this effect in action take a look at this. Take a look particularly at the markup and how straightforward it is. Also notice what happens when you resize the fonts in Firefox. And what happens when you resize the window. Take a look at it without CSS, too. Not very pretty, but quite useable still. WARNING: contains dangerous left wing content. Be prepared.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Yansky
Yansky's picture
Offline
newbie
Last seen: 14 years 15 weeks ago
Timezone: GMT+10
Joined: 2006-08-14
Posts: 9
Points: 0

johnnywalker, I did a quick

johnnywalker, I did a quick mock up of how I would approach coding your design. It's very rough but hopefully it'll help you. Smile

http://34r34r.dreamhosters.com/indy.html

johnnywalker
johnnywalker's picture
Offline
Regular
Last seen: 14 years 46 weeks ago
Joined: 2007-01-14
Posts: 18
Points: 0

Quote:Say you want a header,

Quote:
Say you want a header, two columns, a footer. The left (or right) column is for navigation links. Pretty standard setup.

We use an H1 element for the header.

What on earth are you dribbling about?? The H1 tag is used to semantically mark-up text, it is not used by CSS for defining the header of a single page or document. (Do you think H6 is used for footers??) The H1 block element is used for HEADINGS not HEADERS.

I've looked at the site you linked to, and it has given me some ideas. The use of UL and LI for one, but the CSS required is much more complicated.

This is CSS used just for the nav bars:
ul#nav
{
clear: left;
width: 99%;
margin: 0;
list-style-type: none;
padding: 5px 0 0 1%;
background: #669 none;
overflow:hidden;
}
ul#nav li
{
float: left;
margin: 0 5px;
font-size: 80%;
line-height: 1.0;
padding: 0;

}
ul#nav li a
{
display: block;
margin: 0; padding: 5px 10px;
color: #000; background: #bcbcbf none;
text-decoration: none;
border-left: 2px outset #bcbcbf;
border-right:2px outset #bcbcbf;
border-top: 2px outset #bcbcbf;
}
ul#nav li a:hover
{
background: #cccccf none; color: #000;
}
ul#nav li.current
{
margin: 0; padding: 5px 10px;
color: #8B4513; background: #f3f3ff none;
text-decoration: none;
border-left: 2px outset #f3f3ff;
border-right: 2px outset #f3f3ff;
border-top: 2px outset #f3f3ff;
}
div#content
{ margin: 1em 1em 1em 11em;
}
ul#sidebar
{
float: left;
width: 8em;
font-size: 90%;
list-style-type:none;
margin: 3em 0 0 0.5em; padding: 0 1em 1em 1em;
color: #000;
background: #FAFAE2 none;
border: 3px solid #999;
-moz-border-radius: 20px;
}
ul#sidebar h3, ul.links h3
{
margin: 0;
padding: 0;
color:#669;
background: inherit;
border-bottom: 2px dotted #666;
}
ul#sidebar a
{ color: #8B4513; text-decoration: none;}
ul#sidebar a:hover
{text-decoration: underline;}

But I will go back to the drawing board and see where I end up.

Thanks for the help.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 days 23 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

johnnywalker wrote:Quote:Say

johnnywalker wrote:
Quote:
Say you want a header, two columns, a footer. The left (or right) column is for navigation links. Pretty standard setup.

We use an H1 element for the header.

What on earth are you dribbling about?? The H1 tag is used to semantically mark-up text, it is not used by CSS for defining the header of a single page or document. (Do you think H6 is used for footers??) The H1 block element is used for HEADINGS not HEADERS

No, Ed is quite right - you should use a h1 element for your main site title/header element.

He doesn't mean as in something like:

Site Title

etc

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

johnnywalker wrote:Quote:Say

johnnywalker wrote:
Quote:
Say you want a header, two columns, a footer. The left (or right) column is for navigation links. Pretty standard setup.

We use an H1 element for the header.

What on earth are you dribbling about?? The H1 tag is used to semantically mark-up text, it is not used by CSS for defining the header of a single page or document. (

What are you thinking about? Semantically your page header is a heading, and the main heading on the page at that. So it's semantically correct to code it as H1. And as a bonus it helps you with your search engine optimization if it's meaningful. If you must have it all in graphics, you still put the text in there, use the graphic as a background, and use margins to move the text off the page. So a CSS browser will see your nice graphic but one without CSS will still at least see a meaningful header.

What you use for the footer would depend on how you've used headers on the rest of the page. That might be any level but it's likely to be another second level heading so I suggested an H2 element.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

johnnywalker
johnnywalker's picture
Offline
Regular
Last seen: 14 years 46 weeks ago
Joined: 2007-01-14
Posts: 18
Points: 0

Ok. Now I'm more baffled

Ok. Now I'm more baffled than ever. This forum is called "CSS Layouts", not "Semantically Marking Up Text". My aim is quite clearly laid out and explained at the top of this page. How exactly is using a H1 element for my website's title going to help with that?

You say I "should" use the H1 element for my site's title. This is all fine and dandy and makes sense to me. Indeed, I will remember it when I think about designing my next site, but it's not going to help with my current problem, is it?

In fact, using the H1 element to display the site's name is not used on this site (www.csscreator.com), either. So why are you now *both* telling me that I "should" use the H1 element for my site's title? Is this just a bit of HTML theory being thrown in as an aside?

Is it getting me closer to my aim?

*sob!*

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 days 23 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

johnnywalker wrote:So why

johnnywalker wrote:
So why are you now *both* telling me that I "should" use the H1 element for my site's title? Is this just a bit of HTML theory being thrown in as an aside?

Pretty much, yes Smile sorry, we occasionally have a tendency to wander off-topic with theory like this, to help people in the long run.

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well the point is that CSS

Well the point is that CSS is not really separable from html/xhtml. They work together and if your markup is bad CSS won't work correctly.

That's why this site asks to see both your html and your CSS. Much if not most of the time what people think must be errors in their CSS is actually a problem with their markup, because they don't understand the idea of separation of concerns. So we need to see the markup to help.

The way around that dilemma is just what I'm advocating, namely semantic markup. Do that first, get it valid, and then doing your CSS becomes ever so much easier. CSS is a set of rules for style that is intended to be applied to valid markup. If your markup isn't valid then the CSS rules don't apply and the result is a toss of the dice.

Browser designers have developed layout engines that are very forgiving of bad markup, it is true. I don't happen to think that's a good thing because it lets people get away with a wrong approach but only up to a point, and then after that point they are stymied. They have to tear down and start over. This encouragement of bad practices leads to all the nonsense that is posted on the web these days and is holding the development of the web in a time warp of outdated pages that, nevertheless, browser developers feel the must support. What a pity.

But you don't have to fall into that trap. You can write code that works, is easy to understand, and most importantly is future proof. And it can look great, too.

End of rant, for now.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

johnnywalker
johnnywalker's picture
Offline
Regular
Last seen: 14 years 46 weeks ago
Joined: 2007-01-14
Posts: 18
Points: 0

Ed Seedhouse wrote:What are

Ed Seedhouse wrote:
What are you thinking about? Semantically your page header is a heading, and the main heading on the page at that. So it's semantically correct to code it as H1. And as a bonus it helps you with your search engine optimization if it's meaningful. If you must have it all in graphics, you still put the text in there, use the graphic as a background, and use margins to move the text off the page. So a CSS browser will see your nice graphic but one without CSS will still at least see a meaningful header.

I appreciate your more detailed explanation. If you cannot see the graphics, then you can find an 80-character-width, plain text, version on my site and, indeed, on GameFAQS.com. I'm only interested in trying to fix the broken layout, right now. Thanks.

johnnywalker
johnnywalker's picture
Offline
Regular
Last seen: 14 years 46 weeks ago
Joined: 2007-01-14
Posts: 18
Points: 0

Ed Seedhouse wrote:Well the

Ed Seedhouse wrote:
Well the point is that CSS is not really separable from html/xhtml. They work together and if your markup is bad CSS won't work correctly.

That's why this site asks to see both your html and your CSS. Much if not most of the time what people think must be errors in their CSS is actually a problem with their markup, because they don't understand the idea of separation of concerns. So we need to see the markup to help.

The way around that dilemma is just what I'm advocating, namely semantic markup. Do that first, get it valid, and then doing your CSS becomes ever so much easier. CSS is a set of rules for style that is intended to be applied to valid markup. If your markup isn't valid then the CSS rules don't apply and the result is a toss of the dice.

I think I finally understand what you're talking about. You want me to finish all of my HTML before I move on to CSS, yes? Well, Ed. All I can say is that my HTML *IS* completely valid at the moment, and aside from some basic text that is going to be inserted, it's done.... aside from the problems I'm having....

Also, I think you should try harder to make yourself a little clearer. You have intermittently used different words for the same thing. For example, my website is *designed*. It's a very nice design. I like it a lot. I want to make it *real*. I want to implement my design.

As a professional graphic designer, and as someone who is simply looking for guidance and who feels that they've done everything "right" so far, I take exception to being told my design process is "backwards". Firstly; The DESIGN is done. It is finished. It has been... processed! The next step is making the design usable and web-standards compliant.

This is not "backwards".

Secondly; my HTML (or as you call it, my "markup") is completely complete and totally valid. So could you perhaps explain where my understanding of CSS layout has failed.

You've already explained that you don't consider it any great challenge and that you're not impressed with my attempts at learning, but you also seem to have spent an awful lot of time posting messages in this thread, which I can only assume, unless it's some sort of sadistic bent, you're actually trying to help me, which I appreciate.

Perhaps you could explain to me something practical and useful, like why using 'absolutely positioned' elements in a site with is not designed to be flexible in any way, would be a problem.

Quote:
Browser designers have developed layout engines that are very forgiving of bad markup, it is true. I don't happen to think that's a good thing because it lets people get away with a wrong approach but only up to a point, and then after that point they are stymied. They have to tear down and start over. This encouragement of bad practices leads to all the nonsense that is posted on the web these days and is holding the development of the web in a time warp of outdated pages that, nevertheless, browser developers feel the must support. What a pity.

I concur. Did I mention my page is Valid XHTML?

Quote:
But you don't have to fall into that trap. You can write code that works, is easy to understand, and most importantly is future proof. And it can look great, too.

Yay! ... How?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

johnnywalker wrote:Ed

johnnywalker wrote:
Ed Seedhouse wrote:

I think I finally understand what you're talking about. You want me to finish all of my HTML before I move on to CSS, yes?[

No.

I'm suggesting that you finish your content before you start styling it. My viewpoint is that content is king. It's meaningless to design a layout regardless of the content.

Quote:

As a professional graphic designer

That explains a lot, I think. Professional Graphics Designers (TM) can learn to do good website design, but they start with a major handicap, which is all that knowledge about graphic design for printed media. I recommend, for a start, forgetting temporarily all you know about graphic design as long as you are working on a web site. The Web is not paper. The design principals that work on paper do not always work on the web. Using design principals that work for paper just gets you in trouble on the web. Different mediums demand different methods.

It's not that the principals of good design disappear, it's just that they must be implemented in a different medium with different limitations. Sucky resolution, for one. Interactivity for another. Extreme flexibility for a third.

Quote:
Firstly; The DESIGN is done. It is finished. It has been... processed!

Too bad. You are very likely destined for a lousy web page then. You are designing a bed of Procrustes and forcing your content in regardless of what it needs.

Quote:
This is not "backwards".

You are entitled to your opinion. You are also entitled to design a bad web page. No skin off my back. And I could be wrong. I happen to think that, in this matter, you are the one mistaken. But that's just my opinion.

Quote:
Secondly; my HTML (or as you call it, my "markup") is completely complete and totally valid.

But it's not, um, actually marking up anything, is it?

Quote:
You've already explained that you don't consider it any great challenge and that you're not impressed with my attempts at learning

Of course I never said anything like that, nor meant it. Actually I rather like it when people don't just regard what I say as the Word of God and instead argue. It means they are actually thinking. One reason why I'm taking all that time to respond to you.

Quote:
but you also seem to have spent an awful lot of time posting messages in this thread

Indeed a grevous fault!

Quote:
Quote:
Browser designers have developed layout engines that are very forgiving of bad markup, it is true. I don't happen to think that's a good thing because it lets people get away with a wrong approach but only up to a point, and then after that point they are stymied. They have to tear down and start over. This encouragement of bad practices leads to all the nonsense that is posted on the web these days and is holding the development of the web in a time warp of outdated pages that, nevertheless, browser developers feel the must support. What a pity.

I concur. Did I mention my page is Valid XHTML?

Did I mention that you are completely missing my whole point? Indeed valid markup is laudable and necessary, and my first piece of advice was about the fact that your markup as originally posted was invalid. But you don't get medals for good code and it doesn't, by itself, make a good sites. There are lots of terrible sites with totally valid code out there.

Quote:
But you don't have to fall into that trap. You can write code that works, is easy to understand, and most importantly is future proof. And it can look great, too.

Yay! ... How?

I've been explaining that, but you haven't understood what I've said. Probably because I'm not saying it well enough.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

johnnywalker
johnnywalker's picture
Offline
Regular
Last seen: 14 years 46 weeks ago
Joined: 2007-01-14
Posts: 18
Points: 0

Quote:Too bad. You are very

Quote:
Too bad. You are very likely destined for a lousy web page then. You are designing a bed of Procrustes and forcing your content in regardless of what it needs.

I have designed my website explicitly with the content in mind. I know exactly what it needs and how it needs to look. This is precisely why I've decided to re-design the website. I did indeed, in my second attempt at designing the site, placed the content second and completely regretted it. It may look semi-decent (well it did to me at the time, it looks pretty nasty now) but the content suffered terribly. It was cramped, ugly and hard to read. It was completely pointless having a site with which looked pretty, but made it hard to enjoy the very thing it was there to do: Provide you with decent content. I've spent years thinking about what it needed, on and off in my spare time, and decided on a minimalist approach when I finally got around to re-designing it.

One last desperate time: I HAVE DESIGNED THE SITE WITH THE CONTENT EXPLICITLY IN MIND. JUST BECAUSE I HAVEN'T SHOWN IT TO YOU DOESN'T MEAN IT ISN'T THERE.

You are condemning a man and his website before you've even seen the final product. Why not assume the best, instead of the worst? (and stop patronizing me and what you imagine my skills to be!)

I have fiddled further with the code, attempting to include the examples from the site you linked to. No image in a UL / LI tag could be made to appear without positioning information, making it rather redundant placing it in an ordered list (to my mind).

It may be back to the drawing board time, but I've managed to make it look better (and YES, it's been validated), but there's still fundamental problems.

http://www.thunderpeel2001.com/webtest2/lastcrusade/header.html

Comments...... (about the LAYOUT?)

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

johnnywalker

johnnywalker wrote:
Comments...... (about the LAYOUT?)

I haven't bothered to read most of thread (just skimmed it) cos it seems to be too much arguing and not enough getting to the actual point, so apologies if I've missed something, but what are you actually asking for at this point (I mean with your latest comment, disregarding everything that's come before now)?
Are you after comments on the current state of the page as in the link above? If so, then I'd say you've got far too many images and not enough elements that convey the proper meaning about the content you're presenting.

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

Triumph (not verified)
Anonymous's picture
Guru

Tyssen wrote:... it seems to

Tyssen wrote:
... it seems to be too much arguing and not enough getting to the actual point ...

Yes, this is true. I've had enough of this particular pissing match.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Triumph wrote:Tyssen

Triumph wrote:
Tyssen wrote:
... it seems to be too much arguing and not enough getting to the actual point ...

Yes, this is true. I've had enough of this particular pissing match.

Fair enough - I'll bow out then.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Triumph (not verified)
Anonymous's picture
Guru

Ed Seedhouse wrote:Triumph

Ed Seedhouse wrote:
Triumph wrote:
Tyssen wrote:
... it seems to be too much arguing and not enough getting to the actual point ...
Yes, this is true. I've had enough of this particular pissing match.
Fair enough - I'll bow out then.

It's not just you. Really.

johnnywalker
johnnywalker's picture
Offline
Regular
Last seen: 14 years 46 weeks ago
Joined: 2007-01-14
Posts: 18
Points: 0

Quote:Fair enough - I'll bow

Quote:
Fair enough - I'll bow out then.

Thanks Ed, I appreciate your time, but I think we've not really covered anything useful.

Tyssen: Thanks for the offer! I really appreciate it!

Right now, at this moment in time, the only thing that isn't working is my footer.

http://www.thunderpeel2001.com/webtest2/lastcrusade/header.html

Even though it's now "fixed" (compared to my initial problem - I've just been hacking away at it in the meantime), some doubt has been planted into my head by Ed, and whereas I once thought I knew what I was doing, I'm now not so sure.

Are there any glaringly bad errors or methods I've used? Any practical advice would be greatly appreciated, re: the footer, or general layout.

I've used absolute positioning throughout, but they're all reference to TOP and LEFT, so I'm assuming this should be ok?

Thanks a lot for your offer!

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 13 years 11 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

Your design is pretty. Check

Your design is pretty. Check out CSS Zen Garden to get some ideas about how to incorporate images into your CSS layout.

As for your footer, the reason it doesn't stick to the bottom is because it has no idea where "bottom" is. When you use absolute positioning, elements doesn't take up any space. So there is no bottom.

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

johnnywalker wrote:Are there

johnnywalker wrote:
Are there any glaringly bad errors or methods I've used?

As mentioned before, your navigation is made up entirely of images, rather than elements which convey some type of meaning about the content.

Your top and side navigation really should be presented with lists. After you've got your head around that, you might want to look at ways to combine image replacement with lists. I'd also recommend reading why the use of so much absolute positioning is probably not a good idea.

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

johnnywalker
johnnywalker's picture
Offline
Regular
Last seen: 14 years 46 weeks ago
Joined: 2007-01-14
Posts: 18
Points: 0

Tyssen, thanks for the

Tyssen, thanks for the information. I've been reading through some of the links you sent. I get what you mean with regards to putting images into a list with text too (even though you only see the graphics on a modern browser). I looked at the coding of your site too, and I see this very thing in action, which is cool.

I guess I still need to get my head around the absolute positioning problem. Although I don't think it's going to cause any text element/overlapping in my case, I think it would be better if I understood how absolute, static and relative could alter my design! Especially with regards to the footer problem. I'm still trying to hack away at the site in my spare time, but I don't have much of it... but it's beginning to get clearer to me. Thanks.

vinhboy: Thanks for your kind comments. I do indeed need to sort myself out with regards to understanding the absolute positioning thing, although your comments have helped. My only enemy is time at the moment... finding enough to sit down and properly get my head around it!

Thanks to everyone on this forum for their generous responses; most forums ignore newbs like me! It's nice to see a technical site like this that has people who are really willing to help!