login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Gradient Line, links en rechts van gecenterd design?

Offline KlaasKoopman - 04/11/2006 12:52
Avatar van KlaasKoopmanNieuw lid Hey Allemaal,


Ik heb een design, welke is gecenterd, maar nu wil ik links en rechts een lijn gradient laten gaan van boven naar beneden. Met lijn gradient bedoel ik een 1px lijn die zwart is aan de bovenkant en naar beneden steeds meer onzichtbaar wordt. Dit wil ik dus aan beide kanten, hoe kan ik dit het beste aanpakken?

Vr. Groeten,


Klaas Koopman

4 antwoorden

Gesponsorde links
Offline Addow - 04/11/2006 12:59 (laatste wijziging 04/11/2006 13:28)
Avatar van Addow Gouden medaille

PHP beginner		 Een scenario:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="page">
  2.    <div class="pxl_line"></div>
  3.    <div class="content">Blabla</div>
  4.    <div class="pxl_line"></div>
  5. </div>


Hierbij maak je een figuur (grad_line.gif) aan van 1*?? pixels, die je dan als gradientlijn kunt gebruiken. Indien de schermhoogte groter is dan de figuur, moet er verlengd worden met de transparante achtergrondkleur. Vergeet dit niet aan te passen in de code.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2.    margin: 0px;
  3. }
  4.  
  5. #page {
  6.     width: 400px;
  7.     margin: auto;
  8. }
  9.  
  10. .pxl_line {
  11.    float: left;
  12.    height: 100%;
  13.    width: 1px;
  14.    background-image: url('grad_line.gif');
  15.    background-color: #achtergrondkleur;
  16.    background-repeat: repeat-x;
  17. }
  18.  
  19. .content {
  20.    float: left;
  21.    width: 98%;
  22. }



Hier vind je een voorbeeld: http://sitemasters.addow.be/grad/
Offline Soebam - 04/11/2006 13:00 (laatste wijziging 04/11/2006 13:01)
Avatar van Soebam HTML ver gevorderde edit: te laat 
Offline KlaasKoopman - 04/11/2006 13:13
Avatar van KlaasKoopman Nieuw lid sorry maar snap er niet heel veel van, ben net begonnen, denk dat het daar aan ligt, zou iemand het iets makkelijker voor me kunnen uitleggen?
Offline Addow - 04/11/2006 13:36
Avatar van Addow Gouden medaille

PHP beginner		 Okay, excuses, ik zal wat meer info geven bij de gebruikte onderdelen:

In de html code, maak ik gebruik van <div>'s.
Iedere div voorzie ik van een bepaald stijl-element ahv class="" of id="". Hierbij gebruik je id="" voor een uniek stijl-element, waarbij dat element maar éénmalig op een pagina voorkomt.
class="" gebruik je, indien bepaalde elementen meermaals voorkomen, oki?

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="page">
  2.    <div class="pxl_line"></div>
  3.    <div class="content">Blabla</div>
  4.    <div class="pxl_line"></div>
  5. </div>


De stijlelementen vind je terug in de <style>-tags in je html-hoofding (<head>).

Hieronder stellen we dat alle margins op 0 gezet worden, zodat er zich geen witruimtes bevinden boven of onder je gradient lijntje
php code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2.    margin: 0px;
  3. }


De page-stijl ken je wellicht al (zie andere topic). Hiermee zetten we de hoofddiv centraal op je pagina.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #page {
  2.     width: 400px;
  3.     margin: auto;
  4. }


Dit stijlblok vertelt ons dat de pixellijn over gans de hoogte uitgespreid moet worden, weliswaar maar 1px breed. Tevens moet er nog een div-element naast geplaatst kunnen worden, dus zeggen we dat deze div links moet staan door float: left.
We vertellen waar de gradient afbeelding te vinden is, en in welke richting deze herhaald moet weergegeven worden. In géén geval naar onder toe, mijn voorkeur gaat naar zijwaarts, dus repeat-x.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. .pxl_line {
  2.    float: left;
  3.    height: 100%;
  4.    width: 1px;
  5.    background-image: url('grad_line.gif');
  6.    background-color: #achtergrondkleur;
  7.    background-repeat: repeat-x;
  8. }


In dit stijlblok vertellen we hoe breed onze inhoud mag wezen. En daarbij stellen we ze op 98% van de totale mogelijk breedte. Ik hou hierbij rekening met de twee 1-pxl gradientlijnen die er nog naast moest passen.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. .content {
  2.    float: left;
  3.    width: 98%;
  4. }


Hopelijk geraak je er nu wijzer uit?  
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.341s