Queston about Navigation code and CSS

User 159454 Photo


Registered User
28 posts

I am building a site for a local Flea Market and have uploaded the first few pages. I do not understand the links and have made mistakes in them. I am sure it is a very simple thing for someone with experience or knowledge. I am sort of learning as I go and stumbling along.

Also, I would like to learn how to use "clear" to space objects on my page and still have it validate thru W3C. It is not even close to validating right now.. :/

The web address is www.huntabunch.com. Hopefully someone can help so I can at least get the links working. I can post the Navigation code / css if necessary.

Thanks for your help!!

Sheila
User 148353 Photo


Ambassador
808 posts

Sheila,

You need to replace the # with the filename. They all appear to be relative links (the pages are in the same folder as Index.html).
This is your existing code:

<ul>
<li><a class="current" href="#" title="index.html">Home</a></li>
<li><a href="#" title="contact.html">Contact</a></li>
<li><a href="#" title="map.html">Map</a></li>
<li><a href="#" title="vendors.html">Vendors</a></li>

<li><a href="#" title="video.html">Video</a></li>
</ul>


It should look like this:

<ul>
<li><a class="current" href="index.html" title="index.html">Home</a></li>
<li><a href="contact.html" title="contact.html">Contact</a></li>
<li><a href="map.html" title="map.html">Map</a></li>
<li><a href="vendors.html" title="vendors.html">Vendors</a></li>

<li><a href="video.html" title="video.html">Video</a></li>
</ul>
"Time heals everything. Know who said that? My Latin teacher at barber college!"
- Floyd Lawson

Widoktadwat - "Plays Well With Others"

User 355448 Photo


Ambassador
3,144 posts

Shelia,

You have only 6 errors and 5 are all the same issue. You are using a DTD that is XHTML. That requires that all your meta tags end with /> and not just > so there is 5 easy fixes.

The sixth error is <br clear="all" />

The clear code is for CSS styles, and pertains to floats. You can set something to float:left; or float:right; to make something move to the left or right side. When you want something that uses the entire width of your site, you can use the clear:both; CSS to make that happen.

This page will explain how to use floats: http://www.w3schools.com/css/css_float.asp

If I misunderstood what you are trying to do with the <br /> let me know.
User 159454 Photo


Registered User
28 posts

Lowell,

Thank you so much for clearing that up for me. I pasted it in the pages and everything is working great now. I appreciate your time and assistance!

Sheila
User 159454 Photo


Registered User
28 posts

Bill R,

Thanks for the information regarding the clear all code. I knew I could use it to clear floats. For some reason I thought I could use it to clear blocks of text as well.

What is the best way to make use of white space or spacing between photos and text? I know <br> can be used. Sometimes when trying to get around a photo, it can take a lot of <br>'s. :/

Tonight I will visit the link you provided and read up on it. I have searched around and not found a good way for spacing between parts of my content. I also need to get a good book on XHTML. I took an online course quite a while back and learned just enough HTML to enjoy putting a site together. That's old hat now and what little I have learned on CSS is changing or has changed.

I do enjoy it though. I appreciate you taking the time to help. I'm afraid if I did not have this forum to call on for help, it may not be nearly as fun, trying to figure it all out!

Sheila
User 38401 Photo


Senior Advisor
10,951 posts

One way you can do this is with tables. Tables have a built in setup that allows you to add paddings inside each cell, and also between each cell which can give you lots of room to play with. If you have it not have any borders then no one really 'sees' the tables, they only see the graphics and aren't the wiser that a table is there at all :)
User 159454 Photo


Registered User
28 posts

Hi Wolverana,

I have used tables before, then I wanted to learn a new skill and started trying to learn how to us tableless CSS design. Sometimes it is very frustrating, but when it works, its very nice and clean design. Some things are easier.

Its been so long that I used tables, I have probably forgotten how!

Thanks so much for your help. I like the work you have done on the Literacy site, it looks great and navigation is easy. Keep up the good work.

Sheila
User 355448 Photo


Ambassador
3,144 posts

Sheila,

One way to create white space is to use margins and padding. You can create an external style sheet with assorted classes that you can pick and chose for use in your pages, or you can assign styles as you go through the pages.

If you have an image that you would like to have white space all around, but even have different amounts of white space, you could use some like this:

style="margin-top: 5px; margin-right:10px; margin-bottom:15px; margin-left:20px; border:0;" Just add this to your image code along with the width, height, title, and alt entries. A shorter code that does the same thing would be to use something like this:

style="margin: 5px 10px 15px 20px; border:0;"

The border:0; just turns off the border that browsers seem to place around images, but if you want you can specify all sorts of borders.

The main thing here is just to show that you can use CSS to set the style (white space) around your images.
User 355448 Photo


Ambassador
3,144 posts

Sheila,

I happened to run across some code that also used <br clear="all" /> and that code was valid. Additional research found that the <br clear="all" /> is older code and is depreciated (meaning it may not be supported in future version os browsers).

There is a solution. You are using a strict DTD. If you change your DTD to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

That will allow the <br clear="all" /> to be valid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.