- This topic is empty.
-
AuthorPosts
-
March 10, 2014 at 2:58 am #165243tracybagsParticipant
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.htmlSo 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!
March 10, 2014 at 3:06 am #165245AtelierbramParticipant@tracybags
Last link is broken … 404On top of my head: You can use a border all around, and give the top and bottom-border a
border-bottom-color: transparent
orborder-top-color: #whatever-the-background-color
. Last one won’t work in your case, because of gradient.March 10, 2014 at 3:09 am #165247Paulie_DMemberI’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.
March 10, 2014 at 3:19 am #165250AtelierbramParticipantOr give it a negative left and right margin:
#navigation li:before { content: " | "; margin: 0 -0.5em; }
March 10, 2014 at 3:22 am #165251tracybagsParticipantSorry, 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
March 10, 2014 at 3:39 am #165253AtelierbramParticipantI’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 acurrent
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; }
March 10, 2014 at 3:42 am #165254Paulie_DMemberWhen 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.
March 10, 2014 at 5:30 am #165269AtelierbramParticipantThere’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.March 10, 2014 at 5:37 am #165271tracybagsParticipantHi, 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 :)
March 10, 2014 at 5:56 am #165274AtelierbramParticipantOk, 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 thatid
(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; }
March 10, 2014 at 5:57 am #165275Paulie_DMemberThe 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.
March 10, 2014 at 7:33 am #165277tracybagsParticipantThank 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.cssSorry to need so much handholding!! :)
March 10, 2014 at 11:11 am #165305tracybagsParticipantHello – 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.