Fri, 2011-11-25 17:41
Hi guys, I am having a problem with one of my elements. Before I start explaining, here is a picture so you can understand better. On the left is what it looks like, on the right is what I want it to look like.
Ok so what I want to do is to move the title bar at the top (the one that says "Test 2") 2 pixels to the bottom, while keeping all other elements in place. I tried to encase the whole thing in a div with position:relative, and then use position:absolute, top:2px on the title div, but it didn't work.
Anyone know how I can fix this please?
Thanks a lot!
Fri, 2011-11-25 23:23
#1
Source?
Without seeing just how you've coded things, we can only guess. You might try a negative bottom margin on the tab.
cheers,
gary
Sat, 2011-11-26 13:07
#2
gary.turner wrote: Without
Without seeing just how you've coded things, we can only guess. You might try a negative bottom margin on the tab.
cheers,
gary
Thanks for the reply. I tried the negative margin but it didn't work. Let me try to explain some more:
Ok basically what I want to do is to move the red div 2px down, while keeping the blue div in place.
The red div is a table while the blue div is a block.
Surrounding both divs, is another div with position:relative (I did this when I was trying to move the red div using position:absolute).
Any hope I can do this?
Thanks 
Sat, 2011-11-26 14:58
#3
gary.turner wrote:Without
Without seeing just how you've coded things, we can only guess. ...
I do have a guess but I'd rather see code.
Sat, 2011-11-26 16:19
#4
I dont know why it matters
I dont know why it matters but here is the code taken from firebug:
For the top bit (title tab):
.post .title { background-color: #E2DED4; border-left: 2px solid #E0D0B0; border-radius: 5px 5px 0 0; border-right: 2px solid #E0D0B0; border-style: solid solid none; border-top: 2px solid #E0D0B0; display: table; margin-bottom: -2px; padding: 3px 10px 5px; } h1, h2, h3, h4, h5 { margin-bottom: 4px; padding-top: 6px; } h2 { font: bold 1.5em Tahoma,sans-serif; } * { margin: 0; padding: 0; } body { color: #222222; } body { font: 72.5% Tahoma,sans-serif; }
And the bottom container:
.post .postContainer { border-color: #E0D0B0; border-radius: 0 5px 5px 5px; border-style: solid; border-width: 2px; } div { margin: 0; padding: 0; } * { margin: 0; padding: 0; } body { color: #222222; } body { font: 72.5% Tahoma,sans-serif; }
Is this what you need to see?
Sat, 2011-11-26 19:17
#5
html markup, too!
CSS means nothing without the html it applies against. We can (but would rather also see your css approach also) work with only the html.
Thanks for the reply. I tried the negative margin but it didn't work. Let me try to explain some more
Any time you post an answer as above, you should also post exactly the way you applied the fix you were given.
cheers,
gary
Sun, 2011-11-27 11:50
#6
I did "margin-bottom:-2px",
I did "margin-bottom:-2px", it didn't move like I wanted it thou.
Sun, 2011-11-27 12:32
#7
So, you aren't going to post
So, you aren't going to post your code, huh?
I'd like to help.
Sun, 2011-11-27 18:44
#8
Verschwindende wrote: So, you
So, you aren't going to post your code, huh?
I'd like to help.
Well i really dont know why you want to see it, as i explained the layout and gave you the css, but here it is:
<div class="post xfolkentry"> <div class="overflowauto positionRelative"> <h2 class="title"> <a class="postheader taggedlink" href="<%=Post.RelativeLink %>"> <%=Post.Title %></a></h1> <div class="postContainer"> <div class="descr"> <%=Post.DateCreated.ToString("dddd, d MMMM yyyy HH:mm")%> by <a href="<%=VirtualPathUtility.ToAbsolute("~/") + "author/" + Post.Author %>.aspx"> <%=Post.Author %></a></div> <div class="table centreWithMargins"> <div class="postImage"> <asp:Image ID="postImage" runat="server" /> </div> </div> <div class="entry"> <asp:PlaceHolder ID="BodyContent" runat="server" /> </div> <%=Rating %> <div class="postDivisor"> </div> <div class="info"> <table> <% if (!String.IsNullOrEmpty(TagLinks(", "))) { %> <tr> <td valign="top"> Tags: </td> <td> </td> <td valign="top"> <%=TagLinks(", ") %> </td> </tr> <% } %> <tr> <td valign="top"> Categories: </td> <td> </td> <td valign="top" class="transformtext"> <%=CategoryLinks(" | ") %> </td> </tr> <tr> <td valign="top"> Actions: </td> <td> </td> <td valign="top"> <a rel="nofollow" href="mailto:?subject=<%=Post.Title %>&body=Thought you might like this: <%=Post.AbsoluteLink.ToString() %>"> E-mail</a> | <a href="<%=Post.PermaLink %>" rel="bookmark">Permalink</a> | <a rel="nofollow" href="<%=Post.RelativeLink %>#comment"> <%=Resources.labels.comments %> (<%=Post.ApprovedComments.Count %>)</a> | <a rel="nofollow" href="<%=CommentFeed %>"> Comment RSS<asp:Image ID="Image1" runat="Server" ImageUrl="~/pics/rssbutton.gif" AlternateText="RSS comment feed" ImageAlign="top" Style="margin: 0 0 0 5px" /></a> <% if (AdminLinks.Length > 0) { %><div class="postadminlinks"> <%= AdminLinks.Substring(0, AdminLinks.Length - 2) %></div> <% } %> </td> </tr> </table> </div> </div> </div> </div>
Sun, 2011-11-27 21:01
#9
HTML required
Without the html, we can't know how the css is applied. For example, we could not have known there was a conflict, as in this case; i.e. the -2px bottom margin on the ".post .title" selector and the 4px bottom margin on the "h2" selector. That should resolve to -2px if there are no other conflicts. Taken from Firebug, if the h2's margin-bottom had been overridden, it would be lined through. (TBH, I don't recall whether that shows up on copy/paste.)edit 1
Unfortunately you have given us server-side code instead of the html as seen by the browser. We can't test without doing a lot of clean-up to remove the scripting, which may or may not work.
Please post the html as seen by the browser (best done in the form of a complete minimal test case), or give us a link to the live page.
cheers,
gary
1 Just tested; it doesn't. So the question becomes does Firebug show the h2 bottom margin struck?
Sun, 2011-11-27 21:24
#10
Stacking?
Another thought occurred to me. It may be a stacking issue; that is, the tab is sliding under the following element. Try giving the tab a stacking context.
.post .title { … position: relative; }
cheers,
gary
Mon, 2011-11-28 02:39
#11
I had the same problem,i had
I had the same problem,i had solve it after refer to your answer,thanks.
[faux sig removed]
Mon, 2011-11-28 18:07
#12
Havent had time to read the
Havent had time to read the replies but here is the html, sorry i posted the wrong code before.
<div class="overflowauto positionRelative"> //I did this when tryong position:absolute, its temporary <h2 class="title"> <a href="/BlogEngine.Web/post/2011/11/28/How-to-Muay-Thai.aspx" class="postheader taggedlink"> How to Muay Thai</a></h2> <div class="postContainer"> <div class="descr"> Monday, 28 November 2011 13:22 by <a href="/BlogEngine.Web/author/Admin.aspx"> Admin</a></div> <div class="table centreWithMargins"> <div class="postImage"> <img style="border-width:0px;" alt="How to Muay Thai" src="themes/NaturalEssence.1.0/images/postThumbnails/How-to-Muay-Thai.jpg" title="How to Muay Thai" id="ctl00_cphBody_PostList1_76c05f87825f47c2b7539a167fac2f5e_postImage"> </div> </div> <div class="entry"> Learn the basics needed to start your journey into the world of Muay Thai. <a href="/BlogEngine.Web/post/2011/11/28/How-to-Muay-Thai.aspx">[More]</a> </div> <div class="postDivisor"> </div> <div style="visibility: visible;" class="ratingcontainer"><div class="rating"><p>Be the first to rate this post</p><ul class="star-rating small-star"><li class="current-rating" style="width: 0%;">Currently .0/5 Stars.</li><li><a href="rate/1" class="one-star" title="Rate this 1 star out of 5">1</a></li><li><a href="rate/2" class="two-stars" title="Rate this 2 stars out of 5">2</a></li><li><a href="rate/3" class="three-stars" title="Rate this 3 stars out of 5">3</a></li><li><a href="rate/4" class="four-stars" title="Rate this 4 stars out of 5">4</a></li><li><a href="rate/5" class="five-stars" title="Rate this 5 stars out of 5">5</a></li></ul></div></div> <div class="info"> <table> <tbody><tr> <td valign="top"> Tags: </td> <td> </td> <td valign="top"> <a rel="tag" href="/BlogEngine.Web/?tag=/muay+thai+gym">muay thai gym</a>, <a rel="tag" href="/BlogEngine.Web/?tag=/muay+thai+sparring">muay thai sparring</a>, <a rel="tag" href="/BlogEngine.Web/?tag=/muay+thai+endurance">muay thai endurance</a>, <a rel="tag" href="/BlogEngine.Web/?tag=/thai+kicks">thai kicks</a>, <a rel="tag" href="/BlogEngine.Web/?tag=/muay+thai">muay thai</a> </td> </tr> <tr> <td valign="top"> Categories: </td> <td> </td> <td valign="top" class="transformtext"> <a href="/BlogEngine.Web/category/Muay-Thai-Guides.aspx">Muay Thai Guides</a> </td> </tr> <tr> <td valign="top"> Actions: </td> <td> </td> <td valign="top"> <a href="mailto:?subject=How to Muay Thai&body=Thought you might like this: <a href="http://localhost:51731/BlogEngine.Web/post/2011/11/28/How-to-Muay-Thai.aspx"" title="http://localhost:51731/BlogEngine.Web/post/2011/11/28/How-to-Muay-Thai.aspx"">http://localhost:51731/BlogEngine.Web/post/2011/11/28/How-to-Muay-Thai.a...</a> rel="nofollow"> E-mail</a> | <a rel="bookmark" href="http://localhost:51731/BlogEngine.Web/post.aspx?id=76c05f87-825f-47c2-b753-9a167fac2f5e">Permalink</a> | <a href="/BlogEngine.Web/post/2011/11/28/How-to-Muay-Thai.aspx#comment" rel="nofollow"> Comments (0)</a> | <a href="/BlogEngine.Web/post/feed/2011/11/28/How-to-Muay-Thai.aspx" rel="nofollow"> Comment RSS<img align="top" style="border-width:0px;margin: 0 0 0 5px" alt="RSS comment feed" src="pics/rssbutton.gif" id="ctl00_cphBody_PostList1_76c05f87825f47c2b7539a167fac2f5e_Image1"></a> <div class="postadminlinks"> <a href="http://localhost:51731/BlogEngine.Web/admin/Posts/Add_entry.aspx?id=76c05f87-825f-47c2-b753-9a167fac2f5e">Edit</a> | <a onclick="if (confirm('Are you sure you want to delete the post?')) location.href='/BlogEngine.Web/post/2011/11/28/How-to-Muay-Thai.aspx?deletepost=76c05f87-825f-47c2-b753-9a167fac2f5e'" href="#">Delete</a> </div> </td> </tr> </tbody></table> </div> </div> </div>
Will red your replies as soon as i get back, thanks friend.
Edit: I just read your posts and I dont understand what you mean. All i want to do is move .post .title 2 pixels down while keeping all other elements in place, so that the border doesnt show.
Thanks
Tue, 2011-11-29 08:47
#13
Any updates?
Any updates?
Tue, 2011-11-29 11:25
#14
Quote:Edit: I just read your
Quote:
Edit: I just read your posts and I dont understand what you mean. All i want to do is move .post .title 2 pixels down while keeping all other elements in place, so that the border doesnt show.
That's exactly what the negative margin does. But, without a stacking context, the tab slides under the border. That's why my addendum suggesting adding {position: relative;}. That causes the tab to slide up and over the border.
.post .title {
background-color: #E2DED4;
border-left: 2px solid #E0D0B0;
border-radius: 5px 5px 0 0;
border-right: 2px solid #E0D0B0;
border-style: solid solid none;
border-top: 2px solid #E0D0B0;
display: table;
margin-bottom: -2px;
padding: 3px 10px 5px;
position: relative;
}
Fri, 2011-12-02 21:01
#15
Thanks, I will try this in a
Thanks, I will try this in a bit and get back to you.
Sat, 2011-12-03 02:06
#16
Why not add a 2 pixel bottem
Why not add a 2 pixel bottem border with the same color as the background color to .title?
That's what I did here: http://www.salinenahs.tk/
Sat, 2011-12-03 19:30
#17
gary.turner
Edit: I just read your posts and I dont understand what you mean. All i want to do is move .post .title 2 pixels down while keeping all other elements in place, so that the border doesnt show.
That's exactly what the negative margin does. But, without a stacking context, the tab slides under the border. That's why my addendum suggesting adding {position: relative;}. That causes the tab to slide up and over the border.
.post .title { background-color: #E2DED4; border-left: 2px solid #E0D0B0; border-radius: 5px 5px 0 0; border-right: 2px solid #E0D0B0; border-style: solid solid none; border-top: 2px solid #E0D0B0; display: table; <span style="color:red">margin-bottom: -2px;</span> padding: 3px 10px 5px; <span style="color:red">position: relative;</span> }
Hi, it works like that. Im still new to using position:relative, so I didn't know exactly where to place it. I know how it works, as in if you don't put position:relative on the Div in question or on a container div, and use top: or bottom:, it will be relative to the browser, otherwise it will be relative to the div with the "position:relative".
I actually made a div that encases everything and put position:relative on that, and then gave the negative margin on the div but that didn't work.
What is the difference between putting position:relative on the container div or on the actual div itself?
Thanks
Why not add a 2 pixel bottem border with the same color as the background color to .title?
That's what I did here: http://www.salinenahs.tk/
Wont work, the border of the other div would still show this way unless you stack the title div on it first.
Sat, 2011-12-03 20:52
#18
Stacking
Read Overlapping and the ZIndex, especially for this discussion, see the last section on painting order.
Stacking order is not easy to grok in fullness, but understanding to at least some degree, is critical to staying sane. 
In this case, the two elements, the tab and item blocks, are siblings. Their parent provides a stacking context relative to its siblings. In the natural course of things, each element is drawn on the canvas in order. The tab is drawn, and pulled down by 2px. Then the item is drawn, overlapping the tab. By making the tab {position: relative;}, we change the order. Now the item block is drawn first, then the tab block.
I hope that helps; if I try to explain with any more detail, I'll be stumbling over myself and adding to the confusion. Besides the article I linked above, Google stacking context for more. Look for articles from the Mozilla Developers Network, or MDN (I think that's the name), they're always informative.
cheers,
gary