dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: CSS problems

  1. #1
    Join Date
    Aug 2003
    Posts
    25

    CSS problems

    Hi Y'All,
    I am trying my teeth at a CSS nav bar and I have two questions:
    1. How can I spread the nav bar across the entire width of the page?
    2. Can I have different background colors for the lines "Active Members" and any of the "Name" lines?
    3. How can I get the arrow image behind "Name1" on the same line as the name? Right now it's one line below.
    Thanks,
    Ed

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Main Nav Bar</title>
    <link href="../resources/navmain.css" rel="stylesheet">
    </head>
    <body>
    <nav>
    <ul>
    <li><a href="../index.html">The Club</a></li>
    <li><a href="../chefs.htm">The Chefs</a>
    <ul>
    <li><a href="../chefs.htm">Active Members</a></li>
    <li><a href="../chefs/name1.htm">Name1</a><img src=../arrow.gif></li>
    <li><a href="../chefs/name2.htm">Name2</a></li>
    </ul>
    </li>
    <li><a href="../index.html">Menus</a></li>
    <li><a href="../recipes.htm">Recipes</a>
    <ul>
    <li><a href="../recipes/appetizers/appetizers.htm">Appetizers</a></li>
    <li><a href="../recipes/salads/salads.htm">Salads</a></li>
    </ul>
    </li>
    <li><a href="../index.html">Pictures</a></li>
    <li><a href="../index.html">Links</a></li>
    </ul>
    </nav>
    </body>
    </html>

    body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
    }
    body {
    background: #909eab url(bg.png);
    font-family: Verdana, sans-serif; font-size: 11px; line-height: 12px;
    }
    nav {
    margin: 10px auto;
    text-align: left;
    }
    nav ul ul {
    display: none;
    }
    nav ul li:hover > ul {
    display: block;
    }
    nav ul {
    background: #efefef;
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 50px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
    }
    nav ul:after {
    content: ""; clear: both; display: block;
    }
    nav ul li {
    float: left;
    }
    nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
    nav ul li:hover a {
    color: #fff;
    }

    /* nav bar */
    nav ul li a {
    display: block; padding: 5px 5px;
    color: #757575; text-decoration: none;
    }
    nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
    }
    nav ul ul li {
    float: none;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a; position: relative;
    }
    nav ul ul li a {
    padding: 5px 5px;
    color: #fff;
    }
    nav ul ul li a:hover {
    background: #4b545f;
    }
    nav ul ul ul {
    position: absolute; left: 100%; top:0;
    }

  2. #2
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,381
    It would sure help if you were to use the BBcode.
    http://www.webdeveloper.com/forum/misc.php?do=bbcode

  3. #3
    Join Date
    May 2016
    Location
    Southern California
    Posts
    81
    To answer your first question, create a class in your css stylesheet, like in this example. Width is 100% and since your nav ul element has padding of 50px on left and right, adding box-sizing: border-box prevents your navbar from exceeding the viewport. To see what i mean, comment out the box-sizing.

    Code:
    .widenav {
        width: 100%;
        box-sizing: border-box; 
    }
    Next in your html, add the class name we created, into your nav's first ul element.
    HTML Code:
    <nav>
        <ul class="widenav">
    OK, now your second question... Yes you can have different background colors, font colors, etc. Same process as before. Create a new class name in your stylesheet and assign its properties. Names are not important, call them whatever you want, use something meaningful.
    Example:
    Code:
    .navitem {
        background: darkslateblue; // change to suit
    }
    Now add this to your page element. In this case add it to all your nested li elements that you want to have a this styling.

    HTML Code:
    <ul>
        <li class="navitem"><a href="../chefs.htm">Active Members</a></li>
    Question 3, simply move the img element into the link element. Make it part of the link.

    HTML Code:
    change this:
    <li class="navitem"><a href="../chefs/name1.htm">Name1</a> <img src=../arrow.gif></li>
    
    to:
    <li class="navitem"><a href="../chefs/name1.htm">Name1 <img src=../arrow.gif></a></li>
    After this, add a new selector to the stylesheet, to handle alignment of the image with the link text.
    Code:
    nav li img {
        vertical-align: middle;
    }
    Note: when creating a class, a class name selector always has a dot before the name. An element selector has no dot like in last example above. You can also assign id selectors with a # instead of a dot. Id selectors are used when you want to target a specific, unique page element by its ID. In other words a class selector can be used for many page elements, an id selector for one page element.

    For more in depth info, I suggest reading up on CSS. Here is a link:
    https://www.w3schools.com/css/

  4. #4
    Join Date
    Aug 2003
    Posts
    25
    Zorg,
    I'm working on your suggestions and everything works fine so far, thanks a lot.
    I realize that I have to learn a lot about CSS, will take a while.
    Another question re your first answer: the nav bar stretches across the whole width but the 6 buttons are aligned left. How do I get them to stretch across the whole width?
    And where is the font color of the main bar set? I can't seem to find that in the style sheet.
    Ed

  5. #5
    Join Date
    May 2016
    Location
    Southern California
    Posts
    81
    Glad it works!

    Your nav selector in the stylesheet is already set to text-align: center but you're floating it to the left; this needs to change:

    HTML Code:
    nav ul li {
        float: left; // remove this
        display: inline-block; // add this instead will align each li side by side
        width: 10vw; // adding this will make the width responsive to the viewport width, 10vw is 10% relative to width of viewport - change to suit 
    }
    
    // create a new submenu class and inherit the width of main nav item
    .submenu {
        width: inherit;
    }
    You want to add the submenu class to the nested ul elements:

    HTML Code:
    <li><a href="../chefs.htm">The Chefs</a>
        <ul class="submenu">
     ...
    Menu items should now be aligned in the center of page with menu items spaced out.

    Text color is defined by the color property:

    Code:
    nav ul li a {
        display: block; 
        padding: 5px 5px;
        color: #757575; // this is the text color, look online for color HEX values
        text-decoration: none;
    }

  6. #6
    Join Date
    Aug 2003
    Posts
    25
    Thanks again, you've been very helpful, much appreciated.
    Ed

  7. #7
    Join Date
    Aug 2003
    Posts
    25
    Zorg,
    Please check the attached screen shot.
    The nav bar has spread out but it does not seem to be centered.
    I'm sure I did something wrong, or?
    Thanks again,
    Ednavbar.jpg

  8. #8
    Join Date
    May 2016
    Location
    Southern California
    Posts
    81
    Make sure you removed the float: left from the nav ul li selector. If this doesn't work, what else was added to the css?

    I'm glad to help, but i really can't tell you forsure from a screen shot. It's like sending a mechanic a pic of your engine.

  9. #9
    Join Date
    Apr 2017
    Posts
    17
    nice post,thanks for sharing.

  10. #10
    Join Date
    Aug 2003
    Posts
    25
    I have removed the float:left selector but I have also tried to customize the nav bar a bit and may have, inadvertently, screwed things up a bit. I have attached the files again.

    There are a couple of things I couldn't figure out despite several hours of messing with CSS:
    1. The centering of the nav bar
    2. Is there any way to make the pull down cells not so high as the main nav bar?
    3. Same goes for the font size, when I make the main bar font bigger, the pulldown font gets bigger too.
    Thanks again for all your help and your patience with me.
    Ed

    body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
    }
    body {
    font-family: Verdana, sans-serif; font-size: 12px; line-height: 20px;
    }
    .navitem {
    background: #FFB263;
    }
    nav {
    margin: 10px auto;
    text-align: left;
    }
    .widenav {
    width: 100%;
    box-sizing: border-box;
    }
    nav ul ul {
    display: none;
    }
    nav ul li:hover > ul {
    display: block;
    }
    nav ul {
    background: #738610;
    background: linear-gradient(#738610 0%, #bbbbbb 100%);
    background: -moz-linear-gradient(#738610 0%, #bbbbbb 100%);
    background: -webkit-linear-gradient(#738610 0%,#bbbbbb 100%);
    box-shadow: 0px 0px 2px rgba(0,0,0,0.15);
    padding: 0 50px;
    border-radius: 5px;
    list-style: none;
    position: relative;
    display: inline-table;
    }
    nav ul:after {
    content: ""; clear: both; display: block;
    }
    nav ul li {
    float: center;
    display: inline-block;
    width: 14vw;
    }
    .submenu {
    width: inherit;
    }
    nav ul li:hover {
    background: #8B4513;
    background: linear-gradient(#4f5964 0%, #BBBBBB 50%);
    background: -moz-linear-gradient(#4f5964 0%, #BBBBBB 50%);
    background: -webkit-linear-gradient(#4f5964 0%,#BBBBBB 50%);
    }
    nav ul li:hover a {
    color: #0A4877;
    }

    /* nav bar */
    nav ul li a {
    display: block; padding: 5px 5px;
    color: #FFFFFF; text-decoration: none;
    }
    nav ul ul {
    background: #FFFBC6; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
    }
    nav ul ul li {
    float: none;
    border-top: 1px solid #FF0000;
    border-bottom: 0; position: relative;
    }
    nav ul ul li a {
    padding: 5px 5px;
    color: #fff;
    }
    nav ul ul li a:hover {
    background: #FFB263;
    }
    nav ul ul ul {
    position: absolute; left: 100%; top:0;
    }


    </head>
    <body>
    <ul>
    <nav>
    <ul class="widenav">
    <li><a href="../index.html">The Club</a></li>
    <li><a href="../chefs.htm">The Chefs</a>
    <ul class="submenu">
    <li class="navitem"><a href="../chefs.htm"><img src=../arrow2.gif>&nbsp;<b>Active Chefs</b></a></li>
    <li><a href="../chefs/name1.htm"><img src=../arrow.gif>Name1</a></li>
    <li><a href="../chefs/name2.htm"><img src=../arrow.gif>Name2</a></li>
    </ul>
    </li>
    <li><a href="../index.html">Menus</a></li>
    <li><a href="../recipes.htm">Recipes</a>
    <ul class="submenu">
    <li><a href="../recipes/appetizers/appetizers.htm"><img src=../arrow.gif>Appetizers</a></li>
    <li><a href="../recipes/salads/salads.htm"><img src=../arrow.gif>Salads</a></li>
    <li><a href="../recipes/soups/soups.htm"><img src=../arrow.gif>Soups</a></li>
    <li><a href="../recipes/pasta/pasta.htm"><img src=../arrow.gif>Pasta, Rice, etc.</a></li>
    <li><a href="../recipes/beef/beef.htm"><img src=../arrow.gif>Beef, Veal, etc.</a></li>
    <li><a href="../recipes/pork/pork.htm"><img src=../arrow.gif>Pork</a></li>
    <li><a href="../recipes/poultry/poultry.htm"><img src=../arrow.gif>Poultry</a></li>
    <li><a href="../recipes/seafood/seafood.htm"><img src=../arrow.gif>Seafood</a></li>
    <li><a href="../recipes/salads/salads.htm"><img src=../arrow.gif>Salads</a></li>
    <li><a href="../recipes/veggies/veggies.htm"><img src=../arrow.gif>Veggies</a></li>
    <li><a href="../recipes/desserts/desserts.htm"><img src=../arrow.gif>Desserts</a></li>
    </ul>
    </li>
    <li><a href="../index.html">Pictures</a></li>
    <li><a href="../index.html">Links</a></li>
    </ul>
    </nav>
    </body>

  11. #11
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,381
    For easier reading PLEASE use the bbcode.
    http://www.webdeveloper.com/forum/misc.php?do=bbcode

  12. #12
    Join Date
    Aug 2003
    Posts
    25
    Train,
    I do not understand what you are asking me.
    I have submitted clean code that should be easily understood.
    Maybe you could send me an example of what you exactly mean?
    Thanks,
    Ed

  13. #13
    Join Date
    May 2016
    Location
    Southern California
    Posts
    81
    Ed, for what you're trying to do, we need to rewrite and combine some of your CSS. What i did is add text sizing and alignment. Combined, removed and renamed some selectors that were not needed.

    Create a new CSS file (keep your current one for backup) and copy/paste this:
    Code:
    body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
        margin: 0; padding: 0; border: 0;
    }
    
    body {
        font-family: Verdana, sans-serif; font-size: 12px; line-height: 20px;
    }
    
    /*-- nav elements --*/
    nav {
        margin: 10px auto;
        text-align: center;
    }
    
    /* nav images */
    nav img {
        vertical-align: middle;
    }
    
    /*--- widenav class ---*/
    .widenav {
        width: 100%;
        box-sizing: border-box;
        background: #738610;
        background: linear-gradient(#738610 0%, #bbbbbb 100%);
        background: -moz-linear-gradient(#738610 0%, #bbbbbb 100%);
        background: -webkit-linear-gradient(#738610 0%,#bbbbbb 100%);
        box-shadow: 0px 0px 2px rgba(0,0,0,0.15);
        padding: 0 50px;
        border-radius: 5px;
        list-style: none;
        position: relative;
        display: inline-table;
    }
    
    /* widenav line item elements */
    .widenav li {
        display: inline-block;
        width: 14vw;
    }
    
    /* widenav links */
    .widenav a {
        display: block;
        padding: 5px 5px;
        color: #FFFFFF;
        text-decoration: none;
        text-align: center;
        font-size: 1.5em;
    }
    
    /* widenav link on line item hover */
    .widenav li:hover a {
        color: #0A4877;
    }
    
    /* widenav line item hover */
    .widenav li:hover {
        background: #8B4513;
        background: linear-gradient(#4f5964 0%, #BBBBBB 50%);
        background: -moz-linear-gradient(#4f5964 0%, #BBBBBB 50%);
        background: -webkit-linear-gradient(#4f5964 0%,#BBBBBB 50%);
    }
    
    /* submenu show on line item hover */
    .widenav li:hover > .submenu {
        display: block;
    }
    
    /*--- submenu class ---*/
    .submenu {
        background: #FFFBC6;
        border-radius: 0px;
        padding: 0;
        position: absolute;
        width: inherit;
        display: none;
    }
    
    /* submenu line item */
    .submenu li {
        border-top: 1px solid #FF0000;
        border-bottom: 0;
        position: relative;
    }
    
    /* submenu link */
    .submenu a {
        padding: 0;
        text-align: left;
        font-size: 1em;
    }
    
    /* submenu line item hover */
    .submenu li:hover {
        background: #FFB263;
    }
    
    /*--- nav item class ---*/
    .navitem {
        background: #FFB263;
    }
    I added comments to each css selector block to help define its purpose. I should of explained before, that a class selector is used to style specific page elements. The element selector (css selector without a dot) is used to target all matching page elements for that selector. Typically this is done to create the base style for the element, then you create a class to style it even further.

    example:
    Code:
    this targets all ul page elements
    ul {
    ...
    
    this targets all ul elements within submenu class
    .submenu ul {
    ...
    FYI: What Train was saying is, when posting your code on these forums, you should wrap your code in BBcode, kind of like html (follow the link in Train's reply). See when i'm posting code, it looks different from when you're posting your code? It helps distinguish and to read it.

    Here is how, wrap in code blocks:
    [CODE]Your Code Here[/CODE]

    Hope this helps. Navbar looks great, keep it up!

  14. #14
    Join Date
    Aug 2003
    Posts
    25
    Zorg,
    It looks great and I really appreciate the comments. Makes it a lot easier for me to play around with it.
    Thanks a bunch, I am very grateful.
    Ed

  15. #15
    Join Date
    May 2016
    Location
    Southern California
    Posts
    81
    Awesome! Glad to help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles