CODEWITHSUNDEEP
htmlcssimageoverlap
Mustafa Tosuncu
Mustafa Tosuncu

Reputation: 51

How to overlap a bit of image into a div?

For my other work I'm stuck at overlapping my image onto a different div. When you open my work you'll understand, there is a image with "That's me!" which needs to overlap on the left side div. I tried this: How to overlay one div over another div but using position: absolute makes my div disappear..

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Mustafa Tosuncu</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
    <header class="mainHeader">
        <img class="logo" src="img/logo.png"></img>
        <nav><ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="personalia.php">Personalia</a></li>
            <li><a href="opleiding.php">Opleiding</a></li>
            <li><a href="projecten.php">Projecten</a></li>
            <li><a href="contact.php">Contact</a></li>
        </ul></nav>
    </header>
    <div class="mainContent">
        <div class="content">   
                <article class="topcontent">    
                    <header>
                        <h2>Hallo! </h2>
                    </header>
                    <content>
                    <p>Welkom naar mijn portfolio, mijn naam is Mustafa Tosuncu.<br>
                    Op mijn portfolio vindt je informatie over m'n opleiding, werk en over mijzelf.<br> 
                    Veel succes!</p>
                    </content>  
                </article>
                <img class="topbar" src="img/ik.png"></img>
        </div>
    </div>
    <footer class="mainFooter">
        <p>Copyright &copy; 2014 <span class="footerp2">Mustafa Tosuncu<span></p>
    </footer>
</body>
</html>

body {
    background-color: #0F0F0A;
    color: #2E2E2C;
    font-size: 87.5%;
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
    }

.body {
    clear: both; 
    margin: 0 auto; 
    width: 70%;
}   

.logo{
    padding: 25px 0 17px 0;
}

h2{
    font-size: 170%;
    font-weight: 400;
    color: #CC0000;
}

.mainHeader nav {
    background: black;
    font-size: 1.143em;
    height: 40px;
    line-height: 30px;
    margin: 0 auto 30px auto;
    text-align: center;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none; 
    margin: 0 auto;
}

.mainHeader nav ul li {
    float: left; 
    display: inline; 
}

.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    display: inline-block;
    height: 30px;
    padding: 5px 23px;
    text-decoration: none;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background: #CC0000;
    color: #fff;
    text-shadow: none !important;
}

.mainContent {
    overflow: hidden;
    line-height: 25px;
    border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px; 
}

.content {
    width: 50%;
}

.topcontent {
    background-color: #FFF;
    border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px; 
    padding: 3% 5%; 
    margin-bottom: 2%;
}

.topbar{
    width: 45%;
    float: left;
}

.mainFooter {
    width: 100%;
    float: left;
    margin-top: 2%;
    margin-bottom: 2%;
    padding-left: 0;
    background-color: black;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    color: #FFF;    
}

.mainFooter p {
    width: 91%;
    margin: 2% auto;
}

.footerp2{
    color:#CC0000;
}

Upvotes: 0

Views: 741

Answers (2)

ashfaq.p
ashfaq.p

Reputation: 5469

use position:relative; on image and give left: -30px; Since you want to overlap the image on the div so apply this only on image
hope it works

Upvotes: 1

Ian Hazzard
Ian Hazzard

Reputation: 7771

Use position:relative; instead of absolute. You can then use left:-20px; to move it "relative to it's normal position. For more information on CSS positioning and how it works, go to W3Schools.com.

Upvotes: 1

Related Questions