[CSS+HTML] pagina wordt langer>scrollbalk nodig - Softwareontwikkeling

woensdag 9 augustus 2006 14:16

Acties:

Topicstarter

Hallo,
Na op google me al helemaal suf gezocht te hebben, bedacht ik mijn vraag hier maar eens te stellen.

De opmaak van mijn site is in CSS gemaakt. Nu loopt op een paar pagina's de tekst door, waardoor er aan de linkerkant (een andere div) witte achtergrond verschijnt, zo lang als de tekst is in het middenvenster (main div). De oplossing is dus een scrollbalk op een paar pagina's van de main.

Maar, ik heb diverse plaatsen in de css geprobeerd, heb ook overflow:scroll geprobeerd, maar niks helpt. Weet iemand de oplossing?
Hier de CSS code van het main venster, dus waar de tekst te lang is en de scrollbalk moet:

code:

div.Main2{
   width: 562px;
   float: left;
   background-image: url(images/main2.gif);
}
div.MainInhoud2{
   overflow: scroll;
   height: 387px;
   width: 549px;
   text-align: justify;
   
}

woensdag 9 augustus 2006 14:23

Acties:

DexterDee

I doubt, therefore I might be

Ik denk even hardop hoor, maar was het niet zo dat je position: relative of position : absolute moest toevoegen om een div scrollable te maken?

Klik hier om mij een DM te sturen • 3245 WP op ZW

woensdag 9 augustus 2006 15:03

Acties:

-Japser-

Topicstarter

DexterDee schreef op woensdag 09 augustus 2006 @ 14:23:
Ik denk even hardop hoor, maar was het niet zo dat je position: relative of position : absolute moest toevoegen om een div scrollable te maken?

Ik heb ze allebei (relative en position) uitgeprobeerd en onder divMain2 en divMainInhoud2 gezet. Er veranderd wel wat soms, maar haalt dan de website door elkaar, dus dit is niet de oplossing helaas..

woensdag 9 augustus 2006 15:13

Acties:

remcotolsma

De CSS die je geeft werkt wel in FF, IE5, IE6...

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
      <!--
      div.Main2
      {
        width: 562px;
        float: left;
        background-image: url(images/main2.gif);
      }

      div.MainInhoud2
      {
        overflow: scroll;
        height: 387px;
        width: 549px;
        text-align: justify;
      }
      -->
    </style>
  </head>

  <body>
    <div class="Main2">
      <div class="MainInhoud2">
        <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>   
      </div>
    </div>
  </body>
</html>

Misschien dat je wat meer info kunt geven..

woensdag 9 augustus 2006 15:16

Acties:

-Japser-

Topicstarter

Ok, zie
http://www.jasperleferink.nl/transpher/index2.php?page=3
en
http://www.jasperleferink.nl/transpher/index2.php?page=4

Aan de rechterkant zie je een strookje wit, en ik wil dat ie dus gewoon gaat scrollen daar....

woensdag 9 augustus 2006 15:26

Acties:

remcotolsma

Ik zou eerst de (X)HTML en CSS 'ns goed bij langs gaan, door dat even valide te maken los je je problemen wel op denk ik...

http://jigsaw.w3.org/css-...r%2Findex2.php%3Fpage%3D4
http://validator.w3.org/c...index2.php%253Fpage%253D4

Cascading Stylesheet:

div.MainInhoud2{
   overflow: scroll;
    height: 387px;
    width: 549px; 
    text-align: justify;
    position: fixed;    
}

De 'text-align: justify;' wordt bij mij ook niet toegepast geloof ik...

woensdag 9 augustus 2006 15:31

Acties:

faabman

Cascading Stylesheet:

div{
  display:block;
  height:xx;
  overflow:auto;
}

zijn de basisingredienten van een scrollable element

-Japser- schreef op woensdag 09 augustus 2006 @ 15:16:
Ok, zie
http://www.jasperleferink.nl/transpher/index2.php?page=3
en
http://www.jasperleferink.nl/transpher/index2.php?page=4

Aan de rechterkant zie je een strookje wit, en ik wil dat ie dus gewoon gaat scrollen daar....

Je moet in je testcase wel even rekening houden met de hoofdlettergevoeligheid van CSS

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

woensdag 9 augustus 2006 16:29

Acties:

-Japser-

Topicstarter

Na een beetje pielen is het uiteindelijk gelukt. Ik zal kijken welke fouten er nog in zitten en proberen te verbeteren.
Alleen zou ik nu de tekst bij de scrollbalken niet helemaal tot daaraan door willen lopen, maar 10px daarvoor ofzo, ik heb van alles geprobeerd bij de 'width' maar dat helpt niet. Waarbij moet ik dan zitten?

(zie url)

woensdag 9 augustus 2006 16:51

Acties:

OkkE

CSS influencer :+

Als je ook even zou kunnen vertellen wat je tijdens het "beetje pielen" gedaan hebt, dat maakt het wat nuttiger voor andere mensen als ze dit topic vinden in de search.

Voor je tweede probleem; een padding-right:10px; op de zelfde <div> als waar je overflow:auto; aan hangt, zou het moeten oplossen.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.