Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Jul 26, 2009, 04:29 PM   #1
Dal123
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: England
Navigation bar in CSS so fixed on page (always accesible)

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 .

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!
Dal123 is offline   0 Reply With Quote
Old Jul 26, 2009, 05:22 PM   #2
adamfishercox
macrumors 6502
 
Join Date: Aug 2007
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.*/
}
__________________
Web, Icon and UI Designer adamfishercox.com
adamfishercox is offline   0 Reply With Quote
Old Jul 26, 2009, 05:50 PM   #3
shesmu
macrumors newbie
 
Join Date: Jul 2009
Location: Ukraine
Be aware that position: fixed doesn't work properly in IE.

You may want to check this links for examples:
http://tagsoup.com/cookbook/css/fixed/
http://www.artlebedev.com/tools/tech...fixed_in_msie/
shesmu is offline   0 Reply With Quote
Old Jul 27, 2009, 10:47 AM   #4
Dal123
Thread Starter
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: England
Wow thanks, I could've been in trouble there. IE is 70% of the market, I could've really come unstuck there.
Dal123 is offline   0 Reply With Quote
Old Jul 27, 2009, 10:52 AM   #5
michael.lauden
macrumors 68020
 
michael.lauden's Avatar
 
Join Date: Dec 2008
just do an absolute position with units px

pretty simple
michael.lauden is offline   0 Reply With Quote
Old Jul 28, 2009, 04:11 AM   #6
Dal123
Thread Starter
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: England
Quote:
Originally Posted by michael.lauden View Post
just do an absolute position with units px

pretty simple
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 ?
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?
Quote:
#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; }

Last edited by Dal123; Jul 28, 2009 at 06:08 AM.
Dal123 is offline   0 Reply With Quote
Old Jul 28, 2009, 01:26 PM   #7
memco
macrumors regular
 
Join Date: May 2008
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>
[/HTML]

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>
[/HTML]

As you can see, same basic list, just more markup.
memco is offline   0 Reply With Quote
Old Jul 29, 2009, 06:23 AM   #8
Dal123
Thread Starter
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: 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 .
I have also tried copy and pasting
Quote:
<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>
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.

Last edited by Dal123; Jul 29, 2009 at 07:56 AM.
Dal123 is offline   0 Reply With Quote
Old Jul 29, 2009, 10:36 AM   #9
adamfishercox
macrumors 6502
 
Join Date: Aug 2007
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;
}
__________________
Web, Icon and UI Designer adamfishercox.com

Last edited by adamfishercox; Jul 29, 2009 at 10:59 AM.
adamfishercox is offline   0 Reply With Quote
Old Jul 29, 2009, 10:46 AM   #10
memco
macrumors regular
 
Join Date: May 2008
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 */
}
[/HTML]

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

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 */
}
[/HTML]

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.
memco is offline   0 Reply With Quote
Old Jul 29, 2009, 12:20 PM   #11
Dal123
Thread Starter
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: England
Thanks.

Cheers guys, I've already printed out every single tutorial on 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. I just wish w3schools had a little more in depth examples.
Thanks again.
Dal123 is offline   0 Reply With Quote
Old Jul 29, 2009, 01:08 PM   #12
adamfishercox
macrumors 6502
 
Join Date: Aug 2007
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.
__________________
Web, Icon and UI Designer adamfishercox.com
adamfishercox is offline   0 Reply With Quote
Old Jul 29, 2009, 04:03 PM   #13
Dal123
Thread Starter
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: 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 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
Quote:
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)
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
Cheers
Dal123 is offline   0 Reply With Quote
Old Jul 29, 2009, 04:18 PM   #14
adamfishercox
macrumors 6502
 
Join Date: Aug 2007
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.
__________________
Web, Icon and UI Designer adamfishercox.com
adamfishercox is offline   0 Reply With Quote
Old Jul 29, 2009, 04:38 PM   #15
Dal123
Thread Starter
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: 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.
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:
Quote:
<!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>

Last edited by Dal123; Jul 29, 2009 at 05:06 PM.
Dal123 is offline   0 Reply With Quote
Old Sep 2, 2009, 06:42 AM   #16
Dal123
Thread Starter
macrumors 6502a
 
Dal123's Avatar
 
Join Date: Oct 2008
Location: 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.
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]
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>
Attached Thumbnails
Click image for larger version

Name:	Picture 4.png
Views:	114
Size:	790.4 KB
ID:	191956  
__________________
concretestairslondon.co.uk

Last edited by Dal123; Sep 2, 2009 at 10:32 AM.
Dal123 is offline   0 Reply With Quote
Old Sep 2, 2009, 07:46 AM   #17
Cerebrus' Maw
macrumors 6502
 
Join Date: Mar 2008
Location: Brisbane, Australia
Quote:
Originally Posted by Dal123 View Post
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.
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>
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...
__________________
Some say the end is near.
Some say we'll see armageddon soon.
I certainly hope we will.
I sure could use a vacation
Cerebrus' Maw is offline   0 Reply With Quote
Old Jan 17, 2013, 05:25 AM   #18
nancyfromafrica
macrumors member
 
Join Date: Sep 2012
Location: Johannesburg
You should try this code
strip{
position: fixed;
z-index:1;
width:100%;
}
__________________
still waiting to buy an iPhone 5
nancyfromafrica is offline   0 Reply With Quote
Old Jan 17, 2013, 11:28 AM   #19
NutsNGum
macrumors 68030
 
NutsNGum's Avatar
 
Join Date: Jul 2010
Location: Glasgow, Scotland
Quote:
Originally Posted by shesmu View Post
Be aware that position: fixed doesn't work properly in IE.

You may want to check this links for examples:
http://tagsoup.com/cookbook/css/fixed/
http://www.artlebedev.com/tools/tech...fixed_in_msie/
It works fine so long as you declare a doctype in IE7+.

Only IE6 truly craps itself, as usual, but if people are still building sites for ie6 compatibility, they're shooting themselves in both kneecaps.
NutsNGum is offline   0 Reply With Quote
Old Jan 17, 2013, 01:15 PM   #20
manueld
macrumors 6502
 
Join Date: Jun 2009
wow you guys are digging up some really old stuff - this was from 2009. O.o
manueld is offline   0 Reply With Quote
Old Jan 18, 2013, 07:03 PM   #21
Laird Knox
macrumors 65816
 
Join Date: Jun 2010
The OP might have been struggling through the w3shcools docs for the last several years.
Laird Knox is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Resolved: Use View With Tab Bar & With Navigation Bar PBG4 Dude iPhone/iPad Programming 2 Mar 26, 2014 08:04 AM
Navigation Bar is OVER the UIViewWeb? Vlad1k iPhone/iPad Programming 6 Sep 16, 2013 03:17 PM
navigation controller bar is cutting off tranvutuan iPhone/iPad Programming 0 Sep 13, 2013 09:55 AM
Adding a navigation bar in Keynote frankmoss Mac Applications and Mac App Store 0 Aug 16, 2013 08:41 AM
Fixed Navigation on Top of Page tuffguy515 Web Design and Development 2 Dec 10, 2012 11:06 PM

Forum Jump

All times are GMT -5. The time now is 06:29 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC