login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Gradient doet het niet goed (Opgelost)

Offline julianb - 26/12/2011 20:00 (laatste wijziging 27/12/2011 16:04)
Avatar van julianbLid beste forum leden

ik ben een jonge maar toch al een actieve programmeur in HTML/CSS/(javascript)/PHP/Visual Basic.Ik ben nu bezig met een site te maken en daar bij gebruik ik Gradient. Hij doet het wel. Maar nu komt het
http://imagesha...loosra.png/ .
en ik wil dus dat het over de gehele pagina loopt en niet zo op elkaar.
Hopelijk hebben jullie hier een oplossing voor dat zou fijn zijn.

Alvast bedankt
Julian
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
  2.  
  3.  
  4. 	<!--Javascript-->	
  5. 	<!--[if IE 7]>
  6. 	<link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen" />
  7. 	<![endif]-->
  8.     <!--[if lte IE 6]>
  9.     <link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen"/>
  10.     <![endif]-->		
  11.     <!--[if lte IE 8]>
  12. 	 <link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen"/>
  13.     <![endif]-->   
  14.     <style type="text/css">
  15.         body
  16.         {
  17.         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b1b1b2, endColorstr=#f0f0f0)";    
  18.         background-color: #CCC;
  19.         background-image: linear-gradient(bottom, rgb(177,177,178) 2%, rgb(201,201,201) 51%, rgb(240,240,240) 85%);
  20.         background-image: -o-linear-gradient(bottom, rgb(177,177,178) 2%, rgb(201,201,201) 51%, rgb(240,240,240) 85%);
  21.         background-image: -moz-linear-gradient(bottom, rgb(177,177,178) 2%, rgb(201,201,201) 51%, rgb(240,240,240) 85%);
  22.         background-image: -webkit-linear-gradient(bottom, rgb(177,177,178) 2%, rgb(201,201,201) 51%, rgb(240,240,240) 85%);
  23.         background-image: -ms-linear-gradient(bottom, rgb(177,177,178) 2%, rgb(201,201,201) 51%, rgb(240,240,240) 85%);
  24.         }
  25.         div
  26.         {
  27.             display:block;
  28.             text-align:center;
  29.         }
  30.     #logo
  31.         {
  32.             text-decoration:none;
  33.             color:#0E0549;
  34.             font-family:Century Gothic;
  35.             text-align:center;
  36.             font-style:italic;
  37.             font-size:80px;
  38.             font-family:Kozuka Mincho Pro B;
  39.             cursor:auto;
  40.             text-shadow: 1px 1px 1px #6A6969;   
  41.         }
  42. 	   footer p{
  43. 		     color:black;
  44. 		      font-family:Kozuka Mincho Pro B;
  45. 		      text-align:center;
  46. 		      cursor:default;
  47. 		      display:block;
  48. 		      cursor:auto;
  49. 		      padding-bottom:30px;
  50. 		      text-decoration:none;
  51. 		      color:#0E0549;
  52. 	   }
  53. 		#sia
  54. 		{
  55. 		    text-decoration:none;
  56. 		      color:#0E0549;
  57. 		}
  58. 	#sitemenue a{
  59. 	    text-align:center;
  60. 	    font-family:Kozuka Mincho Pro B;
  61. 	    text-decoration:none;
  62. 	    color:#2F2F2F;
  63. 	    outline:inline;
  64. 	    margin-top:175px;
  65. 	    font-size:x-large;
  66. 	    font-weight:lighter;
  67. 	    shadow: 1px 1px 1px #6A6969;
  68. 	}
  69. 	#menue:hover
  70. 	{
  71. 	    background-color:#C2C2C2;
  72. 	}
  73. 	#about us
  74. 	{
  75. 	    color:#0E0549;
  76. 	}
  77. 	#mail
  78. 	{
  79. 	    color:#0E0549;
  80. 	}
  81. 	#hr1
  82. 	{
  83. 	    color:#C2C2C2;
  84. 	    width:50%;
  85. 	}  
  86. 	#hr2
  87. 	{
  88. 	      color:#C2C2C2;
  89. 	    width:50%;
  90. 	}
  91. 	    #blok
  92. 	    {
  93.  
  94. 	      background-color:lightgray;
  95. 	      position:relative;
  96. 	      text-align:center;
  97. 	      display:inline-block;
  98. 	    }
  99. 	  #sitemenue
  100. 	  {
  101. 	      word-spacing:20px;
  102. 	  }
  103. 	</style>
  104.  
  105. <body>
  106. <!--Logo-->
  107. <header>
  108. <div id="head">
  109. <h1>
  110. <a href="" id="logo" title=""></a>
  111. </h1>
  112. </div>
  113. <hr id="hr1"/>
  114. </header>
  115. <!--MiddenMenue-->
  116. <div id="sitemenue">
  117. <p id="blok">
  118. <a href="" id="menue" title="home" >Home</a>
  119. <a href="" id="menue" title="About Us" style="word-spacing:0px">About Us</a>
  120. <a href="" id="menue" title="Contact" >Contact</a>
  121. <a href="" id="menue" title="Products">Producten</a>
  122. </div>
  123. <footer>
  124. <hr id="hr2"/>
  125. <p><a id="sia" href="">\</a> |  | " id="mail"> .nl</a>
  126. </footer>
  127. </body>
  128. </html>

5 antwoorden

Gesponsorde links
Offline Pieter - 26/12/2011 20:08
Avatar van Pieter Gouden medaille

SEO guru		 Dag Julian, welkom op Sima.

Eerst en vooral: post eens wat code of een online versie. Met een afbeelding kunnen we niet zien wat er foutloopt momenteel.
Offline icemar - 26/12/2011 22:32
Avatar van icemar Lid Zo te zien werk je met allemaal divjes die met de zelfde gradient worden gevuld hier gaat het dus fout.
je moet 1 div hebben waar de gradient in zit en de rest van je divjes zet je daarin zonder achtergrond.
Dan zal het wel gaan wat je wil.
Je kan voor de zekerheid je code posten zo dat we het ook kunnen aanpassen voor je.
Offline julianb - 27/12/2011 19:12
Avatar van julianb Lid icemar als ik dat zo doe
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #gradient
  2.         {
  3.         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b1b1b2, endColorstr=#f0f0f0)";    
  4.         background-color: #CCC;
  5.         background-image: linear-gradient(bottom, rgb(177,177,178) 2%, rgb(201,201,201) 51%, rgb(240,240,240) 85%);
  6.         background-image: -o-linear-gradient(bottom, rgb(177,177,178) 2%, rgb(201,201,201) 51%, rgb(240,240,240) 85%);
  7.         background-image: -moz-linear-gradient(bottom, rgb(177,177,178) 2%, rgb(201,201,201) 51%, rgb(240,240,240) 85%);
  8.         background-image: -webkit-linear-gradient(bottom, rgb(177,177,178) 2%, rgb(201,201,201) 51%, rgb(240,240,240) 85%);
  9.         background-image: -ms-linear-gradient(bottom, rgb(177,177,178) 2%, rgb(201,201,201) 51%, rgb(240,240,240) 85%);
  10.  
  11. <body>
  12. <div id="gradient">
  13. <!--Logo-->
  14. <header>
  15. <div id="head">
  16. <h1>
  17. <a href="" id="logo" title=""></a>
  18. </h1>
  19. </div>
  20. <hr id="hr1"/>
  21. </header>
  22. <!--MiddenMenue-->
  23. <div id="sitemenue">
  24. <p id="blok">
  25. <a href="" id="menue" title="home" >Home</a>
  26. <a href="" id="menue" title="About Us" style="word-spacing:0px">About Us</a>
  27. <a href="" id="menue" title="Contact" >Contact</a>
  28. <a href="" id="menue" title="Products">Producten</a>
  29. </div>
  30. <footer>
  31. <hr id="hr2"/>
  32. <p><a id="sia" href=""></a>
  33. </footer>
  34. </div>
  35. </body>
  36. </html>

dan krijg ik dit http://imagesha...loos2m.png/
dus hoe dan?
Offline WouterJ - 27/12/2011 19:26 (laatste wijziging 27/12/2011 19:27)
Avatar van WouterJ HTML gevorderde Nog even een heigth:100%; meegeven aan de gradient en html, body en je bent klaar.

In je HTML zitten nog wel wat fouten:
- Semantische gezien moet een menu altijd in een list. Dus deze ook. Gebruik <ul> (unorderd list) en <li> (list item) voor het menu
- Een id mag maar 1 keer voorkomen, dus 4x id="menue" mag niet. Gebruik daarvoor een class.
- Je sluit je paragraph tag niet af in de footer
- Weet je zeker dat je HTML5 tags wilt gebruiken?
- Gebruik geen inline CSS, zoals op regel 26.
- De div#gradient is een beetje zinloos, tenzij je deze als wrapper gebruikt. Gebruik gewoon de body tag voor background gradients.
Bedankt door: julianb
Offline julianb - 27/12/2011 19:35
Avatar van julianb Lid WouterJ Heel erg bedankt!

ja klopt ik was het al aan het veranderen.
ik zal het veranderen.
die </p> had ik verwijderd per ongeluk maar in mijn doc zit die gewoon nog
wat zou ik anders nog kunnen gebruiken?
waarom kan ik geen inline gebruiken?
ja oke maar icemar zij dat ik dat zo kon doen
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.203s