Menu falls apart in WordPress template as soon as I link up the list elements

1 Views

I built a little visual overview of lessons that I want to integrate into a wordpress template. So I started out simply building the thing first and got the result that I was looking for and looks like this: Menu example

Now I wanted to integrate in my WordPress template but as soon as I add a link around the list elements it completely falls apart: Overview fallen apart in theme

Read More

If however I remove the link tags it stays in shape: –> Click on “Scrum lernen” on the page above to see the example where it stays in shape without the links. I can only post two links at the moment due to lack of reputation.

I have played around for hours today in the CSS and tried all sorts of things mainly trying to get rid of any formatting that may be dictated by the template on links. However, I couldn’t get it working at all.

So, in my original from the very first link above this is the core:

HTML: 

<div class="lernLesson">
    <ul>
        <a href=""><li>Geschichte von Scrum <img src="checkmark.png"/></li></a>
        <a href=""><li>Das Scrum-Ger&#252st <span>open</span></li></a>
        <a href=""><li>Die Scrum-Rollen <span>open</span> </li></a>
        <a href=""><li>Der Scrum Fluss <span>open</span> </li></a>
        <a href=""><li id="LessonEnd">Die Scrum Artefakte <img src="checkmark.png"/> </li></a>
    </ul>
</div>

According CSS: 

.lernLesson ul a li {
    margin-bottom: 2px;
    background-color: #FAF4CD;
    height: 35px;
    padding: 10px 0 0 10px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    text-decoration: none;
}

.lernLesson ul li:hover {
    background-color: #F5C253;
    text-decoration: none;
    font-weight: 900;
}

#LessonEnd {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

So the question is what else I can try in order to prevent the overview from falling apart as soon as I link the list elements?

Sorry for the potentially bad code. I only starting coding HTML and CSS two weeks ago^^.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Edit: Take off the li padding and add display: block to the link.

    <div class="lernLesson">
<ul>
    <li><a href="">Geschichte von Scrum <img src="checkmark.png"/></a></li>
    <li><a href="">Das Scrum-Ger&#252st <span>open</span></a></li>
    <li><a href="">Die Scrum-Rollen <span>open</span></a> </li>
    <li><a href="">Der Scrum Fluss <span>open</span></a> </li>
    <li id="LessonEnd"><a href="">Die Scrum Artefakte <img src="checkmark.png"/></a> </li>
</ul>

    CSS:

    .lernLesson ul li {
margin-bottom: 2px;
background-color: #FAF4CD;
height: 45px;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 12px;
text-decoration: none;
list-style-type: none;
line-height: 45px;
}

.lernLesson ul a {
text-decoration: none;
color: #4A4A4A;
list-style-type: none;
display: block;
padding-left: 7px;
}

.lernLesson ul li img {
float: right;
padding-right: 25px;
padding-top: 10px;
}

  2. A child of a UL should always be an LI

    <div class="lernLesson">
<ul>
    <li><a href="">Geschichte von Scrum <img src="checkmark.png"/></a></li>
    <li><a href="">Das Scrum-Ger&#252st <span>open</span></a></li>
    <li><a href="">Die Scrum-Rollen <span>open</span></a> </li>
    <li><a href="">Der Scrum Fluss <span>open</span></a> </li>
    <li id="LessonEnd"><a href="">Die Scrum Artefakte <img src="checkmark.png"/></a> </li>
</ul>

    This is correct markup

    Once you have done this you can display the links ans blocks

    .lernLesson ul li a {display:block; width:100%; height:100%}

    You may need to set the width and height depending on the rest of your css.