login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Waar kan het nog beter?

Offline Gust - 14/07/2009 10:57
Avatar van GustMySQL interesse Ik zag er al heel lang het nut van in en ben er nu ook echt mee begonnen! Zo ben ik in een testpagina vertrokken met een tabel, en dat langzaam omgezet in css.

Wat kan er nog veranderd en verbeterd worden?

Hier kun je de testpagina bekijken.

index.htm
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  3. <title>CSS test</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
  6.  
  7. </head>
  8.  
  9. <body class="body" topmargin="0" text="#000000">
  10. <br>
  11. <div align="center">
  12.  
  13.   <table class="table" cellspacing="0" cellpadding="0">
  14.     <tr>
  15.       <td class="td_hoofding"></td>
  16.     </tr>
  17.     <tr>
  18.       <td class="td_menu">hier komt het menu. Deze tekst moet in het midden komen</td>
  19.     </tr>
  20.     <tr>
  21.       <td class="td_main" valign="top"> 
  22.  
  23.       <IFRAME class="iframe" src="tekst_home.htm" scrolling="auto" frameborder="0" vspace="0" hspace="0"></IFRAME>        
  24. 	  </td>
  25.     </tr>
  26.   </table>
  27.  
  28. </div>
  29.  
  30. </body>
  31. </html>


style.css
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .body {
  2. scrollbar-face-color: #336633; 
  3. scrollbar-highlight-color: black; 
  4. scrollbar-shadow-color: FFFFCC; 
  5. scrollbar-3dlight-color: black; 
  6. scrollbar-arrow-color: black; 
  7. scrollbar-track-color: #FFFFCC; 
  8. scrollbar-darkshadow-color: black; 
  9. background-color:#000000; 
  10. }
  11.  
  12. .body_main {
  13. scrollbar-face-color: #336633; 
  14. scrollbar-highlight-color: black; 
  15. scrollbar-shadow-color: FFFFCC; 
  16. scrollbar-3dlight-color: black; 
  17. scrollbar-arrow-color: black; 
  18. scrollbar-track-color: #FFFFCC; 
  19. scrollbar-darkshadow-color: black; 
  20. background-color:#FFFF99; 
  21. }
  22.  
  23. .table {
  24. border:none;
  25. height:94%;
  26. width:752;
  27. }
  28.  
  29. .td_hoofding {
  30. background-image:url(../images/hoofding.jpg);
  31. height:140;
  32. }
  33.  
  34. .td_menu {
  35. height:25;
  36. font-family:Arial, Helvetica, sans-serif;
  37. font-size:10px;
  38. font-color:black;
  39. background-color:#FFFFFF;
  40. }
  41.  
  42. .td_main {
  43. height:95%;
  44. background-color:#666666
  45. }
  46.  
  47. .iframe {
  48. width:100%;
  49. height:100%;
  50. margin-left:0; 
  51. margin-right:0; 
  52. margin-top:0; 
  53. margin-bottom:0;
  54. overflow:hidden;
  55. }

13 antwoorden

Gesponsorde links
Offline Koen - 14/07/2009 11:00
Avatar van Koen PHP expert Weg met de iframe, weg met de tabellen, divs zijn te toekomst 
Offline marten - 14/07/2009 11:01
Avatar van marten Beheerder en weg met een eigen gemaakte scrollbar
Offline Gust - 14/07/2009 11:04
Avatar van Gust MySQL interesse Met die iframe wil ik namelijk dat effect krijgen van een zwevende pagina in een pagina met scrollbars.

Als jij weet hoe ik dat moet aanpakken met css, dan had ik het graag geweten.
Offline Joost - 14/07/2009 11:08
Avatar van Joost PHP expert
Koen schreef:
Weg met de iframe, weg met de tabellen, divs zijn te toekomst 
Sterker nog, divs zijn al het heden!  
Offline Gust - 14/07/2009 11:18
Avatar van Gust MySQL interesse Divs zijn nog een beetje ingewikkeld, da's pas een volgende stap.

Dat Iframe is ook heel makkelijk, maar als iemand weet hoe je hetzelfde effect kunt krijgen in css mag ie dit altijd illustreren.

Op de voorbeeldpagina kun je nog zien wat er nog tekort is
Offline Koen - 14/07/2009 11:22
Avatar van Koen PHP expert Vaste height & width aan een div meegeven en overflow: auto; 
Offline Martijn1989 - 14/07/2009 11:23
Avatar van Martijn1989 PHP ver gevorderde Wat bedoel je met een zwevende pagina? .. Kan je dat even uitleggen?
Offline Mroseboom - 14/07/2009 11:24
Avatar van Mroseboom Lid Ja zo als koen zegt gebruik divs dat werkt fijner en die scroll bar kan je ook beter weg laten en via div kun je maken zo dat hij automatisch langer wordt  succes
Offline Gust - 14/07/2009 11:25 (laatste wijziging 14/07/2009 11:31)
Avatar van Gust MySQL interesse Wat bedoel ik met een zwevende pagina?

Eigenlijk een foute uitdrukking van mij. Een pagina in een pagina die scrolt, zoals dat iframe wat ik nu heb. Die "zweeft" omdat ie geen kant raakt

Ik heb even rondgezocht op het net en iets toegapst, en het schijnt te lukken! Zie het tweede voorbeeld

Css:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .body {
  2. scrollbar-face-color: #336633; 
  3. scrollbar-highlight-color: black; 
  4. scrollbar-shadow-color: FFFFCC; 
  5. scrollbar-3dlight-color: black; 
  6. scrollbar-arrow-color: black; 
  7. scrollbar-track-color: #FFFFCC; 
  8. scrollbar-darkshadow-color: black; 
  9. background-color:#000000; 
  10. }
  11.  
  12. .body_main {
  13. scrollbar-face-color: #336633; 
  14. scrollbar-highlight-color: black; 
  15. scrollbar-shadow-color: FFFFCC; 
  16. scrollbar-3dlight-color: black; 
  17. scrollbar-arrow-color: black; 
  18. scrollbar-track-color: #FFFFCC; 
  19. scrollbar-darkshadow-color: black; 
  20. background-color:#FFFF99; 
  21. font-family:Arial, Helvetica, sans-serif;
  22. }
  23.  
  24. div.scroll {
  25. height: 100%;
  26. width: 100%;
  27. overflow: auto;
  28. border: 0px;
  29. background-color: #ccc;
  30. }
  31.  
  32. .table {
  33. border:none;
  34. height:94%;
  35. width:752;
  36. }
  37.  
  38. .td_hoofding {
  39. background-image:url(../images/hoofding.jpg);
  40. height:140;
  41. }
  42.  
  43. .td_menu {
  44. height:25;
  45. font-family:Arial, Helvetica, sans-serif;
  46. font-size:10px;
  47. font-color:black;
  48. background-color:#FFFFFF;
  49. }
  50.  
  51. .td_main {
  52. height:95%;
  53. background-color:#666666
  54. }
  55.  
  56. .iframe {
  57. width:100%;
  58. height:100%;
  59. margin-left:0; 
  60. margin-right:0; 
  61. margin-top:0; 
  62. margin-bottom:0;
  63. overflow:hidden;
  64. }
Offline Koen - 14/07/2009 11:34
Avatar van Koen PHP expert
Citaat:
* De scrollbars zouden normaal ook een kleur moeten hebben.
* Hoe zorg je ervoor dat er onderaan nog een brake overblijft?
* Hoe maak je een css voor het Iframe, met name scrolling="auto" frameborder="0" vspace="0" hspace="0"
* body: topmargin="0"
* tabel: cellspacing="0" cellpadding="0"

* Niet doen.
* Padding-bottom property
* Div met een width & height met overflow: auto; of overflow: scroll;
* margin-top property
* cellspacing & cellpadding properties
Offline Gust - 14/07/2009 11:43 (laatste wijziging 14/07/2009 11:51)
Avatar van Gust MySQL interesse Ik heb die scrollvoorkeuren toch maar weggelaten. Maar nu zie ik uiterst rechts een vaste scrollbar staan, ook al moet er niet gescrold worden. Is dit normaal, kan die ook weg?

@Koen: bedoel je het zo?
css code - Bekijk de code zonder highlighting - Klap code in 
  1. padding-bottom:property;
  2. margin-top:property;
Offline Aar - 14/07/2009 12:15 (laatste wijziging 14/07/2009 12:16)
Avatar van Aar PHP interesse
Gust schreef:
Ik heb die scrollvoorkeuren toch maar weggelaten. Maar nu zie ik uiterst rechts een vaste scrollbar staan, ook al moet er niet gescrold worden. Is dit normaal, kan die ook weg?

@Koen: bedoel je het zo?
[..code..]

Nee, je moet een waarde meegeven
Zoiets dus:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. margin-left: 10px;

De margin-left valt onder de property, en de pixelwaarde onder de value.

Even een leuke tip: Kijk zeker eens in de CSS afdeling op www.w3schools.com.
Offline Gust - 14/07/2009 12:46
Avatar van Gust MySQL interesse Ok, ik heb dit gedaan:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. padding-bottom: 20px;
  2. margin-top: 20px;


Aan de bovenkant werkt het, aan de onderkant heeft het blijkbaar geen enkel effect.

Om de tabel te centreren heb ik dit gedaan:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. margin:auto

of
css code - Bekijk de code zonder highlighting - Klap code in 
  1. margin-left:auto;
  2. margin-right:auto;


Normaal zou dat moeten lukken, maar om de één of andere reden centreert ie niet  
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.218s