Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Tekstopmaak in CSS: te veel witruimte

Anoniem
None
7 antwoorden
  • Momenteel ben ik een site aan het maken, maar ik stuit op een probleem.
    Ik vind namelijk de witruimte tussen de kopjes en de tekst te groot.
    Helaas lukt het me niet om te verkleinen.
    Heb het al geprobeerd door de hele opmaak voor <p> te veranderen, maar dan krijg ik veel te grote letters.

    Voorbeeldje: (let maar niet op de zwarte randen, ik heb ze er alleen bij genomen om de uitlijning van de tekst te laten zien).

    [img:bf4f8d97a3]http://www.parkietenfreak.nl/avatars/voorbeeldwitruimte.jpg[/img:bf4f8d97a3]

    Voor alle zekerheid zet ik er ook het stylesheet maar even bij.
    Waarschijnlijk doe ik iets, of meerdere dingen fout maar ik weet niet wat helaas :(
    Wil iemand even kijken voor me? Vast bedankt! :)

    Stylesheet: [size=9:bf4f8d97a3]

    html, body {margin: 0; padding: 0; border: 0;}

    body {
    color:#333;
    background-color:#EEaF47;
    background-image:url(achtergrond1.jpg);
    background-repeat:repeat-x;
    background-attachment:fixed;
    font-family:verdana,sans-serif;
    font-size:80%;
    text-align:center;
    margin:10px 0;
    }

    p {margin:0; padding:8px;}



    .h2 {font-size:1.2em; text-align:left; padding:10px; color:#fff;}

    .clear { clear:both; }

    a:link {color: #fff; text-decoration:none; font-weight:normal;}
    a:visited {color: #E9B047;text-decoration:none;font-weight:normal;}
    a:active {color: #CCC; text-decoration:none; font-weight:normal;}
    a:hover {color: #CC9999; text-decoration:none;font-weight:normal;}

    .alignright {margin-top:0; text-align:right;}

    .small {font-size: .9em; color:#fff;}

    h3
    {font-size:1.3em;
    padding-top:10px;
    color:#E9B047;
    font-weight:bold;
    text-align:center;
    }

    .wrapper {
    margin: 0 auto;
    width: 697px;
    text-align: left;
    background: #FFFFFF;
    border: 0px solid #000;

    }

    * html .wrapper {
    width:700px;
    width:697px;
    }

    .outer {
    border-left:150px solid #000;
    border-right:130px solid #000;
    }


    * html .outer {
    background-image:url("achtergrondgeel.jpg");
    }

    .inner {
    margin-left: -2px;
    width: 548px;
    border: 0px solid #000;
    border-width: 0 0 0 0px;
    }


    * html .inner {
    width: 100%;
    }

    .float-wrap {
    float:left;
    width:567px;
    margin-left:-150px;
    }


    .left {
    float:left;
    width:147px;
    position:relative;
    }

    .right {
    float:right;
    width:130px;
    position:relative;
    }

    * html .right {
    margin: 0 -130px 0 0;
    }

    .center {
    float:right;
    width:415px;
    }

    .wide {
    background-color:#000;
    width:100%;
    border: 0px solid#000;
    font-size:0.8em;
    text-align:center;
    font-weight:none;
    font-family:verdana, sans-serif;
    }

    .wide p {padding:5px;}

    .top {border-width: 0 0 10px;}

    .bottom {border-width: 0px 0 0;}


    html>body .inner, html>body .float-wrap {
    border-bottom:1px solid transparent;
    }

    html {
    scrollbar-base-color:black;
    scrollbar-arrow-color:#E9B047;
    scrollbar-track-color:black;

    scrollbar-shadow-color:#E9B047;
    scrollbar-lightshadow-color:black;
    scrollbar-darkshadow-color:#E9B047;

    scrollbar-highlight-color:#E9B047;
    scrollbar-3dlight-color:black;
    }

    .image4 {
    float:none;
    margin-bottom:8px;
    border-top:1px solid #000;
    border-right:1px solid #000;
    border-left:1px solid #000;
    border-bottom: 1px solid #000;
    border-style:solid;
    }

    .image1 {
    float:none;
    margin-bottom:8px;
    }


    [/size:bf4f8d97a3]
  • margin-top en/of margin-bottom en/of margin is nul of negatief getal gebruiken in de h {} gebruiken.
  • Demonaz, je bent wederom een engel……
    :D
    Bedankt voor je hulp, ik zag het echt niet….. :oops:
  • Misschien is het ook handig om eerst bovenaan

    [code:1:704ad9e022]
    * {
    margin:0;
    padding:0;
    }
    [/code:1:704ad9e022]

    je css te zetten. Zo haal je alle padding en margin van alle elementen, zodat de verschillende standaardinstellingen tussen browsers niet roet in het eten kunnen gooien.

    Daarnaast is het misschien wel handig om shorthand te gebruiken. Verbruikt veel minder ruimte (en is overzichtelijker, maar dat is een persoonlijke voorkeur). Voor de background wordt het dan:

    [code:1:704ad9e022]
    background-color:#EEaF47;
    background-image:url(achtergrond1.jpg);
    background-repeat:repeat-x;
    background-attachment:fixed;

    wordt

    background:#EEaF47 url(achtergrond1.jpg) repeat-x fixed;
    [/code:1:704ad9e022]

    Zo zijn er nog wel meer shorthand dingen:
    http://home.no.net/junjun/html/shorthand.html
    http://www.sitepoint.com/article/introduction-css-shorthand
  • Thanks [m] voor de tips! Ik ga het meteen toepassen.
    (Ik ben nog niet zo heel lang met CSS bezig en moet dus nog veel leren).
    Wat is CSS toch handig, jammer dat ik niet eerder mee aan de gang gegaan ben! :P
  • [quote:f616beb101="Mrs.Birdlover"]Thanks [m] voor de tips! Ik ga het meteen toepassen.
    (Ik ben nog niet zo heel lang met CSS bezig en moet dus nog veel leren).
    Wat is CSS toch handig, jammer dat ik niet eerder mee aan de gang gegaan ben! :P[/quote:f616beb101]

    Zeg, niet meteen zo'n standaards-activist worden hé! ;)
  • :oops: Nee, zover zal het niet komen :wink:

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.

Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord