(Resolvido)[WEBSITE] Create character com portrait/retrato

[warlens 9]

Gostaria de pedir uma ajuda para quem entende melhor do que eu, no momento estou tentando colocar esse create_character com uma imagem portrait/retrato como seleção para cada [vocation], até agora consegui colocar 2 portraits/retrato do naruto com nome de personagem abaixo, um ao lado do outro, porém ficou desajustado, e o [world] não consegui coloca-lo acima do [Sexo].

estou usando o [vocation id e a value sendo id do sample na database] para assim criar a vocação com essas bolinhas de seleção.

 

 

Eu gostaria que tivesse 8 vocações cada uma com portrait/retrato, 4 na primeira coluna e 4 na segunda coluna abaixo da primeira, com o select [Mundo] acima do select [Sexo].

Um exemplo de como eu queria que ficasse, editei no paint:

 

create_character.php logo abaixo:

system/applications/view/create_character.php

Citar

<?php 
echo "<div class='errors'>";
echo error(validation_errors());
echo "</div>";
echo form_open('character/create_character', array('id'=>'createCharacter')); 
?>
<script>
    function createCharacter() {
        $('.loader').show();
        var form = $('#createCharacter').serialize();
        $.ajax({
            url: '<?php echo WEBSITE; ?>/index.php/character/create_character/1',
              type: 'post',
              data: form,
              success: function(data) {
                  $('.errors').html(data);
                  $('.loader').hide();
              }
        });
    }
</script>
<div class='message'>
<div class='title'>Criar Novo Character</div>
<div class='content'>
<label>Nome do Character</label><input type='text' value="<?php echo set_value('name'); ?>" name='name'><br><br>
<label>Cidade</label><select name='city'>
<?php 
    foreach($cities as $key=>$value) {
        echo '<option value="'.$key.'">'.$value.'</option>';
    }
?>
</select><br><br>
<label>Sexo</label><select name='sex'>
    <option value="1">Male</option>
    <option value="0">Female</option>
</select><br><br>
                        <tr>
                            <td>
                                <tr>
                                    <td>
                                           <label for="vocation2"><img src="/templates/Layout Nto/images/portraits/Naruto.png"><br>
                                        <input type="radio" name="vocation" id="vocation2" value="2">Naruto</br></div>
                                    <td>
                                           <label for="vocation2"><img src="/templates/Layout Nto/images/portraits/Naruto.png"><br>
                                        <input type="radio" name="vocation" id="vocation2" value="2">Naruto</br></div><div>
                                    </td>
                                </tr>
                            </td>
                        </tr>
                    </table>
</select><br><br>
<label>Mundo</label><select name='world'>
<?php 
    foreach($worlds as $key=>$value) {
        echo '<option value="'.$key.'">'.$value.'</option>';
    }
?>
</select><br><br/>
<label>&nbsp;</label>
<input type='submit' value='Criar' name='submit' class='sub'/> <?php echo loader();?>
</div></div>
</form>

 

Agradeço quem puder ajudar, não sou muito chegado ao fórum e não entendo muito de como funciona mas acho que é a área certa né?

Editado Fevereiro 19, 2020 por warlens (veja o histórico de edições)

[Dev PHP 27]

2 horas atrás, warlens disse:

<td>
                                           <label for="vocation2"><img src="/templates/Layout Nto/images/portraits/Naruto.png"><br>
                                        <input type="radio" name="vocation" id="vocation2" value="2">Naruto</br></div>
                                    <td>
                                           <label for="vocation2"><img src="/templates/Layout Nto/images/portraits/Naruto.png"><br>
                                        <input type="radio" name="vocation" id="vocation2" value="2">Naruto</br></div><div>
                                    </td>

Pelo que parece nessa parte você apenas se esqueceu que toda tag aberta precisa ser fechada.

Note que <td> aberta antes do 1°<label> Não foi fechada antes da abertura da outra <td>

sendo assim vc precisa fechar a td para iniciar a outra.

Código +/- Assim:

 

<td>
                                           <label for="vocation2"><img src="/templates/Layout Nto/images/portraits/Naruto.png"><br>
                                        <input type="radio" name="vocation" id="vocation2" value="2">Naruto</br></div>
</td>
                                    <td>                                      
                                           <label for="vocation2"><img src="/templates/Layout Nto/images/portraits/Naruto.png"><br>
                                        <input type="radio" name="vocation" id="vocation2" value="2">Naruto</br></div><div>
                                    </td>

E acredito que esses fechamentos de </div> estejam incorretos.

[warlens 9]

22 minutos atrás, ricardo codenome disse:

Pelo que parece nessa parte você apenas se esqueceu que toda tag aberta precisa ser fechada.

Note que <td> aberta antes do 1°<label> Não foi fechada antes da abertura da outra <td>

sendo assim vc precisa fechar a td para iniciar a outra.

Código +/- Assim:

 

<td>
                                           <label for="vocation2"><img src="/templates/Layout Nto/images/portraits/Naruto.png"><br>
                                        <input type="radio" name="vocation" id="vocation2" value="2">Naruto</br></div>
</td>
                                    <td>                                      
                                           <label for="vocation2"><img src="/templates/Layout Nto/images/portraits/Naruto.png"><br>
                                        <input type="radio" name="vocation" id="vocation2" value="2">Naruto</br></div><div>
                                    </td>

E acredito que esses fechamentos de </div> estejam incorretos.

 

 

Obrigado de verdade amigo, ficou perfeito

 eu consegui resolver, era o <td> não estava fechado como você disse e faltou criar um <table> acima do primeiro <tr>.

 

Editado Fevereiro 19, 2020 por warlens (veja o histórico de edições)