posted
Inspired by the link to the csszengarden the other day, I went and redesigned our wedding website. I'd like to know how it works on y'all's browsers, since this is going to reach a wider audience than my usual "couple of nerd friends using Safari" bunch.
posted
The wedding info page has no actual calendar dates of when this is -- is that deliberate?
What is with the force-justify on the last line of paragraphs on the guest info page?
Other than that -- this looks really great! Very impressive.
And personally -- the absolutely VERY best photo of Mark is that one with the frisbee on his head. No, I mean really! If you ignore the frisbee and just look at his profile/face it is a great shot of him. (I didn't have time to look through ALL the photos, though).
The justification is an IE thing. That text is all just filler until I write my own, at which point I guess I'll have to add extra spaces to get IE to handle it.
The calendar date.... Yeah, I think I'd rather leave that on the invitations. All you stalkers out there can just hang out at the park every Saturday until then.
I love that shot of Mark, too, but my favorite of him is the one where he's wearing the bucket hat. I'm not sure why, since he looks kind of pissed in both. *shrug*
Thanks for the help!
Posts: 2220 | Registered: Jun 1999
| IP: Logged |
posted
Looks great. Me and my fiance will be doing a wedding site as well (mattandmollee.com), but I haven't gotten around to it yet. We were thinking about starting a wedding site-specific design company, since there seems to be such a high demand, and you can charge an obscene amount of money for anything to do with a wedding (those of you who have been through the process know what I'm talking about ... $4,000 for a freaking dress?!)
Posts: 6 | Registered: Apr 2004
| IP: Logged |
posted
If you define the page [EDIT: as strict], make sure it validates as strict. You have a few issues. If these are IE hacks, well then, never mind, but maybe change the DTD line to xhtml-transitional.
Also, it seems to load kinda slow in firefox and IE here, I think it's your top border... Try and shrink the file sizes of your images at all costs.
posted
It appears that your biggest issue is that in strict xhtml (and xml in general) is that every tag needs to be closed. So your <br> tags need to have a </br>, or, more correctly, you ought to convert your <br> tags to <br /> (the /> closes empty tags).
Of course, <br> tags should be used sparingly, instead format your text paragraphs in <p> tags, and then use CSS. <br> is usually for image formatting, I think.
posted
Sigh.... I'm so lazy about standards. Usually I just go in and hack everything up until it displays properly, and then Mark goes in and cleans up the code so it validates. I guess I should suck it up and do it myself this time....
So, you say I could get around this by just redefining the language? Posts: 2220 | Registered: Jun 1999
| IP: Logged |
posted
I can sum up what you need to change to be strict:
code:
<br /> not <br>
<li>stuff</li> not <li>stuff
<div>stuff</div> not <div> stuff.
Basically, in XHTML (and the above apply in both strict and transitional) every tag must be closed, even singleton tags. A singleton tag is one like <br />, which doesn't enclose any content. To indicate a singleton tag, use the /> closing as indicated (for compatibility with older browsers, include a space before the /).
All non singleton tags must also be closed, as indicated (for every <li> there must be a </li>, et cetera).
I see you use the <h2><span>stuff</span></h2> construct a few times (with h1 and h3 and p as well). There is no point to that, just <h2>stuff</h2> is how it should be. Using span in such a situation is a non-operation, it does nothing.
Don't use so many <br /><br />'s. There is a <p> tag for a reason, to represent paragraphs. Each paragraph should be enclosed like so: <p>paragraph</p>. If you want to alter the spacing between paragraphs, use CSS.
The & nbsp; (without the space) to fill out each paragraph are bad. You'll find that using p tags to enclose your paragraphs will make a lot of spacing problems much easier to manage.
The website looks great, many happy wishes to you both .
posted
No, merely by being more precise about what dialect you are using. You are currently saying you speak with a (superior) Boston accent, while really using, well, some other english dialect (all of which are naturally inferior). The simple fix is to simply admit that you are inferior
Specifically:
quote:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
should be changed to
quote:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
That may allow it to validate. However it may not, as the <br> thing is a pretty basic no-no
-Bok
EDIT: Nevermind, what fugu said. Silly smarter-than-me posionous fish...
Yay! Only the index page thus far, but now I've got the hang of it. I guess it's worthwhile to really learn what the heck my code is doing, and keep it a little cleaner. Thanks. Posts: 2220 | Registered: Jun 1999
| IP: Logged |
posted
See, with stuff like <br>, I have such a hard time accepting that it's bad when it works, and does exactly what I want it to do. I hate <p>, it's such a pain to deal with. Is there a reason that <br> is "bad", other than it being kind of old? I mean, if it works, it works, right?
Posts: 2220 | Registered: Jun 1999
| IP: Logged |
posted
Well, there is one caveat: even though the w3.org site is the keeper of the web standards, and their validator is the easiest/most comprehensive one I know, they admit that it isn't perfect. It can't validate some of the more esoteric requirements.
But congrats, your page is now as good as it gets
I like the whole closing tags thing, it appeals to my sense of symmetry. Yes, I'm a weirdo.
posted
I definitely understand closing tags, it was dumb of me not to check for that earlier. But don't take away my precious <br>! I loves it!
Posts: 2220 | Registered: Jun 1999
| IP: Logged |
posted
It's bad in a more general way, especially with CSS being awesome [EDIT: awesome?!?! I meant ascendant, I think]. By using <br> the way you do, you are making assumptions based on how it works now. You are coupling the format with the presentation. This makes stuff non-portable to newer standards. For instance, there are a plethora of cell phones with web access nowadays, with various screen sizes and picture quality. As a result, you may end up with weird behvior of your <br> tags on those systems.
It's better to use them in their proper places (www.w3schools.com is a great start, and the full and gory details are at the w3.org site), and explicitly control the presentation in CSS. Then you can go a step further and create multiple styles, which can be used depending on the client accessing a page (a web browser uses a.css, a cell phone uses b.css, etc.). FURTHER, you can do nifty things like use multiple parallel CSS defns to create colorblindness-friendly websites, or just blindness-friendly ones (my girlfriend's mom is legally blind, and she uses a talking translator for web pages, but many are too messed up to be translated well). Mozilla (Firefox as well??) has the ability, for instance, to allow the user to change the stylesheets on the fly in the browser from a dropdown menu.
posted
Sheesh, just when I thought I was getting the hang of CSS! I've got some reading to do, I suppose.
Posts: 2220 | Registered: Jun 1999
| IP: Logged |
Think of it as being used WITHIN a paragraph. To display poetry, for instance.
The big thing in XHTML is the two different types of blocks (which I forget the names of right now). <div> and <span> are an examply of the two types of blocks. <span>'s can be in a <div>, but <div>'s ought not be in <span>'s, generally speaking.
Block, versus inline elements, I believe is the terminology. Understand the difference, and which tags are which, and it becomes much easier.
posted
Imagine if you suddenly wanted to change the spacing between all those paragraphs. If you're using CSS and p tags, that's maybe a three or four character change (maybe a whole ten or twenty characters if you hadn't specified any spacing criteria before), and all in one place. If you're using <br />, suddenly you have to add new <br /> everywhere. But what if the size you want isn't a multiple of <br />'s default size? Then you're screwed if you're using them.
Or perhaps you want to move a particular paragraph a bit to one side (not too uncommon, actually)? If they're all in one p tag that's essentially impossible. If they're in separate p tags . . . <p class="moved">, p.moved { position: relative; left: -10px; }. (the first on the page, the second on the stylesheet). All done. Or maybe you want the first line of each paragraph to be in small caps? p:first-line { font-variant: small-caps;} in your stylesheet.
A <br /> is a semantic line break, not a semantic paragraph break (even when doubled up). Use it as a line break, not a paragraph break.
CSS is far and away superior to <br /> tags. It can do everything they do, and far, far more.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
Yes. The "root" block element is the div, with essentially no default styling beyond it being a block. The root inline element is the span, with no styling at all beyond what it is given through CSS.
Note, however, that just because one element is traditionally a block element, such as list, does not mean it is semantically a block level element. The default behavior of a list is to be a block, but one can make it inline (its relatively common, for instance for horizontal menus, since menus are semantically lists) without disrupting its semantics.
However, the nature of a div is to be a block, so it is semantically incorrect to make it inline, and the nature of span is to be inline, so it is semantically incorrect to make it a block.
posted
This is way beyond any sort of pragmatic value, but I thought of a better way to say what I said above.
Think of HTML and CSS in this way:
1) HTML: Your HTML files should not be thought of as something someone views in a web browser. Rather, one should think of your HTML as a file that defines and holds some data of yours in an agreed-upon logical format. HTML tags are merely logical separators/categories of the raw data in the page. Your HTML should only minimally anticipate the type of application that is going to access it.
2) CSS: Your CSS should be seen as the information needed to present your data defined in HTML to some client. This client is usually a web browser of some sort, but could be anything you can think of. CSS is a sort of translation for your HTML to be utilized by a client.
HTML = data CSS = look and feel
CSS is conceptually similar to themes for OSes or skins for various apps (winamp, trillian, etc)
-Bok
EDIT: Ugh, try using all the letters in a word, when typing that word.
Text, images, movies, and so on = content. HTML = semantically marked up content. CSS = definitions of visual appearance of semantic elements.
(edit: and there is a huge pragmatic value to this separation. When one has to maintain and alter a website, or even more importantly when a team of people have to maintain and alter a website, having these boundaries well defined makes it easy to maintain the look and feel for content updates (everyone just has to mark it up as the names of the elements suggest), and alter the look and feel for appearance updates (want all the paragraphs to have a different color text? want all the headings to be in small caps? all of this is easy), without either one messing with the other. Even on small websites it has a lot of value in preventing cruftiness and making it much easier to understand one's code when one looks at it after a period of inactivity).
Printer-friendly view of this topic
![[Wink]](wink.gif)
![[Big Grin]](biggrin.gif)
All you stalkers out there can just hang out at the park every Saturday until then. ![[Smile]](smile.gif)
![[Embarrassed]](redface.gif)
I've got some reading to do, I suppose.
