[HTML] Menu divs goed boven elkaar uitlijnen - Softwareontwikkeling

vrijdag 1 oktober 2010 09:38

Acties:

Topicstarter

Ik ben bezig met een webapplicatie waarvoor ik een menu op moet bouwen. Het grootste deel ervan lukt wel maar ik loop vast op 2 elementen die boven elkaar uitgelijnd moet worden:
- Boven komen een aantal links om door de applicatie te gaan. In dit blok moet gescrolled worden als er niet genoeg hoogte is.
- Onderin komen links specifiek voor de ingelogde gebruiker.

Beide blokken hebben een variabele hoogte (het aantal links kan per gebruiker wisselen).

Mbv 'position:absolute;' kom ik een heel eind maar gaat het fout zodra de hoogte niet toereikend is voor de blokken. Bij overlap gaan ze dan gewoon over elkaar heen. 'vertical-align: bottom;' op de divs of de container lijkt niets te doen.

Heeft iemand een idee van waar ik naar moet zoeken om een oplossing hiervoor te vinden?

vrijdag 1 oktober 2010 09:43

Acties:

MoietyMe

zij/haar

Je kunt voor je menu veel beter een <ul> gebruiken. Daarmee ga je veel verder komen.

Wil je ook wat relevante code plaatsen. Zo hebben we geen idee hoe jouw code er daadwerkelijk uitziet.

[ Voor 38% gewijzigd door MoietyMe op 01-10-2010 09:43 ]

vrijdag 1 oktober 2010 10:12

Acties:

SavageNL

Topicstarter

Op het moment is het alleen nog wat concept code:

code:

<html>
<head>
<style type="text/css"> ... </style>
</head>
<body>
<div id="container">
    <div id="boven">Boven</div>
    <div id="onder">Onder</div>
</div>
</body>
</html>

Met als stylesheet dingen als:

code:

<style type="text/css">
#container {
    height: 300px;
    background-color: gray;
}

#boven {
    background-color: red;
}

#onder {
    position: absolute; /* werkt niet vanwege overlapping */
    top: 300px;
    width: 100%;
    background-color: green;
}
</style>

of

code:

<style type="text/css">
#container {
    height: 300px;
    vertical-align: bottom; /* doet niets */
}

#onder {
    vertical-align: bottom; /* doet niets */
}
</style>

Ik ga eens kijken of lijsten dit beter doen.

vrijdag 1 oktober 2010 10:34

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Begin sowieso eens met een fatsoenlijke doctype; je bent nu bezig in quirks mode->never a good idea.

[ Voor 35% gewijzigd door RobIII op 01-10-2010 10:35 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 1 oktober 2010 10:54

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

de fout is al om te beginnen met position:absolute, maar wel een 'flow' te willen....
position:absolute is gewoon erg quick'n'dirty, maar is juist qua 'gemak' erop gebaseerd dat je de hele 'flow' van de elementen in het document kapotmaakt en ze gewoon 'hard' op een poisitie gedefinieerd worden. (maar die elementen niet meer 'op elkaaar reageren')

je moet position absolute gewoon enkel gebruiken voor objecten die je ook echt uit de 'flow' wilt laten verdwijne... eventuel kan ik me wel voorstellen dat dat hier bv het element 'onder' is die een position:absolute (of misschien nog beter, een position:fixed en dan uitlijnen niet adhv de top:0; maar bottom:0, dan wordt hij aan de onderkant van de viewbox uitgericht)

geef je die 'onder' nog een z-index die hoger is dan je 'boven' element 'zweeft' dat element gewoon onderaan de pagina over de rest van de inhoud...

dan kun je het element 'boven' een padding geven die dan uiteindelijk even groot zou moeten zijn of iets hoger dan de hoogte van dat 'onder element en dan kun je, ook als je scrolled altijd ook de inhoud die voledig onderiop in element 'boven' te vinen is nog geheel in je viewbox krijgen met scrollen.

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

vrijdag 1 oktober 2010 11:04

Acties:

SavageNL

Topicstarter

De position: absolute heb ik geprobeerd om het probleem van het onderaan uitlijnen op te lossen. Dat het ervoor zorgt dat de bovenste div gewoon onder/over het elemenent doorgaat merkte ik ook, vandaar dat het geen goede oplossing was

.

Gebruik maken van position:absolute (ik moet nog even kijken of dit ook geldt voor position:fixed) op de onderste, en de bovenste een padding geven van de grootte van de onderste is niet mogelijk omdat de hoogte van het onderste element niet vast staat. Dan moet ik weer terugvallen op javascript en als het even kan dan doe ik dat liever niet voor layout issues.

vrijdag 1 oktober 2010 13:27

Acties:

Verwijderd

De div's niet absoluut positioneren, en de bovenste div voorzien van een vaste height en overflow: scroll?

vrijdag 1 oktober 2010 13:50

Acties:

SavageNL

Topicstarter

Ook de bovenste div kan geen vaste hoogte krijgen omdat ook daar niet altijd hetzelfde aantal links in staat en de kolom moet meeschalen met de hoogte van het venster. Dus de hoogte van de pagina, de hoogte van het bovenste element en de hoogte van het onderste element zijn variabel. Ik heb dus een meeschalende oplossing nodig en kan nergens van zeggen hoe hoog het wordt.

Ben bang dat het misschien toch javascript gaat worden

.

[ Voor 14% gewijzigd door SavageNL op 01-10-2010 13:52 ]

vrijdag 1 oktober 2010 13:54

Acties:

MoietyMe

zij/haar

Kun je misschien een schets maken van wat je nou precies wilt, want ik snap er eerlijk gezegd vrij weinig van. Kan aan mij liggen.

Je wilt dat beide elementen meeschalen, maar ook dat in de ene de content gaat scrollen als dat teveel is. Wanneer is dat teveel dan? Heb je al naar hoogtes in procenten gekeken?

vrijdag 1 oktober 2010 14:01

Acties:

jbdeiman

Dat is niet nodig, sterker nog met javascript doen is af te raden. Er zijn (helaas

) mensen die zonder JS werken, dan is het geen prettige website. Je wilt (nu nog) niet afhankelijk van zijn van JavaScript.
Als je een "Horizontal list" menu gebruikt, *ul/li combo* dan gaat de lijst gewoon verder op de volgende regel indien nodig.
Als je beide objecten onder elkaar "float" en je (het onderste van beide elementen) een clear:both; meegeeft, dan zal die gewoon doorschuiven.

Denk bijvoorbeeld:

Cascading Stylesheet:

#container {
    height: 300px;
    background-color: gray;
}

#boven {
    background-color: red;
float:left;
width:100%;
height:auto;
}

#onder {
    clear:both;
    float:left;
    width:100%;
    height:auto;
    background-color: green;
}

vrijdag 1 oktober 2010 14:05

Acties:

MoietyMe

zij/haar

Gelukkig zijn er mensen die je wel begrijpen

vrijdag 1 oktober 2010 15:47

Acties:

Verwijderd

SavageNL schreef op vrijdag 01 oktober 2010 @ 13:50:
Ook de bovenste div kan geen vaste hoogte krijgen omdat ook daar niet altijd hetzelfde aantal links in staat en de kolom moet meeschalen met de hoogte van het venster.

In de startpost zeg je toch echt "In dit blok moet gescrolled worden als er niet genoeg hoogte is.". Maar goed.

vrijdag 1 oktober 2010 16:22

Acties:

SavageNL

Topicstarter

Good Fella schreef op vrijdag 01 oktober 2010 @ 13:54:
Kun je misschien een schets maken van wat je nou precies wilt, want ik snap er eerlijk gezegd vrij weinig van. Kan aan mij liggen.

De situatie is als volgt (ik heb de kleuren maar aangehouden van mijn eerdere post):
Afbeeldingslocatie: http://vps198.directvps.nl/schets.png

Het rode is het bovenste element, het groene het onderste (hier staan dus menu items in). Het grijze is de container (en het witte de scrollbar).

Links: Het rode element staat boven, het groene onder. De 2 elementen bij elkaar zijn niet hoger dan de container (grijs) en er blijft dus nog wat container zichtbaar.

Rechts: De hoogte van de 2 componenen bij elkaar is groter dan die van de container, het groene element krijgt dan de hoogte die nodig is (zodat deze niet hoeft te scrollen) de rode krijgt het restant en moet wel scrollbaar worden. De container mag niet groter worden obv de inhoud, wel obv de venster grootte.

@jbdeiman:
Je code werkt niet 1 op 1. De onderste kolom lijnt niet onderaan uit en de hele kolom wordt uitgerekt als er meer in zit. Ik zal na het weekend eens kijken of ik er verder mee kom.

@JKP-Kipmans
Er moet in gescrolled worden, maar ik kan er geen vaste hoogte aan meegeven. Als de onderste niet hoog is dan mag (moet) de bovenste groter worden. De kolom (en dus beide blokken) moeten meeschalen met de grootte van het scherm.

[ Voor 3% gewijzigd door SavageNL op 01-10-2010 16:25 ]

vrijdag 1 oktober 2010 19:42

Acties:

Verwijderd

code:

<style type="text/css"> 
        #container {
            height: 300px;
            background-color: gray;
        }

        #boven {
            background-color: red;
            float:                right;
            overflow:            auto;
            width:                200px;
            height:                200px;
        }

        #onder {
            width: 200px;
            float:            right;
            clear:            both;
            background-color: green;
        }
    </style>

Volgens mij is dit wat je wilt bereiken ? Alleen even getest in firefox.
En google is op faux columns voor het doorlopen van de achtergrond.

vrijdag 1 oktober 2010 20:29

Acties:

SavageNL

Topicstarter

Verwijderd schreef op vrijdag 01 oktober 2010 @ 19:42:
Volgens mij is dit wat je wilt bereiken ? Alleen even getest in firefox.
En google is op faux columns voor het doorlopen van de achtergrond.

Het bovenste deel scrollt hier idd, maar staat vast op 200px, dat is een restrictie waar ik niet aan kan voldoen (wederom, tenzij ik met javascript ga rommelen). De onderste div wordt ook niet beneden uitgelijnd en valt buiten de container als deze teveel regels tekst krijgt.

De bovenste div moet dus bovenaan uitgelijnd zijn en naar beneden vullen. De onderste div moet onderaan uitgelijnd zijn en vult naar boven. Als de max hoogte van de container bereikt is duwt de onderste div de bovenste naar boven en wordt de bovenste div scrollbaar.

vrijdag 1 oktober 2010 21:45

Acties:

Verwijderd

Mag de container niet langer worden dan de viewport? Of de container moet ook echt letterlijk 300px hoog zijn?

Persoonlijk zie ik ook de meerwaarde er niet van dat je in element moet gaan scrollen afhankelijk van de hoogte van het onderste element. Is er een reden dat de pagina perse in de viewport van de browser moet passen, zodat de scroll-balk van de browser niet getoond wordt ?

Maak je het je zelf niet veel te moeilijk door aan deze eisen te voldoen? Die naar mijn inziens 0 usability toevoegen.

zaterdag 2 oktober 2010 22:50

Acties:

SavageNL

Topicstarter

Het idee is dat de onderste links daar specifiek neergezet worden om snel toegankelijk te zijn. Hier zullen nooit heel veel links in staan maar de links die er staan zijn belangrijker dan wat bovenin staat. Van de bovenste links worden de links die het meest gebruikt worden bovenin gezet zodat hiervoor niet gescrolled hoeft te worden. De links onderaan in het bovenste element zijn het minst belangrijk waardoor het dus niet erg is om hiervoor te moeten scrollen. Als er niet gescrolled hoeft te worden omdat er toch genoeg ruimte is dan is dat natuurlijk de beste situatie.
Het makkelijkste hierin zou zijn om de belangrijkste elementen gewoon bovenin te zetten, maar er is besloten dat dat niet mooi is.

De container hoeft niet letterlijk 300px hoog te zijn. De hoogte van de container is gebaseerd op de grootte van het venster (hoogte venster - header - footer). De container krijgt een position:absolute met een top en bottom.
De scrollbalk van de browser kan niet gebruikt worden omdat er ook een vaste header en een vaste footer in beeld moet blijven staan.