Nav Bar (Div/ID)

[Dal123]

A couple of weeks ago I was asking about a nav bar, I've read a book on css and I'm still struggling to comprehend whether or not I should use a div tag of ID tag😕 I'm guessing an id.
I want my logo (attached) as the top of the navigation, with an <ul> below it. Showing my link like home, gallery, contact us etc. 🙂
I just don't understand if I should format everything as an ID in the external css stylesheet? or do I have the xhtml <ul> (un-ordered list) on every page, then that links to the external stylesheet.
The thing is I want this on every page, and was hoping to create an id as the logo (attached), thought if I keep entering the <ul> will be cluttered and supposed to only have extreme individual page content (For SEO).😕
I'm having problems understanding the concepts of nav bar.😱 Thought I would've understood this by now after all the research I've done😱.
Any help appreciated.

 

[SrWebDeveloper]

That was worded in a rather confusing manner, at least to me. I think to help you, you need to know the basic concept of how many nav bar/accordian menus work these days:

Yes, a div is wrapped around the entire menu, used to identify and position it. In CSS you use an ID and not a class when the object referenced is unique and occurs once on the page. Next, you need to know that the UL and LI commands are perfectly suited to accordian menus that drilldown or across, due to the parent (UL)/child (LI) relationship of those tags. That explains the popularity of using such tags - it's simple and intuitive to create a menu system. The next thing you need to know is CSS allows you to change the default behavior of any HTML tag, i.e. instead of displaying UL's and LI's the normal way (tabbed with bullet points/blocks) you can change the cosmetic properties so each may resemble a button much like you might create in a graphics program. Just that CSS is much faster for mouse events and easier to use as it's all simple style directives typically in one style sheet. The final thing you need to remember is CSS cascades, and you can define parent/child relationships using CSS to determine how you want you menu to behave, i.e. div#mynavbar ul li li {..styles..} means set styles for an li which is a child of another li which are both children of a ul which is a parent of an ID named mynavbar wrapped in a div.

Once you know all these basic, simple concepts, you can see using div ID's, UL's, LI's and CSS allows developers to make really cool looking menu systems. It's just exploiting the tools in the HTML toolbox. Hope this helps (and addresses what you meant to ask).

-jim

 

[Dal123]

Cheers Jim; it was worded complicated, I'm very poor at explaining things sorry😱.
Do I put the image (Logo attached) in the html. or in the css?
As I want the logo on every page of my website with the navigation (masthead)?
Any input appreciated.

 

[SrWebDeveloper]

The proper way is to reference the image in the CSS.

For example, if you create a content area with ID "mycontent" and want the image to display there:

div#mycontent {
background-image: url(/path/to/myimage.gif);
}

As to including it in all pages, learn how to create templates for web pages, or if using PHP learn about the include function, or if you know about SSI use that for a no-frills template system if you run Apache and that's enabled. Or, simply copy the HTML to all pages if just a few involved (small personal site).

Visit this page for complete details on the background property in general including image, alignment, and so on.

While you're at it, view some of the tutorial links I included for CSS in the pinned topic in this forum. Learn about CSS layout in general.

-jim

 

[Dal123]

Cheers Jim,
Much appreciated 🙂.

I've got this in my html:

<div id="masthead">
<ul id="navlist">
<li>home</li>
<li>previous projects</li>
<li>guarantee</li>
<li>contact us</li>
</ul>
</div>

This in my css:

#masthead {
padding:10px;
border:1px solid #000;
background-color:#ffffcc;
background-image:url(Images/Graphics/Logo Web.gif);
}

Not only does it not display the image; it completely wipes out the formatting/ display of my masthead.😕

 

[memco]

your background-image declaration should have single quotes like this:

background-image:url('Images/Graphics/Logo Web.gif');

 

[SrWebDeveloper]

Couple of things...

1) Include link to your page or screen snapshot showing problem
2) Usually the navlist is below the masthead, not inside, i.e.

<div id="masthead"></div>
<ul id="navlist">
<li>home</li>
<li>previous projects</li>
<li>guarantee</li>
<li>contact us</li>
</ul>

#masthead {
padding:10px;
border:1px solid #000;
background-color:#ffffcc;
background-image:url(Images/Graphics/Logo_Web.gif);
clear: both;
/* might even want to set image height/width here */
}

