HTML: Place an image on top of another one

Posted by Dimitris Baltas on Stack Overflow See other posts from Stack Overflow or by Dimitris Baltas
Published on 2010-03-23T20:25:38Z Indexed on 2010/03/23 20:33 UTC
Read the original article Hit count: 466

Filed under:
|
|

Inside a div, there is a picture that should have 10px margin in all directions from the DIV's border. On the left bottom corner of the picture there is an about-image.
The picture is only displayed when its loaded in the DOM through jquery. The problem is that the existence of the about-image dislocates the picture downwards as many pixels as the height of the about-image.

I am looking for the cleanest possible alternative to keep the picture inside the DIV and still display the about-image on top of it. Setting the picture as background will not work since i need the picture to load at once.

Any improvement on the #about css would be greatly appreciated.
Below is a full html page that reproduces the issue

<html>
<head>
<title>Troubleshooting :: align the main picture inside the DIV</title>
<style type="text/css">
html, body  {
   background-color: #000000;
}

#about {
    z-index:2;
    position:relative;
    top:82%;
    left:3%;
}

#pic {
    width:100%;
    height:96%;
}

#main-content-image {
    height:100%;
    margin-right:10px;
    margin-left:10px;
    margin-top:10px;
    margin-bottom:10px;
}

#main-content {
    height:490px;
    border-width: 1px;
    border-style: solid;
    border-color: #777777; 
}
#main-content-image.loading {
  background: url(http://farros.gr/images/ajax-loader2.gif) no-repeat center center;
}

a  {
   text-decoration: none;
   text-decoration: none;
   color: #868686;
   outline:none;
}

.hide {
    display:none;
}
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    <!--
    $(document).ready(function(){    

        $(function () {
            var img = new Image();
            $(img).load(function () {
                $(this).hide();
                $(this).width('100%');
                $(this).height('96%');
                $('#main-content-image').removeClass('loading').append(this);
                $(this).fadeIn();
            }).error(function () {
                // notify the user that the image could not be loaded
            }).attr('src', 'http://farros.gr/images/bg.jpg');
        });

    });
    </script>
</head>
<body>
    <div id="main-content">
        <div id="main-content-image" class="loading">
            <a href="#"><img id="about" src='http://farros.gr/images/about.png' alt='Haris Farros'/></a>
        </div>
    </div>
</body>
</html>

© Stack Overflow or respective owner

Related posts about css

Related posts about html