Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS border-right or vertical bar on menu

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #165243
    tracybags
    Participant

    Hello Gurus!
    I am trying to do a vertical white divider on a css menu. I have tried using the “|” in the content and that worked nicely except that on rollover, the block doesn’t go up to the “|”. You can see what I mean here http://www.charlieapple.co.uk/hamilton/index2.html

    So the next advice I got was to use the right border, which is great and solves the above problem. BUT, and here’s where I need your cleverness – the border runs the full height top to bottom of the right side and what I want to do is make it shorter so it looks like the |

    I suspect I need to use the corner radius thing set to 0 or to transparent or something to make the top and bottom of the border disappear leaving only the middle bit. Am I on the right lines? Can anyone give me the right coding for this? You can see this as it is now here http://www.charlieapple.co.uk/hamilton/index3.html.

    Thanks very much everyone!

    #165245
    Atelierbram
    Participant

    @tracybags
    Last link is broken … 404

    On top of my head: You can use a border all around, and give the top and bottom-border a border-bottom-color: transparent or border-top-color: #whatever-the-background-color. Last one won’t work in your case, because of gradient.

    #165247
    Paulie_D
    Member

    I’m confused….you don’t want the | because it’s not full height and you don’t want to use the border because it is full height.

    You could try increasing the font-size on the pseudo element though..that would probably work.

    #165250
    Atelierbram
    Participant

    Or give it a negative left and right margin:

    #navigation li:before {
     content: " | ";
     margin: 0 -0.5em;
    }
    
    #165251
    tracybags
    Participant

    Sorry, have fixed the link reported by Atelierbram
    Paulie_D – sorry to confuse you. I DO want the | that is not full height, but when you hover over it I want the white hover to stretch the full width from | to | which you can see is not happening.

    WORKING!!!! I have tried the negative left and right margin and it’s perfect!!! Thanks SOOO much Atelierbram.

    Next challenge!! When each page is visited, can I keep the white overlay static so it looks like you’re on that page with an open tabbed look, ie. the same look as when you’re hovering on that menu item. I’ve read something about “onlink” is that the way forward?

    Thank you soo very much.

    Thanks

    #165253
    Atelierbram
    Participant

    I’ve read something about “onlink” is that the way forward?

    Don’t know about that, sounds like javascript, wouldn’t go for that in this case.

    Something you will have to set up in your CMS or PHP, or what have you.
    Set either a current class on that nav-list-item, or a class on the body-tag, so you end up with something like:

    .current #navigation a,
     #navigation a:hover {
     color: #354777;
     text-decoration: none;
     background-color: #FFF;
     height: 31px;
    }
    
    #165254
    Paulie_D
    Member

    When each page is visited, can I keep the white overlay static so it looks like you’re on that page with an open tabbed look

    There’s a couple of ways to do that.

    Which implementation you use will depend in how many pages you have, how they are built, etc.

    #165269
    Atelierbram
    Participant

    There’s a couple of ways to do that. Which implementation you use will depend in how many pages you have, how they are built, etc.


    @tracybags

    May I ask what kind of set up you use, or want to use? Looking at the HTML source code suggests right now it’s static html-pages.

    #165271
    tracybags
    Participant

    Hi, yes it’s just going to be static pages for brochure site. Will include a slider and images on the main pages. so just html/css and I’m using Dreamweaver CS6 if that helps you to guide me :)

    I don’t think the onlink thing was java it’s here http://www.youtube.com/watch?v=NAKFvQlDipo if you want to take a look.

    Thanks so much :)

    #165274
    Atelierbram
    Participant

    Ok, now I see what you mean, makes sense to go with that then with static pages.
    So for example when editing the ‘reputation.html’ page you add that id (could also be a class) to the list-item:

    
    <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="index.html" class="">HOME</a></li>
            <li><a href="ourcompany.html" class="">OUR COMPANY</a></li>
            <li><a href="extensions-conversions.html" class="">EXTENSIONS & CONVERSIONS</a></li>
            <li><a href="ourguarantee.html" class="">OUR GUARANTEE</a></li>
            <li><a href="partners.html" class="">PARTNERS</a></li>
            <li id="onlink"><a href="reputation.html" class="">REPUTATION</a></li>
            <li><a href="contactus.html" class="">CONTACT US</a></li>
    </ul> 
    
    
    .MenuBarHorizontal #onlink a,
     .MenuBarHorizontal a:hover {
     color: #354777;
     text-decoration: none;
     background-color: #FFF;
     height: 31px;
    }
    
    #165275
    Paulie_D
    Member

    The video describes what Atelierbram was referring to except he used a class where the video used an ID.

    It’s just the ID/Class would be on a different anchor on each respective page.

    #165277
    tracybags
    Participant

    Thank you! I can’t wait to try this out now, very excited!! More questions/clarification please :)
    Just checking – the top screen code you give goes on the respective page and the second one goes on the .css sheet, is that right?
    Secondly, I don’t have a .MenuBarHorizontal so should this be .Navigation in my case? My code for this is here http://www.charlieapple.co.uk/hamilton/hamiltonstyles.css

    Sorry to need so much handholding!! :)

    #165305
    tracybags
    Participant

    Hello – if you haven’t given up on me as yet, I have more to add to the above post, sorry. I see where you got the MenuBarHorizontal from now – that was when i was building a spry menu bar, which I’ve abandoned thanks to all your help in getting a css menu going.

    The new one which has all the hovers and vertical bars now working thanks to your advice is here http://www.charlieapple.co.uk/hamilton/index2.html

    Thanks very much everyone especially Atelierbram.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.