Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 15
  1. #1
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    I've done a simple menu in CSS and it WAS all working fine (except in IE, where the layout is disjointed)
    I set one of the <li> classes to "current" and set up the CSS to make the current page tab a different colour (white with black text). However, once I removed the hyperlink from the gallery tab on the gallery page (i.e. stopped you selecting the tab to re-load the page" i got a large white background behind the current tab when in reality just the tab should be white. Confused? Here's the link www.17minutes.co.uk

    here's the CSS:
    Code:
    #gallerymenu , #indexmenu    {
                                width:810px;
                                height:60px;
                                color: #000000;
                                font-size:200%;
                                text-align: center;
                                border-bottom: solid #333333 3px;
                                }
    #gallerymenu li , #indexmenu li    {
                                list-style-type:none;
                                width:5em;
                                text-align:center;
                                float:left;
                                padding:1px;
                                padding-top:28px;
                                }
    #gallerymenu a:link , #indexmenu a:link    {
                                            text-decoration:none;
                                            color:black;
                                            display:block;
                                            background-color:#666666;
                                            }
    #gallerymenu a:visited , #indexmenu a:visited    {
                                                text-decoration:none;
                                                color:black;
                                                background-color:#666666;
                                                }
    
    #gallerymenu a:hover , #indexmenu a:hover    {
                                            background-color:#999999;
                                            }
    #gallerymenu a:active , #indexmenu a:active    {
                                                background-color:#FFFFFF;
                                                color:#000000;
                                                }
    #gallerymenu ul li.current  , #indexmenu ul li.current     {
                                                    background-color:#FFFFFF;
                                                    color:#000000;
                                                    }

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Can you post up the HTML?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Heres the hTML for the index page. i have changed the class names to "indexcurrent" and "gallerycurrent" for their respective classes and it made no difference.
    Code:
    <body>
    <div id = "all">
    <div id= "title">
    17minutes Photography
    </div>
    <div id = "indexmenu">
    <ul>
    <li class="indexcurrent"><a href = "index.html">Home</a></li>
    <li><a href = "gallery.html">Gallery</a></li>
    <li><a href = "mailto:lolowen999@gmail.com">Contact</a></li>
    <li><a href = "faq.html">FAQ</a></li>
    </ul>
    </div>
    <div id="indexpicture">
    <img src="images/Walkway.jpg" width="800px" height="540px"/>
    </div>
    </div>
    </body>

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    In the last line of your CSS, you apply the white bg to the li
    Code:
    #gallerymenu ul li.current  , #indexmenu ul li.current{
    Try applying it to the a instead, like so:
    Code:
    #gallerymenu ul a.current  , #indexmenu ul a.current{
    TheGAME1264 likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    What he said.

    Alternatively, you could set the line-height of your links to 5em.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Ronald - I tried that and whilst it got rid of the oversized background the white just doesn't appear at all now.
    heres the CSS
    Code:
    #gallerymenu ul a.gallerycurrent  , #indexmenu ul a.indexcurrent     {
                                                    background-color:#FFFFFF;
                                                    color:#000000;
                                                    }
    the tabs are also still disjointed in IE. do I need to be applying some "clear" to the floats?

    thanks, Lol

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I'm working it as I get time. I'll post the fix as soon as I have it done.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Hi Ronald, thanks for your help. I managed to get the white issue sorted out I'm just struggling now with the disjointed spacing in IE.

    Thanks, Lol

  10. #9
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I'm not seeing the "disjointed IE" issue, but try this CSS:
    Code:
    BODY#index {
        BACKGROUND-COLOR: #666666;
    }
    BODY#gallery {
        BACKGROUND-COLOR: #666666;
    }
    #all {
        BACKGROUND-COLOR: #999999; WIDTH: 810px; HEIGHT: 740px; COLOR: #000000; MARGIN-LEFT: auto; MARGIN-RIGHT: auto;
    }
    #title {
        TEXT-ALIGN: center; BACKGROUND-COLOR: #999999; WIDTH: 810px; HEIGHT: 50px; COLOR: #000000; FONT-SIZE: 300%;
    }
    #indexpicture {
        TEXT-ALIGN: center; PADDING-TOP: 40px;
    }
    #gallerymenu {
        BORDER-BOTTOM: #333333 3px solid; TEXT-ALIGN: center; WIDTH: 810px; HEIGHT: 60px; COLOR: #000000; FONT-SIZE: 200%;
    }
    #indexmenu {
        BORDER-BOTTOM: #333333 3px solid; TEXT-ALIGN: center; WIDTH: 810px; HEIGHT: 60px; COLOR: #000000; FONT-SIZE: 200%;
    }
    #gallerymenu LI {
        TEXT-ALIGN: center; PADDING-BOTTOM: 1px; LIST-STYLE-TYPE: none; PADDING-LEFT: 1px; WIDTH: 5em; PADDING-RIGHT: 1px; FLOAT: left; margin-TOP: 28px;
    }
    #indexmenu LI {
        TEXT-ALIGN: center; PADDING-BOTTOM: 1px; LIST-STYLE-TYPE: none; PADDING-LEFT: 1px; WIDTH: 5em; PADDING-RIGHT: 1px; FLOAT: left; margin-TOP: 28px;
    }
    #gallerymenu A:link {DISPLAY: block; COLOR: black; TEXT-DECORATION: none;
    }
    #indexmenu A:link {
        BACKGROUND-COLOR: #666666; DISPLAY: block; COLOR: black; TEXT-DECORATION: none;
    }
    #gallerymenu A:visited {
        BACKGROUND-COLOR: #666666; COLOR: black; TEXT-DECORATION: none;
    }
    #indexmenu A:visited {
        BACKGROUND-COLOR: #666666; COLOR: black; TEXT-DECORATION: none;
    }
    #gallerymenu li:hover {
        BACKGROUND-COLOR: #ffffff; COLOR: #000000;
    }
    #indexmenu A:hover {
        BACKGROUND-COLOR: #ffffff; COLOR: #000000;
    }
    BODY#index #indexcurrent {
        BACKGROUND-COLOR: #ffffff; COLOR: #000000;
    }
    BODY #gallerycurrent {
        BACKGROUND-COLOR: #ffffff; COLOR: #000000;
    }
    #gallerymenu A:active {
        BACKGROUND-COLOR: #ffffff; COLOR: #000000;
    }
    #indexmenu A:active {
        BACKGROUND-COLOR: #ffffff; COLOR: #000000;
    }
    #simplegallery1 {
        BORDER-RIGHT-WIDTH: 0px; WIDTH: 800px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 670px; VISIBILITY: hidden; MARGIN-LEFT: auto; BORDER-LEFT-WIDTH: 0px; MARGIN-RIGHT: auto;
    }
    #simplegallery1 .gallerydesctext {
        PADDING-BOTTOM: 2px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 2px;
    }
    #sv-container {
        WIDTH: 800px; HEIGHT: 670px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto;
    }
    Basically, I changed your padding-top to margin-top. Then, I removed the li selector from BODY #gallerycurrent. That was causing it to not change color at all for me, because you were actually targeting a child li that didn't exist.

    On a side note: you're over-using selectors. For ID's and classes, you only need the ID or class, not the stuff before it. Sometimes, you may need to use it for a class if you want to target a specific instance of a class that is used elsewhere, but that really isn't worth the *** pain. So, BODY#gallery #gallerycurrent can be shortened to just #gallerycurrent. I know it doesn't seem important, but it does actually slow page rendering.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #10
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Lol999, post: 204437
    Hi Ronald, thanks for your help. I managed to get the white issue sorted out I'm just struggling now with the disjointed spacing in IE.

    Thanks, Lol
    Well, dang. You must've wrote that just as I was telling you how to fix it. Ah, well...
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:28 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com