BruceJustice

Hey everyone, I can't sort this out myself. Basically, I have implemented a CSS Accordion code on my website, which basically expands and shows content on hover and is based on ul and li elements. I'd like the content of one of the items to be visible without having to drag the mouse over it, however, so far I couldn't think of any way to do it and I wonder if anyone could help me out. That would be very much appreciated! HTML: <div class="accordion"> <ul class="a-ul"> <li class="a-li"> <div class="a-div"><a class="a-a" href="#"> <h2 class="a-h2">Heading 1</h2> <p class="a-p">Description here</p> </a> </div> </li> <li class="a-li"> <div class="a-div"><a class="a-a" href="#"> <h2 class="a-h2">Heading 2</h2> <p class="a-p">Description here</p> </a></div> </li> <li class="a-li"> <div class="a-div"><a class="a-a" href="#"> <h2 class="a-h2">Heading 3</h2> <p class="a-p">Description here</p> </a></div> </li> <li class="a-li"> <div class="a-div"><a class="a-a" href="#"> <h2 class="a-h2">Heading 4</h2> <p class="a-p">Description here</p> </a></div> </li> </ul> </div> CSS: /* This section is for the accordion styling */ body { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; } .accordion { width: 100%; height: 100vh; overflow: hidden; } .accordion .a-ul { width: 100%; display: table; table-layout: fixed; margin: 0; padding: 0; } .accordion .a-ul .a-li { display: table-cell; vertical-align: bottom; position: relative; width: 16.666%; height: 100vh; background-repeat: no-repeat; background-position: center center; transition: all 500ms ease; } .accordion .a-ul .a-li .a-div { display: block; overflow: hidden; width: 100%; } .accordion .a-ul .a-li .a-div .a-a { display: block; height: 100vh; width: 100%; position: relative; z-index: 3; vertical-align: bottom; padding: 15px 20px; box-sizing: border-box; color: #fff; text-decoration: none; font-family: Open Sans, sans-serif; transition: all 200ms ease; } .accordion .a-ul .a-li .a-div .a-a * { opacity: 0; margin: 0; width: 100%; text-overflow: ellipsis; position: relative; z-index: 5; white-space: nowrap; overflow: hidden; -webkit-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: all 400ms ease; transition: all 400ms ease; } .accordion .a-ul .a-li .a-div .a-a .a-h2 { font-family: Montserrat, sans-serif; text-overflow: clip; font-size: 24px; text-transform: uppercase; margin-bottom: 2px; top: 250px; } .accordion .a-ul .a-li .a-div .a-a .a-p { top: 250px; font-size: 13.5px; } /* Background images for the Accordion Tabs */ .accordion .a-ul .a-li:nth-child(1) { background-image: url("..."); background-size: cover; } .accordion .a-ul .a-li:nth-child(2) { background-image: url("..."); background-size: cover; } .accordion .a-ul .a-li:nth-child(3) { background-image: url("..."); background-size: cover; } .accordion .a-ul .a-li:nth-child(4) { background-image: url("..."); background-size: cover; } /* Expands the accordion item on mouse hover using :hover pseudo element */ .accordion .a-ul:hover .a-li { width: 8%; } .accordion .a-ul:hover .a-li:hover { width: 60%; } .accordion .a-ul:hover .a-li:hover .a-a { background: rgba(0, 0, 0, 0.4); } .accordion .a-ul:hover .a-li:hover .a-a * { opacity: 1; -webkit-transition: All 1s ease-in-out; -webkit-transform: translateX(0); transform: translateX(0); }

Hello guys, I am building a website for my company on the commercial Uncode WordPress template that has a built-in section scroller. Some of my menu items are linked to specific page sections, for example: http://oroaudio.com/music/#beglys That seems to work fine on my PC with the screen resolution of 1366 x 768, though on my friend's PC with 1920 x 1080 resolution the page scroller jumps up and down before loading the page and brings you to the very top section of that page. Note that this particular page has a section with a video background, which I think causes the glitch, because on other pages without video backgrounds this glitch does not occur. Any help would be very much appreciated!

To Alluziion: Thank you very much. It works but not for everything. Some things doesn't react at all. After yours, I have tried a few more of those 'reset' codes but they refused to fix some of the problems as well. I guess I will have to remake my website... ah... and this time with css, so I think I'll have to learn it.

Hello, guys.I've got a serious problem. I need to create a website for my band. I was counting every pixel, it was perfect in Firefox and IE but then my friend opened it in Chrome and it was all crooked... In Safari it was less crooked but still, it was... As I am almost completely disappointed, I decided to try asking people if someone can help me... I would appreciate that. That's the website: http://www.attitudeband.com/ One person asked me for what reasons I used tables to make the design. I should have used CSS. The problem is that I don't really know how to build the site with CSS so I am looking for solution how to fix my tables.