• jesperhs

    (@jesperhs)


    Hi All

    On my site https://www.yoke.dk you’ll see a list of projects presented with text and pictures. Between the textblocks and the pictures you’ll see a black space. This space between the elements I really wanna change, but I don’t know how to?

    On my WP edit page I’ve tried putting in text and pictures with as little space between them as I can. But it doesn’t seem to matter what I do here.

    I’m not sure if this is something that I should change in my stylesheet? I’ve posted it below.

    Hop you can help me.
    – Jesper

    /*
    THEME NAME: my-dkret3
    THEME URI: https://diekretzschmars.de/wordpress/themes/dkret-theme/
    VERSION: 1.0
    DESCRIPTION: A simple child theme for the dkret3 framework – use it as a starting point for your modifications
    TAGS: child theme, dkret3
    AUTHOR: Joern Kretzschmar
    AUTHOR URI: https://diekretzschmars.de/
    TEMPLATE: dkret3
    */

    /* Import the style.css of the dkret3 base theme */
    @import url(‘../dkret3/style.css’);

    /* Header – You can still change the header image in the Settings panel*/
    #header {
    background:#000000 url(library/images/header.png) repeat-x scroll 0 0;
    }

    /* Make your changes to the default layout below */

    div#wrapper {
    margin: 0 0 0 300px ;
    width: 650px;

    }

    #wrapper {
    background-color:#000000;
    border-left:1px solid #000000;
    border-right:1px solid #000000;
    }

    #header {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(https://yoke.dk/newsite/wp-content/themes/my-dkret3/library/images/header.png); repeat-x scroll 0 0;
    height:113px;
    padding:0 0 0 18px;
    }

    body {
    background-image: url(https://yoke.dk/newsite/wp-content/themes/my-dkret3/library/images/background.png);
    background-repeat: no-repeat;
    background-color: #000000;
    color: #ffffff;
    background-position: 40px 23px;
    }

    body, input, textarea {
    font-family: Arial; /*fonten p? menupunkter og overskrifter*/
    letter-spacing: 1px;
    font-size:12px; /*st?rrelsen p? skriften i tekstfeltet*/
    color: #ffffff;
    font-size-adjust:none;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:1.3; /*linjeh?jden i tekstfeltet*/
    }

    div#footer {
    clear:both;
    padding:3px 0px;
    }

    #footer {
    background: #000000;
    color: #ffffff;
    text-align: left;
    }

    #footer a {
    color: #ffffff;

    }

    #content {
    border-right: none;
    border-left: none;
    }

    #content {
    text-align: left;
    font-family: Tahoma;
    }

    #content .entry-title {
    display: none;
    }

    div#content {
    margin:0px 320px 0 0;
    overflow:hidden;
    padding: 0px; /*s?tter margin til 0 i indholdsfeltet*/
    padding-top: 0px;
    }

    element.style {
    font-family:Arial;
    margin:0;
    padding:0;
    }

    div#container {
    border: 0px solid #000000;
    clear:both;
    float:left;
    margin:0 -320px 1px 0;
    width:100%;
    padding:0;
    }

    #container {
    background-color:#000000;
    }

    div#access {
    height:30px;
    line-height:1;
    }

    #access {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#000000;
    border-bottom:12px solid #ffffff;
    font-size:13px; /*st?rrelsen p? menupunkter*/
    }

    .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#000000 url(library/images/bg_green_hover.png) repeat-x scroll 0 0;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:0;
    }

    .sf-menu .current_page_ancestor, .current_page_item a {
    font-weight: normal;
    text-decoration: underline;
    }

    .sf-menu a, .sf-menu a:visited {
    color:#ffffff;
    text-decoration: none;
    }

    .sf-menu a:hover {
    color:#ffffff;
    text-decoration: underline;
    }

    /*?ndrer p? menuens placering og p? mellemrummet mellem menupunkterne*/
    .sf-menu a {
    padding:5px 23px 0 0;
    margin: 0 0 0 -10px;
    }

    .sf-menu a {
    display:block;
    position:relative;
    }

    .sf-menu, .sf-menu * {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
    }

    a {
    color:#ffffff; /*farven p? links / overskrifterne*/
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
    text-decoration:none;
    }

    h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a {
    color:#ffffff;
    margin:0px 0 0px;
    }

    .size-medium, .size-thumbnail, .size-large, .size-full, .gallery img, .attachment-medium, .attachment-thumbnail, .gallery .attachment-thumbnail {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    -moz-border-radius-bottomleft:4px;
    -moz-border-radius-bottomright:4px;
    -moz-border-radius-topleft:4px;
    -moz-border-radius-topright:4px;
    background:#F6F6F6 none repeat scroll 0 0;
    border:0 solid #CCCCCC;
    padding:0;
    }

    .widecolumn {margin:0;padding:0;}

    .entry-content {
    margin:0;
    padding:0;
    }

