Quote:
Originally Posted by samo1215
I'm trying to create a navigation bar at the top just below a horizon logo/image that spans the entire width of the page. I want this logo/image to appear on every page along with this navigational bar.
|
I'll be honest with you, the easiest way to make a template that works cross-page is to use PHP. This way, you can have your "navigation.html" seperate from "downloads.html". In essence, the PHP takes the source code out of navigation.html and puts it into downloads.html. This is very easily done using something like:
PHP Code:
..</head>
<body>
<?php include 'navigation.html' ?>
This will appear under navigation.html, unless you didn't close a tag or something.
</body>
</html>
You might not be ready to use PHP, but if I would have known it was that easy, I would have learned it when I first started
Quote:
|
I want the navigational bar to be one of those mouse over types where each button changes with the cursor over it (think apple.com).
|
I don't think you're ready for
how apple does it. Which, I'm not an apple fan, so I'll just say Youtube does it the same way to make Apple not look so pro
Quote:
|
1) I know I want to program the navigation bar in javascript. It will have several different sections (home, about, contact etc...). Do I make it one picture and where is that picture placed, in the html of each page, in a master CSS document?
|
There is no real "answer" for this, but heres some suggestions for you.
1: Place your navigation images in
http://www.webmaster-talk.com/images/nav/ [Why did it do that? lol], if you have that navigation.html seperate with PHP suggested earlier, make sure it can access the images from where its located (Not from where the including file is!), as in /images/nav. If its located in /includes that would point to /includes/images/nav even when included.
2: You can use two, three, or four images to animate it. Or you can use however different images as one image a piece (per link).
You can do sort of like apple did, make two animations one on top of the other and just change to
background-attachment: bottom;.
If you want to go all out with four images (this will work for three too), you can make two on top and two on each side, then use a combination like
background-attachment: top left; to select the top left image.
NOTE: When using more than one image per image make sure you specify the height and width
exactly, or you may see part of the other animations (I really don't like to call them that, though).
3: If you really want to animate the pictures, as in an animated GIF, I know
The GIMP gives you the option to make images only animate once, and stop on the last frame. This is great for making an image fade in/out - but will not work with the multiple images per image method.
4: [b]Use unordered lists[b]. Almost every navigation menu is made of an unordered list. They are very handy for navigation menus (horizontal and vertical). See up in the top right the "User CP", "Private Messages", etc? Thats actually an unordered list. For this, keep in mind the following style tags:
- #nav li {display: inline;} For each UL item so they appear on one line (especially IE6)
- #nav li a {display: block;} Use this for the actual hyperlink so that the entire button is clickable, rather than the text ()
- #nav li {list-style: none; | OR | background: none;} gets rid of the bullets.
- margin: 0; padding: 0; Gets rid of the indentation
See something like
Listamatic: Horizontal Rollover Navbar
Quote:
|
2) Same thing for the main logo/image. Is that in the html of every page or in a master CSS file?
|
Read only #1 from above
Quote:
|
3) If I have to "slice" up the navigation bar into multiple images, how do I get it to still look like one picture? I have heard of "hotspots" but will that work with javascript?
|
Read #2 from above (I didn't even read this and I answered it
)
Quote:
|
4) More of a general question. Can CSS be contained in a javascript file and vice-versa?
|
Uh, I'm not sure about that. They can both be contained in a PHP file though. Actually PHP will contain even text documents as regular HTML.
Quote:
|
Sorry for all of the questions. Any recommended reading or links would be great too, thanks.
|
Google |
W3schools - That what I use
