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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts

    A few CSS questions

    So, I'm pretty new to CSS, and have a couple questions. (Ok, I'll be honest... This is the first time I've actually tried writing my own CSS page. )

    First off, I currently have two divs (more might be added later). The main one, I would like to have centered, for the main content of the page. The second one is for the navigation, which I would like to keep at the left of the page. Now, this may be a bad idea (I'm not sure if it will work out good or not), but I would like to know if there is a way to keep the navagation on the screen as the user scrolls through the page.

    My second question is also related to the navigation. I'm using a seperate image for each button, and cannot figure out how to do a rollover for each button in CSS. Is this possible in CSS, or would I need to use JS?

    Last question for now: My current code is included below in it's entirety (minus the actual page text, because that's "confidential" right now). Should I be using a seperate CSS file, rather than keeping it all in one file? Each page will require some different CSS due to layout differences.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
    <title>Cartennes Nations - Home</title>
    <style type="text/css">
     
    <!--
     
    /* Begin Content Classes */
     
    * {
     margin:0;
     padding:0;
    }
     
    body {
     background-color:#000000;
     background-image:url(images/starfield1024_2.jpg);
     background-repeat:no-repeat;
    }
     
    .background {
     background-image:url(images/background.png);
     background-repeat:repeat;
     border-color:#CC6600;
     border-style:solid;
     border-width:2px;
     width:750px;
     height:auto;
     position:absolute;
     top:185px;
     left:215px;
    }
     
    #banner {
     background:none;
     width:750;
     height:180;
     position:absolute;
     left:215px;
    }
     
    #content {
     font-family:"Courier New", Courier, monospace;
     font-size:18px;
     color:#990000;
    }
     
    /* End Content Classes */
     
    /* Begin Navigation Classes */
     
    #nav {
     background-image:url(images/background.png);
     background-repeat:repeat;
     float:left;
     width:150px;
     height:600px;
     position:fixed;
     top:185px;
     left:0px;
     border:2px solid #CC6600;
    }
     
    a {
     font-family: Courier New, Courier, monospace;
     font-size: 12px;
     color: #CC6600;
    }
     
    a:link {
     text-decoration: none;
    }
     
    a:visited {
     text-decoration: none;
     color: #990000;
    }
     
    a:hover {
     text-decoration: underline;
     color: #990000;
    }
     
    a:active {
     text-decoration: none;
     color: #CC6600;
    }
     
    /* End Navigation Classes */
     
    -->
     
    </style>
    </head>
     
    <body>
     
    <!-- Begin banner map -->
     <div id="banner"><img src="images/NavBanner1.png" alt="Banner Image" width="750" height="180" border="0" usemap="#Map" />
         <map name="Map">
            <area shape="poly" coords="96,151" href="#">
            <area shape="poly" coords="97,152,153,152,138,173,81,173" href="index.html" target="_self">
           <area shape="poly" coords="165,152,224,152,206,172,147,173" href="about.html" target="_self">
            <area shape="poly" coords="235,152,292,152,275,173,217,174" href="contact.html" target="_self">
            <area shape="poly" coords="304,152,362,152,345,173,286,172" href="rules.html" target="_self">
         </map>
     </div>
     
    <!-- End banner map -->
     
    <!-- Begin site content -->
     
    <div class="background">
     <div id="nav">
     <a href="index.html">"</a>
     </div>
          <div id="content">Welcome to Cartennes Nations!
          <br />
          <br /> -snipped for a reason- </div>
     
    </div>
    </body>
    </html>
    I'm sure it's probably less than perfect, but I'm working on it. (That, and some formatting was apperently lost when I copied it.)

    Thank you for your time and assistance.

  • #2
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Part one:

    Yes, you can have the div stay on screen as the user scrolls.
    "position:fixed;" along with setting the left and top properties how you want them will keep it locked in place.

    Part two:
    the hover property can change the image or color or whatever as the item is hovered over
    example:
    Code:
    #nav #link1{
    background:URL('./images/link1.gif');
    }
    #nav #link1:hover{
    background:URL('./images/link1-hover.gif');
    When I use this method, i then use a full transparent 1x1 gif resized to the size needed for the <a> tag to wrap around. Some call it sloppy, I call it very efficient.

    Part three:
    Make yourself a base CSS file that will work globally. There is something to be said for efficiency in not having to load information for tags that won't be used on a specific page, but there's no sense in making 9 different CSS pages just to save 1K of loading each time. If there is one specific page that will use many tags that will ONLY appear on that page, it may make sense to create a supplemental stylesheet, however. Really, it just makes sense to use different tags for different components.

    I hope my run-on sentences made enough sense there.

  • #3
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Ok, so after all this time, I had only been previewing the page in FF... Bad mistake.

    Here's what it looks like in FF

    And now in IE


    What's up with that?!
    I don't think anything has changed in the code from what I posted previously... I just now decided to check it in IE. :/ By the way, in FF, it looks exactly like it's supposed to (aside from one image not displaying correctly, which may be my mistake, need to check on that) but in IE, it's floating the navigation on top of the other div. Changing the "position:" to various options (fixed, absolute, etc) will change where it floats inside the other div, but none of them will magically put it in the right place. (which is supposed to be to the left of the other div, like it is in FF)

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    By the way... I'm an idiot. I think I just figured it out.


    I guess I'll find out tomorrow... Err... In 6 1/2 hours, I mean.


    Yep... Fixed. It should have been painfully obvious, too. :/
    Last edited by Aceramic; 10-23-2007 at 04:21 PM.


  •  

    Posting Permissions

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