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üst <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üst <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
Post a Comment