5 Replies - 282 Views - Last Post: 21 April 2020 - 07:11 PM

#1 kukas   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 21-April 20

I have a problem with positioning an image inside a DIV-Box

Posted 21 April 2020 - 09:42 AM

Hello Guys,
I am trying to move my image inside the DIV-Box so that it is on the right of the text and I tried it by using the float command and some other things but something isnt right i guess. I tried to find something but I did not solve it and maybe someone gives me a tipp whats wrong about my code.

Here is my following HTML-Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    <title>SpaceX</title>
    <link rel="icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRLQ8hknzo_SWsMSGg-1xaFXIQLYsvtqMkdyPE857E9NlOo9V9a">
</head>
<body>
    <nav>
        <div class="logo">
            <a href="index.html"><img src="https://cdn.freebiesupply.com/logos/large/2x/spacex-logo-black-and-white.png" width="150"/></a>
        </div>
        <ul class="nav-links">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Einrichtungen</a></li>
            <li><a href="#">Technologie</a></li>
        </ul>
    </nav>
    <section class="main">
    <div class="container">
        <div class="box">
            <h2>Heading</h2>
            <p>Information</p>
        </div>
        <div class="box">
            <h2>Heading</h2>
            <p>Information</p>
            <div class"elonmusk">
                <img src="https://i.pinimg.com/originals/18/fd/64/18fd644e9cdf81ab785d606584a384fb.jpg" alt="elonmusk">
            </div>
        </div>
        <div class="box">
            <h2>Heading</h2>
            <p>Information</p>
        </div>
    </div>
    </section>
</body>
</html>


This is the CSS (if needed):
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

nav {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    min-height: 8vh;
    font-family: 'Open Sans', regular;
    background-color: #1c232e;
    color: white;
    box-shadow: 0 4xp 4px -4px rgba(0,0,0,.2);
}
.logo {
    color: white;
    font-size: 24px;
}
.nav-links {
    display: flex;
    text-align: center;
    justify-content: space-around;
    width: 30%;
}
.nav-links li {
    list-style: none;
    float: left;
}
.nav-links a {
    color: white;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: normal;
}
body {
    margin: 0px;
    padding: 0px;
    background-color: blanchedalmond;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Open Sans', regular;
    color: black;
}
.main {
    padding: 0 100px;
    height: 100vh;
    display: flex;
    margin-top: 30px;
}
.box {
    position: relative;
    max-width: 700px;
    padding: 50px;
    background: rgba(255,255,255,.2);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    margin-bottom: 30px;
}
.elonmusk {
    margin-left: 100px;
}


This post has been edited by Dormilich: 21 April 2020 - 10:50 AM


Is This A Good Question/Topic? 0
  • +

Replies To: I have a problem with positioning an image inside a DIV-Box

#2 Splashsky   User is offline

  • D.I.C Addict
  • member icon

Reputation: 9
  • View blog
  • Posts: 565
  • Joined: 25-August 13

Re: I have a problem with positioning an image inside a DIV-Box

Posted 21 April 2020 - 10:35 AM

This is super easy to accomplish the almighty power of CSS Flexbox! Here's the box with the flex code...
<div class="container" style="width: 100%;">
    <div class="box" style="display: flex;">
        <div style="width: 100%;">
            <h2>Heading</h2>
            <p>Information</p>
        </div>
        <div class"elonmusk">
            <img src="https://i.pinimg.com/originals/18/fd/64/18fd644e9cdf81ab785d606584a384fb.jpg" alt="elonmusk">
        </div>
    </div>
</div>


And the updated CSS to help!
.main {
    width: 100%;
    padding: 0 100px;
    height: 100vh;
    display: flex;
    margin-top: 30px;
}

.box {
    width: 100%;
    position: relative;
    padding: 50px;
    background: rgba(255,255,255,.2);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    margin-bottom: 30px;
}



Good luck!
Was This Post Helpful? 0
  • +
  • -

#3 kukas   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 21-April 20

Re: I have a problem with positioning an image inside a DIV-Box

Posted 21 April 2020 - 06:24 PM

Thank you so much! I am pretty new to HTML and CSS but I understood the changes.
I tried to give those pictures inside the boxes the same size but is there something else than just using width or height? Because it is not changing its size and if i try to edit the size the picture moves out of the box.
Might be a dumb problem but I dont know what the solution could be.
Was This Post Helpful? 0
  • +
  • -

#4 Splashsky   User is offline

  • D.I.C Addict
  • member icon

Reputation: 9
  • View blog
  • Posts: 565
  • Joined: 25-August 13

Re: I have a problem with positioning an image inside a DIV-Box

Posted 21 April 2020 - 06:35 PM

When resized via CSS, images will maintain their ratio and size appropriately. Try something like <img src="https://i.pinimg.com/originals/18/fd/64/18fd644e9cdf81ab785d606584a384fb.jpg" alt="elonmusk" style="width: 300px;">
Was This Post Helpful? 0
  • +
  • -

#5 kukas   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 21-April 20

Re: I have a problem with positioning an image inside a DIV-Box

Posted 21 April 2020 - 06:58 PM

This is working. Thank you so much! :) Is there an advice where I can learn more?
Was This Post Helpful? 0
  • +
  • -

#6 Splashsky   User is offline

  • D.I.C Addict
  • member icon

Reputation: 9
  • View blog
  • Posts: 565
  • Joined: 25-August 13

Re: I have a problem with positioning an image inside a DIV-Box

Posted 21 April 2020 - 07:11 PM

For me it's all been trial and error over the last 8 years. I use SCSS and the Tailwind CSS framework, which I think I great for learning CSS, both basically and for more productional uses.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1