Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Would Someone Kindly Help me with some CSS?

    Hello,

    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:
    Code:
    #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.)
    Attached Files Attached Files

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Like this (btw, I tried your method, and it screws up the site's appearance in FireFox, but looks fine in IE. )
    Attached Thumbnails Attached Thumbnails Would Someone Kindly Help me with some CSS?-navbar_here.jpg  

  • #4
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Attached Files Attached Files
    Last edited by Kurashu; 03-17-2005 at 10:46 PM.

  • #5
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, thanks, I'll go try it out now.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •