CSS Alinhar elementos de acordo ás posições

Joel Martins · 18 de agosto de 2021

Boas,

Eu tenho este formulário:

mas o problema é que os dados estão todos misturados.

o objetivo é que estivessem todos no lugar:

O meu códi9go HTML:

<?php

require"../login/check_point_.php";
require"../connect.php";
require"perfil.php";

?>
<html>
    <head>
        <!--<link rel="stylesheet" href="../navegation_bar_/navegation_bar_.php" type="text/php">-->
        <title><?php echo$_SESSION["username"];?></title>
        <link rel="stylesheet" href="perfil.css">
    </head>
    <body>
        <div>
            <div class="a">
                <div id="user_img_">
                    <img src="<?php echo $img;?>" class="img">
                    <h1 class="user" ><?php echo$username;?></h1>
                </div>
                <div id="nmsr">
                    <label for="nome">Nome</label>
                    <p name="nome"><?php echo $nome." ".$sobrenome;?></p>
                </div>
            </div>
            <div class="wey e">
                <label>E-mail</label>
                <br>
                <div class="data">
                <img src="../../img/ico/mail.png" class="ico">
                <p><?php echo $email;?></p>
                </div>
                edit
            </div>
            <div class="wey t">
                <label>Telefone</label>
                <br>
                <div class="data">
                <img src="../../img/ico/phone.png" class="ico">
                <p><?php echo $telemovel;?></p>
                </div>
                edit
            </div>
            <div class="wey d">
                <label>data de nacimento</label>
                <br>
                <div class="data">
                <img src="../../img/ico/birth.png" class="ico">
                <p><?php echo $nascimento;?></p>
                </div>
                edit
            </div>
            <div class="wey p">
                <label>Password</label>
                <br>
                <div class="data">
                <img src="../../img/ico/password.png" class="ico">
                <p><?php  echo $password;?></p>
                </div>
                edit
            </div>
        </div>
    </body>
</html>

cÓDIGO css:

body{
    margin-top:10px;
}
.a{
    background-color:green;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

#user_img_{
    background-color:red;
    width:50%;
    float:left;
    position:relative;
    
}
.img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color:grey;
    border:grey 5px solid;
    border-radius:100% 100% 100% 100%;
    width:200px;
    height:auto;
}
.user{
    display: flex;
        justify-content: center;
}

#nmsr{
    background-color:pink;
    height:50%;
}
#nmsr label{
    /*color:;*/
    top:200px;
    font-size:5vw;
    margin-left:10px;
}
#nmsr p{
    top:200px;
    margin-left:10px;
    align-self: center;
}
.wey{
    position:relative;
}
.wey label{
    font-size:2vw;
}
.wey img{
    width:25px;
    height:auto;
    display:inline;
    position: relative;
  top: 50%;
}
.wey p{
    display:inline;
    position: relative;
    top: 50%;
}
.data{
    border:1px grey solid;
    border-radius:5px;
    box-shadow: 0px 3px 5px #888888;
    width:75%;
}

Agradeço toda a ajuda possível : ))

DiF · 19 de agosto de 2021

@Joel Martins Olá, não deu para entender muito bem o que você quer.

Pelo que entendi, você quer colocar os campos input ao lado do label? Por exemplo

E-mail: input do e-mail

Telefone: input do telefone

https://jsfiddle.net/dife/0s2t87po/12/

Joel Martins · 1 de setembro de 2021

@DiF Sim mas os "inputs" ficam na div do username e da imagem.

o meu objetivo era que ficasse a imagem e username no div de cima e os "inputs" na div de baixo.Obrigado

DiF · 1 de setembro de 2021

@Joel Martins Ah .. agora entendi... acredito que o problema posicionamento no css.

Experimenta definir os elementos divs que são filho do primeiro div, como blocos.

Algo do tipo:

<div class="tudo">
  <div class="bloco"></div>
  <div class="bloco"></div>
  <div class="bloco"></div>
  <div class="bloco"></div>
</div>

.bloco{
   display: block;
   margin-top: 1em;
}

Basicamente, você faz com que cada elemento filho fique abaixo um do outro.

Entrar

CSS Alinhar elementos de acordo ás posições

Posts recomendados

Joel Martins

DiF

Joel Martins

DiF

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos