[Website] Another CSS problem

Hey guys!

Ik gebruik meestal Google om de juiste oplossing te vinden, maar helaas lukt me dat niet altijd
Goed, ik heb dus momenteel 3 aparte blokken gemaakt:
Maar mijn probleem is nu, dat zodra ik content toevoeg aan mijn box, gebeurt er dit:
De gehele box zakt op één of andere manier helemaal naar beneden... Wanneer je een

toevoegd met tekst, schuift de box steeds meer naar boven.
Ik heb al meerdere oplossingen geprobeert, maar helaas zonder succes.

Dit is mijn code:

HTML:

<div id="tab-1">
        <h1>About Horus</h1>
        <ul>
            <li>
                <h1>Our benefits</h1>
            </li>
            <li>
                
            </li>
            <li>
                
            </li>
        </ul>
    </div>

CSS:

#tab-1 {
    height: 555px;
    width: 100%;
    margin-top: 1px;
    padding-top:1px;
}

#tab-1 h1 {
    text-align: center;
    margin-top: 40px;
    font-size: 42pt;
}

#tab-1 ul li {
    list-style: none;
    width: 26%;
    height: 500px;
    margin-right: 5%;
    display: inline-block;
    background-color: #1E1E20;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-bottom: 8px solid #D9BC2A;
}

#tab-1 ul li h1 {
    font-size: 28pt;
    margin: 0;
    padding: 0;
    overflow: auto;
}

Ik hoop dat jullie mij verder kunnen helpen!
Alvast bedankt,

Alef

Dit lijkt me een leuk taakje voor CSS3 Flexbox!
Daarmee kan je erg mooi divs op een rijtje zetten.

Gebruik hier geen list voor. Daar is dat niet voor bedoeld.

Je kan je list item ook een float left meegeven i.p.v. een display inline.

Heel erg bedankt voor jullie reacties, @Stef & @Kingunit

Ik heb geprobeerd een float te gebruiken, voordat ik aan de slag ging met Flexboxes. Kwam er echter achter, dat zodra ik bij elke list item een h1 toevoeg, ze wel weer allemaal op de correcte plaats staan. Dus ik denk dat het zo wel is opgelost (?).

Maar inderdaad, misschien is het beter als ik flexboxes ga gebruiken. Is toch iets netter. Mijn docent Webdevelopement kwam er zelf ook niet uit.

Alef schreef:

Heel erg bedankt voor jullie reacties, @Stef & @Kingunit

Ik heb geprobeerd een float te gebruiken, voordat ik aan de slag ging met Flexboxes. Kwam er echter achter, dat zodra ik bij elke list item een h1 toevoeg, ze wel weer allemaal op de correcte plaats staan. Dus ik denk dat het zo wel is opgelost (?).

Maar inderdaad, misschien is het beter als ik flexboxes ga gebruiken. Is toch iets netter. Mijn docent Webdevelopement kwam er zelf ook niet uit.

Herkenbaar

Dankjewel @Stef

De flexbox methode werkt helemaal prima!

Alef schreef:

Dankjewel @Stef

De flexbox methode werkt helemaal prima!

Ja he CSS3

Alef schreef:

Heel erg bedankt voor jullie reacties, @Stef & @Kingunit

Ik heb geprobeerd een float te gebruiken, voordat ik aan de slag ging met Flexboxes. Kwam er echter achter, dat zodra ik bij elke list item een h1 toevoeg, ze wel weer allemaal op de correcte plaats staan. Dus ik denk dat het zo wel is opgelost (?).

Maar inderdaad, misschien is het beter als ik flexboxes ga gebruiken. Is toch iets netter. Mijn docent Webdevelopement kwam er zelf ook niet uit.

Let wel op dat flexbox nog niet overal gesupport is

Ja, volgens mij valt dat nog zwaar tegen.

Thanks voor alle tips guys, mocht ik klachten krijgen dat de website niet overal goed functioneert, zal ik helaas maatregelen moeten nemen. Maar dat zie ik tegen die tijd wel, ik verwacht dat de meeste mensen een up-to-date browser gebruiken. Zo niet, is het waarschijnlijk niet de doelgroep die ik wil treffen met mijn website.