login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Browserverschillen en scrollbar problemen (Opgelost)

Offline ekki - 20/10/2010 19:43 (laatste wijziging 20/10/2010 19:44)
Avatar van ekkiLid Om meteen maar met de deur naar binnen te vallen als nieuw lid zijnde.  

Sinds gisteren is dan eindelijk mijn eerste echte, handgemaakte website online (http://www.paardenbitten.nl). Zo trots als ik daarop ben (de voorpagina even daar gelaten) baal ik er enorm van dat ik tegen twee problemen loop vanwaar ik de oplossing niet kan vinden. Ik hoop dat jullie mij dus kunnen helpen hiermee. Als toevoeging, ik ben een leek op dit gebied. Ik heb er bijna 3 maanden over gedaan om dit al zo in elkaar te kunnen zetten.  

Browserverschillen
Ik blijf een irritant verschil houden tussen Windows Internet Explorer en FireFox/Google Chrome. De laatst twee genoemde weergeven de site foutloos, maar WIE gaat aan de wandel met mijn tekstblok (via DIV gepositioneerd met relative). Nu begrijp ik dat er altijd een verschil zal blijven. Maar wat kan ik doen om dit verschil zo klein mogelijk te maken?

Scrollbar probleem
Daarnaast blijf ik helemaal rechts een scroll-bar houden. Nu weet ik dat ik hem uitgeschakeld kan krijgen via
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body, html { overflow: hidden;}
, maar met als gevolg dat anderen mijn site dan helemaal niet meer, of gedeeltelijk, kunnen zien. Hoe kan ik dat oplossen?

Hier de CSS code:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body, html { overflow: auto; background-color: #CCCCFF; margin: 0; padding: 0;}
  2.  
  3. h1{ text-align: center; color: #000000; font-family: Century Gothic, Arial; font-weight: bold; font-size: 45px;}
  4.  
  5. h2{ text-align: left; color: #000000; font-family: Century Gothic, Arial; font-weight: bold; font-size: 20px}
  6.  
  7. h3{ text-align: left; color: #000000; font-family: Century Gothic, Arial; font-weight: bold; font-size: 15px}
  8.  
  9. p{ text-align: left; color: #000000; font-family: Verdana, Arial; font-size: 13px}
  10.  
  11. .HOMEBOX{ background-color: #9999CC; padding: 20px; height: 45%;}
  12.  
  13. .TITEL{ background-color: #CCCCFF; height: 150px; width: 1032px; border-top: 0px solid #000000; 
  14. border-right: 0px solid #000000; border-bottom: 0px solid #000000; border-left: 0px solid #000000; background-image:url(Logo2.jpg); background-repeat:no-repeat;}
  15.  
  16. .MENU{ position: relative; top: -29px; left: 0px; background-color: #CCCCFF; padding: 20px; height: 500px; width: 400px; border-top: 0px solid #000000; 
  17. border-right: 0px solid #000000; border-bottom: 0px solid #000000; border-left: 0px solid #000000;  }
  18.  
  19. .TEKSTVAK{ position: relative; top: -528px; left: 228px; background-color: #CCCCFF; padding: 20px; margin: 0px; height: 500px; width: 900px; 
  20. border-top: 1px solid #000000; border-right: 0px solid #000000; border-bottom: 0px solid #000000; border-left: 1px solid #000000; }
  21.  
  22. .TEKSTVAK2{ overflow: auto; position: relative; top: -528px; left: 228px; background-color: #CCCCFF; padding: 20px; height: 550px; width: 900px; 
  23. border-top: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; }
  24.  
  25. .menu a{ color: #000000; text-decoration: none;} 
  26. a:visited{color: #000000; } 
  27. a:hover{ color: #CCCCFF} 
  28. ul{ font-family: Verdana, Arial; font-size: 11px; list-style-type: none; border: 1px dashed #CCCCCC;} 
  29. li{margin-top: 0.5em;} 
  30. #menu {width: 13em; border right: 0px solid #000000; padding: 0; margin-top: 2em; margin-bottom: 0em; font-family: Verdana, Arial;}
  31. #menu ul { list-style: none; border: 0; none; margin: 0px; padding: 0;} 
  32. #menu li { border-bottom: 1px solid #000000;} /* zwarte lijn onder de categoriën */
  33. #menu li a { display: block; text-decoration: none; padding: 5px 5px 5px 0.5em; background-color: #9999CC; color: #000000;} 
  34. #menu li a:hover { color: #FFFFFF; font-weight: bold;}
  35. #menu ul li a.selected { font-weight: bold; color: #FFFFFF;}
  36.  
  37. table{ background-color: #9999CC; color: #000000; width: 820px; height: 23px; border: 1px solid #000000; margin: 1px; padding: 1px; 
  38. border-spacing: 2px solid #000000; border-collapse: collapse; border-color: #000000; }
  39. td{padding:6px; text-align: center; font-family: Verdana, Arial; font-size: 11.5px; width: 200px; }

6 antwoorden

Gesponsorde links
Offline pijke - 20/10/2010 19:50
Avatar van pijke Gouden medaille

Lid		 allereerst, graag nette code:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body, html {
  2. overflow: auto;
  3. background-color: #CCCCFF;
  4. margin: 0;
  5. padding: 0
  6. }
  7.  
  8. h1 {
  9. text-align: center;
  10. color: #000000;
  11. font-family: Century Gothic, Arial;
  12. font-weight: bold;
  13. font-size: 45px;
  14. }
  15. ...
geen zin om alles te doen 
die scrollbar krijg je met overflow: auto alleen maar als je pagina te lang is. als je dat niet wilt kun je min-height gebruiken.
Offline ekki - 20/10/2010 19:57 (laatste wijziging 20/10/2010 19:59)
Avatar van ekki Lid Bedankt, ik ga er mee aan de slag.

Over de browserverschillen. Kan dat opgelost zijn doordat je .TEKSTVAK{ position: relative;} vervangt door .TEKSTVAK{ position: absolute;} ? Zo ja, dan voel ik mij erg blond want daarmee is dat probleem geloof ik nu opgelost.

[edit] De scrollbar is daardoor nu ook weg en komt alleen maar opdagen wanneer ie nodig is. Kan dat echt liggen aan bovenstaande?
Offline pijke - 20/10/2010 20:36
Avatar van pijke Gouden medaille

Lid		 dat kan.
ik gebruik zelf alleen position:absolute; dus ik weet niet zoveel van position: relative;.
maar dat is ook alleen maar omdat ooit één iemand heeft gezegd dat posotion: absolute geweldig is  (maar dat valt reuze mee).
Offline ekki - 20/10/2010 20:51
Avatar van ekki Lid Mijn problemen zijn daar nu dus mee opgelost *doet een vreugdedansje*. Bij de andere gebruikers doet hij het nu ook prima. Ben je dagen bezig om dat probleem op te lossen en dan lag het al die tijd daaraan. Ach, het is een wijze les!
Offline valles10 - 20/10/2010 21:00
Avatar van valles10 HTML interesse zulke dingen zal je nog meermaals tegenkomen.
Veel geluk verder ;)
Offline ekki - 21/10/2010 21:32
Avatar van ekki Lid Bedankt! De lay-out is ondertussen ook helemaal aangepast. En ik geloof dat hij zo klaar is. Nu kan ik de inhoud verder aanvullen. 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.202s