[Resolved] CSS problem

[Hans]

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???

[David]

Hi there,

give the UL a display: inline; property and a margin-left: 0; property should do the trick.

[Hans]

Unfortunately there is still an overlap on small pages as you may see.

[David]

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;
}

[Hans]

Hi David,

thank you for your advice. My button CSS caused the prblem. I solved it using button with onclick.

[David]

Glad to see you got it resolved.

[Author]

Posts