[Resolved] CSS problem

Home Forums Support CSS problem

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #850573
    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???

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #850608
    David
    Staff
    Customer Support

    Hi there,

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

    #850657
    Hans

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

    #850845
    David
    Staff
    Customer Support

    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;
    }
    #850970
    Hans

    Hi David,

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

    #851110
    David
    Staff
    Customer Support

    Glad to see you got it resolved.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.