Jump to content

Help with a simple menu?


cbraxton

Recommended Posts

I am not exactly new to web design, but I am very amateur, having done it as a hobby from time to time and not really keeping up with the standards. I have a made new site for the church I attend, and I made a navigation menu by following tutorials and playing with the code. It looks fine in my desktop browser, but the menu wraps and leaves part of the buttons on a second line in my smartphone. Here is the site:

 

westhighstreetchurch.net

 

I am attaching the css and index.html files.

 

Can someone help? I really would like to have some explanation of how to fix the code rather than someone fixing it for me, though I feel like it is likely fairly simple. Thanks in advance for any help.

westhighstreetchurch.css

index.html

Link to comment
Share on other sites

Several things:

 

HTML / Content

 

Add a meaningful title - that helps with search engines, and 'index.html is not one.

 

Remove all the inline styling - unless something is specific for ONE time on ONE page only, it should really be in the external stylesheet.

 

The center tag is deprecated and tables should not be used for layout, they are for tabular data.

 

It should be "Woodbury, TN 37190", not "Woodbury Tn 37190"

 

Be consistent with your spelling - 'classes' either both capitalized or both lower case, and either stick with AM/PM or Morning/Evening

 

Use <br> for actual line breaks, not to create spaces.

 

CSS

 

Add a * {margin: 0; padding: 0;} to reset all browser-specific settings.

 

Give your center div a width so if works in most common resolutions.

 

To center your page on all browsers, use a right/left margin of auto instead of a set left margin

 

add "white-space: nowrap to your ul li to keep from wrapping

 

don't add different margins to your hover than your link or you'll get the crazy jumping/twitching. A different color is a better way to go.

 

I made some other changes, you can see those if you compare my html and css to yours, and there are further adjustments that could be made, but I'm out of time.

 

Here's the revises page: http://aandbwebdesign.com/KSforum/2.htm

Link to comment
Share on other sites

Wow. Thanks. It will likely take some time to go through all of this, but I appreciate it much, especially the fact that you took the time to both explain and provide an example of the changes. I do have a question (and likely many more as I go through this, but one for now).

 

You wrote:

 

> Use <br> for actual line breaks, not to create spaces.

 

What do I use to create space?

 

Also, part of this was done in Kompozer (I was hoping to do this the easy way, WYSIWYG), then I realized that it just wasn't able to do what I wanted and I went back to coding. That may be part of the problem with some of the style elements in the HTML. Or it could be my mistake--just not sure, but I thought it worth mentioning in case it's relevant.

Link to comment
Share on other sites

WYSIWYG editors tend to add their own coding - and it's not always pretty. That probably explains some of the inline styling you have there.

 

As to the <br>

 

For plain text, you would add <p> tags around each paragraph and apply whatever margins or padding you like around your paragraphs to create your space.

 

Using the church address as an example, street and city aren't exactly separate 'paragraphs', they belong together, but we want them split over 2 lines. That's where we use the <br>.

Another example would be if you want to break up a header over 2 lines - for example:

 

<h1>The Church of Christ <br> at West High Street</h1>

 

But if you want some space between your header and your image, theoretically, you could just put as many <br> tags in there as you like, but if you want to use proper coding techniques, then you add margins and/or padding to your image and/or your header.

 

Make sense?

 

BTW - I ran out of time this morning, and don't have much right now, but my version could easily be modified further to look exactly like your page. Sometimes it takes a bit of playing around, and there are usually more than one way to skin the cat, but hopefully, what I posted is enough to give you an idea and get you started.

 

Feel free to ask if something doesn't work or doesn't make sense.

Link to comment
Share on other sites

  • 5 months later...

Can you reccomend a decent freeware/open source html editor that will facilitate this? I have not come back to this with any real effort in some time, but I have a couple of weeks for the holidays and I'd like to work on it. Also, is there any tutorial(s)you would recommend? From the identifier in the example you posted for me, it looks like you wrote it in html 4 with strict standards compliance? Would I be better off trying to come up to speed on html 4, or html 5 or is there a more current iteration?

 

Thanks.

Link to comment
Share on other sites

Okay, if you are looking to learn over the couple of weeks and just code it yourself, I would recommend picking up Notepad++ if you are on Windows (google it). As far as tutorials, Killersites has them, but http://w3schools.com is a good start that is non video. I would start with HTML 4 because it has the fundamentals of what you need to know, and then go onto HTML 5 as most HTML 5 courses only has the new stuff, when you will need to know the old stuff as well, such as heading tags, p tags, span tags, etc. HTML 5 is the latest version. Let me know if you have any questions.

Link to comment
Share on other sites

w3schools is a reasonably good tutorial for beginners but remember that even tutorials can be wrong. Look at the mistakes listed on http://w3fools.com/

 

