Newbie Web Designer

[Rusty K]

They show as visited because you didn't clear your cache in your browser.

I think I've figured this one out...the links that are showing visited are actually links instead of pages, therefore the link is a different color. I'm in the process of double checking this

Yes, absolutely. This will make maintaining your site much easier..

I copy/pasted my code into Notepad and uploaded it. It made no difference on the display...still no "style". Also through experimentation and trial and error I think I'm closer to solving the missing graphic problem. Originally I followed the tutorial where they set up the first table with a logo image on the left and then to fill across the entire length of the remaining page they used another image as background. I'm still no clear on how to size something like that but I removed it as a background image and reinserted it as a normal "image". It then appeared on subsequent pages (at least the one I was working on) in the browser. I still do not understand however why the graphic would be there on the index page but not on the others...

In a nutshell, XHTML is a stricter version of HTML. Essentially, in XHTML, everything (tags and elements) is closed.

For instance, in HTML, to do a line break, you do <br>, whereas in XHTML it's <br />

And you can still use the .html extension. With the newer browsers, you shouldn't notice a difference when it gets rendered.

Well I noticed that one image only is "closed"...that was the logo gif. I tried closing the background image but it didn't change the display but if I've got a mix of html and xhtml in my markup would that cause problems?

The "style" issue is still the main problem. I'll try to retrace all my steps when adding/linking "style" to see where I made a mistake. I guess if worse comes to worse with this simple website I could just not use css and code each page element separately.

 

[Rusty K]

They show as visited because you didn't clear your cache in your browser.

I think I've figured this one out...the links that are showing visited are actually links instead of pages, therefore the link is a different color. I'm in the process of double checking this.

Yes, absolutely. This will make maintaining your site much easier..

I copy/pasted my code into Notepad and uploaded it. It made no difference on the display...still no "style". Also through experimentation and trial and error I think I'm closer to solving the missing graphic problem. Originally I followed the tutorial where they set up the first table with a logo image on the left and then to fill across the entire length of the remaining page/cell they used another image as background. I'm still not clear on how to size (width-wize) something like that but I removed it as a background image and reinserted it as a normal "image". It then appeared on subsequent pages (at least the one I was working on) in the browser. I still do not understand however why the graphic would be there on the index page but not on the others...

In a nutshell, XHTML is a stricter version of HTML. Essentially, in XHTML, everything (tags and elements) is closed.

For instance, in HTML, to do a line break, you do <br>, whereas in XHTML it's <br />

And you can still use the .html extension. With the newer browsers, you shouldn't notice a difference when it gets rendered.

Well I noticed that one image only is "closed"...that was the logo gif. I tried closing the background image but it didn't change the display but if I've got a mix of html and xhtml in my markup would that cause problems?

The "style" issue is still the main problem. I'll try to retrace all my steps when adding/linking "style" to see where I made a mistake. I guess if worse comes to worse with this simple website I could just not use css and code each page element separately.

 

[mjr]

I think I've figured this one out...the links that are showing visited are actually links instead of pages, therefore the link is a different color. I'm in the process of double checking this.

Yeah, it's basically a way of telling you "you clicked on this link".

I copy/pasted my code into Notepad and uploaded it. It made no difference on the display...still no "style".

This really does sound like a path issue.

You're using:

<link rel="stylesheet" src="path.css" />

Right?

Also through experimentation and trial and error I think I'm closer to solving the missing graphic problem. Originally I followed the tutorial where they set up the first table with a logo image on the left and then to fill across the entire length of the remaining page/cell they used another image as background.

Can you post both the link to the tutorial and the code you used? I'm curious about this, too...

I'm still not clear on how to size (width-wize) something like that but I removed it as a background image and reinserted it as a normal "image".

You can do it through CSS and use "background-repeat". Although, it can look funny.

Well I noticed that one image only is "closed"...that was the logo gif. I tried closing the background image but it didn't change the display but if I've got a mix of html and xhtml in my markup would that cause problems?

It really shouldn't. It wouldn't "validate", but as far as rendering, most modern browsers should be able to handle it. Although, if you put the DOCTYPE in at the top, I'd stick with the XHTML.

The "style" issue is still the main problem. I'll try to retrace all my steps when adding/linking "style" to see where I made a mistake. I guess if worse comes to worse with this simple website I could just not use css and code each page element separately.

This really does sound like a path problem. Does the style show up on ANY page?

 

[Rusty K]

Sorry for the delay in response but I was up till 3:30 this morning working on this. I dumped the external css because I couldn't get it to work. I just "styled" each page separately and with this small website it shoudn't be too difficult to manage that way. I'm still having some display issues in the various browsers. The one troublesome graphic still isn't displaying on some pages in IE but in FireFox the pages are all working pretty well. The menu links aren't changing color when "visited" for instance. I think I can get that worked out though. My "slideshow" link sometimes doesn't work in IE. It does in other browsers so I'm not really sure what the problem is there.


Here's a link to my updated website....

http://www.thefabs.net

Just clicked on this link and it came up in a "restore down" window with all the aspect ratios off. How can I get the page to maintain the layout in the smaller browser window? Also the slideshow link is not working as stated and some of the cell padding is not displaying properly.

 

[mjr]

