Wednesday, 20 April 2016

css z-text and dropdown menu help please

I'm new to this so please be patient with me. I just learned about codepen two days ago. I think I did it right so that people can see what I'm struggling with. I spent a lot of time hosting the images and various other stuff so that the codepen would work. If I did it wrong or if there is a better way to present this please let me know and I'll be happy to change it.

Here is the codepen for the issues I'm having: http://ift.tt/1Sw1IY7

It all surrounds the dropdown navigation bar. The issues are basically: * trying to center and space the text boxes in the menu box. I can get it centered horizontally but for some reason not vertically. I've also got a small gap underneath "Home" that I don't know where it's coming from. * getting the dropdowns to work properly. not sure I fully understand what parent settings pass through to children and how classes actually work: for example a div >> ul >> li >> ul >> li >> a... does a ".class a" (sorry I don't know how to do code mid-sentence) carry through to every single anchor within that class? Can you use "clear" mid-div? * z-index: properties. I don't think I fully understand elements or containers because when I put a "z-index: -1;" (Line 170, class .border in the codepen) on the border It hides things within the border (two arrows at the sides of the slider thing). Since I want those arrows I assume I would omit the z-index tag on the .border class and elevate (such as Line 147, class .drop1) something else to go over it --but I'm either doing it wrong or maybe I have mistakes??

Hopefully that makes some sense. I would appreciate any help I can get. I'd rather not have someone just fix it for me. I would really like to understand what I was doing wrong so I can change things in the future.

There are a bunch of hidden dropdowns that I <!-- comment --> commented out in the html code on the codepen. site is also hosted live exactly as the codepen looks at the url that the files are pointed to in the html and css.

Thanks in advance for the help. Sorry for the crazy colors. It helps me understand what is what while I write this thing. Thanks again.



Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted April 20, 2016 at 08:09PM by vmuser123 http://ift.tt/1Sbwx1Y

No comments:

Post a Comment