Hallo allemaal,

Als ik een tekst heb die te dichtbij de kan staat is de volgende CSS code dan correct ?

Code:

p.
   {
     margin: 0px 0px 50px 0px;
   }

Ik heb dit geprobeerd alleen veranderd er niks.

Margin is extra ruimte aan de buitenzijde van het object, padding is ruimte tussen de buitenruimte en het object zelf...
Weet niet of ik het zo goed uitleg, maar wat je wilt is waarschijnlijk padding, niet margin.





Edit: Misschien heb je iets aan deze uitleg?

margin: 0px= boven 0px= rechts 50px= onder 0px= links;
Werkt het niet kan je het ook eens proberen met padding

Origineel gepost door Miichelle G

Hallo allemaal,

Als ik een tekst heb die te dichtbij de kan staat is de volgende CSS code dan correct ?

Code:

p.
   {
     margin: 0px 0px 50px 0px;
   }

Ik heb dit geprobeerd alleen veranderd er niks.

Oke, dan heb ik het net omgedraait. Ik heb dus een

<p>tekstekst</p>

De staat de dicht op de kant
dan zou het padding: 0 px 20 px 0px 0px; moeten zijn ?

edit: dit geprobeerd maar geen effect.

CSS file:

Code:

   /* Algemeen */
  *
   {
    margin: 0px;
    padding: 0px;
   }
  #menu a:hover {color: orange;}
 
  /* Alinea koppen */
 
  p.
   {
 
    padding: 0px 30px 0px 0px;
 
   }
  p.blue
   {
    font-size: 15px;
    color: #28ace3;
   }
  p.blue-contact
   {
    font-size: 15px;
    color: #28ace3;
    margin-left: 30px;
   }
  p.black-contact
   {
    font-size: 15px;
    color: #000000;
    margin-left: 30px;
   }
  p.orange
   {
    font-size: 15px;
    color: #f58121;
   }
  p.white
   {
    font-size: 17px;
    color: #ffffff;
   }
 
a:link {
color: #333333;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #333333;
}
 
  /* Alinea opmaak */
  p.justify
   {
    text-align: justify;
   }
  p.justify-contact
   {
    text-align: justify;
    color: #ffffff;
    font-size: 16px;
    margin-left: 30px;
   }
  p.arrow
   {
    color: #494849;
    font-size: 15px;
    margin-top: 5px;
    margin-left: 30px;
   }
 
  /* De body */
  body
   {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #5c5d5d;
    background-image: url('images/background1.gif');
    background-repeat: repeat-x;
   }
 
  /* De achtergrond */
  div#background
   {
    background-image: url('images/background.gif');
    background-repeat: no-repeat;
    width: 1300px;
    height: 821px;
    margin: auto;
   }
 
  /* De container */
  div#container
   {
    width: 926px;
    margin: auto;
    padding-top: 91px;
    padding-bottom: 91px;
   }
 
  /* De header */
  div#header
   {
    background-image: url('images/header.gif');
    background-repeat: no-repeat;
    width: 926px;
    height: 200px;
   }
 
  /* Het menu */
  ul#menu
      {
          list-style: none;
          background-image: url('images/menu.gif'); 
    background-repeat: no-repeat;
    width: 309px;
    height: 300px;
    padding-top: 0px;
    float: left;
      }
  ul#menu li
   {
    font-size: 13px;
    color: #FFFFFF;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 10px;
    padding-left: 54px; 
   }
  ul#menu li a
   {
    font-size: 13px;
    color: #FFFFFF;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
   }
 
  /* De middle1 */
  div#middle1
   {
    background-image: url('images/middle1.gif');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
  /* De bedrijf */
  div#middle1-bedrijf
   {
    background-image: url('images/bedrijf.jpg');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
 
   }
               /* De bedrijf */
  div#middle1-special
   {
    background-image: url('images/special.jpg');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
   /* De bedrijf */
  div#middle1-food
   {
    background-image: url('images/food.jpg');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
   /* De bedrijf */
  div#middle1-precies
   {
    background-image: url('images/preciesopmaat.jpg');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
   /* De bedrijf */
  div#middle1-waar
   {
    background-image: url('images/waar.jpg');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
   /* De bedrijf */
  div#middle1-special3
   {
    background-image: url('images/special3.jpg');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
   /* De bedrijf */
  div#middle1-hygiene
   {
    background-image: url('images/hygiene.jpg');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
   /* De bedrijf */
  div#middle1-glazenwassen
   {
    background-image: url('images/glazenwassen.jpg');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
   /* De bedrijf */
  div#middle1-vloeronderhoud
   {
    background-image: url('images/vloeronderhoud.jpg');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
  /* De bedrijf */
  div#middle1-food1
   {
    background-image: url('images/food1.jpg');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
         /* De bedrijf */
  div#middle1-fusten
   {
    background-image: url('images/fusten.jpg');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
         /* De bedrijf */
  div#middle1-particulieren
   {
    background-image: url('images/particulieren.jpg');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
         /* De bedrijf */
  div#middle1-wassen
   {
    background-image: url('images/wassen.jpg');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
         /* De bedrijf */
  div#middle1-levering
   {
    background-image: url('images/levering.jpg');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
 
 
  /* De right1 */
  div#right1
   {
    background-image: url('images/right1.gif');
    background-repeat: no-repeat;
    width: 300px;
    height: 158px;
    float: left;
 
    padding: 5px;
   }
 
  /* De right2 */
  div#right2
   {
    background-image: url('images/right2.gif');
    background-repeat: no-repeat;
    width: 310px;
    height: 134px;
    float: left;
   }
 
  /* De left1 */
  div#left1
   {
    background-image: url('images/left1.jpg');
    background-repeat: no-repeat;
    width: 309px;
    height: 157px;
    float: left;
   }
 
  /* De middle2 */
  div#middle2
   {
    background-image: url('images/middle2.gif');
    background-repeat: no-repeat;
    width: 297px;
    height: 165px;
    float: left;
    padding: 5px;
   }
 
  /* De right3 */
  div#right3
   {
    background-image: url('images/right3.gif');
    background-repeat: no-repeat;
    width: 253px;
    height: 47px;
    float: left;
    padding-top: 110px;
    padding-left: 57px;
   }
 
  /* De middle1-informatie */
  div#middle1-informatie
   {
    background-image: url('images/middle1-informatie.gif');
    background-repeat: no-repeat;
    width: 307px;
    height: 302px;
    float: left;
   }
 
 
 
  /* De right1-informatie */
  div#right1-informatie
   {
    background-image: url('images/right1-informatie.gif');
    background-repeat: no-repeat;
    width: 300px;
    height: 292px;
    float: left;
 
    padding: 5px;
   }
 
  /* De right2-informatie */
  div#right2-informatie
   {
    background-image: url('images/right1-informatie.gif');
    background-repeat: no-repeat;
    width: 310px;
    height: 157px;
    float: left;
   }
 
  /* De middle2-informatie */
  div#middle2-informatie
   {
    background-image: url('images/middle2-informatie.gif');
    background-repeat: no-repeat;
    width: 307px;
    height: 151px;
    float: left;
    padding-top: 19px;
   }
 
  /* De middle1-contact */
  div#middle1-contact
   {
    background-image: url('images/middle1-contact.gif');
    background-repeat: no-repeat;
    width: 617px;
    height: 302px;
    float: left;
   }
 
  /* De middle2-contact */
  div#middle2-contact
   {
    background-image: url('images/middle2-contact.gif');
    background-repeat: no-repeat;
    width: 617px;
    height: 157px;
    float: left;
    padding-top: 19px;
   }
 /* De middle1-vestigingen */
  div#middle1-vestigingen
   {
    background-image: url('images/middle1-vestigingen.gif');
    background-repeat: no-repeat;
    width: 617px;
    height: 302px;
    float: left;
   }

Pagina:

Code:

 <div id="middle1-fusten"></div>
                <div id="right1-informatie">
                <br /><center><p class="blue">HALEN EN BRENGEN</p></center>
                <p>Tekst</p>

Padding: 20px;
of
padding: 20px 20px 20px 20px;

Padding: boven rechts onder links;

haal de punt achter p. weg ;-)
dan is het geldig voor 'alle p tags' in het document, tenzij elementen anders zijn aangegeven.
als je alleen bijvoorbeeld de P tags binnen de div met class test wilt aanroepen, gebruik dan
.test p {margin...} etc.

Bedankt allemaal. Het is gelukt.

div#middle1-levering
{
background-image: url('images/levering.jpg');
background-repeat: no-repeat;
width: 307px;
height: 302px;
float: left;
}

width: 307px;
height: 302px; heb deze beiden -30 gedaan en padding: 15px;