Viewing 10 replies - 1 through 10 (of 10 total)
  • Equal

    (@equalmark)

    Try adding this to the bottom of your stylesheet to increase the gap between the projects:

    #content .entry-content p {
    margin-bottom: 20px;
    }

    It is not the best way though, as you code is all inside a p tag for the projects which is not great.

    Thread Starter jesperhs

    (@jesperhs)

    Hi

    I tried that, but it doesn’t seem to have any effect. Thanks though.

    I’ve posted a new post called ‘Controlling space between content elements?’. Maybe this one explains my problem a bit better?

    – Jesper

    Gerald Yeo

    (@geraldyeo)

    Are you trying to close the black space between the images and the details for the images?

    Maybe you can try adding:

    #content .entry-content p img{
    margin-bottom: 0; padding-bottom: 0;
    }

    to your CSS File.

    Thread Starter jesperhs

    (@jesperhs)

    Yes, I am trying to close the black gap between the images and the details for the images, as well as the gap above every headline. And in particular the gap between the thick white line at the top of the screen and the first headline. This space is so annoying!

    I tried your suggestion but it didn’t work…?

    Hope you can help again. Thanks!

    Jesper

    Gerald Yeo

    (@geraldyeo)

    I hope you don’t mind a small quick hack..

    #content .entry-content p img{
    margin-bottom: -10px !important;
    }

    Regarding the space between the first headline and your navigation, you can add this to your CSS:

    #content{margin-top: 0!important;}
    Thread Starter jesperhs

    (@jesperhs)

    As long as it works I’m all fine ??

    And it did! For the most part. On the projects page the space between the thin white line and the following headlines varies a little bit. Any thoughts on how to fix this?

    It would be so cool if you could control every single space between every element.

    Thanks! ??

    Gerald Yeo

    (@geraldyeo)

    And it did! For the most part. On the projects page the space between the thin white line and the following headlines varies a little bit. Any thoughts on how to fix this?

    For the above, add this to your CSS:

    .entry-header{display:none!important;}

    This hides your header text which was causing the space…

    It would be so cool if you could control every single space between every element.

    err.. I don’t get this part… what are the spaces you’re refering to?

    Thread Starter jesperhs

    (@jesperhs)

    Thank you for your help!

    I’m basically talking about all the spaces between texts, pictures, headlines and so on. But I guess it’s more complicated than just that?

    I gotta go know, but will be back tomorrow. I’ll post again if necessary!

    Thanks a lot ??
    – Jesper

    Gerald Yeo

    (@geraldyeo)

    Sure, you can control spaces for every single element.

    You can actually control all elements at once using *
    However, in normal cases, specific element selectors will override it. You can easily get past that using !important.

    For example,

    *{margin-top: 0!important; margin-bottom: 0 !important}

    Cheers.

    oh man geraldyeo I love youuuu !

    I spent hours trying to figure that little hack out! thank you soo much =)
    Very well apreciated !!! you rock!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Space between textblocks – cannot remove it!?’ is closed to new replies.