Viewing First time modifying my site in months and now I broke it!
First time modifying my site in months and now I broke it!
User: Christopher 8 years ago
|
|
I wish it was a simple as a backwards slash. That was in my code. I must've copied and pasted the one time it wasn't during some trial and error testing. Still, the shiny emoji shows up. I'll look into creating this with CSS. Thanks guys.
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
User: Christopher 8 years ago
|
|
Okay, brilliant. Thanks Roddy. But the CSS for the arrow doesn't vertically align it. I've googled and tried a few things (like vertical-align:middle) but to no effect. What do you suggest? /* arrow */ #clickNav li a:after{content:""; position:relative;float:right; width: 0; height: 0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:16px solid #4C4C4C; ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
User: Christopher 8 years ago
|
|
Roddy, Jumbo.. can someone help me with this please. I've made multiple attempts, trial and error, but nothing's working, including inserting the following: display:inline-block; vertical-align:middle; ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
User: Jumbo T. 8 years ago
|
|
margin-top: 3%; moves the arrow down : #clickNav li a:after{content:""; position:relative;float:right; width: 0px; height: 0px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:16px solid #4C4C4C; margin-top: 3%; } Have a look : http://trotter.hol.es/data/dropnav.html |
|
User: Christopher 8 years ago
|
|
Yes! Thank you :)
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
User: Christopher 8 years ago
|
|
Got another issue now. Same thing happened with my 'Two Level Drop Down Mobile Navigation', code courtesy of Roddy. The triangles need to be written in CSS. So I amended the best I can but now my X's are misaligned and don't replace the triangles as they did before. This still works in iOS but maybe should be created in CSS to future-proof it: "2715". Regardless, here's the mobile page I'm referring to: http://m.cleetche.com/movies-and-pics This is a portion of the CSS to which I'm referencing: #m-nav ul.accordion ul {margin:0; padding:0 0 0 20px;} .accordion a.trigger {display:block; background-repeat: no-repeat;} .accordion a.trigger:before { content:""; position:relative; float:right; width: 0; height: 0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:16px solid #A3A3A3; margin-right: 5%;margin-top:1.5%; } .accordion a.trigger.open:before { content: "2715"; color: #CC0000;} .accordion .link a.trigger:before { content:""; width: 0; height: 0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:16px solid #A3A3A3; } </style> Thanks again guys! Your value to this software is indispensable. ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
User: Christopher 8 years ago
|
|
Got another issue now. Same thing happened with my 'Two Level Drop Down Mobile Navigation', code courtesy of Roddy. The triangles need to be written in CSS. So I amended the best I can but now my X's are misaligned and don't replace the triangles as they did before. This still works in iOS but maybe should be created in CSS to future-proof it: "2715". Regardless, here's the mobile page I'm referring to: http://m.cleetche.com/movies-and-pics This is a portion of the CSS to which I'm referencing: #m-nav ul.accordion ul {margin:0; padding:0 0 0 20px;} .accordion a.trigger {display:block; background-repeat: no-repeat;} .accordion a.trigger:before { content:""; position:relative; float:right; width: 0; height: 0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:16px solid #A3A3A3; margin-right: 5%;margin-top:1.5%; } .accordion a.trigger.open:before { content: "2715"; color: #CC0000;} .accordion .link a.trigger:before { content:""; width: 0; height: 0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:16px solid #A3A3A3; } </style> Thanks again guys! Your value to this software is indispensable. ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
User: Roddy 8 years ago
|
|
First, the menu. I have added a selector for "top" to move the arrow down and also a hint to display the drop down while you are editing it. See THIS page. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
User: Roddy 8 years ago
|
|
In the accordion CSS you are missing a backslash in this line... .accordion a.trigger.open:before { content: "2715"; You have... content: "2715"; ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
User: Christopher 8 years ago
|
|
Hi Roddy. I think this forum is blocking out the slashes..? Doesn't make a whole lot of sense to me. But this is the second time it's happened when I've copied and pasted, and it would appear your slash is missing in the text as well...
Last edit 8 years ago ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
User: Christopher 8 years ago
|
|
I just wrote another reply but this forum signed me out so it didn't post. Having to rewrite it from scratch. I'm still having the same issue as described above: the triangles are fine but the X is misaligned and not replacing the triangles as before. I have a sneaky suspicion this is because I'm mixing hex values (for the X) with CSS for the triangles...? Should I draw the X instead, and if so, how? Thanks for any help guys. Last edit 8 years ago ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
User: Christopher 8 years ago
|
|
Here..
Last edit 8 years ago ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
User: Christopher 8 years ago
|
|
Not easy adding pictures! 3rd try here. Maybe doesn't work with png's. ... and still, nothing... I give up. Last edit 8 years ago ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
mobile.jpg Note the X |
|
User: Christopher 8 years ago
|
|
Forget it, I drew another triangle (downward) and I think it's working fine. Cheerio!
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
Post Reply |
You must login or signup to post. |