Toon posts:

[HTML] Menu divs goed boven elkaar uitlijnen

Pagina: 1
Acties:

  • SavageNL
  • Registratie: november 2001
  • Laatst online: 21:26
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?

  • MoietyMe
  • Registratie: juli 2003
  • Laatst online: 21-09 10:12

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]


  • SavageNL
  • Registratie: november 2001
  • Laatst online: 21:26
Op het moment is het alleen nog wat concept code:
code:
1
2
3
4
5
6
7
8
9
10
11
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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:
1
2
3
4
5
6
7
8
9
10
<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.

  • RobIII
  • Registratie: december 2001
  • Laatst online: 19:09

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.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • RM-rf
  • Registratie: september 2000
  • Laatst online: 25-09 08:14

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


  • SavageNL
  • Registratie: november 2001
  • Laatst online: 21:26
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.

  • JKP-Kipmans
  • Registratie: november 2003
  • Laatst online: 13-12-2013
De div's niet absoluut positioneren, en de bovenste div voorzien van een vaste height en overflow: scroll?

If you do the cooking by the book, then you'll have a cake.


  • SavageNL
  • Registratie: november 2001
  • Laatst online: 21:26
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]


  • MoietyMe
  • Registratie: juli 2003
  • Laatst online: 21-09 10:12

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?

  • jbdeiman
  • Registratie: september 2008
  • Laatst online: 19:37
Dat is niet nodig, sterker nog met javascript doen is af te raden. Er zijn (helaas :P) 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#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;
}

  • MoietyMe
  • Registratie: juli 2003
  • Laatst online: 21-09 10:12

MoietyMe

zij/haar

Gelukkig zijn er mensen die je wel begrijpen :)

  • JKP-Kipmans
  • Registratie: november 2003
  • Laatst online: 13-12-2013
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. :P

If you do the cooking by the book, then you'll have a cake.


  • SavageNL
  • Registratie: november 2001
  • Laatst online: 21:26
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):

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]


  • mike.stijlloos
  • Registratie: september 2010
  • Laatst online: 15-10-2018
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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.

  • SavageNL
  • Registratie: november 2001
  • Laatst online: 21:26
mike.stijlloos 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.

  • mike.stijlloos
  • Registratie: september 2010
  • Laatst online: 15-10-2018
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.

  • SavageNL
  • Registratie: november 2001
  • Laatst online: 21:26
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.
Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee