Thread

Hello,

I’d appreciate if someone could help me with this.

I’m building up a 3 column template and everything is going well so far aside from the column I am using to display blog posts in.

Working with the local version on my own machine I had this working fine but since transfering it to EE and brining in the EE tags I am unsure if I’ve deleted something or whether I am missing something to get it to work with the EE tags as I want.

The CSS I am using is:

#cell_1 {
margin:0 1px 1em 0;
padding:8px;
float:left;
width:415px;
background-color:#181818;
}

and within the html document I am using:

<div id="cell_1">
    {exp:weblog:entries weblog="{my_weblog}" orderby="date" sort="desc" limit="15" disable="member_data|trackbacks"}
                <h2>{title}</h2>
<p>    {body}<br />
    <br />
    {/exp:weblog:entries}</div > <!--//end #cell_1//-->

What I am trying to do is break up each Blog post so it appears in its own “box” rather than one large rolling column (so its 1 column with each blog post with a gap in between each).

I’ve attached a screenshot, a before and after (the after shot being what I am trying to accomplish).

If anyone could help with this I’d really appreciate it!

Many Thanks,

T.

Is this consistent across all browsers?  If not, which browser renders it wrong?

Do you need the float: left; ? 

Is the or <h2> being floated?  If so, apply a border to each element with a bright color, so we can see what is going on (it’s hard to tell what is going on without seeing all of the code).  With what you have shown, it should be working.

Try to keep floats to a minimum unless it REALLY needs to go to the left or right. I’ve found it saves hours of headache. As far as the gap goes. I’m not sure, from what you provided, is causing your error—BUT—you may want to try adding a div with “clear: left;” or “clear: both” after your article if possible. Also. as stephenslater mentioned, give your <div> and ‘s brightly colored borders so you can see what is going on.

Can you give us a link to the page so we can look at the code?

I appreciate the replies.

I had another mess around with it and tried wrapping the content/blog post block in a div and colouring the background that way - Worked pretty well aside from the fact the content appeared very tight to the border of the content box and so looked pretty messy.

You’ll have to check the formatting for your newsposts as you have nested paragraphs.

in your html.
I’d wrap each newspost in a separate div and then just set a margin on that.

<div class="newsitem"><h2>igloo igloo igloo</h2>
<p>elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla elit, sed diam nonummy nibh euismod <br />
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla elit, sed diam nonummy nibh euismod </div>

and in your css:

.newsitem {margin: 0 0 2em 0;background-color: yourchoice;}

this will give you a nice gap between posts.

Many thanks e-man.

I did try wrapping the content in its own div (setting the background colour to the desired colour and then changing the colour of the actual column to the opposite) and it worked pretty well (space was present between each article/post) but the content appears extremely “compressed” (as in no space either side of the text so its right up to the border of the box).  I thought some padding would tackle this but instead it shifts the content box position around rather than content within it.

Padding is added to the width, so if you have a width set to 500 and padding on the left and right side set to 10, your total width will be 520.  With my example numbers, the width would need to be set to 480 to achieve a total width of 500.

Stephen is right, another option would be to set margins on the elements inside your #newsitem div instead.

It’s usually safe to make an outer div with no padding, and then an inner div WITH padding, this way, the width is not affected. This is what I do:

<div id="outerdiv">
    <div class="padding">
        Content Here
    </div>
</div>

and the CSS would look like…

#outerdiv {
    background: #yourcolor;
}
.padding {
    padding: 15px;
}

No disrespect RocketMedia, but that would cause a bit of extraneous code.  Like e-man stated, the container div doesn’t need padding, so the padding can be placed on the tag that’s inside the containing div.  This eliminates the need for the extra .padding div.

EDIT/ADD:  The can have padding or margin.  I prefer margin’s on the inner elements.

... so the padding can be placed on the tag that’s inside the containing div.  This eliminates the need for the extra .padding div.

Yep, that’s what I was going to say.

None taken—just my personal style. I hate having to screw with tags, especially when I need to add a block element that needs padding (since blocks arent supposed to be inside inline tags)

Still struggling abit with it - No matter where I set margins or padding it’s not changing the room either side of the text within the block, just changing the actual block position and so knocking the other 2 columns out of place.

I’m aware of how padding works and subtracted the width of the block itself to compensate for the increase in padding but this has had no effect.

I’ll keep at it - I’m using Tinderbox as a foundation I think I’ve confused myself using it 😉

T.

If you put your page back up, I don’t mind helping real fast to get you straightened out.  Out of curiosity, what browser are you testing in?