overflow

Status
Niet open voor verdere reacties.
willem008

willem008

Gebruiker
Lid geworden
28 sep 2007
Berichten
792
goede dag

Ik heb in mijn content een div

<div id="info"></div>

nu wil ik alleen die div met een scrol venster maker ,dus zodat er aan de rest van de pagina niets veranderd.

Ik heb al overflow: auto; aan mijn style toegevoegd dan gaat het in firefox goed maar in internet expl niet.

wat is de simpelste oplossing
 
Ik zou het als volgt doen:

Ik zou in de CSS een style aan maken voor een div.

Laten we die div scroll noemen
In de css krijg je dan :

Code: 
div.scroll{
overflow: auto;
width: 100px;
height: 100px;
}
Het is nodig om bij een div die je wilt laten scrollen een hoogte en breedte vast te zetten.

Wanneer we de DIV dan aanroepen op de pagina moeten we hem aanroepen met een class. Die hebben we hem namelijk net gegeven (scroll).

Je krijgt op de pagina dan :

HTML: 
<div class="scroll" > De text die in de div terechtkomt </div>

Corrigeer me als ik fout zit.
 
Ok ok heb even iets gemaakt op te proberen , het werkt goed althans alleen in firefox internet expl werkt het niet opera en google chrome heb ik nog niet getest.

ik heb nu dit

html

<div class="scroll"> tetst .... </div>

css

.scroll{
width: 100px;
height:100px;
overflow: auto;
position:absolute;
background-color:#ccc;
border: solid thin 14285f;
color:#000;
padding: 5px 0 0 5px;
margin: 10px 0 0 20px
}
 
willem008 zei:
Ok ok heb even iets gemaakt op te proberen , het werkt goed althans allen in firefoin internet expl werkt het niet opera en google chrome heb ik nog niet getest.

ik heb nu dit

html

<div class="scroll"> tetst .... </div>

css

.scroll{
width: 100px;
height:100px;
overflow: auto;
position:absolute;
background-color:#ccc;
border: solid thin 14285f;
color:#000;
padding: 5px 0 0 5px;
margin: 10px 0 0 20px
}
Klik om te vergroten...

Heb je een link waar we het kunnen bekijken?
 
ook het volgende begrijp ik niet.

Ik heb mijn site ook op mijn computer staan en wel in xampp,
als ik hem daar open is hij in alle browsers goed.( het scroll venster)

maar op het internet blijft firefox de spelbreker.
 
Laatst bewerkt:
Ja ongeloofelijk nu ook bij mij goed,

gister de hele dag niet goed ,heb niets veranderd en nu wel goed in ff.

zou dat soms met de browser geschiedenis of zo iets te maken hebben gehad alhoewel
ik gister en vandaag niets heb leeg gehaald.


Dan nog een klein ander vraagje ,
Ik ben nog steeds aan het zoeken naar een mooie manier om de gegevens te laten tonen,
ik had het eerst zonder scroll balk maar toen werden soms de rijen te lang(omdat de gegevens uit een database komen) en moest je te veel scrollen ,
Nu met de scroll balk kan je scrollen maar de pagina blijft staan is al beter.

Ik wil eigenijk ook een keer proberen dat hij vier artikelen toont zoals bijv zoeken op catergorie - katrollen

Dan zou ik onder het laatste artikel een knop "volgende vier" willen hebben en mischien een terug knop zodat ze de artikelen kunnen bekijken zonder scrollen.

Maar hier kom ik nog niet uit , mischien heb je een idee of moet ik dat echt in de database gaan zoeken.
 
Hoi Willem,
Als ik het mag zeggen: ik weet het eigenlijk niet of je de materialen in blokjes van 5 artikelen tegelijk zou moeten laten zien, waarbij je dan kan klikken voor de volgende vijf. Zo mis je het overzicht: bezoekers kunnen niet snel even iets uitkiezen, want ze weten niet wat er na 4 of 5 kliks verder aan zit te komen.

Zelf hou ik ook niet erg van "binnenvensters", met een eigen verticale scrollbar. Liever gebruik ik de gewone rechter scrollbar: dan hoef ik niet steeds met m'n muis van scrollbar te wisselen, en dan past er ook méér op een pagina (= meer overzicht).

