Page 1 of 1
css float and clear problem
Posted: Thu Mar 01, 2012 11:42 am
by revmarkp
Sorry if this is on the forum somewhere, but I have searched diligently...
I'm wanting to create a content page similar to this:
http://www.cheshiresouth.org.uk/churches.html
I've been given the impression that I shouldn't use tables for laying something like this out - correct??
So, I'm trying to implement something in CSS instead, using the floatutorial here:
http://css.maxdesign.com.au/floatutoria ... al0405.htm
I've created the following code in the content section of my standard template page:
Code: Select all
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<br class="clearboth">
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<div class="thumbnail"> <img width="90" height="110" alt="" src="uploads/images/ah1.jpg" /><br />
Caption </div>
<p> </p>
I've created an additional style sheet and linked it to the template also:
Code: Select all
.thumbnail
{
float: left;
width: 90px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}
.clearboth { clear: both; }
Everything looks fine in the FCKEditor in preview, but when I look online it looks like this:
http://www.thecrossing.co.uk/index.php?page=float-test
Not sure if it's important but aft er I 'apply' I notice that the editor (or something?) has changed the '<br' line to this:
Am I right in trying to do this in this way or whould I simply do a WYSIWYG table in the editor? If the former any comments on where I might be going wrong greatly appreciated. Perhaps it's the way I've linked my additional css or something?
Thanks.
Re: css float and clear problem
Posted: Thu Mar 01, 2012 7:30 pm
by Dr.CSS
I notice you say in "FCKEditor" there is a good chance it has a setting in it to add that to all br tags...
I'm surprised it even works at all as it was removed from the forge a long time ago and now we use tinyMCE or Microtiny for editors now, either you have a very old version of CMSMS or ?...
Re: css float and clear problem
Posted: Fri Mar 02, 2012 8:23 am
by revmarkp
Thanks Admin.
OK hands up, I confess I'm running CMS Made Simple 1.8.1
I'll do some updating and report back.
Re: css float and clear problem
Posted: Sat Mar 03, 2012 4:13 pm
by revmarkp
And... I'm back. OK updated my site to 1.10.3 which was a good excercise for me to learn anyway.
Now here's the same issue:
http://www.pengelly.info/index.php?page=test-float
this is my html inserted in the content section of my template:
Code: Select all
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" />Caption</div>
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" /><br /> Caption</div>
<br class="clearboth" />
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" /><br /> Caption</div>
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" /><br /> Caption</div>
<br class="clearboth" />
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" /><br /> Caption</div>
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" /><br /> Caption</div>
<br class="clearboth" />
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" /><br /> Caption</div>
<div class="thumbnail"><img src="uploads/images/family/we_four_bw_shoot.JPG" alt="" width="90" height="110" /><br /> Caption</div>
and here's the css added to my main layout style sheet:
Code: Select all
.thumbnail
{
float: left;
width: 90px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}
.clearboth { clear: both; }
This 2nd attempt is perhaps indicating that the '<br class="clearboth" />' not working properly on the 2nd row is related to the 'news' global content block affecting the layout of my floats - yes??
Re: css float and clear problem
Posted: Sun Mar 04, 2012 4:39 pm
by Dr.CSS
If you actually add that to the style sheet you will get 2 image, br, 2 images, br,...
So it will give you 2 columns of images...
Re: css float and clear problem
Posted: Mon Mar 05, 2012 9:09 pm
by revmarkp
Thanks DrCSS.
Dr.CSS wrote:If you actually add that to the style sheet you will get 2 image, br, 2 images, br,...
So it will give you 2 columns of images...
Right, that's what I thought and was trying to achieve. The issue though, (as shown in my linked example,) is that after the first break the next floated row doesn't line up properly - there's a big gap between the first and 2nd rows - until after the bottom of the news content block (when viewing in firefox and chrome anyway)?
What's causing that gap is what I'm trying to figure...
Re: css float and clear problem
Posted: Wed Mar 07, 2012 4:13 pm
by Dr.CSS
The clear:both call will make it clear everything on the left and right so the first one is pushing/clearing the news item on the left, try putting them in a container XXpx as wide as 2 images plus the margin/padding...
Re: css float and clear problem
Posted: Thu Mar 08, 2012 8:15 am
by revmarkp
Thanks for your patience Dr.CSS. I think that is exactly what I need to do...
I guess I assumed that anything entered into the 'content' section of the template page would be treated as within it's own container?
Ummm, if anyone is kind enough to help this noob
as to how exactly to do this, v. grateful
Re: css float and clear problem
Posted: Fri Mar 09, 2012 9:06 pm
by Dr.CSS
It would take someone logging into your site to fix it...