View Full Version : Would Someone Kindly Help me with some CSS?

03-17-2005, 08:37 PM

This is my first post on these forums. I'm working on a small website for my youth group, and would like some help getting a certain feature of it working.

Here's what it looks like:

Right, I've tried to get soemthing to work for a long time now, but can't. I'd really like to get the right hand side of the web page to hold a top-to-bottom text (maybe button) navbar, and I can't get that currently due to the following code in my CSS file, which I'm unsure of what to do with:

#content {
padding: 10px;
padding-bottom: 50px;
width: 30em;
overflow: auto;
background-color: #fff;

Someone helped me to get some of this code working, and also converted my document to XHTML. But since this is a CSS issue, I figured I'd post it in this forum.

Anyway, I'd like to change the "width: 30em" to "70%" or some similar dimension, and then have the navbar aligned with the right, at 25% or 30%. Sound simple enough? Well I'm just wondering how I do it, because whenever I've tried before, I've tried to make a "#nav" CSS class, but it's always been positioned beneath the "#content" class instead of to the right of it. Help is appreciated. Thanks! :)

(I've attached the files including the graphics, CSS, and XHTML.)

03-17-2005, 09:46 PM
well where exacly do u want the nav bar? can u draw like a picture of where you want the navbar to be on the screenshot you posted? you can change the width to 75% then float:left; that content div then right after the content div add another div this will be the navbar use css to set the width to 24% and use float:right; the navbar will go up to the tab, add a border around the navbar div so u can see what is happening to it

03-17-2005, 11:12 PM
Like this (btw, I tried your method, and it screws up the site's appearance in FireFox, but looks fine in IE. :( )

03-17-2005, 11:44 PM
This should do it for you. Also, You should use <h1> & <h2> before <h3> & <h4> (I put them in, and hid the <h1> with CSS).

The menu style came from Listamatic (Eric Meyer's Strengthening the links), but I'm sure you can figure out how to style it to your liking.

Edit: You need to change the <script language= to type=, other than that your xHTML (and my fixes) validate for XHTML 1.

03-18-2005, 12:01 AM
Wow, thanks, I'll go try it out now.