w3schools was completely updated a year or two ago and has now got rid of the HTML 4.01 and XHTML 1.0 doctypes and uses the HTML5 doctype, but has kept the old HTML coding separate from the new HTML5 stuff. http://www.w3schools.com/html/default.asp

 

You need to be aware that some elements were removed in HTML5, see http://www.w3schools.com/html/html5_new_elements.asp near the page bottom, and HTML5 is still in beta (officially hasn't been released yet but only minor changes are expected in future). The most important removed tags which many people still use (but shouldn't although browsers still seem to process them) are center, font, frame, frameset, noframes.

Edited by Wickham
Link to comment
Share on other sites

Several things:

 

HTML / Content

 

Add a meaningful title - that helps with search engines, and 'index.html is not one.

 

 

How do I do this and make the URL default to the page?

 

CSS

 

Add a * {margin: 0; padding: 0;} to reset all browser-specific settings.

where should this be added?

 

Give your center div a width so if works in most common resolutions.

How should I do this (what units, etc.) to make the page viewable in various screen sizes, incl. cell phones, etc? I have used em in several instances so that the fonts scale together, but I'm not sure that is the best choice. I defined the picture in px, though I thought em might be better. It seems to work.

 

 

To center your page on all browsers, use a right/left margin of auto instead of a set left margin

 

I have margins set at 4em to keep the blue borders. Is this not an acceptable thing? Is there some reason I shouldn't do this?

 

Also, there is a blue border at the bottom (which I like), but I can't figure out what I did to get it there by looking at my code--I don't know how long I've gone over it trying to find out.

 

Finally, can someone suggest how to the "Times of Worship" to show up below the picture and previous text as a heading? (see the website itself for what I mean--www.westhighstreetchurch.net)

 

Thanks much.

Link to comment
Share on other sites

The meaningful title:

 

You add that in the HTML code in your head section:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>SOMETHING MEANINGFUL HERE</title>

<link type="text/css" href="westhighstreetchurch.css" rel="stylesheet">
</head>

It has nothing to do with the URL, it's what people see at the very top left of their browser window - and it helps the search engines.

 

The

* {margin: 0; padding: 0;} 

 

Goes to the very top of your .css page. Do note so that it will set all margins and paddings to zero, so you'll have to add them back in where you want them. (For example, the p tag comes with a browser-dependent default margin, which this code will erase).

 

According to this page: http://www.w3schools.com/browsers/browsers_display.asp most people view at resolutions higher than 1024 px. So if you design for around 1200 px or so, that would give you a reasonable content-width that's comfortable to view. You'd add that width to the CSS for #center. You can use pixel or em - doesn't matter. I find pixel easier to deal with, it's more specific.

 

Properly coded webpages usually do not need anything extra to display well on smartphones and tablets.

 

It's easier to set the right and left margin of your outer division to auto instead of and specifying a set width for the content. You set specified the margins but not the width of your content, so on wider monitors the content will expand to fill the width of the screen (minus the 8 ems for your margins). That works, but considering that people view at pretty high resolutions these days, it may stretch your content so wide, that you have to move your whole head just to read from left to right.

 

You got the blue 'borders' by setting your background blue (see the background color you gave your body tag in your CSS). So technically, you didn't give your content a blue border, you only moved it away from the outer edges of the display, thus revealing the blue background.

 

Let me know if you need more explanation to any of these issues.

Link to comment
Share on other sites

 

You got the blue 'borders' by setting your background blue (see the background color you gave your body tag in your CSS). So technically, you didn't give your content a blue border, you only moved it away from the outer edges of the display, thus revealing the blue background.

 

Let me know if you need more explanation to any of these issues.

 

OK. I got most of it and I am working on the changes. As for the border thing, I realize that I set the background and the left and right margins to show the background. What I don't get is why the center section isn't going all the way down, leaving the portion of the back ground (the blue border) at the bottom. I'm OK with it, but I want to understand why it is behaving in that way.

 

I think I got this one too. Here is the current code:

/*CSS for 3 column layout*/
#center {
 width: 50em;
 height: 100%;
 padding-bottom: 2em;
 margin: 0 auto;
 background-color: #fffadc;
 border-style:solid;
 border-width:4em;
 border-color:#7BA7E5;
 border-top-width: 0;
 border-bottom-width: 0;
}

/*End CSS for 3 column layout*/

 

Also, how can I make a break in the page, setting the "Times of Worship..." section so that it shows up centered below the picture and contact info instead of wrapping around the picture? I could use multiple break tags, but I gather that that is considered poor coding.

 

I figured this one out!:)

 

As an aside, I have gone through the W3schools tutorial on HTML and am planning to continue going through their tutorials on html 5.0, xml, etc. I'm learning a lot, and having a great deal of fun in the process. Your guidance (everyone who has responded, but especially Andrea) has been invaluable. Thanks for your help again.

Edited by cbraxton
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...