Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Navigation bar in CSS so fixed on page (always accesible)

Dal123

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
I've just ordered a big book on css from america; 2 weeks till it gets here, so; I am trying to create a webpage where my logo is always at the top of the page. With this I want my navigation bar so it is always fixed at the top of the page. So when you scroll down you can always navigate through the site :D.

Obviously I would set this in the external style sheet, I have the background image sorted I think, thanks to the help of 'Senior Web Developer' (cheers buddy). I assume I just have to incorporate the navigation links into this.

Code: 
<style type="text/css">
body
{ 
background-image: url("Images/images/Logo-.gif");
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50% 2%;
background-color:#000000 
}
</style>

Any help much appreciated!
 
A

adamfishercox

macrumors 6502
Aug 15, 2007
474
10
To set something to a fixed position on the page, put the following CSS in it's class:

.class {
position: fixed
/* Any positioning that you want to do using top: ; bottom: ; etc.*/
}
 
Dal123

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
Wow thanks, I could've been in trouble there. IE is 70% of the market, I could've really come unstuck there.
 
Dal123

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
michael.lauden said:
just do an absolute position with units px

pretty simple
Click to expand...

If an absolute positon is used will it still centre the image to a % of the page. Or will it remain at the set position in px :confused:?
After looking into the matter I notice that most navigation bars use pictures, is it possible just to use text. I found this code for a nav bar but uses pictures. How could I modify this to use text?
#navbar{
width:auto;
height:36px;
background:url(img/navbar-bg.png) left top repeat-x; }
#navbar .inbar{
display:block;
height:36px;
background:url(img/right-round.png) right top no-repeat; }
#navbar ul, #navbar ul li{
border:0px;
margin:0px;
padding:0px;
list-style:none;
height:36px;
line-height:36px; } #navbar ul{
background:url(img/left-round.png) left top no-repeat; }
#navbar ul li{
float:left;
display:block;
line-height:36px; }
#navbar ul li a{
color:#403e32;
text-decoration:none;
font-weight:bold;
display:block; }
#navbar ul li a span{
padding:0 20px 0 0;
height:36px;
line-height:36px;
display:block;
margin-left:20px; }
#navbar .navhome a, #navbar .navhome a:hover{
background:url(img/a-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar .navhome a span, #navbar .navhome a:hover span{
color:#FFFFFF;
background:url(img/span-bg.png) right top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover{
background:url(img/ahover-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover span{
background:url(img/spanhover-bg.png) right top no-repeat;
height:36px;
line-height:36px; }
Click to expand...
 
M

memco

macrumors 6502
May 1, 2008
259
2
The pictures used in nav bars that are declared in CSS are usually just decoration on top of text links. The code you pasted is used to add more visual style to the navigation. They're using a rather complicated setup to achieve the effects they used. The most basic navigation is this:

HTML: 
<ul id="navigation">
	<li><a href="url">Home</a></li>
	<li><a href="url">Page 2</a></li>
	<li>a href="onemore/url">So on...</a><li>
</ul>

Using this as a base, you can now use #navigation in your CSS file to set up the fixed positioning. You can also add other rules to your CSS file to do things like make the navigation run horizontally instead of vertically, change the colors, add rollovers etc.

People (as in your example) usually add an extra div around the whole thing to give more control over the styling. In this case, it looks like they have two containers and are also using some spans inside the a tags for even more styling. My guess is it looks something like this:

HTML: 
<div id="navbar">
	<div class="inbar">
		<ul>
			<li><a href="#"><span>Link1</span></a></li>
			<li><a href="#"><span>Link2</span></a></li>
		</ul>
	</div>
</div>

As you can see, same basic list, just more markup.
 
Dal123

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
Thanks Memco.

Much appreciated, just couldn't get my head around it. Hopefully when the book comes I can really start to understand this. At the moment I am at the very beginning and still really don't properly understand HTML let alone XHTML and CSS :eek:.
I have also tried copy and pasting
<ul id="navigation">
<li><a href="url">Home</a></li>
<li><a href="url">Page 2</a></li>
<li>a href="onemore/url">So on...</a><li>
</ul>
Click to expand...
but no luck. I have removed 'onemore line' obviously and modifed 'url''s to my file locations. How could you edit the text, text colours hover colours and things without doing it on each link?What am I doing wrong, should I be struggling with this, it seems very basic yet I am falling at the first hurdles it seems.
Thanks again.
 
A

adamfishercox

macrumors 6502
Aug 15, 2007
474
10
http://w3schools.org

Read up, that site alone can teach you much of HTML and CSS.

I'll give you the basic basics. HTML is for structure, for example, headers are <h1> <h2> etc. CSS is for styling that structure. So to define the style for all <h1> tags you would put this in your CSS:

Code: 
h1 {
   font-size: 24px;
   and whatever else you would want
}

You can add classes to things in HTML to define a certain style for them:

<p class="underline">This would be underlined</p>

In CSS, classes are defined with a period before them:

Code: 
.underline {
   text-decoration: underline;
}

Now anything with class="underline" will follow the style rules set in .underline{}

IDs are the exact same thing but for when something only occurs once, like a demo video on one page: <div id="demovideo"></div>

IDs are preceded by a # in CSS:

Code: 
#demovideo {
   styling for the demo video div
}

There's a lot more detail, but that is really pretty much all there is to it.


EDIT: Oh, and the basic Syntax for HTML: <tag></tag> attributes can be put in the first tag area, as in <a href="http://macrumors.com"></a>

for CSS:

Code: 
selector {
    property: value;
}
 
M

memco

macrumors 6502
May 1, 2008
259
2
CSS takes some getting used to. Don't worry if you're not understanding something, just ask and we'll do our best to help.

The list is the HTML. In there, you can change where the links go and what the link text says. I think you've got that. To change the way those look, that's where CSS comes in. You can change the appearance of different parts depending on the "selectors" you use. Selectors are the things like "#navigation" that specify what attributes you want to give a certain item.

Let's begin with the whole list. You can target the list in CSS using the selector "#navigation":
HTML: 
#navigation {
 /* Give the menu a background image that repeats horizontally and a gray color for anything not covered by the background image*/
 background : #c9c9c9 url('menu/background.img') repeat-x;
 border : 1px solid #111; /*dark gray border*/
 float : left; /* This is so that the ul will contain all the floated lis for our horizontal menu remove for vertical */
}

to target the <li>s as a group, use #navigation li:
HTML: 
#navigation li {
 float : left; /* Changes lis to display horizontally remove for vertical */

For doing hover effects we now have to target the a tag using #navigation a:
HTML: 
#navigation a {
 color : #001314;
 text-decoration : none; /* Removes the underline from links */
 padding : .5em; /* Give a little white space around each link */
 display : block; /* force the links to take up all of the space in the li */
}

