Scrolbar (schoonheids) foutje

Status
Niet open voor verdere reacties.

pewie37

Gebruiker
Lid geworden
2 sep 2007
Berichten
506
Beste forumleden :)

Ik ben met DEZE site in de test-fase waarbij mij 1 ding opvalt.

Kort geleden heb ik in de body van elke site de overflow op "scroll" gezet omdat mij hinderde dat de (gecentreerde) site eerst wordt opgebouw terwijl daarna pas de explorer de scrolbar inschakeld. Dit had als gevolg dat de site niet meer gecentreerd staat en verspringt naar het nieuwe centrum. De site springt zo tijdens het surfen zenuwachtig heen en weer. Nu ik aan het testen ben geslagen merk ik op dat op een vista pc met een oudere IE ineens 2 verticale scrolbars heb :d

Ik heb dit dus maar even terug gezet en zit nu weer met een "huppelende" site.

Wie weet raad ?
Thanxs alvast weer :thumb:
 
Groter scherm gebruiken en de 2de scrollbar is weg of de height in de

#centercontent {
scrollbar-arrow-color: #FFFF00;
scrollbar-face-color: #8A8A8A;
scrollbar-highlight-color: #FFF;
scrollbar-3dlight-color: #008000;
scrollbar-shadow-color: #2F2F2F;
scrollbar-darkshadow-color: #030303;
scrollbar-track-color: #4D4D4D;
float: left;
height: 520px; /* verkleinen */
width: 680px;
letter-spacing: normal;
text-align: left;
vertical-align: baseline;
word-spacing: normal;
white-space: normal;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #030303;
border-right-color: #030303;
border-bottom-color: #030303;
border-left-color: #030303;
color: #999;
font-size: 12px;
overflow: auto;
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
line-height: normal;
padding-top: 40px;
padding-right: 60px;
padding-bottom: 40px;
padding-left: 60px;
}
Mvg
Defietser
 
Groter scherm gebruiken en de 2de scrollbar is weg
  • En een uitknip-bonnetje op de site zetten waarmee bezoekers ergens gratis een groter beeldscherm kunnen ophalen, zeker? ;)

  • Of een button om de standaard-resolutie even vlug te veranderen voor deze site, en die na bezichtiging weer normaal te zetten? :D

height: 520px; /* verkleinen */
  • Da's ook een goeie: "zet maar minder content op de site". :rolleyes:
  • Dan kan je nog beter de boodschap geven <if IE>Gebruik geen IE voor deze site, maar een andere browser</if>.

Het kan ook anders (o.a. door alle heights er juist uit te laten) - maar vandaag & morgen lukt het me niet om een bruikbaar alternatief te maken.

Wordt vervolgd!
Met vriendelijke groet,
CSShunter

@pewie37: om de tijd te doden, heb ik een verhaaltje voor je "A small story about perception". (dit was een kromme zin)
 
Laatst bewerkt:
Ik ga een uitknipbonnetje op de site zetten denk ik :d :thumb:

Alle gekheid op een stokje: tvgids.nl b.v. heeft dat ook.
(nee geen uitknipbonnetje, maar dat heen en weer jumpen)
 
Hoi pewie,
Het blijkt iets gecompliceerder dan "een schoonheidsfoutje even herstellen". Maar ik ben een aardig stuk op weg.
  • Om je alvast een beetje lekker te maken :P, een screenshot van IE7 op resolutie 1024x768px.
  • Geen gejump, geen verticale scrollbar te zien, ook niet bij 800x600px. En gecentreerd bij alle resoluties. :)
Wordt vervolgd!
CSShunter
 
OKEEE !
Ben benieuwd hoor :thumb:

Had ook niet anders van je verwacht ;)
 
Had ook niet anders van je verwacht ;)
Toe maar! :d

O.k., daar gaan we. Ik pak meteen mijn belofte:
Zal ik later op terug komen.
weer op over tabelloos css-en, uit de draad van een tijdje terug.

Maar wat ik allemaal niet aan ratatouille tegenkwam in de broncode van de huidige pagina! :shocked:
Het bulkt b.v. van het javascript voor de uitklapmenu's, wat het niet erg overzichtelijk maakt. De structuur van de pagina + bijbehorende css-opmaak is ook niet zodanig, dat je er makkelijk aanpassingen op kunt aanbrengen. En er zijn ook een flink zwikkie (49) html-errors op de pagina verdwaald, die eerst gerepareerd zouden moeten worden...

Dan is het eenvoudiger om met een schone lei te beginnen, en systematisch de pagina-opzet opnieuw te ontwikkelen. Het betere doka-werk in feite: als we naar buiten komen, moet er iets moois te zien zijn.
Mijn streven:
  • géén javascript,
  • géén tabellen,
  • zo snel mogelijke pagina's (want surfers zijn puur ongeduldig ;) ),
  • geen scrolbarren behalve de normale browser-scrollbar voor verticaal scrollen,
  • pagina's gecentreerd in alle resoluties,
  • alvast zoveel mogelijk rekening houden met latere opsplitsing in recyclebare php-fragmenten.
  • en valid xhtml strict + valid css.
Om met het laatste te beginnen: in XHTML mogen tags niet met hoofdletters erin geschreven worden (bv. <META ... />). Het moet dus <meta ... /> enz. zijn. Hetzelfde geldt voor de aanduiding van eigenschappen: <meta Name="ABCD" ... /> mag dus ook niet, dat moet worden: <meta name="ABCD" .../>. De waarden van de eigenschappen die binnen de aanhalingstekens staan, mogen echter wel hoofdletters bevatten; dus het "ABCD" wordt wel goedgekeurd. Kleine letters en gemengde letters als value zijn ook goed.

Eigenlijk ga ik een vergelijkbaar recept volgen als dit; en tegelijkertijd deze goed in de gaten houden. Kijken waar het toe leidt!
Het eerste resultaat:
Een mooie kale pagina dus, maar het centreren is alvast gelukt. Als we geen rare dingen uithalen en alles netjes binnen de <body>-borders zetten, kan dat niet meer stuk.

Tweede stap: we gaan meteen iets raars uithalen. :)
Het "spiegelportret" aan de rechterkant moet buiten de gewone gecentreerde inhoud komen. Dat kan door deze afbeelding een absolute positie te geven, d.w.z. niet absoluut t.o.v. het punt (0,0) op het scherm - dan zou het niet bij alle resoluties goed gaan -, maar absoluut t.o.v. de rest van de inhoud (en meescrollend met de background). Dus t.o.v. punt (0,0) van zijn "parent element", de <body>; en dat kan gerealiseerd worden door opgave van de margin-left en margin-top:
Voorlopig kunnen we nu weer normaal gaan doen: het invoegen van de ingrediënten voor de header.
Er is alvast plek gereserveerd voor de tab-menu tabjes.
De bediening gaan we niet met javascript doen, maar met css-hovers. En door gebruik te maken van een zogenaamd "css-sprite" (gecombineerd img, waarvan steeds een deel gebruikt wordt) hoeft er ook geen (javascript-)preload van de images voor de verschillende hover-statussen plaats te vinden. Dit werkt razendsnel.
Maar dat komt de volgende ronde aan de beurt. ;)

Voor nu nog even een discussiepunt: dagelijks wisselende header?
Bij mij persoonlijk werkt dit als volgt:
  • Na mijn eerste bezoek aan een site blijft er in mijn associatievelden een soort beeld van de pagina als totaal hangen. Daarin zijn logo en header beeldbepalende en identiteitsverschaffende elementen.
  • Kom ik de volgende dag terug op die site, en staat er opeens een andere header op de homepage, dan put ik kennelijk uit mijn onderbewustzijn: want binnen een fractie van een seconde denk ik "verhip, dat is 'm niet!", op de voet gevolgd door: "eh, of wel?".
  • De volgende tellen kijk ik naar het webadres en/of de tekst van de site, om me ervan te overtuigen dat ik toch echt goed zit.
  • Dat hindert me ("hè, waarom moet dat nou zo nodig?"), want het scheelt me tijd om verder te gaan waar ik mee bezig was: iets op de site zoeken die ik zo de moeite waard vond om terug te komen!
Kortom, ik weet niet of het zo'n goed idee is om elke dag een ander plaatje in de header te zetten. Je zou het bv. maandelijks kunnen doen, dan kunnen in elk geval de snelle terugkeerders niet in verwarring komen. Of helemaal niet wisselen, en gewoon één hele mooie uitzoeken. Als het goed is, moet die in combi met de rest van de homepage genoeg prikkelen om meer foto's te willen zien: dus de site gaan verkennen op zoek naar wat er nog meer aan moois is.
Ook zijn er pagina's genoeg om op elke pagina een ander header-img te gebruiken: dat kan ook, en in mijn gevoel wint de site daarmee.
Tot zover deze opwellende gedachten!

Wordt vervolgd:
met vriendelijke groet,
CSShunter

PS: de theorie van de css-sprites staat in dit korte artikeltje. Als je het weet: heel eenvoudig! Meer over het rangeren met background-images staat hier.
 
Nog even tussentijds:
Ken je het (gratis) programma ShiftN? Misschien zit zoiets ook al in Photoshop e.d., maar je kunt er heel snel gebouwen, bomen en lantaarnpalen mee recht zetten.
Vergelijk origineel:
kopfoto1_123fotografie.png

png, 90kB​
en na ShiftN-behandeling:
foto123-kopfoto-1_ShiftN.jpg

jpg, 19kB​
 
Hoi pewie,
Fase 04 t/m fase 06 zijn er inmiddels ook.
Onderaan fase 03 kan je nu doorklikken.

wvv,
CSShunter
 
Wow CSS Hunter knap staaltje werk.
Ik merkte wel dat het spiegel portret niet terug gaat als de pagina weer groot word?

Maar wanneer is het vervolg?:D
 
(...) Maar wanneer is het vervolg? :D
Ja, goeie vraag!
Ik wacht eigenlijk v/a half nov. op een reactie van pewie, maar die komt er kennelijk niet aan toe om iets van zich te laten horen en/of met de site-vervolmaking verder te gaan.
Om vanaf de originele tabel-opmaak tot fase 6 te komen, vond ik bij elkaar al behoorlijke sprongen.
En ik wilde niet dat de draad niet meer te volgen zou zijn, als ik door teveel gespring ineens tussen de bomen van het bos weggehopst zou zijn. ;)
Vandaar!

Ik merkte wel dat het spiegelportret niet terug gaat als de pagina weer groot word?
Ja, dat klopt: dat ging pas weer terug bij een klik naar de volgende pagina.
Maar op beide vragen een antwoord:

Fase 07
en
Fase 8
Met vriendelijke groet,
CSShunter
 
Sorrie Guys,

Had per ongeluk mij uit alle draadjes uitgeschreven.
Totdat ik weer eens ging kijken.
Goed huiswerk zeg !

CSShunter Rules ! :D

Ik ga v.a. maandag eens kijken of ik een en ander kan ombouwen.
Heb wel in de tussentijd de stylesheet iets aangepast.

Trouwens: over het rechttrekken van die foto is adobe-lightroom je-van-het.
Die haalt de groothoekvertekening van jouw specifieke lens uit de foto.

Word vervolgt :thumb:

nieuweCSS.jpg
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan