[HTML/CSS] Content verspringt naar iframe/div

[SYQ]

Ok, ik zit met een irritant probleempje. en voordat ik heel template ga omgooien ga ik het toch hier ff vragen. Ik ben bezig met het maken van een webshop, eisen zijn dat de categorieoverzicht en producten altijd getoond moeten worden op scherm, laatste natuurlijk opvangen met een scrollbar

dit heb ik gedaan door de content te plaatsen in een iframe, dit vond ik niet lekker werken. besloten om het geheel toch maar te plaatsen tussen divjes met een scrollbar eromheen. onderstaande probleem treed trouwens bij beide op

zodra het geheel niet op de scherm past, en ik klik op een categorie verspringt het hele scherm naar... ach, ik heb maar snel in html gemaakt, met mijn uitleg snapt ik het zelfs niet meer.

http://www.no90.net/divje/


en zie plaatje, wanneer het geheel niet op scherm past verspringt ie zodra er geklikt wordt op een categorie. bestaat hier een workaround voor??

[user109731]

Je pagina is dus langer dan het scherm. De enige juiste oplossing is om de pagina aan te passen aan de lengte van het scherm. Dat kan het best door met procenten te werken ipv pixels. Ik raad je aan om te stoppen met het misbruiken van tables voor de layout (www.stylesheets.nl). Je zult dan ook vaak sneller en beter geholpen worden hier.

Wil je het toch zo doen dan zou ik iets proberen met 1 tabel met hoogte 100%, waarin je dan enkel voor de header een hoogte instelt (en colspan="3" voor de td van de header), zodat de 3 andere cellen die ruimte opvullen.

Gebruik trouwens geen name="#categorie1", maar name="categorie1". Dan werkt het ook in firefox. Nog handiger is om een id op je h3 te zetten. De onderstaande regels doen in dit geval allebei wat je wilt:

HTML:

<a name="categorie1"><h3>categorie1</h3>
<h3 id="categorie1">categorie1</h3>

Niet bedoeld om je af te kraken ofzo, maar misschien heb je er wat aan.

edit: scherm is in dit geval natuurlijk de viewport..

[SYQ]

dit meen je toch niet, krijg ik kritiek op een layout wat ik binnen 5minuutjes in elkaar heb geflanst
ik probeer het nogmaals : het gaat mij helemaal niet om de totale pagina, maar juist om de divje met scrollbars. zodra het geheel niet op de pagina past, en ik klik op een categorielink verspringt de hele pagina naar de top van onderstaande divje

code:

<div style="height:400px;overflow-y:auto;">

</div>

procent werkt niet met bovenstaande of ik doe iets verkeerd, zodra ik bv 50% meegeef verdwijnt de hele scrollbar

[user109731]

Zoals ik al zei: het makkelijkst en imho het mooist is om te zorgen dat die div niet langer dan het scherm word. Zo moeilijk is dat niet als je het netjes aanpakt (zonder tabel dus). Die height:50% op de div werkt wel als de div niet in een tabel staat.

window.scrollTo() is ook nog een 'oplossing'. Misschien dat het ook lukt met absolute/fixed positioneren, maar dan lijkt me scrollTo() handiger. Als javascript uitstaat krijg je het zoals je nu hebt, wat niet echt een groot probleem is.

En ik geef geen kritiek op de layout, maar enkel wat handige tips voor je code stijl. Die 5 minuten die je er nu over hebt gedaan hadden er dan 3 kunnen zijn. Bovendien probeer ik m'n testcases juist extra netjes te maken, zodat het duidelijker is voor anderen Maar goed, ik geef die tips voor jou, ikzelf ken ze al. Als jij het zo wilt doen: vooral doen.

[SYQ]

bedankt, ga het vanavond nogmaals proberen

_{alle kritiek is welkom joh, zo leer ik van mijn foutjes. enne waardeer je hulp absoluut}