CSS positioning an HTML icon

Question

This is a small question. I've tried fiddling with it, but with no luck. So basically I'm trying to get this little icon in the center but at the end of the bar:

http://puu.sh/1u4SI

However if I put in the CSS top: 5px; it'll show this: http://puu.sh/1u4T1

The code is this:

 <style>
 a.news-item, a.box-link {
 display: block;
 padding: 5px;
 margin: 0 0 2px -5px;
 background: #E9E9E9;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 color: #8C8C8C;
 text-decoration: none;
 font-weight: normal;
}

a.news-item {
 width: 100%;
 height: 36px;
 color: #8C8C8C;
}


a.box-link {
 width: 230px;
 padding: 5px;
 height: 24px;
 overflow: hidden;
 color: #8C8C8C;
}

a.news-item span.title {    
 font-size: 18px;
}


a.news-item:last-child, a.box-link:last-child {
 margin: 0 0 0 -3px;    
}

a.news-item:hover, a.box-link:hover {
 background: #E2E2E2;
}

.pane .delete {
 position: absolute;                
 right: 28px;  
 top: 5px;   
 cursor: pointer;   
}

.pane {
 padding: 3px;
}
</style>

<script type="text/javascript">
$(document).ready(function(){                  
$(".pane .delete").click(function(){
    $(this).parents(".pane").animate({
        opacity: 0
    }, 'slow', function(){
        $(this).slideUp();
    });
});

});
</script>


    <h2>Topher's Articles</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br />


    <div class="pane">  
    <img src="../real/_lib/_image/minus.png" alt="delete" class="delete" />             
    <a class="news-item" href="#/media/<?php echo $row['id'] ?>.<?php echo str_replace(" ", "-", $row['news_title']); ?>">        
    <span class="title"><p><?php echo $row['news_title'] ?> <font size="2"> &raquo; <?php echo $row['news_date'] ?></font></p></span>                
    </a> 
    </div>          

</body>
</html>

Hey it is 10:22 AM CET. SCNR. You should reduce amoung of code. — rekire
– rekire, Commented Nov 25, 2012 at 9:23

rekire · Accepted Answer · 2012-11-25 09:25:39Z

1

Did you try to set padding-top instad of top?

answered Nov 25, 2012 at 9:25

rekire

48.1k34 gold badges184 silver badges279 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TrippedStackers Over a year ago

ohhhh jesus.. it worked.. That was super easy.. Wow.. Thanks man!!

Pavel Strakhov · Accepted Answer · 2012-11-25 09:28:12Z

1

I guess you need to use margin-top instead of top.

If you want to make top work in relative coordinates, you need to apply position: relative to its container.

answered Nov 25, 2012 at 9:28

Pavel Strakhov

40.8k6 gold badges93 silver badges131 bronze badges

Collectives™ on Stack Overflow

CSS positioning an HTML icon

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related