Archived topic
CSS problem
5 replies · Started by Hans on March 26, 2019
On frontpage I use the page hero and devekopped the page with html. I am sure the solution is simple but all trials failed.
This is my code:
<div>
<ul style="list-style: none;">
<li style="display: inline-block;"><a class="ktg-butt" href="http://huppenbroich.de/simwae/blog/">Aktuelles</a></li>
<li style="display: inline-block;"><a class="ktg-butt" href="http://huppenbroich.de/simwae/termine/">Termine</a></li>
<li style="display: inline-block;"><a class="ktg-butt" href="http://huppenbroich.de/simwae/wahlprogramme/">Wahlprogramme</a></li>
</ul>
</div>
On large windows everything is great. But on small windows the buttons overlap. What is the correct CSS???
Hi there,
give the UL a display: inline; property and a margin-left: 0; property should do the trick.
Unfortunately there is still an overlap on small pages as you may see.
So the LI elements you can give them a margin-bottom: 2em; property.
Personally i would write my HTML like this, you don't need the DIV:
<ul class="button-list">
<li><a class="ktg-button" href="url">Button label</a></li>
<li><a class="ktg-button" href="url">Button label</a></li>
<li><a class="ktg-button" href="url">Button label</a></li>
</ul>And then add this CSS:
ul.button-list {
list-style: none;
display: inline;
margin: 0;
}
ul.button-list > li {
display: inline-block;
margin-bottom 2em;
}Hi David,
thank you for your advice. My button CSS caused the prblem. I solved it using button with onclick.
Glad to see you got it resolved.
