New Site - would be grateful for a couple of answers

[Gabrielle]

http://www.memoriesforyou.co.uk

I built it with HTML and CSS, learned from W3C schools and the Zen Garden and whatever else I've picked up over the years, and the dynamic codes come mainly from Dynamic Drive. I've had feedback on four specifics:

1. The title image on the first page seems stretched when viewed through some hi-res monitors.
-- I defined height and width in HTML and then specified: {width:90%;
margin-left:5%}

2. When you mouseover the email at bottom-left, or the RHS of the first page (the samples), the table changes shape - same width, but less height.
-- I've added height definitions, and the email-mouseover no longer changes the shape. The RHS still does, though - any answers?

3. Sample 'Words & Pictures' shows up fine on Win 98 (on NS7.1, IE 6, Opera 7), but on Mac OS9, IE6, the 'location' and 'readings' don't show the contents of the box - completely empty. Are there any other OS or browsers that have difficulty with that? (It's a washout with NS4.76, too, but should I be concerned about that?) Or should I use a sniffer and send it to a browser-friendly css?

4. Sample 'Traditional Site', which is just undynamic text & pics but positioned by CSS, has put extra blank lines in the middle of paragraphs (visible from Mac OS 9 and 10), and has written text into the middle of photographs. Again, what do I do?

Bit of a dissertation, rather than a brief enquiry, so thanks if you've got this far. I'd be really grateful for any other feedback or helpful suggestions - Thanks!

[ronaldb66]

Too much...

Okay, one at a time, I keep forgetting what I want to answer:[list=1][*]No wonder, if you specify it's width relative to it's container's width; try a reduced window and see it shrink to illegibility.
Best would be to use a fix width image aimed at a certain minimum window size; it's centered for larger widths anyway.[*]Didn't see it, although the font size of the e-mail address changes on mouseover. Perhaps you don't want to do that.
and, what's an "RHS"?!![*]Perhaps those browsers don't support fixed height p elements with scroll bars; use an iframe, or don't use scrolling at all: it's not like you're retrieving the content from a secondary document anyway. Oh, and it's "medieval", or mediaeval".[*]No clue, haven't got a Mac. Probably positioning issues, try and use "float" for those pictures.[/list=1]

[Gabrielle]

Thanks Ronald.

1.I'll try the fixed-width (although I just keep thinking of how I react to websites that have a horizontal scroll on them) but you're right, it's better to be able to see it clearly.

2.The font size does change on mouseover, so do the other links. I'll see how it goes without size-change and come back to you. RHS= right hand side .

3. Removing that scrollbar might fix the invisibility - I'll try that!

4. When you say 'try and use "float" for those pictures', do you mean css/text box {float: right}? I'll try that, and ask my mac-using friend to check it again.

Thanks for your help so far! Are there any other points you'd like to feed back to me?

[ronaldb66]

Re-replies

Gabrielle,[list=1][*]Agreed, but having the browser resize an image can lead to less-then-perfect quality anyway.
You could try a somewhat narrower (less spaced out) header graphic, giving you a bit more room for narrower windows, or implement part of the graphic as a background image, which won't cause the browser to show a nav bar, and just the site title grahic as a content image.[*]Ah. I didn't see anything strange going on at the right.[*]I don't know what your motivation was for having it in a scrollable box; if you want to keep that design idea, as mentioned, try an iframe; I would prefer however to simply include the text in the page. Somewhat longer pages aren't regarded as sinful anymore these days! [*]Yep! If you want to preserve the column feel on the text, add a right (or left) margin to make room for the image even if the text is higher.[/list=1]

[Gabrielle]

Ronald, if I went for a different title image (whether within the doc but narrower or as a background), am I right in thinking I can't centre it? What if I make a div and position it roughly centred, would that work??? And then I could put the title image as a bg to that.

<Aside> And is it so important to have a central title, anyway?)</Aside>

