Custom HTML/CSS falling apart in theme.

resolved (5 posts) (2 voices)

  1. Truthans
    Member

    I tried building a custom overview in the awake template. I have build it externally before I put it in the template and it looks like this: https://dl.dropboxusercontent.com/u/130006752/Lesson%20Menu/index2.html

    However, as soon as want to integrate it in the template it seems to fall apart: http://scrumstar.com/?page_id=74

    So far I have found out that it must be some sort of problem when I wrap the list elements in tags. Because without the link tags it actually stays in shape: http://scrumstar.com/?page_id=2

    I have tried all day but couldn't get it solved.

    Main code I used in my orginial:

    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"/> </a>
    		</ul>
    </div>

    CSS:

    .lernLesson ul a li {
    		margin-bottom: 2px;
    		background-color: #FAF4CD;
    		height: 35px;<br />
    		padding: 10px 0 0 10px;
    		font-family: "Helvetica Neue", Arial, sans-serif;
    		font-size: 12px;
    		text-decoration: none;
    		}</p>
    <p>			.lernLesson ul li:hover {
    			background-color: #F5C253;
    			text-decoration: none;
    			font-weight: 900;
    			}
    			#LessonEnd {
    			border-bottom-left-radius: 5px;
    			border-bottom-right-radius: 5px;
    			}

    Any idea what else I could try in order to keep it from falling apart?

    Posted 4 years ago #
  2. Elliott
    Support

    Hello Truthans,

    Make sure you paste the code into the HTML editor and not the Visual editor.

    Posted 4 years ago #
  3. Truthans
    Member

    Yes, that's what I did. At least I thought so.

    Posted 4 years ago #
  4. Elliott
    Support

    Try deleting it and pasting it again and try surrounding it with [raw] [/raw] tags.

    Posted 4 years ago #
  5. Truthans
    Member

    Found the solution:
    The link tags should go inside the li tags. That keeps the whole thing together. In order to make the whole link element clickable I added display: block to the ul a class. Works now. Thanks.

    Posted 4 years ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme