html - Menu falls apart in Wordpress template as soon as I link up the list elements -


i built little visual overview of lessons want integrate wordpress template. started out building thing first , got result looking , looks this: menu example

now wanted integrate in wordpress template add link around list elements falls apart: overview fallen apart in theme

if remove link tags stays in shape: --> click on "scrum lernen" on page above see example stays in shape without links. can post 2 links @ moment due lack of reputation.

i have played around hours today in css , tried sorts of things trying rid of formatting may dictated template on links. however, couldn't working @ all.

so, in original first link above 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 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 question else can try in order prevent overview falling apart link list elements?

sorry potentially bad code. starting coding html , css 2 weeks ago^^.

edit: take off li padding , add display: block 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 { 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; } 

Comments

Popular posts from this blog

c++ - Creating new partition disk winapi -

Android Prevent Bluetooth Pairing Dialog -

VBA function to include CDATA -