Sorry for the delay in response but I was up till 3:30 this morning working on this. I dumped the external css because I couldn't get it to work. I just "styled" each page separately and with this small website it shoudn't be too difficult to manage that way. I'm still having some display issues in the various browsers. The one troublesome graphic still isn't displaying on some pages in IE but in FireFox the pages are all working pretty well. The menu links aren't changing color when "visited" for instance. I think I can get that worked out though. My "slideshow" link sometimes doesn't work in IE. It does in other browsers so I'm not really sure what the problem is there.


Here's a link to my updated website....

http://www.thefabs.net

Just clicked on this link and it came up in a "restore down" window with all the aspect ratios off. How can I get the page to maintain the layout in the smaller browser window? Also the slideshow link is not working as stated and some of the cell padding is not displaying properly.

I did find a couple of things. In your main table, your image tag should look like this:

<img src="Images/Logo 1.gif" width="230" height="100" alt="The Fabs Logo" />

Instead of:
<img src="Images/Logo 1.gif" width="230" height="100" alt="The Fabs Logo"/>

(notice the extra space between the closing quote and the "/>" )

And your background probably isn't showing up because your TD looks like this:

<td background="Images/Background.gif"/></td>

Take out the extra / after the image name, so you get:

<td background="Images/Background.gif"></td>

Instead.

As far as the CSS goes, it does validate, so I'm not sure what to think there.

I'll have to check out that "restore down" functionality.

 

[Rusty K]

I did find a couple of things. In your main table, your image tag should look like this:

<img src="Images/Logo 1.gif" width="230" height="100" alt="The Fabs Logo" />

Instead of:
<img src="Images/Logo 1.gif" width="230" height="100" alt="The Fabs Logo"/>

(notice the extra space between the closing quote and the "/>" )

And your background probably isn't showing up because your TD looks like this:

<td background="Images/Background.gif"/></td>

Take out the extra / after the image name, so you get:

<td background="Images/Background.gif"></td>

Instead.

As far as the CSS goes, it does validate, so I'm not sure what to think there.

I'll have to check out that "restore down" functionality.

Again...sorry to have taken so long to get to this but I don't think I received a notice on this post.

On your first example...are we talking xhtml here? I didn't think there was a space but I'll correct that and see if it makes a difference. Also on the second example that was me trying to add xhtml...thought all elements were to have the slash.

It's funny but driving home from dinner with my wife tonight, I had a eureka moment on the external css. I've retraced my steps on adding style and an external style sheet as per the program tutorial. My only conclusion, and I told my wife this, is that I believe the tutorial purposely made mistakes...to force me to back track and reason some of this stuff out. As in this case...following the tutorial they had me link the menu and table style but then after the link they had me add the body style to the css. Of course!...the body part of the style although saved to the css file was not linked along with the rest.

Thanks so much for you patience and for giving up your time for me. I'll report back.

Oh yes, do you have any thoughts on maintaining the aspect ratio when the browser window is small?

 

[mjr]

Oh yes, do you have any thoughts on maintaining the aspect ratio when the browser window is small?

Off the top of my head, I'd say don't use percentage values. Use static widths, or a combination of both...

 

[Rusty K]

Off the top of my head, I'd say don't use percentage values. Use static widths, or a combination of both...

Whether that it or not I want to learn that...it's been bugging me for a long time. What is the width of a page. Is it in pixels or what?

 

[mattr]

Hmm, sorry, still slaving over schoolwork, but I'll just chuck in some quick hints. I've only skimmed the last few posts so I don't even know if this is relevant to what you were asking, but this is a good thing to know about anyway

What you currently have is called a 'fluid width' layout... it changes/flows depending on the size of the browser window. These are generally favoured if the design permits it; it means that the design people with huge monitors aren't left staring at a tiny square on their screen, and people with small monitors aren't expected to scroll wildly to view anything! The problem with fluid-width layouts is that they can end up getting out of hand. Its nice to have your design stretch to fill a bigger screen, but sometimes it can be stretched too far, and vice versa for the other direction.

If you specify the width of your 'container' element in pixels (I'm guessing a table in this case, grr ), this immediately renders it as fixed width. A pixel is an absolute measurement. The design will no longer flow... if you set it to be 650px wide then it will be 650px wide, regardless of whether the browser window is 1920x1200 or 640x480. An advantage of this is you can have a lot more control over your design; sometimes very graphic intensive, fancy designs just wouldn't be able to work without having fixed sizes and absolute positioning.

So for a lot of designs, a halfway house sounds kinda good doesn't it?
Well thankfully but unsurprisingly this is something you can do this in CSS


You still set your width as a percentage, maybe 80%.

But you can also set the property of min-width in pixels, to determine the smallest you want the element to become before it behaves as 'fixed width' and you force the user to start scrolling horizontally. The setting of this depends entirely upon your design, but somewhere between 600 and 800px might be a good way to start, then play with making your browser window really small and finding what works best.

And in the same way, you can set the max-width property, to prevent your design from being stretched too much. Again this comes down to what works well with your design, but somewhere around 1400px might be good for a max width.

Hope that helps

http://www.w3schools.com/css/pr_dim_min-width.asp
http://www.w3schools.com/css/pr_dim_max-width.asp