Mijn suggestie zou zijn: de extra scrollbar er weer uit halen, en voor het gemak onderop de pagina (gefixeerd, dus altijd onderop) een link "Naar top" zetten, zodat men altijd vlug terug is.
Wat je ook zou kunnen doen, is bovenaan een overzicht met alleen de afbeeldingen in het klein maken; zodat je vanuit dat overzicht met een klik precies bij het gewenste artikel uitkomt.
Met vriendelijke groet,
CSShunter
 
ja ik denk dat het met een link onderaan "naar top" het mooiste is

maar ik moet even snappen hoe ik die er in plaats.

alleen zit ik met het volgende

als ik nieuwe materialen toevoegd in mijn database moet ik zonder scoll balk steeds de hoogte van het vak
aanpassen anders komen er materialen buiten het vak te staan.

echter met scroll heb ik daar geen last van
en als er bijv maar 2 artikelen getoond worden heb ik zonder scroll een heel lang vak voor meer 2 artikelen.


maar nogmaals wat jij zeg met een link onderaan "naar top" is denk het mooiste alleen moet ik even kijken
hoe ik het het beste oplos omdat ik met steeds verschillende aantal gegevens zit
 
Laatst bewerkt:
als ik nieuwe materialen toevoeg in mijn database moet ik zonder scoll balk steeds de hoogte van het vak aanpassen anders komen er materialen buiten het vak te staan.
Klik om te vergroten...
Volgens mij hoeft dat niet.
Ik heb in m'n test-pagina gezet:
Code: 
.scroll {
    height: auto;
    }
om de oude scroll-hoogte van 500px ongedaan te maken, en dan gaat het vanzelf goed.
D.w.z. als je uit jouw css het regeltje
Code: 
.scroll {
    height: 500px;
    }
weghaalt (en er niets anders voor in de plaats zet), zou het goed moeten gaan: dan pas alles er altijd vanzelf op. Heb je dat al eens geprobeerd?
 
nou was even stoeien maar is gelukt,

alleen als ik zoek op artikel en dan alle artikelen uit database kies(alle bovenste)

werkt de link naar top niet en wel alleen niet in internet expl in ff en opera en google chrome wel waar kan dat aan liggen.

zou niet moeten kunnen is dezelfde pagina namelijk verwerk.php
 
Aha, ik zie het. Ik denk dat het aan het stapelen van laagjes ligt (de volgorde van de <div>'s), daar heeft Internet Explorer wel meer last van.
Je zou kunnen proberen om toe te voegen:
Code: 
#toplink-links {
    ...
    z-index: 5;
    }
#toplink-rechts {
    ...
    z-index: 5;
    }
Dan zouden deze links ook in IE bovenop moeten komen te liggen.

Als dat niet helpt, wordt het waarschijnlijk opgelost door in de html-code de twee toplinks weg te halen waar ze nu staan:
HTML: 
<div class="scroll"> 
    <h2 id="subkop"><strong></strong></h2>
    <a id="toplink-links" href="#" onclick="window.scrollTo(0,0); this.blur(); return false;">Naar top</a>
    <a id="toplink-rechts" href="#" onclick="window.scrollTo(0,0); this.blur(); return false;">Naar top</a>
    ....
en in te plakken helemaal onderaan de pagina, net voor de </body>:
HTML: 
        ...
        </div>
    </div>

<div>
    <a id="toplink-links" href="#" onclick="window.scrollTo(0,0); this.blur(); return false;">Naar top</a>
    <a id="toplink-rechts" href="#" onclick="window.scrollTo(0,0); this.blur(); return false;">Naar top</a>
</div>

</body>
</html>
Daar had ik ze in mijn testvoorbeeld ook gemonteerd, en dan doen ze het ook in IE.

Met vriendelijke groet,
CSShunter
 
ok het is gelukt ,het verplaatsen van de linken was voldoende.

Maar dan nog even dit

ik heb nu een hoofdcontainer met daarin een content
die staan nu zo
#hoofdcontainer{
height: 800 px;

#content{
height; 800px;

en in dat content een div die nu scroll heet.
.scroll(
overflow: auto;

mijn vraag ,
nu moet ik zeker ook de hoofdcontainer en het content op auto zetten.

hij wordt nu wel goed getoond maar is zeker niet zoals het hoort.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan