Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

tricky!-  negative margins question

Posted on 2009-04-09
11
Medium Priority
?
393 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 43

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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 2000 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 43

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 43

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

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