Can't get the photo in the right place

Hello wise folk

I have been working on making a simple portifolio website as training for HTML and CSS courses.

However I have encountered a problem placing my profile picture where I wanted.

For the life of me I can’t get the image up, there seem to be an invisible margin blocking it.

I’v tempered with margin and padding of all elements on the page but can’t make it work.

I think the attached pictures will make the problem clear.

Please help Sempai :slight_smile: !
Cheers,
Allison



Here is the full code, by the way:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Projects</title>
    <link rel="stylesheet" href="./resources/css/index.css">
</head>

<body>
    
       <!-- Navbar Section -->
    <nav class="navbar">
        <h3><a href="./aboutMe.html">About Me</a></h3>
        <h3><a href="./projects.html">Projects</a></h3>
        <h3><a href="./certificates.html">Certificates</a></h3>
        <h3><a href="./contact.html">Hey, talk to me!</a></h3>
           
    </nav>

               
        </nav>

        <!-- Logo Section -->
        <div class="logo">
            <a href="./index.html"><img src="./resources/images/logo.jpg"></a>

        </div>

        <!-- Main text -->
        <div class="main" id="about_text">
            <h2>So, who is this guy?</h2>
            <p> I'm an in-training Full Stack Dev, 
                I've started this jorney a little while back and I'm having a lot of fun with it.
                So far I've been a businessman for almost 20 years and in this time I have done it all.
            </p> 
            <p>
                My first job was as a stock worker, after that I've been middle management, upper management, director and finally
                business owner. I was able to work with several overseas companies, had frequent business travels abroad 
                and led teams of all shapes and sizes.
              
            </p>    
            <p> However the most fun I have always had in my job was making complex and automated
                Excel spreasheets to solve other people's problems.
                So that made me scratch my head one day and think "Huh, maybe I should be focusing on that"
            </p>

            <p>    Here I am, focusing on that...</p>

         <!-- Funny Picture -->
         <img id="picture" src="./resources/images/face.jpg">

        

        </div>



    
</body>

CSS:


/* NAVBAR SECTION */

.navbar{
    background-color:rgb(34, 31, 31);
    color: white;
    position:fixed;
    margin-top: 150px;
    height: 100%;
    width: 150px;
    z-index: 10;
    
    

}

.navbar h3{
    text-align: center;
    border: 1px solid grey;
    height: 50px;
    margin-top: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding-top: 25px;
    margin-bottom: 0;
    font-size: 15px;
    background-color:rgb(43, 43, 43)
}

.navbar h3 a{
    text-decoration: none;
    color:aliceblue;
    background-color:rgb(43, 43, 43) ;
}

.logo{
    width: 150px;
    padding-top: 0;
    
    
}

.logo img{
    width: 150px;
    height: 150px;
    position:fixed;
    padding-top: 0;
    
    
}

/* HOME SECTION */
.main{
    color: white;
    padding-left: 200px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            
    
}

.main h1{
    font-size: 70px;
    margin-top: 0px;
    padding-top: 30px;
}

.about_body h1{

    color:aliceblue;

}

*{
    background-color: black;
}

.inline{
    display: inline-block;
}

#special_A{
    color: crimson;
    text-decoration:underline;
    text-decoration-color: rgb(109, 78, 78);
    
    
}



/* ABOUT ME SECTION */
#about_text h2{
    color:aqua;
    font-size: 60px;
    margin-top: 0;
    padding-top: 50px;
    


}

#about_text p{
    font-size: 20px;
    width: 500px;
    text-align:justify;
    margin: 15px 0px;
    
    
}

#picture{
    height: 120px;
    width: 120px;
    display: inline-block;
    margin: 1px;
    padding: 1px;
    overflow: visible;
    z-index: 10;
    
    
        
}

/* CERTIFICATES SECTION */
.board img{

    margin: 1px;
    padding-left: 200px;
    border: 1px black;
    width: 300px;
    height: auto;
    padding-top: 50px;
    background: transparent;

}

.board{

    background:black;
    width: auto;
    padding: 1px;
}

#html{
    padding: 10px;
}

/* PROJECTS SECTION */

#under_construction{
    margin-left: 300px;
    margin-top: 100px;
    
}

/* CONTACT SECTION */

form li{
    color:white;
    margin-left: 200px;
    padding-top: 50px;
    position: relative;
    font-family: Helvetica;
    font-weight: bold;
}

#name{
    margin-top: 100px;
    
    
}

ul{
    list-style: none;
}

#msg{
    height: 150px;
    width: 250px;
    
}

.form{
    background-color: white;

Hello again,

May I suggest in the future to put all of your questions on the same topic?

But an easy fix for this would be:

#picture{
    position: absolute;
    top (or) bottom: #px;
    left (or) right: #px;
}

And it isn’t that there’s necessarily an “invisible margin,” just that no width is given to the <div>, so it’s being “shoved” over

Hope this helps!

Sorry for posting two posts.

I thought it was the right procedure to put one doubt in each, but thanks for the heads up, won’t happen again.

Anyway. Thanks so much for this fix, worked like a charm!

Cheers,
Allison

1 Like