I can't change the text and image size-CodePudding

I'm having problems changing the size of the text and the image in css. I'm just starting to use html and css. This is my code.

<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {box-sizing: border-box}
    body {font-family: Verdana, sans-serif; margin:0}
    .img1 {display: none}
    img1 {vertical-align: middle;}

    .title {
      color: #333333;
      font-size: 3em;
      font-family: 40 px Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;
      font-weight: bold;
      padding: 8px 12px;
      position: static;
      bottom: 8px;
      width: 100%;
    }

    .text1 {
        color: #333333;
        padding: 8px 12px;
        font-family: 17 px Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;
    }

    .img1 {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    </style>
    </head>
    <body>

    <div>
    <h1 div  id="title"  button onclick="myFunction()"></div> <br>
    <div  id="text1"  button onclick="myFunction()"></div> <br>
    <div > <img id="img1" src one rror="this.onerror=null; this.src=myFunction();" style="width:50%"> </div>
    </div>

    <br>

    <script>

    function myFunction() {
      var xmlhttp = new XMLHttpRequest();
    var url = "https://vnwcn9gt89.execute-api.us-east-2.amazonaws.com/book"; 
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
       var myJson = JSON.parse(this.responseText);
       console.log(myJson);
       document.getElementById("title").innerHTML = myJson.Items[3].valore;
       document.getElementById("text1").innerHTML = myJson.Items[1].valore;
       document.getElementById("img1").src="books_img/" myJson.Items[0].valore;
      }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
    }

    </script>


    </body>
    </html>

In particular, I am unable to change the size of the text and I cannot center the image. I definitely get confused with divs. Can you kindly help me?

CodePudding user response：

1.) font-family: 17 px Olney, is not a valid definititon for font-size. Use font-size instead, and make sure to not put a space between the number and "px".

2.) To center your image, apply text-align: center to your img1 class (which is the parent element of the image - the image itself is an inline element by default which can be centered that way)

CodePudding user response：

You are using the font-family property to set both the size and font-family of the text1 class. font-family property is used to set the font family only. So, use this

{font:17px Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;}

instead of font-family

Or you can specify the font-size and font-family separately like { font-size:17px; font-family:"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif; }

And if you want to set the width of the image to be 50% then you have to provide some width to the parent div of the image.

CodePudding user response：

<div  id="text1"  button onclick="myFunction()"></div> <br>

For good practice, try using <p> for text. What happens is that you are trying to add font-size style to a <div>.
You don't need to use
after a .
You can't use a button inside a div

The proposal solution is this:
CSS

.text {
    color: #333333;
    font-size: 17px;
    font-family: Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;
}

.text-container {
        padding: 8px 12px;
}

HTML

  <div >
    <button type="button" onclick="myFunction()">
      <p  id="text1"></p>
    </button>
  </div>

Now for the image, add text-align:center to img1:

.img1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

Welcome to Programming :)