I cant seem to make the elements inside this div inline. Id like the h3 to be above the form then the next h3 and form beside that.
<div class="title">
<h3><b>Click To Encounter A Pokemon</b></h3>
<form method="post" action="/encounter">
<button style="background-color: Transparent;" onclick="catchPokemon()">
<img type="image" src="https://i.imgur.com/zs02wMs.png" alt="Catch Pokemon" width="100"
height="100">
</button>
</form>
<h3><b>Click To Catch Pokemon</b></h3>
<form method="post" action="/encounter">
<button style="background-color: Transparent;" onclick="catchPokemon()">
<img type="image" src="https://i.imgur.com/zs02wMs.png" alt="Catch Pokemon" width="100"
height="100">
</button>
</form>
</div>You could add a container flexbox that acts as 'row' then within that the forms which are themselves also flexboxes, but 'columns'.
* {
margin: 0;
padding: 0;
}
button {
line-height: 0;
border: 1px solid black;
}
.row {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
align-items: flex-start;
}
.column {
display: flex;
flex-flow: column nowrap;
align-items: center;
}<div class="row">
<form class="column" method="post" action="/encounter">
<h3>Click To Encounter A Pokemon</h3>
<button onclick="catchPokemon()">
<img type="image" src="https://picsum.photos/100?v=1">
</button>
</form>
<form class="column" method="post" action="/encounter">
<h3>Click To Catch Pokemon</h3>
<button onclick="catchPokemon()">
<img type="image" src="https://picsum.photos/100?v=2">
</button>
</form>
</div> <div class="title" style="display: flex; justify-content: space-between">
<div>
<h3><b>Click To Encounter A Pokemon</b></h3>
<form method="post" action="/encounter">
<button style="background-color: Transparent;" onclick="catchPokemon()">
<img type="image" src="https://i.imgur.com/zs02wMs.png" alt="Catch Pokemon" width="100" height="100">
</button>
</form>
</div>
<div>
<h3><b>Click To Catch Pokemon</b></h3>
<form method="post" action="/encounter">
<button style="background-color: Transparent;" onclick="catchPokemon()">
<img type="image" src="https://i.imgur.com/zs02wMs.png" alt="Catch Pokemon" width="100" height="100">
</button>
</form>
</div>
</div>display: flex; to the .title div, as shown above. Using display: inline; on the new div containers could also work, but you probably will need to adjust the margin to your liking.If you want to display those div's in line you can use css styles. Most Popular is just typing float: left; but I prefer to use flexbox. It's less complicated.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
But in this example you can use Float Left/Float right:
You have to add this to your css code. If you don't want to use styles from another file you can add it in <style> tag.
For example:
You put this in the <head> tag.
It should look like that. If you wanted this:
You don't need to put image in form when you wanna make a hyperlink. Use an <a> tag.
Good luck in programming :)
