Outlining divs and images

问题

I am working on my portfolio website, and I have a problem. Once I want multiple layers (you'll have to see to understand this) they line out totally different.

I used the same pixel sizes for the images. Important: I can only use pixels for the divs surrounding the images and content. Because I need to use @media to make change the page for my phone, so I need to do everything else in percentages.

This problem only occurs when I have an image on the left. Because I tried putting another layer under the second one and had the image on the right without any problem. It had the same width and margins as the first layer.

/*
Opdracht:       PROJECT 1
Auteur:         Diego Cubero van Coevorden
Aanmaakdatum:   14-1-2020
Bestandsnaam:   stylesheet.css
*/

#workspace
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    width: 1000px;
    height: 670px;
}

#workspace2
{
    display: block;
    margin: auto;

    width: 1000px;
    height: 670px;
}


#greyworkspace
{
    display: block;
    margin-left: auto;
    margin-right: auto;;
    width: 1000px;
    height: 670px;

}

#foto
{
    height: 100%;
}

#contentgrey
{
    float: right;
    height: 100%;
    width: 75%;
    background-color: rgb(215,212,212);
}

#image2
{
    width: 25%;
    height: 100%;
    float: left;
}

#image3
{
    width: 25%;
    height: 100%;
    float: right;
}

#image
{
    width: 25%;
    height: 100%;
    float: right;
}

#content
{
    float: left;
    height: 100%;
    width: 75%;
    background-color: rgb(32,32,32);
}

#content2
{
    float: left;
    height: 100%;
    width: 75%;
    background-color: rgb(32,32,32);
}

#kw1cp 
{
    color: black;
    font-size: 18px;
    float: left;
    margin-left: 30px;
    width: 400px;
    font-family: 'Arial';
    margin-top: 20px;
}

#kw1c
{
    color: black;
    float: left;
    margin-left: 30px;
    width: 600px;
    font-family: 'Arial Black';
    margin-top: 50px;
    margin-bottom: 0px;
}

#kw1cw
{
    color: white;
    float: left;
    margin-left: 30px;
    width: 600px;
    font-family: 'Arial Black';
    margin-top: 50px;
    margin-bottom: 0px;
}
/* Verticale navigatiebar hobby's */


#hobbylist {
  list-style-type: none;
  margin-top: 300px;
  margin-left: 40px;
  padding: 0;
  width: 100px;
    height: 100px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}



/*Einde navigatie hobby's */

p
{
    color: white;
    font-size: 18px;
    float: left;
    margin-left: 30px;
    width: 400px;
    font-family: 'Arial';
    margin-top: 20px;
}

#tekstzwart
{
    color: black;
    font-size: 18px;
    float: left;
    margin-left: 30px;
    width: 400px;
    font-family: 'Arial';
    margin-top: 20px;
}

#left
{
    float: left;
}

#right
{
    float: left;
    margin-left: 70px;
}

#tekstzwartlang
{
    color: black;
    font-size: 18px;
    float: left;
    margin-left: 30px;
    width: 800px;
    font-family: 'Arial';
    margin-top: 20px;
}

#tekstwitlang
{
    color: white;
    font-size: 18px;
    float: left;
    margin-left: 30px;
    width: 800px;
    font-family: 'Arial';
    margin-top: 20px;
}


#bold
{
    font-weight: bold;
}

h1
{
    color: white;
    float: left;
    margin-left: 30px;
    width: 600px;
    font-family: 'Arial Black';
    margin-top: 30px;
    margin-bottom: 0px;
}

#naam {
    color: white;
    font-size: 56px;
    float: left;
    margin-left: 30px;
    width: 600px;
    font-family: 'Arial Black';
    margin-top: 80px;
    margin-bottom: 0px;
}

#cambridge
{
    height: 300px;
    width: 300px;
}

#school
{
    height: 200px;
    width: 300px;
}

