18 replies [Last post]
TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

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!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

gary.turner wrote: Without

gary.turner wrote:

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 Big smile

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 5 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

gary.turner wrote:Without

gary.turner wrote:

Without seeing just how you've coded things, we can only guess. ...

I do have a guess but I'd rather see code.

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

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?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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.

Quote:

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

I did "margin-bottom:-2px",

I did "margin-bottom:-2px", it didn't move like I wanted it thou.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 5 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

So, you aren't going to post

So, you aren't going to post your code, huh?

I'd like to help.

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

Verschwindende wrote: So, you

Verschwindende wrote:

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>
                                &nbsp;
                            </td>
                            <td valign="top">
                                <%=TagLinks(", ") %>
                            </td>
                        </tr>
                        <% } %>
                        <tr>
                            <td valign="top">
                                Categories:
                            </td>
                            <td>
                                &nbsp;
                            </td>
                            <td valign="top" class="transformtext">
                                <%=CategoryLinks(" | ") %>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top">
                                Actions:
                            </td>
                            <td>
                                &nbsp;
                            </td>
                            <td valign="top">
                                <a rel="nofollow" href="mailto:?subject=<%=Post.Title %>&amp;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>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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?

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

atc3434
atc3434's picture
Offline
newbie
Last seen: 10 years 31 weeks ago
Timezone: GMT+8
Joined: 2011-11-28
Posts: 1
Points: 1

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]

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

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>
                                &nbsp;
                            </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>
                                &nbsp;
                            </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>
                                &nbsp;
                            </td>
                            <td valign="top">
                                <a href="mailto:?subject=How to Muay Thai&amp;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

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

Any updates?

Any updates?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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;
    }

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

Thanks, I will try this in a

Thanks, I will try this in a bit and get back to you.

tyzoid
tyzoid's picture
Offline
newbie
Last seen: 10 years 10 weeks ago
Timezone: GMT-4
Joined: 2011-12-02
Posts: 10
Points: 11

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/

TheGateKeeper
TheGateKeeper's picture
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2011-01-09
Posts: 79
Points: 99

gary.turner

gary.turner wrote:
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;
    <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

tyzoid wrote:

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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. Shock

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.