#navigation a:hover { /* The :hover pseudo-class is used to change properties when the links are hovered over.  */
 color : #116b14; 
 text-decoration : underline; /* Show underline on hovered links */
 background : url('url/of/rollover-background.img') repeat-x; /* Change background of the link on hover */
}

These are just some ideas, and there's much more you could do. Play with some of these settings on the menu to see how the styles work.

Check out these CSS references to learn a little more about specific options for various tags:
If you're interested in dropdown or flyout menus look at son of suckerfish as a starting point. There are some improvements that can be made to this design, but I think it should give you some more insight into how CSS works and can be used practically.
 
Dal123

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
Thanks.

Cheers guys, I've already printed out every single tutorial on http://www.w3schools.com. I've been reading them for a month or two now (probably about 6 weeks) and I've highlighted all bits especially relevant.

I read it and think I understand, then problems trying to put it all together. I understand certain parts of it, but when it comes to putting it together I get lost. :eek: I just wish w3schools had a little more in depth examples.
Thanks again.:)
 
A

adamfishercox

macrumors 6502
Aug 15, 2007
474
10
Always a good way to learn is to copy the code of a website you like and messing with it to see what happens. That's really the only way you'll "understand" what's going on.
 
Dal123

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
Lightbox

Yeah I've done that with a few sites, seems there are so many different ways to do the same thing. Very confusing:confused: but so interesting.
There was one here that baby jennifer did and I liked it, so had a look at the code and was very complex. It used something called lightbox; which looked like a preformatted text. There were comments on it from the original designer
Lightbox JS: Fullsize Image Overlays
by Lokesh Dhakar - http://www.huddletogether.com

For more information on this script, visit:
http://huddletogether.com/projects/lightbox/

Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
(basically, do anything you want, just leave my name and link)
Click to expand...

I've just noticed when entering this quote there is another tab on the "php". I thought php was 'personal home page' and some sort of code, don't understand it at all:confused:
Cheers
 
A

adamfishercox

macrumors 6502
Aug 15, 2007
474
10
Well what you could try is making your own very simple page and playing with the css. Something like this:

Code: 
<html>

<head>
<title>Title of the Webpage</title>


<style type="text/css" media="screen">
	@import url( style.css );
<!--The above tells the browser to look for the css file "style.css" to style the page with. "style.css" should be in the same folder as this HTML file-->
</style>

</head>
<body>

<h1>This is the header for the page</h1>
<h2>Here's the first subheader</h2>
<p>Here's a paragraph of text. Isn't it nice to write paragraphs?</p>
<a href="http://www.google.com">This links to Google</a>
<p class="special">This paragraph can look different because of it's different class.</p>

