Issue
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.
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();
}
* {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;
}
<div>
<h1 div class="title" id="title" button onclick="myFunction()"></div> <br>
<div class="text1" id="text1" button onclick="myFunction()"></div> <br>
<div class="img1"> <img id="img1" src onerror="this.onerror=null; this.src=myFunction();" style="width:50%"> </div>
</div>
<br>
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?
Solution
<div class="text1" id="text1" button onclick="myFunction()"></div> <br>
- For good practice, try using
<p>
for text. What happens is that you are trying to addfont-size
style to a<div>
. - You don't need to use
<br>
after a<div>
. - 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 class="text-container">
<button type="button" onclick="myFunction()">
<p class="text" 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 :)
Answered By - richlira
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.