PDA

Click to See Complete Forum and Search --> : How do you lock the navigation menu in place with CSS?

blueberryrain
09-21-2007, 08:28 AM
How do you lock elements in place with CSS?

I want to lock the nav-menu on the left, so that it doesn't move when a user decreases the size of their browser window...but I don't want to use tables. How do you do it with CSS?
dtm32236
09-21-2007, 08:33 AM
without a link or code it's tough to see what you're talking about, but generally - assuming that the nav-menu is inside a div - you would use something like:

<div>
<div style="float:left;">nav-menu code</div>
</div>
skilled1
09-25-2007, 06:03 PM
with absolute positioning
Centauri
09-25-2007, 06:31 PM
with absolute positioning
WRONG.... absolute positioning is only needed for special purposes, and is usually the cause of things moving out of alignment when resizing the screen. Floating is the correct method as suggested by dtm32236.
onlinegamesnz
08-25-2010, 06:36 PM
so i know this is an old thread, but i need to do the exact same thing. heres my site
http://nchdesign.dnserver.net.nz/site1/

and i need to lock the DIV over the image so when the text size changes or resolution (holding ctrl + mouse wheel in/out is how i test) the DIV resizes with the image?

is this possible. at the moment im useing absolute positioning

cheers
andrewdavid
08-31-2010, 12:03 AM
It is always good to use table for the container because table can be aligned center and then use the dives with the reference of table. I dont know why user don't want to table while table always provide me the best solution.
iRedMedia
08-31-2010, 12:33 AM
Tables should ONLY be used when displaying tabular data. Never use tables to layout elements on a page. CSS is much more effective, and cleaner, and that's everybody wants.

If you want to display that background behind that text, set the background of the "wrapper" div to your guitar image. This will place it behind both the nav, content, etc..

Make sure you set repeat to none, and style it as you'd like. You should try and style your website simply using id's, instead of inline styles, like you have.

inline style:
<div style="background...>

What you should be doing, using id's, or classes... depending on your needs.
<body>
<div id="wrapper">
<div id="nav"></div>
<div id="main"></div>
</div>
</body>

now style it by placing this code anywhere in the <head> of your document
<style type="text/css">
body{}
#wrapper{background: url('...') no-repeat top center;}
</style>

Note: I moved the nav up, because your code should not only be semantic, but also placed in the order it appears.

On another note, if you'd like to specify the size of an image, and would like it to scale with the contents, use "em's". These use whole or decimal values, ie.. 1, 1.5, etc.

img{width:1.5em; height:1.5em} will scale all images 150%.
iRedMedia
08-31-2010, 12:40 AM
It is always good to use table for the container because table can be aligned center and then use the dives with the reference of table. I dont know why user don't want to table while table always provide me the best solution.

Because there are better ways to do this with CSS. For example: use display:table-cell, and vertical-align:... will allow you to align vertically, at least that's what I think you were trying to say.

Anything you can do with a table, you can do with a semantically correct approach, and you're code won't look like it was done by a kindergartner.