Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: 2 different styled <ul><li> on one page?

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    631
    Thanks
    96
    Thanked 24 Times in 24 Posts

    Question 2 different styled <ul><li> on one page?

    I have one page that I'm making and I am stuck. The responsive navbar uses the `<ul><li>` and I want a different style below on the page. I didn't think much about it at first until I got this:

    Click image for larger version. 

Name:	wrong.jpg 
Views:	184 
Size:	19.7 KB 
ID:	5902

    What can I change to make the general list items in the page, not the menu, to look different?
    here is the live page

    here is my CSS code

    Code:
     /* General List */
        ul.b {
        list-style-type: disc;
        }
    
        /* Responsive Menu */
        #menuBackground {
            background:#5EA5B9;
            width:100%;
            height:50px;
            text-align: center;
         }
        #menuContainer {
            text-align: center;
            position: absolute;
            width: 90%;
            z-index: 1;
        }
        /*Strip the ul of padding and list styling*/
        ul {
            list-style-type:none;
            margin:0;
            padding:0;
        }
    
        /*Create a horizontal list with spacing*/
        li {
            display:inline-block;
            vertical-align: top;
        }
    
        /*Style for menu links*/
        li a {
            display:block;
            min-width:140px;
            height:50px;
            text-align:center;
            line-height:50px;
            font-family:Georgia;
            color:#fff;
            background:#5EA5B9;
            text-decoration:none;
            font-size: 1rem;
        }
    
        /*Hover state for top level links*/
        li:hover a {
        color: #036;     
             background:#fff
        }
    
        /*Prevent text wrapping*/
        li ul li a {
            width:auto;
            min-width:100px;
            padding:0 20px
        }
    
        /*Style 'show menu' label button and hide it by default*/
        .show-menu {
            font-family:Georgia;
            text-decoration:none;
            color:#fff;
            background:#5EA5B9;
            text-align:center;
            padding:16px 0;
            display:none;
            width:100%!important
        }
    
        /*Hide checkbox*/
        input[type=checkbox] {
            display:none
        }
    
        /*Show menu when invisible checkbox is checked*/
        input[type=checkbox]:checked ~ #menu {
            display:block;
            margin:0 auto
        }
    
        /*Responsive Styles*/
        @media screen and (max-width : 760px) {
            /*Make dropdown links appear inline*/
            ul {
                position:static;
                display:none;
              
              
                white-space: initial;
            }
            
            /*Make all menu links full width*/
            ul li,li a {
                width:100%
            }
            
            /*Display 'show menu' link*/
            .show-menu {
                display:block
            }
        }
    HTML Code:
    <div id="menuBackground">
            <div id="menuContainer">
                <label for="show-menu" class="show-menu">Show Menu</label>        <input type="checkbox" id="show-menu" role="button" />
                <ul id="menu">
                    <li><a href="index.html">Home</a>
                    </li>
                    <li><a href="accommodations.html">Accommodations</a>
                    </li>
                    <li><a href="amenities.html">Amenities</a>
                    </li>
                     <li><a href="rates.html">Rates</a>
                    </li>
                     <li><a href="links.html">Links</a>
                    </li>
                    <li><a href="contact.html">Contact</a>
                    </li>
                 </ul>
            </div>
        </div>
    Last edited by mlegg; 05-15-2016 at 03:04 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Your image didn't come through real well, best to link to a remote image. The forum often condenses uploaded images too much.

    In cases like this I usually resort to class distinctions of one sort or another. Sometimes id or element antecedent selectors will suffice/work better.

    Anyways this question almost answers itself. The tricky part can be that sometimes one has to be more specific than seems necessary to achieve the desired result.

    I'm not sure the exact result you want, but try, for example, this rule:

    Code:
    ul.b a {
        background: red;
    }
    I'm shooting around here, if I missed something, or you can be more specific, just ask or add on. If this gets it for you though (is enough of a spark) - Great!
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2009
    Location
    NH
    Posts
    631
    Thanks
    96
    Thanked 24 Times in 24 Posts

    Default

    I wasn't sure how well the image show that's why I linked to the temporary live page

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    OK (kinda got that), did what I said help?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2009
    Location
    NH
    Posts
    631
    Thanks
    96
    Thanked 24 Times in 24 Posts

    Default

    no and I've been messing with it for the whole day too.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    That (what I suggested) does make a difference in the look of the the ul.b a elements as opposed to the top menu links. I'm not saying it's exactly the difference you want, but it should light the way.

    However, if both of those were as you already wanted them and it's some other ul a elements (or something else) you want to affect, then you need an additional class (most likely) for those or some other way of distinctly selecting them. CSS (cascading style sheets) isn't as complicated as one might think. It cascades. If you want to interrupt that cascading effect, you need a distinct way of differentiating those elements you don't want to have following other rules.

    If that still doesn't turn the light on (and/or I'm missing the question) In simplest terms - What exactly on the page do you want to look exactly a certain way? (always easier to answer than a general question)
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    It looks like the CSS you provided, if it is only meant to target the menu, is way too general, so instead it affects all lists on the page.

    Building on what John said about needing a way to distinctly select the elements that you want affecting by the CSS (be it the menu or some other lists/elements)...

    ...To only target the menu, try making the menu CSS more specific (see my note at the bottom of this post re: specificity in CSS). For example, the menu is contained inside #menuContainer, so prefix all the general selectors with that so that only the ul and li elements within #menuContainer get the menu styles.

    Basic example;

    From ul { /* styles here */ }

    To #menuContainer ul { /* styles here */ }

    Then you have your main page content sat inside a #content element (that the menu is outside of) so you can target the ul/li elements located inside #content with a #content parent selector, like this #content ul { /* styles here */ }

    Note: Learn more about "specificity in CSS" https://www.google.co.uk/search?q=un...ificity+in+CSS
    Last edited by Beverleyh; 05-14-2016 at 06:57 AM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  8. #8
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    432
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    In addition to what Beverley wrote, I do find this a little bizarre:

    Code:
        /*Show menu when invisible checkbox is checked*/
        input[type=checkbox]:checked ~ #menu {
            display:block;
            margin:0 auto
        }
    It might be difficult to navigate the site for a user who accidentally clicks on an invisible checkbox and then finds that the menu disappears!

  9. #9
    Join Date
    Jan 2009
    Location
    NH
    Posts
    631
    Thanks
    96
    Thanked 24 Times in 24 Posts

    Default

    Thanks, that was what was in the code when I found it. I wasn't exactly sure what it did, and didn't bother to search it.

  10. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Quote Originally Posted by styxlawyer View Post
    In addition to what Beverley wrote, I do find this a little bizarre:

    Code:
        /*Show menu when invisible checkbox is checked*/
        input[type=checkbox]:checked ~ #menu {
            display:block;
            margin:0 auto
        }
    It might be difficult to navigate the site for a user who accidentally clicks on an invisible checkbox and then finds that the menu disappears!
    That's the style for the menu - to open it when the checkbox is checked.

    The actual checkbox is hidden with this, so it can't accidentally be triggered with a misplaced click/tap;
    Code:
        /*Hide checkbox*/
        input[type=checkbox] {
            display:none
        }
    The part that triggers the menu activation is the checkbox label - that's the part which is visible and can receive a click/tap, and its styled with this;
    Code:
        /*Style 'show menu' label button and hide it by default*/
        .show-menu {
            font-family:Georgia;
            text-decoration:none;
            color:#fff;
            background:#5EA5B9;
            text-align:center;
            padding:16px 0;
            display:none;
            width:100%!important
        }
    This technique is called "the checkbox hack" and is a way of simulating click activated interactions in CSS without the use of JavaScript.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  11. The Following User Says Thank You to Beverleyh For This Useful Post:

    mlegg (05-14-2016)

Similar Threads

  1. Cross-browser Styled Dropbox
    By KennyP in forum CSS
    Replies: 21
    Last Post: 08-25-2014, 03:39 PM
  2. Styled vertical nav bar
    By jhatter in forum CSS
    Replies: 1
    Last Post: 07-07-2010, 09:18 PM
  3. styled scrollbars?
    By tpravioti in forum CSS
    Replies: 6
    Last Post: 02-04-2010, 01:20 AM
  4. Styled Drop List
    By dude9er in forum CSS
    Replies: 1
    Last Post: 02-26-2009, 06:38 AM
  5. Two differently styled rich HTML tooltips on one page?
    By nevdev in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-08-2007, 11:39 PM

Tags for this Thread

Bookmarks

Posting Permissions

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