#greya
{
    text-decoration: underline;
    color: black;
}

#whitea
{
    text-decoration: underline;
    color: white;
}

nav
{
    display: block;
    float: left;
    margin-top: 65px;
    margin-left: 0px;
}

#beroep
{
    color: white;
    font-size: 18px;
    float: left;
    margin-left: 200px;
    width: 400px;
    font-family: 'Arial';
    margin-top: 20px;
}

nav ul
{
    float: left;
}

nav ul li
{
    float: left;
    list-style: none;
    position: relative;
}

nav ul li a
{
    font-family: 'Arial Black';
    display: block;
    text-decoration: none;
    padding: 14px 28px 14px 0px;
    color: white;
}

#active
{
    text-decoration: underline;
}

nav ul li ul
{
    display: none;
    position: absolute;
    padding-left: 0px;
}


nav ul li:hover ul
{
    display: block;
}

nav ul li ul li
{
    width: 108px;
}

nav ul li ul li a
{
    padding: 0px 28px 0px 0px;
    color: white;
    background-color: rgb(32,32,32);
}

nav ul li ul li a:hover
{
    background-color: darkgrey;

}

<!DOCTYPE html>
<html>
    <head>
        <title>Project 1 - Werkervaring</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta charset="utf-8">
        <link href="./CSS/stylesheet.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="workspace">
           <div id="content">
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="Opleidingen.html">Opleidingen</a></li>
                    <li><a href="Werkervaring.html" id="active">Werkervaring</a></li>
                    <li><a href="Hobby.html">Hobby's</a></li>
                    <li><a href="">Producten</a>
                        <ul>
                            <li><a href="#">Project 1</a></li>
                            <li><a href="#">Project 2</a></li>
                            <li><a href="#">Project 3</a></li>
                            <li><a href="#">Project 4</a></li>
                            <li><a href="#">Project 5</a></li>
                            <li><a href="#">Project 6</a></li>
                            <li><a href="#">Project 7</a></li>
                            <li><a href="#">Project 8</a></li>
                        </ul>
                    </li>
                    <li><a href="Contact.html">Contact</a></li>
                </ul>
            </nav>



                <h1>Heinde & Ver</h1>
                <p>Houttuinlaan 1B<br>Woerden<br><a href="https://www.heindever.nl/" target="_blank" id="whitea">Officiële website</a></p>
                               <p>Mijn eerste echte baantje was bij Heinde & Ver. Ik begon daar toen ik 15 jaar oud was. Ik heb daar ongeveer 9 maanden gewerkt. Ik werkte als kok. Ik begon met het maken van toetjes en voorgerechten, maar ben doorgegroeit tot hoofdgerechten. Ik vond het een hele leuke ervaring, maar de loon viel mij tegen. </p> 
               <img src="Afbeeldingen/Heinde.jfif" id="school">

            </div> 


            <div id="image">    
                <img id="foto" src="https://i.imgur.com/zJYrcg0.jpg">
            </div>
        </div>



        <div id="greyworkspace">
            <div id="image2"><img src="https://i.imgur.com/G9Lya2A.jpg" id="foto"></div>

            <div id="contentgrey">
            <h1 id="kw1c">The Sting</h1>
            <p id="tekstzwart">Hollandse Toren 9<br>
                          Utrecht<br>
                          <a href="https://www.thesting.com/nl-nl" id="greya" target="_blank">Officiële website</a></p>
                <p id="tekstzwart">Ik ging bij The Sting werken op mijn zestiende toen ik net weg was bij Heinde & Ver. Ik was in een winkel gevraagd of ik al een baantje had en toen had ik besloten te solliciteren bij The Sting in Utrecht. Ik werk hier nu al 1,5 tot 2 jaar met veel plezier. Ik heb hier veel geleerd hoe je klanten kunt helpen en hoe je moet verkopen.</p>
            <img src="Afbeeldingen/Sting.jpg" id="school">
            </div>
        </div>
    </body>
</html>

回答1:

I found the solution to my problem.

I gave my "workspace" a height and a width. I gave my "content" and "image" a height and a width. I gave my "foto" a height, BUT not a width. Once I gave it 100% width, the problem didn't occur anymore.

/*
Opdracht:       PROJECT 1
Auteur:         Diego Cubero van Coevorden
Aanmaakdatum:   14-1-2020
Bestandsnaam:   stylesheet.css
*/

#workspace
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    width: 1000px;
    height: 670px;
}

#workspace2
{
    display: block;
    margin: auto;

    width: 1000px;
    height: 670px;
}


#greyworkspace
{
    display: block;
    margin-left: auto;
    margin-right: auto;;
    width: 1000px;
    height: 670px;

}

#foto
{
    height: 100%;
    width: 100%;
}

#contentgrey
{
    float: right;
    height: 100%;
    width: 75%;
    background-color: rgb(215,212,212);
}

#image2
{
    width: 25%;
    height: 100%;
    float: left;
}

#image3
{
    width: 25%;
    height: 100%;
    float: right;
}

#image
{
    width: 25%;
    height: 100%;
    float: right;
}

#content
{
    float: left;
    height: 100%;
    width: 75%;
    background-color: rgb(32,32,32);
}

#content2
{
    float: left;
    height: 100%;
    width: 75%;
    background-color: rgb(32,32,32);
}

#kw1cp 
{
    color: black;
    font-size: 18px;
    float: left;
    margin-left: 30px;
    width: 400px;
    font-family: 'Arial';
    margin-top: 20px;
}

#kw1c
{
    color: black;
    float: left;
    margin-left: 30px;
    width: 600px;
    font-family: 'Arial Black';
    margin-top: 50px;
    margin-bottom: 0px;
}

#kw1cw
{
    color: white;
    float: left;
    margin-left: 30px;
    width: 600px;
    font-family: 'Arial Black';
    margin-top: 50px;
    margin-bottom: 0px;
}
/* Verticale navigatiebar hobby's */


#hobbylist {
  list-style-type: none;
  margin-top: 300px;
  margin-left: 40px;
  padding: 0;
  width: 100px;
    height: 100px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}



/*Einde navigatie hobby's */

p
{
    color: white;
    font-size: 18px;
    float: left;
    margin-left: 30px;
    width: 400px;
    font-family: 'Arial';
    margin-top: 20px;
}

#tekstzwart
{
    color: black;
    font-size: 18px;
    float: left;
    margin-left: 30px;
    width: 400px;
    font-family: 'Arial';
    margin-top: 20px;
}

#left
{
    float: left;
}

#right
{
    float: left;
    margin-left: 70px;
}

#tekstzwartlang
{
    color: black;
    font-size: 18px;
    float: left;
    margin-left: 30px;
    width: 800px;
    font-family: 'Arial';
    margin-top: 20px;
}

#tekstwitlang
{
    color: white;
    font-size: 18px;
    float: left;
    margin-left: 30px;
    width: 800px;
    font-family: 'Arial';
    margin-top: 20px;
}


#bold
{
    font-weight: bold;
}

h1
{
    color: white;
    float: left;
    margin-left: 30px;
    width: 600px;
    font-family: 'Arial Black';
    margin-top: 30px;
    margin-bottom: 0px;
}

#naam {
    color: white;
    font-size: 56px;
    float: left;
    margin-left: 30px;
    width: 600px;
    font-family: 'Arial Black';
    margin-top: 80px;
    margin-bottom: 0px;
}

#cambridge
{
    height: 300px;
    width: 300px;
}

#school
{
    height: 200px;
    width: 300px;
}

#greya
{
    text-decoration: underline;
    color: black;
}

#whitea
{
    text-decoration: underline;
    color: white;
}

nav
{
    display: block;
    float: left;
    margin-top: 65px;
    margin-left: 0px;
}

#beroep
{
    color: white;
    font-size: 18px;
    float: left;
    margin-left: 200px;
    width: 400px;
    font-family: 'Arial';
    margin-top: 20px;
}

nav ul
{
    float: left;
}

nav ul li
{
    float: left;
    list-style: none;
    position: relative;
}

nav ul li a
{
    font-family: 'Arial Black';
    display: block;
    text-decoration: none;
    padding: 14px 28px 14px 0px;
    color: white;
}

#active
{
    text-decoration: underline;
}

nav ul li ul
{
    display: none;
    position: absolute;
    padding-left: 0px;
}


nav ul li:hover ul
{
    display: block;
}

nav ul li ul li
{
    width: 108px;
}

nav ul li ul li a
{
    padding: 0px 28px 0px 0px;
    color: white;
    background-color: rgb(32,32,32);
}

nav ul li ul li a:hover
{
    background-color: darkgrey;

}

<!DOCTYPE html>
<html>
    <head>
        <title>Project 1 - Werkervaring</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta charset="utf-8">
        <link href="./CSS/stylesheet.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="workspace">
           <div id="content">
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="Opleidingen.html">Opleidingen</a></li>
                    <li><a href="Werkervaring.html" id="active">Werkervaring</a></li>
                    <li><a href="Hobby.html">Hobby's</a></li>
                    <li><a href="">Producten</a>
                        <ul>
                            <li><a href="#">Project 1</a></li>
                            <li><a href="#">Project 2</a></li>
                            <li><a href="#">Project 3</a></li>
                            <li><a href="#">Project 4</a></li>
                            <li><a href="#">Project 5</a></li>
                            <li><a href="#">Project 6</a></li>
                            <li><a href="#">Project 7</a></li>
                            <li><a href="#">Project 8</a></li>
                        </ul>
                    </li>
                    <li><a href="Contact.html">Contact</a></li>
                </ul>
            </nav>



                <h1>Heinde & Ver</h1>
                <p>Houttuinlaan 1B<br>Woerden<br><a href="https://www.heindever.nl/" target="_blank" id="whitea">Officiële website</a></p>
                               <p>Mijn eerste echte baantje was bij Heinde & Ver. Ik begon daar toen ik 15 jaar oud was. Ik heb daar ongeveer 9 maanden gewerkt. Ik werkte als kok. Ik begon met het maken van toetjes en voorgerechten, maar ben doorgegroeit tot hoofdgerechten. Ik vond het een hele leuke ervaring, maar de loon viel mij tegen. </p> 
               <img src="Afbeeldingen/Heinde.jfif" id="school">

            </div> 


            <div id="image">    
                <img id="foto" src="https://i.imgur.com/zJYrcg0.jpg">
            </div>
        </div>



        <div id="greyworkspace">
            <div id="image2"><img src="https://i.imgur.com/G9Lya2A.jpg" id="foto"></div>

            <div id="contentgrey">
            <h1 id="kw1c">The Sting</h1>
            <p id="tekstzwart">Hollandse Toren 9<br>
                          Utrecht<br>
                          <a href="https://www.thesting.com/nl-nl" id="greya" target="_blank">Officiële website</a></p>
                <p id="tekstzwart">Ik ging bij The Sting werken op mijn zestiende toen ik net weg was bij Heinde & Ver. Ik was in een winkel gevraagd of ik al een baantje had en toen had ik besloten te solliciteren bij The Sting in Utrecht. Ik werk hier nu al 1,5 tot 2 jaar met veel plezier. Ik heb hier veel geleerd hoe je klanten kunt helpen en hoe je moet verkopen.</p>
            <img src="Afbeeldingen/Sting.jpg" id="school">
            </div>
        </div>
    </body>
</html>

来源：https://stackoverflow.com/questions/59884892/outlining-divs-and-images

标签

html

css

margin

outlining