Simple gallery shows animal picture and asks for their names

HTML & CSS
1

Hi

I making a from or a simple gallery shows some animal pictures and ask to type their names in a test box like as shown here :

:

1469Ă—639 37.2 KB

How can I make the text boxes below each image ?

<body>
    
<form >
 
  <p>&nbsp;</p>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;
      
          <input type="image" src="1.JPG" alt="Submit" width="230" height="230" >
    <input type="text" align="bottom">
    <input type="image" src="3.JPG" alt="Submit" width="230" height="230">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    
    <input type="text" >
    
    <input type="image" src="2.JPG" alt="Submit" width="230" height="230">
    
    <input type="text" >
  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
 
</form>

<!-- //main --> 

</body>
2

Input tags are inline elements, so they will naturally follow one another like your diagram. One solution would be to wrap each pair of image and text inputs in a ÄŹiv tag with a br tag between the two elements to force the text input on to the next line. Then arrange the div tags side by side.

Sorry for the formatting here and the lack of an actual code example. I’m on an old tablet right now and it makes typing out code difficult.

By the way, don’t use empty paragraphs and tons of &nbsp ; to space out your elements. That’s not what they are for. Use CSS margins and padding instead.

3

Try this:

<!doctype html>
<html>
<head>
<title> goes here </title>
<style type="text/css">
div span {
  float:left; 
  margin-right:42px; 
  text-align: center; 
  border:dotted 2px red; 
}
div span img {
  width:200px; 
  height:133px;
}
</style>
</head>
<body>
<form >
<div> 
  <span>
    <input type="image" src="/a/1.jpg" alt="Submit"/>
    <br>  
    <input type="text" value="fred"/>
	</span>
	
  <span>
	<input type="image" src="/a/2.jpg" alt="Submit"/>
	<br>  
	<input type="text" result="jack"/>
  </span>
	
  <span>
	<input type="image" src="/a/2.jpg" alt="Submit">
                                                   	<br>  
	<input type="text" result="harry"/>
  </span>
</div>
</form>

</body>
</html>
4

Thanks , could you show me an example later

5

Did the example above help you?

6

This look like a list of item pairs that should be marked up as an unordered list.
That also gives several options to style it as you want. E.g.:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Untitled</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
ul{
    margin:0;
    padding:0;
}
li{
    display:inline-block;
    margin:5px;
}
li input{
    display:block;
    border:1px solid gray;
}
li input[type=text]{
    box-sizing:border-box;
    width:100%;
    font-size:100%;
}
</style>
</head><body>

<ul>
    <li>
        <input type="image" src="1.JPG.jpg" alt="Submit" width="200" height="230" >
        <input type="text" >
    </li>
    <li>
        <input type="image" src="2.JPG.jpg" alt="Submit" width="200" height="200">
        <input type="text" >
    </li>
    <li>
        <input type="image" src="3.JPG.jpg" alt="Submit" width="230" height="230">
        <input type="text" >
    </li>
</ul>

</body></html>

I totally agree with @WebMachine, follow her advice.

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.