Solved

tricky!-  negative margins question

Posted on 2009-04-09
11
387 Views
Last Modified: 2012-08-13
I'm using Joomla 1.5. I'm trying to create a 2 column layout for an article WITHOUT having the CMS user have to assign all sorts of tricky styles or build a table inside the fckeditor. I'm basically dealing with 2 database fields here:

1. title
2. article text

I want to simulate a 2 column layout using negative margins. The reason I need to do this is that the CMS user is inserting the graphic into the "article text" field along with the rest of the article text.( there is not a seperate field that the graphic can be inserted into without making it too confusing for the CMS user).

The title is above the text so I'm using negative top and left margins to move the graphic and it's caption up and to the left.

The issue I'm having is that if the title is more than 1 line the graphic and caption box is getting moved down - relative to the title.

MY QUESTION: is there a style attribute that i'm not aware of or some other css approach that will keep the graphic/caption box where it is irregardless of how many lines the title is??

The relevant code is in the code snippet box.

2 web page examples:
1. http://collectors.cjehost.com/1line_title.php (aligned corrrectly)
2. http://collectors.cjehost.com/2line_title.php (being pushed down by the title)

htaccess:
cm
!ColSchnek1@!

here's the css i'm using:

.rightColumnsAllWide2Col{
float:right;
width:480px;
margin-top:1.25em;
padding-left:10px;
background:#CCCCCC;
}
.rightColumnsAllWide2Col      .img_caption{border:1px solid #666; padding:5px 10px 0 7px; background:#ddd8ab; margin:-53px 10px 5px -190px;}
.img_caption.right {
float: right;
margin-left: 1em;
}


<div class="rightColumnsAllWide2Col">
 
							<h3 class="color1">
					Donating Art Is a Wise Move				</h3>
			<!---<h4 class="color1"></h4>-->
					<p>
									</p>
						<div class="authorTag">
 
			by Philip T. Temple, LL.B, and Laurence C. Zale		</div>
				
		
 
 
<p class="buttonheading">
	</p>
 
<p><div style="float: left; width: 151px;" class="img_caption left"><img alt="" class="caption" title="Many collectors feel an emotional involvement with their artworks, while others view them as disposable assets." src="http://collectors.cjehost.com/images/user_images/articles_3.jpg" width="151" align="left" height="142"><p>Many collectors feel an emotional involvement with their artworks, while others view them as disposable assets.</p></div>Many collectors feel an emotional involvement with their artworks, while others view them as disposable assets. The wisest approach is to regard them through</p>

Open in new window

0
Comment
Question by:phillystyle123
  • 4
  • 4
  • 3
11 Comments
 
LVL 13

Expert Comment

by:myderrick
ID: 24112736
Try putting
<div class="img_caption left" style="float: left; width: 151px;">
<img class="caption" height="142" border="0" align="left" width="151" alt="" title="Gifts of tangible personal property present complex philanthropic issues such as valuation and tax." src="http://collectors.cjehost.com/images/user_images/articles_1.jpg"/>
<p>Gifts of tangible personal property present complex philanthropic issues such as valuation and tax.</p>
</div>

Before the <div class="rightColumnsAllWide2Col">

In effect the caption should come first in the html before you start the article column.

Because the rightcolumnsAllWide...is floated right and contains the article. It wwas not closed before the caption div was started.

MD

MD
0
 

Author Comment

by:phillystyle123
ID: 24112971
thanks for working on this myderrick - your idea works when everything is hard coded - as in the 2 sample pages i put up.  however, the reason the rightcolumnsAllWide..div isn't closed before the caption div is started is because the photo/caption and the article text are all being pulled from one db field - like this:

<div class=rightColumnsWide2Col">
<?php echo $article_text; //this contains the artcle text and the graphic?>
</div>
0
 
LVL 42

Expert Comment

by:David S.
ID: 24113501
I suggest you give ".rightColumnsAllWide2Col" position:relative to create a new positioning context and then absolutely position ".rightColumnsAllWide2Col .img_caption".
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:phillystyle123
ID: 24117859
Kravimir - this is getting somewhere- the positioning between to 2 styles totally works great - thanks! the only issue now is that the top margins are different in IE7 and FF - please take a look:

http://collectors.cjehost.com/1line_title.php
0
 
LVL 13

Expert Comment

by:myderrick
ID: 24120431
Ok for such situations you need to add * {margin:0; padding:0} to your css.

Hope that works for you.

MD
0
 

Author Comment

by:phillystyle123
ID: 24120515
myderrick - i'm already using margin:
and padding:0 isn't working -here's my style:

.rightColumnsAllWide2Col{
position:relative;
left:180px;
top:20px;
width:480px;
margin-top:10px;
padding-left:0 0 0 10px;
background:#CCCCCC;
}
http://collectors.cjehost.com/1line_title.php

htaccess:
cm
!ColSchnek1@!
0
 
LVL 13

Accepted Solution

by:
myderrick earned 500 total points
ID: 24120594
header:

Remove float from the header:
.header1 {t
background:#304052 none repeat scroll 0 0;
margin:0;
padding:5px 0;
width:100%;
}


Remove the top from this css:

.rightColumnsAllWide2Col {
background:#CCCCCC none repeat scroll 0 0;
left:180px;
margin-top:10px;
position:relative;
width:480px;
}

Image caption:

Take away the top: 60px;

Now test it.

MD
0
 
LVL 42

Expert Comment

by:David S.
ID: 24120676
Why did you remove the float declaration from ".rightColumnsAllWide2Col"?

Anyway, IE7 is acting like ".rightColumnsAllWide2Col" is floated even though it isn't, which makes it get pushed down further than in other browsers. One solution is to not float ".header1" as myderrick suggested. Another would be to remove the top margin from ".rightColumnsAllWide2Col" and give it clear:both and then add a bottom margin to ".header1".
0
 
LVL 13

Expert Comment

by:myderrick
ID: 24120712
Removed the float because there was a left:180px making space for the caption which floated (inline)left. Also the rightColumnsAllWide2Col affects(is parent to) the caption due to the arrangement of the HTML

There could have been a better way the html could have been arranged.

We have to work around it this time.

MD
0
 
LVL 42

Expert Comment

by:David S.
ID: 24120818
That question was directed at phillystyle123. The left:180px was added when the float:right was removed. I'm curious as to why.

> There could have been a better way the html could have been arranged.

Yeah.
0
 

Author Closing Comment

by:phillystyle123
ID: 31568751
Thank you!
0

Featured Post

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question