Krijg overflow niet goed (wil alleen maar vertikale scrollbar)
Ik krijg mijn scrollbars niet goed. Ik heb een gastenboek en als de items daar te te te groot worden wil ik alleen een vertikale scrollbar (of desnoods de horizontale scrollbar zo dat daar niet gescrollt kan worden).
Mijn probleem is te zien op: www.datepunt.nl. Log in met
username: testen
password: testen.
Klik dan op gastenboek, dan zie je het probleem:
Ik zie dat de scrollbars in de div: gastenboekinfo komt. Maar daar wil ik hem niet. Ik gooi de data in de div: gbmessages met javascript (ajax). Als ik een overflow:hidden op gastenboekinfo zet dan krijg ik die scrollbars niet meer (zoals hoort), maar krijg dan ook op geen enkele manier de scrollbars in gbmessages (zelfs niet met een overflow:scroll).
ps: Ik zou wel graag de scrollbar aan de rechterkant houden zoals nu het geval is.
Het gaat om de volgende code
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="gastenboekinfo">
<div id="gbberichtenheader"></div>
<div id="gbmessages" style="float:left;position:relative;width:620px;top:15px;margin-left:8px;margin-right:18px;">
</div>
</div>
</div>
[/Code]
<div id="gbberichtenheader"></div>
<div id="gbmessages" style="float:left;position:relative;width:620px;top:15px;margin-left:8px;margin-right:18px;">
</div>
</div>
</div>
[/Code]
Gewijzigd op 01/01/1970 01:00:00 door Whatever Whatever
geloof ik.
Scroll laat ALTIJD een scrollbalk zien. auto alleen als er teveel text is.
@Webmakerij: Bedankt voor je commentaar en ik wil er best naar kijken, maar graag iets concreter. Prima dat je dat zegt, maar wel gaarne even aangeven wat er dan volgens jou fout is, want hier kan ik vrij weinig mee.
De bedoeling is trouwens dat de website rond 1 november echt live gaat, dus ik heb nog wel even de tijd.
PM me anders even wat er volgens jou "troep" is en wat onveilig is. Ook het touwtjes verhaal snap ik niet.
Design is mij inderdaad al vaker verteld, alleen ik ben geen echte designer. Niemand kan daar ook echte tips geven ofzo, dus voorlopig en zonder goede feedback zal daar toch weinig aan gebeuren. Commentaar is prima en daar wil ik best wat mee doen, maar dan gaarne wel tips hoe het dan zou moeten/beter kan...
/Update: Ik heb inderdaad 1 beveiliging probleem gevonden, ik was 1 htmlspecialchars vergeten. Die is toegevoegd en nu werken je tests wel. Bedankt dat je mij daar even op hebt gewezen :D
Gewijzigd op 01/01/1970 01:00:00 door Whatever Whatever
Markei: 2 errors
http://validator.w3.org/check?uri=www.markei.nl&charset=%28detect+automatically%29&doctype=Inline&group=0
Vlaggenmasten: 42 Errors, 41 warning(s)
Rudolph steiner college: 364 Errors, 122 warning(s)
Atelier lokaal: 8 Errors, 9 warning(s)
Misschien even handig om daar naar te gaan kijken....?
Gelieve Niet Bumpen::
Twee of meer keer achter elkaar in een topic posten heet bumpen. Bumpen is pas na 24 uur toegestaan en kan een reden zijn voor de admins en moderators om een topic te sluiten. Gebruik indien nodig de 
knop om je tekst aan te passen.
SanThe.
knop om je tekst aan te passen.SanThe.
Gewijzigd op 01/01/1970 01:00:00 door Whatever Whatever
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div id="gastenboekinfo">
<div id="gbberichtenheader"></div>
<div id="gbmessages" style="float:left;position:relative;width:620px;top:15px;margin-left:8px;margin-right:18px;">
</div>
</div>
</div>
[/Code]
(hoewel daar n </div> teveel is) Maar je probleem ligt bij het fijt dat je tabel (of iets anders) bij de div met id="gdmessages" groter is dan width: 620px. Daarom 'breekt hij uit': in jouw geval komt de scrollbar er.
Ik heb niet kunnen vinden wat het precies is, omdat het zo laat is en omdat er t veel html in stond. Maar dan weet je waar je moet zoeken. (in je PHP bestand staat vast minder html ;)
Ik hoop dat je t begrijpt, succes!
<div id="gbberichtenheader"></div>
<div id="gbmessages" style="float:left;position:relative;width:620px;top:15px;margin-left:8px;margin-right:18px;">
</div>
</div>
</div>
[/Code]
(hoewel daar n </div> teveel is) Maar je probleem ligt bij het fijt dat je tabel (of iets anders) bij de div met id="gdmessages" groter is dan width: 620px. Daarom 'breekt hij uit': in jouw geval komt de scrollbar er.
Ik heb niet kunnen vinden wat het precies is, omdat het zo laat is en omdat er t veel html in stond. Maar dan weet je waar je moet zoeken. (in je PHP bestand staat vast minder html ;)
Ik hoop dat je t begrijpt, succes!
Ik denk dat ik het wel begrijp alleen ik krijg het nog niet goed.
Ik heb uiteindelijk maar om de volledige div een scroll:auto gezet en dan de header aangepast (verkleind), daardoor lijkt het nu goed (alleen het is de verkeerde div die scrollt, maar goed het werkt.
Toch bedankt voor de moeite.
Tip gebruik inspringen in je html, geen inline styles e.d. en kijk eens naar json
Bedankt voor je antwoord.
Inspringen zou ik kunnen doen. Mijn site is alleen helemaal opgesplitst in veel losse files (met includes) omdat hij in development zit (misschien hou ik het ook wel zo.). Dus inspringen gaat wel veel tijd kosten, maar dat is nog wel te doen.
Inline styles heb ik vaker gehoord, maar bepaalde dingen moeten inline. Dit omdat anders kleuren bijvoorbeeld niet gewijzigd kunnen worden. (background-color), maar ik kan nog wel iets meer naar CSS verplaatsen. Andere inline styles worden via javascript en AJAX in de DIV's geplaatst. Daar wil ik flexibiliteit behouden. Ik wil daar het deel volledig opbouwen via AJAX, dus daar zal inline style waarschijnlijk blijven staan.
JSON heb ik van gehoord, maar zie ik om eerlijk te zijn het nut niet echt van in. Ik kan er nog wel even naar kijken. Ik denk dat je op JSON doelt omdat je mijn javascript hebt gezien voor bijvoorbeeld de nieuwe leden of online leden aanpassen?
Jacsoft schreef op 19.08.2009 10:05:
Inline styles heb ik vaker gehoord, maar bepaalde dingen moeten inline. Dit omdat anders kleuren bijvoorbeeld niet gewijzigd kunnen worden. (background-color),
Je kan het ook anders oplossen.
Bijvoorbeeld door verschillende stylesheets te maken en met javascript van stylesheet wijzigen. kijk ook hier http://www.alistapart.com/articles/alternate/.
Verder heb je gewoon een aantal vaste stylesheets die je allemaal include, maar waarvan er maar minimaal twee actief zijn.
Ik gebruik dit bijvoorbeeld voor lettergroottes aan te passen. Ik heb dan een screen.css met alle algemene gegevens (zoals de breedte van de container, hoogte van de header, etc) en minimaal twee stylesheets voor de font-size, etc (kan ik jouw geval natuurlijk de kleuren zijn) waartussen de gebruiker switcht.
Ik heb alle inline styles verwijderd (van de frontpage) en met javascript of via css stel ik die nu in. Ook ben ik met inspringen begonnen en is de frontpage al helemaal ingesprongen.
Op de andere pagina's ga ik nu hetzelfde toepassen. Bedankt voor de tips.
Dat inspringen in je HTML is niet nodig, wel makkelijk als je de broncode van je site wilt lezen (in de browser dus). Als dat niet nodig is maakt het niet uit dat de HTML niet ingesprongen is.
Sterker nog, niet inspringen (en geen nieuwe regels gebruiken) zorgt ervoor dat anderen moeilijker de bron kunnen lezen (maar nog steeds wel kunnen, dat zal altijd blijven) en, wat misschien nog wel belangrijker is, dat de bestandsgrootte kleiner blijft en dat scheelt opslag en dataverkeer.
Nee geen verkapte bump :D. Ik vind het alleen altijd wel netjes om toch te reageren op berichten om aan te geven of er iets mee gedaan is. Ik vind het wel leuk om te horen of een bepaald opmerking die je maakt ook ter harte genomen wordt. Dan weet je in ieder geval dat je het niet voor niks doet.
Ach het lezen van de bron zal mij een zorg zijn. Die hoef ik niet te hiden hoor. Hoeveel mensen zijn nou echt geinteresseerd in de source? En dan nog, wat kunnen ze er mee.
De bestandsgrootte dacht ik eerst ook aan. Mijn server is alleen een IIS server en ik heb gzip compression aan staan. Alles wordt dus al gecompressed verstuurd (bijna iedere browser kan dat aan tegenwoordig). Die max 1kb die het extra zal zijn dat zal de bottleneck niet zijn hoop/denk ik :D.
Ik vind inspringen zelf wel makkelijk tijdens het developen (waar ik voorlopig nog wel even mee bezig ben)