Programming Forums > Web Development and Design > HTML / XHTML / CSS

a thing · Jul 28th, 2006, 4:24 PM

For the navigation, you could just use an unordered list.

To get it to stay in the same place on the screen when the user scrolls down, I think you have to use frames.

sittingbull · Jul 28th, 2006, 5:29 PM

Okay, I finally firgured it out. With what Sane gave me, some researching, and a lot of trial n error this is what I got.....

Here's the html:
[HTML]
<body>

<div id="wrap">

<div id="masthead" align="center"> Buckeye Underground Dog Fencing </div>
<div id="container">
<div id="leftnav">

<ul id="navag">
<li> <a class="one" href="index.html">Home</a> </li>
<li> <a class="one" href="services.html">Services</a>
<li> <a class="one" href="products.html">Products</a>
<li> <a class="one" href="contact.html">Contact Us</a>
</ul>
</div>
</div>
</head>
</div>
</body>[/HTML]

This is the CSS:
[HTML]
#wrap {width: 100%; height: 100% }

#container
{ float:left; border: 3px solid #000000;
margin: 0 auto;
width: 175px;
height: 500px;
background-color: white;}

#leftnav {align: center;
font-size: 16px;
font-weight: bold;
height: 20px;
background-color: white;

}

#navag li { margin: 0; padding: 0; display: block;}

#navag li a, #navag li a:link, #navag a:visited {
background-image:url("grass.gif");
background-repeat: no-repeat;
background-color:#E8EEFA;
text-align: center;
align:center;
padding: 10px 0 0 0;
display: block;
color: black
height: 20px;
text-decoration: none;}[/HTML]

I'm liking the way it looks! Thanks for the help everybody! Forwards I move....

Booooze · Jul 28th, 2006, 10:55 PM

Quote:

Originally Posted by a thing

For the navigation, you could just use an unordered list.

To get it to stay in the same place on the screen when the user scrolls down, I think you have to use frames.

There is a fixed property, but I think he just want the nav box to span, not stay fixed on the page.

@sittingbull - Way to go

DaWei · Jul 30th, 2006, 11:00 AM

I would recommend putting frames at the bottom of your arsenal locker, out of reach. There are better alternatives. Personal viewpoint, of course.

sittingbull · Aug 31st, 2006, 9:41 AM

After messing with it a lot more, I changed things up again.
Check it out here. Look better?

megamind5005 · Aug 31st, 2006, 6:32 PM

Hi guys, just jumping in to make a comment about what Arevos said about using lists for navigation links.

I'm also making a website for a client, and whilst fiddling around with the design, I also thought of using lists for the navigation, since each <li> is a block element and that's handy. But just a few hours ago, I had a bit of an insight: I changed the links from being in lists to <a> tags on their own, but added a CSS style that's something like:

(Toggle Plain Text)

#siteMenu a {display: block;}

This acheives the same thing as I wanted before, i.e. links in block elements, but has the added advantage that I can change the background colour of the whole line containing the link on hover ( #siteMenu a:hover {background: white;} ). Before, this wasn't very pretty at all.

I know that lists are a logical way of structuring the navigation and that's a part of the philosophy behind XHTML/CSS (and I am a follower of it), but I think this could be a cleaner way of doing it sometimes, and it looks ok with CSS disabled, too.

Just a thought

P.S. if you want to have a look at what it looks like, the page is temporarily up here. Forgive any visual bogies that may appear on your screen, I haven't fully tested it yet

Jul 28th, 2006, 4:24 PM	#21
a thing Unverified User Join Date: Aug 2005 Location: none Posts: 146 Rep Power: 0	For the navigation, you could just use an unordered list. To get it to stay in the same place on the screen when the user scrolls down, I think you have to use frames. __________________ Warning: My posts may change (dramatically) within the first 15 minutes they're posted. Got 'Nux?�GNU/Linux and other free software support. It's GNU/Linux, not just Linux.

Jul 28th, 2006, 5:29 PM	#22
sittingbull Newbie Join Date: Jun 2006 Posts: 12 Rep Power: 0	Okay, I finally firgured it out. With what Sane gave me, some researching, and a lot of trial n error this is what I got..... Here's the html: [HTML] <body> <div id="wrap"> <div id="masthead" align="center"> Buckeye Underground Dog Fencing </div> <div id="container"> <div id="leftnav"> <ul id="navag"> <li> <a class="one" href="index.html">Home</a> </li> <li> <a class="one" href="services.html">Services</a> <li> <a class="one" href="products.html">Products</a> <li> <a class="one" href="contact.html">Contact Us</a> </ul> </div> </div> </head> </div> </body>[/HTML] This is the CSS: [HTML] #wrap {width: 100%; height: 100% } #container { float:left; border: 3px solid #000000; margin: 0 auto; width: 175px; height: 500px; background-color: white;} #leftnav {align: center; font-size: 16px; font-weight: bold; height: 20px; background-color: white; } #navag li { margin: 0; padding: 0; display: block;} #navag li a, #navag li a:link, #navag a:visited { background-image:url("grass.gif"); background-repeat: no-repeat; background-color:#E8EEFA; text-align: center; align:center; padding: 10px 0 0 0; display: block; color: black height: 20px; text-decoration: none;}[/HTML] I'm liking the way it looks! Thanks for the help everybody! Forwards I move.... __________________ rocking the newb status!

Jul 30th, 2006, 11:00 AM	#24
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	I would recommend putting frames at the bottom of your arsenal locker, out of reach. There are better alternatives. Personal viewpoint, of course. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Aug 31st, 2006, 9:41 AM	#25
sittingbull Newbie Join Date: Jun 2006 Posts: 12 Rep Power: 0	After messing with it a lot more, I changed things up again. Check it out here. Look better? __________________ rocking the newb status!

Aug 31st, 2006, 6:32 PM	#26
megamind5005 Programmer Join Date: Dec 2004 Location: UK Posts: 53 Rep Power: 4	Hi guys, just jumping in to make a comment about what Arevos said about using lists for navigation links. I'm also making a website for a client, and whilst fiddling around with the design, I also thought of using lists for the navigation, since each <li> is a block element and that's handy. But just a few hours ago, I had a bit of an insight: I changed the links from being in lists to <a> tags on their own, but added a CSS style that's something like: (Toggle Plain Text) #siteMenu a {display: block;} #siteMenu a {display: block;} This acheives the same thing as I wanted before, i.e. links in block elements, but has the added advantage that I can change the background colour of the whole line containing the link on hover ( #siteMenu a:hover {background: white;} ). Before, this wasn't very pretty at all. I know that lists are a logical way of structuring the navigation and that's a part of the philosophy behind XHTML/CSS (and I am a follower of it), but I think this could be a cleaner way of doing it sometimes, and it looks ok with CSS disabled, too. Just a thought P.S. if you want to have a look at what it looks like, the page is temporarily up here. Forgive any visual bogies that may appear on your screen, I haven't fully tested it yet __________________ Tetris is so unrealistic

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Sound Fixed!	Kilo	Coder's Corner Lounge	12	Jun 13th, 2006 7:34 AM
WMI Config Settings Fixed for SQL	john Wesley	Visual Basic .NET	0	Jun 8th, 2006 7:42 AM
Rich Text Boxes	brokenhope	Visual Basic	1	Sep 7th, 2005 3:34 PM
Text Boxes	fox123	Visual Basic	6	Jun 5th, 2005 3:31 PM
How do I make a fixed window?	dmorales	HTML / XHTML / CSS	5	Apr 25th, 2005 11:14 AM

Programming Forums > Web Development and Design > HTML / XHTML / CSS

Fixed boxes, how?