I'm having a problem with content blocks breaking the positioning of inline spans. Take a look at how the template should look here:
http://singlebarreldetroit.com/artists/charlene-kaye/...
Look at the block titled "Videos" beneath the header. It contains two div rows, each with three horizontally inline spans. Each span contains a thumbnail. The spans have a fixed width and height, set to the exact dimensions of the thumbnail.
I want to make each span an editable area. But when I add the editable area php code to the template file inside of each span, the editable area exceeds the width of the span, and instead matches the width of the parent div. This results in the spans stacked on top of each other rather than horizontally aligned.
I thought maybe this might be because I used spans instead of divs, but I changed them to divs in the template, and the editable areas still exceed the divs' fixed dimensions just the same.
Anyone have an idea what I'm doing wrong?
Here is the html:
<div id="videos-right-content">
<div class="videos-row">
<span class="video-thumbs"><?php $a = new Area('Video 1'); $a->display($c); ?></span>
<span class="video-thumbs"><?php $a = new Area('Video 2'); $a->display($c); ?></span>
<span class="video-thumbs"><?php $a = new Area('Video 3'); $a->display($c); ?></span>
</div>
<div class="videos-row">
<span class="video-thumbs"><?php $a = new Area('Video 4'); $a->display($c); ?></span>
<span class="video-thumbs"><?php $a = new Area('Video 5'); $a->display($c); ?></span>
<span class="video-thumbs"><?php $a = new Area('Video 6'); $a->display($c); ?></span>
</div>
</div>
<div class="videos-row">
<span class="video-thumbs"><?php $a = new Area('Video 1'); $a->display($c); ?></span>
<span class="video-thumbs"><?php $a = new Area('Video 2'); $a->display($c); ?></span>
<span class="video-thumbs"><?php $a = new Area('Video 3'); $a->display($c); ?></span>
</div>
<div class="videos-row">
<span class="video-thumbs"><?php $a = new Area('Video 4'); $a->display($c); ?></span>
<span class="video-thumbs"><?php $a = new Area('Video 5'); $a->display($c); ?></span>
<span class="video-thumbs"><?php $a = new Area('Video 6'); $a->display($c); ?></span>
</div>
</div>
And here's the CSS:
<?php
#videos-right-content { margin: 0; padding: 0 0 0 15px; width: 607px; height: 295px; background: #000000; }
.videos-row { width: 570px; height: 128px; margin: 0 0 0 4px; }
.videos-row img { margin: 7px 10px 0 0; padding: 0;}
.videos-thumbs { display: inline-block; width: 175px; height: 116px; padding: 0; margin: 0; background: #666; }
?>
#videos-right-content { margin: 0; padding: 0 0 0 15px; width: 607px; height: 295px; background: #000000; }
.videos-row { width: 570px; height: 128px; margin: 0 0 0 4px; }
.videos-row img { margin: 7px 10px 0 0; padding: 0;}
.videos-thumbs { display: inline-block; width: 175px; height: 116px; padding: 0; margin: 0; background: #666; }
?>
Thanks in advance,
Jeremy
enque
Inline Styles
<span class="video-thumbs" style="float:left; width:175px; height:116px; margin-right:10px;">
?>
One other thing you might want to do is limit the block so you can't add to the video thumbs.
and you use setBlockLimit for this.
$a = new Area('Video 2'); $a->setBlockLimit(1);
$a->display($c);
?>
This all depends on what you are trying to achieve though.
Hope this helps.