Journal #6352

Posted 14 years ago2010-01-27 01:52:53 UTC
I'm struggling to figure out how to do what I want with CSS. It's rather annoying. I'm building a website as part of my job. Without resorting to tables, frames or other ugly hacks, I want the layout to be simple. VERY simple. DISTURBINGLY simple.

What I want: A banner on top, a 4-item fixed navigation menu on the left column, text in the main area.

What I have: A banner on top, a 4-item fixed navigation menu on the left below the banner, text under the banner overlapping the menu. WHY?

Right now I'm testing inline then move out to linked CSS.

Code in my menu page:

<div id="menu" style="position:fixed;">
bla bla bla a-href menu items bla bla bla
</div>

I found position:fixed and position:absolute yield the same results. If I use float:left; the main text doesn't overlap it but wraps around it. I want it to be a column! GAAAHH!

Any ideas? Will be appreciated.

6 Comments

Commented 14 years ago2010-01-27 02:30:19 UTC Comment #61802
Huntey or Penguinboy will most likely help you out on this one. I wish I could, but my raw CSS code skills are rather limited, I tend to use a WYSIWYG style sheet editor for whenever I do a website involving CSS.
Commented 14 years ago2010-01-27 04:40:53 UTC Comment #61799
Post your html/css on your webspace (or pastebin.com if you don't have any) and I'll be happy to help.
Commented 14 years ago2010-01-27 08:43:26 UTC Comment #61801
A fixed positioned element "follows" you while an absolute positioned element stays at the same position, when you scroll your web page. Do what the penguin suggested, but also upload a crappy MS Paint image showing what you want it to look like.

Learning CSS is really rewarding, you can sometimes reduce your (X)HTML or XML code to just a few lines (especially with XHTML5) and it allows you to make your website a lot more friendly to robots (for example search engine bots) and people with eye or reading problems, while increasing the sexiness of your website. Don't hesitate to ask more questions about CSS on TWHL, I know at least I will be happy to answer as many as I can and so will probably a couple of the other members as well.
Commented 14 years ago2010-01-27 12:45:05 UTC Comment #61803
Here PB. Any ideas or suggestions will be welcome. http://pastebin.com/m7d3f07de

Thanks for that potatis. In that case what I want is position:absolute. The test page was so short I didn't have to scroll it, hence I didn't notice the difference.

Edit: Here's what I want.
Commented 14 years ago2010-01-27 17:07:25 UTC Comment #61800
Commented 14 years ago2010-01-27 17:50:56 UTC Comment #61804
Yeah that exactly! Cool, thanks PB! :D

What a simple solution. I wonder how it didn't occur to me.

You must log in to post a comment. You can login or register a new account.