CODEWITHSUNDEEP
htmlcss
Julián C Mancera
Julián C Mancera

Reputation: 31

How can I put the text next to the picture?

I want to know how can I move this text next to an image! I don't know how I made it with the first pic, but I couldn't with the second. 

p.mytext {
  color: aliceblue;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  border: 2px solid;
  border-color: whitesmoke;
  margin-left: 90px;
  margin-right: 750px;
  margin-bottom: 150px;
  font-family: Lucida Sans Unicode;
}

p.secondtext {
  color: white;
  border: 2px solid;
  border-color: whitesmoke;
  font-family: Lucida Sans Unicode;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: 90px;
  margin-right: 500px;
  float: left;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>About me</title>
  <link href="../CSS/main.css" rel="stylesheet" type="text/css">
</head>

<img class="clip" src="../images/clip.png" width="300">

<body id="aboutme">

  <h1 class="titulo">About me</h1>

  <h2>INFORMATION</h2>

  <img class="picofme" src="../images/juli.JPG" width="400">


  <p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me
    what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing
    is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the
    film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps
    every day"</p>

  <img class="china" src="../images/china.JPG" width="450">


  <p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después
    de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como
    nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra
    los invasores franceses para restablecer en el trono al monarca legítimo.</p>

</body>

</html>

Upvotes: 1

Views: 97

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28553

A couple of pointers to mention:

  1. The body tag does not need an id, the id should be added to a div tag within the body
  2. Your first image is above the body tag, remember to include all of your content html within the body
  3. Your paragraphs have many similar style property values, consider making a class for these. You can add more than one class to a tag.
  4. Avoid adding inline css: your img widths are very similar in width. For demo purposes, I have created a class with width of 425 (midway) and removed the 400/425 inline style

I commented out margins that were throwing out position, and changed the color text to black for the paragraphs (just so I could see it!)

The bottom img classes (in my code) that are commented out are examples of css that you could use for your images. The img css that affects the snippet is in the second line.

#aboutme{float:left;}
p{color:#000000; width:60%; display:inline-block; float:right;}
img{max-width:32%; padding:30px 25px; float:left; height:auto; vertical-align:middle;}
p, img{ display:inline-block; vertical-align:top;}
.mytext {
  /*color: aliceblue;*/
  padding: 15px;
  border: 2px solid;
  border-color: whitesmoke;
  /*margin-left: 90px;
  margin-right: 75px;
  margin-bottom: 150px;*/
  font-family: Lucida Sans Unicode;
}

.secondtext {
  /*color: #ffffff;*/
  border: 2px solid;
  border-color: whitesmoke;
  font-family: Lucida Sans Unicode;
  padding-left: 15px;
  padding-right: 15px;
  /*margin-left: 90px;
  margin-right: 500px;*/
  /*float: left;*/
}


/*.picofme{width:400px;height:auto;}
.china{width:450px;height:auto;}*/
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>About me</title>
  <link href="../CSS/main.css" rel="stylesheet" type="text/css">
</head>


<body>

<img id="clip" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >

<div id="aboutme">

  <h1 class="titulo">About me</h1>

  <h2>INFORMATION</h2>

  <img class="picofme" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >


  <p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me
    what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing
    is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the
    film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps
    every day"</p>

  <img class="china" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >


  <p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después
    de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como
    nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra
    los invasores franceses para restablecer en el trono al monarca legítimo.</p>
    </div>

</body>

</html>

Good luck

Upvotes: 0

doğukan
doğukan

Reputation: 27381

i suppose you want to this.

.flex {
  display:flex;
  margin: 20px 0;
}

.flex img {
  margin:0 20px 0 0;
}

.flex p {
  border: 2px solid;
  border-color: whitesmoke;
  padding:20px;
  margin:0;
}
<img class="clip" src="https://picsum.photos/300/100">
    
<body id="aboutme">
    
    
   
<h1 class="titulo">About me</h1>
    
    <h2>INFORMATION</h2>
  
<div class="flex">
   <img class="picofme" src="https://picsum.photos/300/300" width="400" >
   
      
     <p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps every day"</p> 
</div>
   <div class="flex">
    <img class="china" src="https://picsum.photos/300/300" width="450">

    
    <p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra los invasores franceses para restablecer en el trono al monarca legítimo.</p>
    </div>
</body>

Upvotes: 2

Related Questions