[CSS] elementen met verschillende hoogte bottom-alignen* - Softwareontwikkeling

maandag 2 februari 2004 23:59

Acties:

ondergewaardeerde internetguru

Topicstarter

Ik wil verschillende elementen (lijsten in dit geval) met verschillende hoogtes, naast elkaar plaatsen waarbij de onderkanten op dezelfde hoogte staan.

Hier staat een online voorbeeld, maar alledrie de lijsten staan tegen de top, maar ze moeten tegen de onderkant.

Met position: absolute; bottom: 0px; komen ze wel tegen de onderkant, maar ook over elkaar, in plaats van naast elkaar, dan moet ik weer voor iedere aparte lijst een left: gaan instellen, en dat schiet natuurlijk niet op.

Natuurlijk werkt vertical-align: ook niet in <div> tags

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

dinsdag 3 februari 2004 00:04

Acties:

Willem

vertical-align:bottom; werkt niet

in je ul?

Motor (of auto) onderhoud bijhouden

dinsdag 3 februari 2004 00:49

Acties:

Scurra

Dit toevoegen aan je css, gewoon in je ul, line-height lijkt er ook bij te moeten:
[code=css]
line-height: 100%;
vertical-align:bottom;
[/code]

Getest in Firebird en IE6.

Sorry, verkeerd gelezen.

[ Voor 44% gewijzigd door Scurra op 03-02-2004 01:04 ]

dinsdag 3 februari 2004 01:51

Acties:

Verwijderd

vertical-align werkt alleen zoals jij het wil als het element display:table-cell heeft.

Ik heb hier een probeerseltje gemaakt van wat ik denk dat je wil hebben:

PHP:

<html><head>

<title></title>
<style type="text/css">
ul {        margin: 0px;
        padding: 0px;
        background: #dddddd;
        display: block;
        position:absolute;
        bottom:0px;
        width: 20%;
        }

ul+ul{
margin-left:20%;
}
ul+ul+ul{
margin-left:40%;
}
</style>
</head><body>
<div style="background: rgb(238, 238, 238);width: 250px; height: 120px; position:relative;">

        <ul style="">
            <li>hoi1</li>
        </ul>

        <ul style="">
            <li>hoi2</li>
            <li>hoi2</li>
        </ul>

        <ul style="">
            <li>hoi3</li>
            <li>hoi3</li>
            <li>hoi3</li>
        </ul>

    </div>

</body></html>

Die + selectors snapt IE niet. Dan zul je toch met classes moeten werken denk ik.

Ik had eerst ook nog wat geprobeerd met display:inline-block; voor ul's en vertical-align:bottom en display:table-cell voor de div, maar dit werkte absoluut niet zoals verwacht. Ik zou toch eigenlijk verwachten dat hiermee ook iets te bakken viel.

dinsdag 3 februari 2004 08:34

Acties:

Verwijderd

Anne heeft het gevoel dat het nested lists moeten zijn, maar hij weet het pas zeker wanneer de inhoud bekend is

dinsdag 3 februari 2004 13:49

Acties:

Johnny

ondergewaardeerde internetguru

Topicstarter

De lijsten hoeven niet genest te zijn, het mag wel, maar het maakt in dit geval weinig verschil, de inhoud van de lijsten is niet direct geralteerd, iedere lijst is een andere categorie, maar een lijst er om heen, van een allesomvattende categorie zou ook kunnen, maar dan staan ze nog steeds niet tegen de onderkant

Ik heb al gedacht een MSIE filter voor een vertical flip en dan alle text weer omdraaien

misschien dat het werkt, ik zal het vanmiddag even proberen.

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

dinsdag 3 februari 2004 22:38

Acties:

Johnny

ondergewaardeerde internetguru

Topicstarter

filter: flipv(); werkt in MSIE!
display: table; werkt in Mozilla! Maar nog niet helemaal, de lijsten staan namelijk nog niet tegen de onderkant, maar al wel in de goede volgorde.

Ik heb het probleem "opgelost" door er een onzichtbare lijst in te zetten die dezelfde hoogte heeft als de container, maar ik zou uiteraard liever een nettere oplossing hebben.

Ik heb al wat zitten prutsen met een geneste lijsten, maar dan wordt het een grotere troep

Voorbeeldpagina

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

dinsdag 3 februari 2004 23:27

Acties:

Verwijderd

Het is wel een klein beetje heel erg ranzig

Je zou ook mijn voorbeeldje hierboven kunnen gebruiken en dan de boel weer herverbouwen naar de css-behoeftes van ie (compleet met die dubbele flipv filter).