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&quot;, 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27&quot; 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&quot;, 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27&quot; 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&quot;, 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27&quot; 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&quot;, 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27&quot; Thunderbolt Cinema Display

www.cleetche.com
User: Christopher 8 years ago
Here..

Last edit 8 years ago

-------------------------------
rMBP 15&quot;, 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27&quot; 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&quot;, 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27&quot; 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&quot;, 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27&quot; Thunderbolt Cinema Display

www.cleetche.com


Post Reply
You must login or signup to post.