CSS Separator issue, markup/syntax help needed

Question

I am building my first template so im sure this is due to incorrect markup of some sort.

I have been trying to get two image seperators to display between 3 boxes on my homepage. One appears to be displaying. However something isnt right, i cant get the first seperator to appear.

I have tried creating a div with a background image and adding it into the index.php and have tried adding as an image (how the seccond one is working).

Could anyone shed some light onto whats going on?

My CSS can be found here; http://www.adamtoms.co.uk/templates/mk1/css/system.css and the website is http://adamtoms.co.uk

Here is where I am trying to palce the div/img;

    <?php if ($this->countModules( 'left or right or midmid' )) : ?>    
<div id="leftrightmain">
        <div id="midleft">  
            <jdoc:include type="modules" name="left" />
        </div>      
        <div id="midmid">
            <jdoc:include type="modules" name="midmid" />
        </div>
        <img id="sep" src="/templates/mk1/images/sep.png">
        <div id="midright">
            <jdoc:include type="modules" name="right" />
        </div>
    </div>
<?php endif; ?>

Many thanks, Adam

Answer 1

Given your current structure, you need to simply do something like this:

First, remove the HTML image you added.

<?php if ($this->countModules( 'left or right or midmid' )) : ?>    
<div id="leftrightmain">
        <div id="midleft class="sepp">  
            <jdoc:include type="modules" name="left" />
        </div>
        <div id="midmid class="sepp">
            <jdoc:include type="modules" name="midmid" />
        </div>
        <div id="midright">
            <jdoc:include type="modules" name="right" />
        </div>
    </div>
<?php endif; ?>

I have added a class to your midleft and midmid divs. The class is .sepp

In your CSS, you need to change this line:

#sepp {
    background-image: url("../images/sep.png")
}

To...

.sepp {
    background-image: url("../images/sep.png");
    background-position: 50% 100%;
    background-repeat: no-repeat;
}

The above will apply the CSS class styles for .sepp to your left and middle divs. The css tells the background image to not repeat and to be positioned at 50% on the vertical (center) and 100% from the left (right justified).

EDIT:

Quite a few changes... We need to swap the styling around, make the sepp div the container.

<?php if ($this->countModules( 'left or right or midmid' )) : ?>    
<div id="leftrightmain">
        <div class="sepp">
            <div id="midleft">
                <jdoc:include type="modules" name="left" />
            </div>
        </div>
        <div class="sepp">
            <div id="midmid">
                <jdoc:include type="modules" name="midmid" />
            </div>
        </div>
        <div class="sepp last">
            <div id="midright">
               <jdoc:include type="modules" name="right" />
            </div>
        </div>
    </div>
<?php endif; ?>

And the CSS:

.sepp {
    width: 25%;
    min-height: 100%;
    padding: 0 1%;
    margin: 0px -1% 0px 7%;
    position: relative;
    background-image: url("../images/sep.png");
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: 1px 100%;
}

And on the 3 ID's midleft midmid midright, remove margin and padding, and make with 100%.

#midleft {
min-height: 100%;
float: left;
width: 100%;
/* -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    border: 0px 3px 3px solid rgb(255, 255, 255);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0px 0px 5px rgb(153, 153, 153); */
position:relative;
background-image:url("../images/bksa.png");
background-size:75px 75px;
background-repeat:no-repeat;
background-position: top center;
display:block;
}

Get this done then comment and let me know, there will be more that needs to happen.