</body>
</html>

Make that into an HTML file, and open it in a browser. Then create the style.css file and start messing with stuff and see what happens to things. Here's a basic style.css:

Code: 
body {
background-color: green;
font-face: Helvetica, Arial, sans-serif;
/*The above line tells the browser to use Helvetica as the body font, or if Helvetica isn't installed, Arial, and as a last resort any sans-serif font.*/
}

p {
color: white;
}

.special {
text-decoration: underline;
}

/*add in selectors for H1, H2, and any other tags you add*/

Also curious, what are you using for your web development? I'd recommend something like Espresso for you as you seem to be confused by the multitude of options; Espresso will suggest tags and attributes and makes it overall a very enjoyable experience to code.
 
Dal123

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
Dreamweaver mx 2004

That's what I'm using, I have been constructing a basic page in dreamweaver and constantly checking it in a browser. For some reason I keep struggling with simple things like file location. Thank god dreamweaver has a tool for locating the file I need. I don't get it, I put in the code as dreamweaver lists it on other files but I still struggle. :confused:
Thanks for input, much appreciated.
Just realised I've tried writing a simple paragraph and nothing appears. Is this what happens in a css file?
And should I save my files as .xhtml as opposed to .htm?
Here is the code of what I have been trying so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Untitled Document</title>
<head>
<style type="text/css">
body
{
background-image: url("Images/Logo-Web.gif");
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50% 0%;
background-color:white
}
{
<ul id="navigation">
<li><a href="Website/Practice Page.htm">Home</a></li>
<li><a href="Website/Gallery.htm">Gallery</a></li>
</ul>
}
</head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body>

<p>check this tezt<p/>

</body>
</html>
Click to expand...
 
Dal123

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
I'm trying to format 'contact us' as a different class/id so there is no padding on the right, I have tried reducing it's width in css no luck, tried floating right, no joy. I would like it to be flush on the right.
Just realised also that here I am sizing it all in pixels, but if the user has not the same font as I'm using, their substitute will not align correctly and look crap. EM's wouldn't solve this problem I don't think as that's just another scaled measurement.:eek:
CSS:
HTML: 
}
#no_pad li {
padding-right:0px;
text-align:right;
width:150px;
}
#navbar {
padding:15px 0px 8px 0px;
}

#navbar ul{
list-style:none;
margin:0px;
padding:0px;
padding:0px:
float:left;
}
#navbar li{
font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
font-size: 1.8em;
display:inline;
width:225px;
padding:0px 30px 0px 0px;
margin:0px;
line-height:0px;
}
HTML:
<div id="navbar">
<ul id="nav_list">
<li><a href="index.htm">home</a></li>
<li>services</li>
<li><a href="gallery.htm">previous jobs</a></li>
<li>guarantee</li>
<li id="no_pad">contact us</li>
</ul>
</div>
 

Attachments

  • Picture 4.png
    Picture 4.png
    790.4 KB · Views: 327
C

Cerebrus' Maw

macrumors 6502
Mar 9, 2008
409
1
Brisbane, Australia
Dal123 said:
That's what I'm using, I have been constructing a basic page in dreamweaver and constantly checking it in a browser. For some reason I keep struggling with simple things like file location. Thank god dreamweaver has a tool for locating the file I need. I don't get it, I put in the code as dreamweaver lists it on other files but I still struggle. :confused:
Thanks for input, much appreciated.
Just realised I've tried writing a simple paragraph and nothing appears. Is this what happens in a css file?
And should I save my files as .xhtml as opposed to .htm?
Here is the code of what I have been trying so far:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Untitled Document</title>
<head>
<style type="text/css">
body
{ 
background-image: url("Images/Logo-Web.gif");
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50% 0%;
background-color:white 
}
{
<ul id="navigation">
<li><a href="Website/Practice Page.htm">Home</a></li>
<li><a href="Website/Gallery.htm">Gallery</a></li>
</ul>
}
</head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body>

<p>check this tezt<p/>

</body>
</html>
Click to expand...

Ok, lets do this one at a time.

First up, your style tags are not closed.

Second, what goes into your style tags is just that. Style. Presentation. It should not contain content. I don't know what your trying to achieve here (maybe a typo mistake?)

Code: 
<ul id="navigation">
<li><a href="Website/Practice Page.htm">Home</a></li>
<li><a href="Website/Gallery.htm">Gallery</a></li>
</ul>
This belongs in your body content tag, not in your head.

Third, your closing paragraph tag should have the slash before the p, not after. </p> , instead of <p/>

The slash only comes at the end of childless elements, such as image tags, input tags.

Keep experimenting with it...
 
NutsNGum

NutsNGum

macrumors 68030
Jul 30, 2010
2,856
367
Glasgow, Scotland
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom