Site design

[Ishmayl-Retired]

Thanks for the "ends' meet" ;)  That typo has already been pointed out to me, I just forgot to change it.  I'll probably be sticking with the current banner, since it fits the shape of the site better.

[Ishmayl-Retired]

A request for advice from some of you who have been doing more of this than I.  How can I make the background color (the brown) behind the main content section, and behind the navigation bar always stretch all the way to the bottom?  I've tested out about 20 different things, and nothing seems to work.  LC, how did you get the green in your menu bar to stretch all the way down?

[Lmns Crn]

A request for advice from some of you who have been doing more of this than I.  How can I make the background color (the brown) behind the main content section, and behind the navigation bar always stretch all the way to the bottom?  I've tested out about 20 different things, and nothing seems to work.  LC, how did you get the green in your menu bar to stretch all the way down?

I don't actually know. (I assume you mean the dark green on the right-hand side? If you load any of my pages with a lot of content, such as anything in the "people" section, you'll see that the dark green bar doesn't stretch all the way down. Fixing that is on my list of things to do, as well.)

In general, Ishy, I like your layout-- particularly the background images in the "Updates" and "Welcome to Shadowfell" panels you have. (And while we're at it, your heiroglyphic band right under the main title banner, too!) What I do not understand is what all the different panels are for. You seem to have two panels designed to hold large amounts of text. When I view content on the site, which panel will it appear in, and what will the other panel be doing?

(The only working link I could find at the moment is "Shadow Who?" It seems you are using the brown panel to deliver author's notes and other asides, while the black panel will hold more direct content about the world? I'm concerned that it might be a little awkward to read that way. It might be more intuitive to designate a {div} tag style to set your asides apart?)

I've been told, and I believe it holds up, that dark text on a light background is more easily readable and less eye-fatiguing than the reverse, on small screens like computer monitors. (On overhead projections, light text on dark backgrounds is preferable.) Might be something potentially useful to keep in mind, though the intended tone of your setting and site should also be a concern as well, of course.

Honestly, the biggest thing that stands out in your design is the brown color you're using as a menu/content background. I don't know why, but it seems to really jump out at me in a sort of strong and negative way, especially in contrast to the subtle watermark pictures in darker colors you're using for backgrounds elsewhere. If you're not going to use similar picture backgrounds in the brown panels, might you consider a different, more muted color than that gravylicious tan?

[Matt Larkin (author)]

In theory you can repeat the bar if it is background for the DIV as such (in the CSS)

Code Select Expand


{background-image: URL;
background-repeat: repeat-y;
}


As in repeat on the y-axis.  But I've never tried this.

Also, as Luminous said, I stopped using a black background because the guy helping me design the basic layout said it was considered unprofessional.  You might consider something a little lighter.

I'll wait to see it implemented before I comment on the unusual breakdown of text boxes, but I can see that being a little odd like he said.  On the other hand, without seeing text in there, it's hard to say for sure.

Edit:

A cleaned up version of the text:

Code Select Expand


{
background: url("i/bar-1.gif") repeat-y fixed top left;
}


Either in body to be the whole page, or in a DIV to apply it to that DIV.

[Lmns Crn]

Also, as Luminous said, I stopped using a black background because the guy helping me design the basic layout said it was considered unprofessional.  You might consider something a little lighter.

I'd like to run this by you, because I've been doing this for years and can't remember where I heard it, or why it was important.

Do you avoid #000000 and #ffffff? I remember reading once that using pure black or pure white in a webpage is bad mojo, and that near-black and near-white shades of other colors are greatly preferred. Did I make that up, or is there weight behind it?

[Matt Larkin (author)]

I've never heard that, but it's my friend that's the professional designer.  I've only dabbled with it.

I use #ffffff for the background of the content area, but there is a gradient above it, making it appear like the background fades from grey to white.

I use black text, but in many areas he choose a color scheme based on the banner Ishy designed for me.  So you see some dark-green colors.

For example, the background color behind the menu is not black, it's #546454

[Ishmayl-Retired]

That's not the first time I've heard the same info about dark backgrounds and light text.  I may be doing a re-working, because while I don't necessarily agree, I can see where other people are coming from.

In answer to your questions about the various boxes, my original plan was to use the dark (black) top box to be an introduction for each section; something like a blurb.  Then, the lower section (where the brown starts), would be all the major content.  Also, the smaller box to the left (where I have Updates listed on the main page) would be used for Updates (but only on the main page), and on all other pages, would be for in-page links.  For instance, the navigation bar to the right would say "Races" (or whatever), and when you actually go to the "races" page, that box to the left would list all the races.

[Ishmayl-Retired]

Okay, I've done a bit of a revamp (a bit?) for my new site.  It's still far from complete, but I wanted you guys (those of you who care about this sort of thing) to see how it's progressing, and maybe offer criticisms, advice, etc.  As a request, I'm trying to figure out a good way to incorporate sub-menus on my site.  For instance, on the "Races" page, I will want to be able to go to different races pretty easily.  I'm thinking of in-page links, but where should I put those links?

Cheers!

New Shadowfell Page (WIP)

By the way, the page does not look very good in IE, so if that's the only browser you use, you won't really be able to tell what the site looks like.  And I most likely won't be working the css to look nice in multiple browsers; I've given up trying to make things work properly in IE.

[Matt Larkin (author)]

Visually, it is beautiful.  I really like both the color scheme and the background graphic.  Where to place sublinks is something I've struggled with, too.  Lately, I've been trying to figure out how to make collapsible menus, but I'm not sure it would work as well in your particular layout.

Making stuff work right in IE is tough.  But as a page brainface just pointed me to offhandly mentioned, 102% of internet users use it ;) so I have to at least try.

[Ishmayl-Retired]

You're absolutely right about IE, but like I said above, I've just lost interest in putting a ton of effort into making something look good on a crappy browser; to me, it's like trying to paint a masterpiece on the side of a cardboard box.  All the ridges are going to get in the way, it's probably the wrong shape, it's been rained on so it's soggy, and most likely, there's a bunch of markings and paintings on it from previous efforts to make it look nicer than it can be.  Once I'm done completely, I'll probably put a little bit of effort into IE, but it'll only be enough to make the site look "passable."

[Matt Larkin (author)]

Ishy, my site is now using the layered menu system if you want to check it out.  It's not perfect, but I'm relatively pleased.

Again, credit to brainface for pointing my in the right direction.

[Lmns Crn]

I did a little work with CSS and graphics today, while I should have been spending time on my paper!

The LINK.

Things that have changed:
1. The whole shebang is now centered. (Finally figured out how to do that! :yumm: )
2. Fixed an issue with the size of color bars. (Now the dark green bar under the menu always stretches to the bottom of the page, even when there is a lot of text.)
3. Fixed a weird problem with a lot of DIV placement errors when you click "Places" in the menu. (Still don't know what caused it, or how I fixed it.)
4. Added a horizontal graphic "rune bar" between the title and content/menu sections of the page.

Things I still need to do:
1. Fix the "rune bar" so it's less ugly, and less full of gaps.
2. Replace placeholder title banner and "dis-fal runes" graphics with permanent, nice-looking ones, and add more graphics to the lower right hand circulation.
3. Add placeholder pages for blank sections in the second half of the menu ("progress" through "codex").
4. Add content to existing pages, etc.

That's it for now, though. I'm really happy with the progress made on layout today.

[SDragon]

OK, I'm working on the Xiluh site, but only knowing HTML (and not too impressively well, to boot), I think I'm going to need some basic CSS lessons and/or tutorials... This is all being done in notepad >.<

As LC mentioned earlier, CSS lets you "predefine chunks of [style] that you can later call forth at will"? Does this mean you only need to make the background and such once, and it applies to every page? If so, how does the code manage to do that between pages? Like I said, this is something I'll need some tutorials and/or lessons for...

[brainface]

In the css file, you attach styles to tags, classes, or ids. (or some combination thereof)
The stylesheet:

Code Select Expand


p { color:red;}
.classOfNote {color:blue;}
#idOfIntro {color:green;}


Ignore the '\n's. they're to make the code tag not act stupid

Code Select Expand

This will be red, as will all paragraphs

\n

This will be blue

\n

As will this

\n

This will be green. id is a "stronger" selector than tags

You associate a stylesheet with an html page somewhere in the header.

Code Select Expand

You can also include css styles in each html page, but that defeats some of the purpose.


Tutorials! http://htmldog.com/guides/
Html tag reference! http://htmldog.com/reference/htmltags/
css rule reference! http://htmldog.com/reference/cssproperties/

[Lmns Crn]

some[/url] CSS resources, which were quite helpful.

)I never forget a face, but in your case, I'll be glad to make an exception!(/div) (div class=qattrib) -Groucho Marx(/div)

.quote {width: 510px; margin-left: 50px; margin-right: 50px; padding-left: 10px; font-size: 110%; font-style: italic; color: #225500; }
.qattrib {width: 510px; margin-top: 5px; margin-left: 50px; margin-right: 50px; padding-right: 10px; text-align: right; background: #88bb88;}

If so, how does the code manage to do that between pages? [/quote]Like I said, this is something I'll need some tutorials and/or lessons for...[/quote]The three tutorials I linked above are things I found just by typing "CSS tutorial" into Google. The internet is swarming with them, if you need to find additional ones.

I'm going to browse Brainface's HTML Dog site when I get a spare moment, to see if I can glean any useful information from it. I managed to make a workable .css file, but I did it basically by copying and altering tutorials and examples, without much true, deep comprehension.