Assuming your masthead is simple and only shows the graphic, otherwise I'll offer additional advice once I see the actual page.

3) The path is case sensitive and also best practice not to use spaces (you have one in your image filename) in any filename or directory name, use underscore instead then adjust CSS/HTML accordingly. Otherwise, need to add quotes as memco noted, but as you gain experience you'll see spaces are not wise as you advance into scripting.

-jim

 

[Dal123]

Thanks for your input buddies 🙂. I don't understand what I'm doing wrong. Surely I should be able to do this after 3 months of intensive studying. All the links I've already read a month ago and not just once about ten times 😱🙁. I've been working on this for about 9 hours solid 🙁.
I have reverted to the book and done it about 30 times (not exagerating). I have entered it exactly as it is in the book: They do not provide the file, but I have made sure that the image I am using is in the folder. I have tried many many different combinations: single quotations, doubles, placing it in head, placing it in html. Every previous lesson in book with <link rel="stylesheet" media="screen" type="text/css" href="images.css"/> all been double quotes, on this exercise it has changed to single quotes everywhere but "screen". 😕

Here is my css:

/* SPecify */
body {
margin: 10px;
background-color:#FFF;
}

/* Cointain al page content */
#container {
height:900px;
border:1px solid #000;
background-color:#FFF;
background-image:url('Logo_Web.gif')
background-repeat:no-repeat;
}

Here is my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Chapter 5: Background Images</title>
<link rel='stylesheet' media="screen" type='text/css' href='images.css'/>
</head>
<body>
<div id="container">
</div>
</body>
</html>

 

[angelwatt]

Should probably give #container a width as well just in case. Also, what do you see when you view it in a browser e.g., blank screen, etc.?

 

[Dal123]

Yeah it's just a blank screen 🙁.

 

[angelwatt]

You're missing a ; at the end of the background-image line in your CSS.

 

[Dal123]

Thanks; I did correct it; I've attached the file if you wanna try anything. There has gotta be something wrong surely.😕😕😕
The solid dash is now removed also?

 

[angelwatt]

Thanks; I did correct it; I've attached the file if you wanna try anything. There has gotta be something wrong surely.😕😕😕
The solid dash is now removed also?

I copied and pasted the HTML, CSS, and logo locally and tried it out and it seems to work fine in Firefox/Safari/IE6 on Windows. All I did was add the ; and the rest is as you provided. You may be viewing a cached version of the file. Try deleting cache or open it in another browser.

 

[Dal123]

Thanks so much for checking it 😀 I am really starting to get demoralised with it. Been on it ALL day, thanks again. How do u delete the cache?

I've tried safari too, no luck. There's gotta be something wrong with my computer 😡. and internet explorer.

 

[angelwatt]

Thanks so much for checking it 😀 I am really starting to get demoralised with it. Been on it ALL day, thanks again. How do u delete the cache?

For Firefox under the Tools menu there's an option for clearing History, which will take care of the cache. You can also generally force a clean access by doing cmd+shift+R I think. Not at my Mac to confirm.

I've tried safari too, no luck. There's gotta be something wrong with my computer 😡. and internet explorer.

If you could upload the file to a website it may let us see something we can't see here, such as how the file has been saved. What text editor are you using?

 

[Dal123]

Thanks; it's not working on any browsers 😕😕😕.

 

[nuxx]

Not wishing to state the obvious but, you may want to check the name and location of your CSS file.

Your HTML file is looking for a file named images.css in the same directory as the HTML file itself. If one or both of these are incorrect, you'll get a blank screen.

I've attached a zip file of the code and image you supplied. It works perfectly.

 

[Dal123]

Thanks Nuxx,
And everyone else that has helped me with this (Jim & Angelwatt); very strange.
I've done something today that I tried yesterday about 20 times and it's working now. Nuxx I'm sure I named the file correctly, and the css was right next to my html file. I went back into the css and put the background image there (again). For some reason it's working now, I don't understand what is different; I tried all this about twenty, thirty times yesterday 😕.
I thank you all for your input; forum is so good, wouldn't be able to do this without help, forum is so good 🙂🙂🙂🙂🙂.
Just trying to centre it now.