About the right hand side problem, it is a problem, even after I make the changes you suggested (about not having the links change size. I've removed all (text/css) references to {font-size:x%}, and uploaded. The blue table starts off at the height of about 9cm, and with the brief price text in the central column. When one of those links in the right column is touched with the mouseover, the middle column becomes 0.5cm wider and the table shrinks to half its original height. Any ideas? Or does that not manifest on your browser?

About the scrollable box/iframe - I was trying to avoid a longer page, but I guess it's not a problem with repeating backgrounds anyway - anything to avoid work!

And where are you suggesting I put the margins? Just onto the Traditional Site? How do I do that? CSS positioning, or HTML?

I'm really grateful for all your help so far, thank you.

[ronaldb66]

Graphics, floats, etc.

Gabrielle,

Whether you include your header graphic as background or as content, or both, doesn't matter; with CSS, everything can be centered one way or another.
For background images, it would be the background-attachment property, for content images, placing the image in a container with text-align: center will center the image inside the container. Either make it full width or center it using margin-left: auto and margin-right: auto.

And, you're right that a header doesn't have to be centered at all; left-aligned can work just as well. Simply look around what the headers on your favorite sites look like.

About your table: I didn't notice any widening, but its height does drop; I think that's mainly caused by the replaced content needing less room, but I can't really figure out why.
By the way: I strongly advice against using the layer and ilayer element; they're "old school" Netscape proprietary and no part of any recent standard. Exactly the same can be achieved using divs.

About the margin bit (and I was talking about the Traditional site):
when you float an image and have it followed by a block of text, the text will wrap around the image. If the text takes up more room vertically then the image is high, it will wrap under the image as well.
If you want to avoid that, and keep the text confined to a column next to the image, what you can do is give the block element that holds the text (p, div, whatever) a large enough margin on the side the image is supposed to be to clear the image completely.
The image will sit comfortably in the region the margin takes up, and because of the margin, the text will be forced down in a column style without wrapping under the image.

Hope I helped some, and keep 'em coming!

[Gabrielle]

Thanks!

I love all your responses. You're so patient with me! I'm going to try all your suggestions out - but first I have to go out myself!

Thanks again, I'll let you know how I get on!

[gsnedders]

Don't use <b> tags to make text bold, they are obslete.

[mindlessLemming]

Originally posted by Error 404
Don't use <b> tags to make text bold, they are obslete.

"Give a man a fish, and you will feed him once, teach him to fish and you will feed him for a lifetime"
Error 404: you just took a fish away from Gabrielle

What 404 is trying to say, is that you are entering a smarter way of coding sites... using tags that actually describe their content. Seems sensible, doesn't it? So where you may have used a <b> tag to make a header stand out, you would use a <h1-6> instead, as these describe their content correctly. If the <b> tags were mid-sentance, you would instead use <strong> tags, as these display the same as <b> on all browsers, but imply semantic meaning upon their content, that being strong emphasis.
"They both look the same though, so it can't matter that much..."
If you were visually handicapped and using a text-reader to surf the web you would notice the difference immediately, as the voice would place strong emphasis on the text between <strong> tags but pronounce text between <b> tags without change.

Andrew

[missing-score]

what you may like to do is go back to www.w3schools.com and look at the XHTML tutorials. You will learn that XHTML is very similar to HTML but like mindlessLemming said, is more accessable.

[Gabrielle]

So pleased to be the center of attention!

Thanks for all that help! It's true, I know I should be using strong tags (though I hadn't considered using H1 for the reason you suggested, mindlessLemming). I'll be going back to W3School soon, when I've done some more work on the site. And I really identify with mssing-score's sig! Keep all the encouragement coming!

[Gabrielle]

I've redone the front page in DIV/CSS positioning instead of tables, which looks better anyway. And I've discovered the reason for the odd reshaping of the table when I mouseovered the right column. The dynamic code relies on layers and ilayers, and someone stupid (me) had amended the height codes . I will play with DIVs to find a non-deprecated way to do the code, I promise, but that's going to be some time in the future.

I haven't uploaded it, as I'm still partway through. But it's looking good - thanks for all your help.

[mindlessLemming]

I must say, having links select themselves upon mouseOver is an atrosity from an accessiblity stand point.
It really screwed with my head and I've been surfing the web since '96.

[Gabrielle]

Ehhh?

The links selected themselves? They weren't supposed to. Did the text in the middle selection change, or did the link (target="blank") actually open?

And thanks - I've never been told I've created an atrocity before (I'm sure I have, though). I'm not sure if I should be flattered on that, on second thoughts.

On the accessibility front, what if I added a <name> or <title> tag, or similar, to describe what the link is for? What would you suggest? (teach me to fish here, please?)

[mindlessLemming]

Sorry, I was slightly mistaken; but equally perplexed....

"Move your mouse over the links on the right, to bring up a description of each sample. The samples will open in a new window."

When I do as stated above, the whole layout becomes shorter.
Not to be mean, but this was so dissorientating that I went running for the hills instantly.
As far as I'm concerned, if a page responds to my mouse movements, its as good as closed forever.
You see, I often surf the web with a Wacom tablet, with which I regularly move the cursor diagonally across the screen so that the hand holding the stylus can use the keyboard. When I accidently hovered over you right coloumn nav, the whole page changed and I was unable to get back to the original page using the back button. Having not yet read the instructions which the first page provided, I felt totally lost and abandoned your site.
This has been slightly dramatised to prove the point. I of course knew that I could press F5 and refresh the page, instead of running off screaming. My 57 year old mother, on the other hand, wouldn't have stood a chance.


*YES! Add title="" attrib. to ALL links and alt="" attrib. to ALL <img>'s. Also, keep ALL tags and attribute names lower case. This is your first step towards Xhtml.