How do I center a page loaded by onclick into a div?

Asked

Viewed 35 times

-2

I have the following form I want to load into a div

@charset "UTF-8";

*{
  padding: 0;
  margin: 0;
}
.form {
  display: flex;
  width: 50%;
  margin-left: 350px;
}

.campo {
  width: 40%;
  float: left;
  margin: 10px;
}

fieldset {
  padding-left: 50px;
}

.campo input {
  margin: 10px 1%;
  width: 60%;
}

.campo select {
  margin: 10px 1%;
  width: 60%;
}

label {
  display: inline-block;
  width: 70px;
  font-size: 14px;
}

label:after {
    content: ':';
}

legend {
  text-align: center;
  font-weight: bold;
  font-size: 13pt;
}

input[type=text], input[type=number], input[type=date],
input[type=email], input[type=password], select {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input:hover {
  background-color: #D3D3D3;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  margin-right: 15px;
  margin-top: 10px;
}

input[type=submit]:hover {
  background-color: #008000;
}

input[type=reset] {
  background-color: #FF6347;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  margin-top: 10px;
}

input[type=reset]:hover {
  background-color: #FF0000;
}

input[type=checkbox] {
  margin: -60px;
}

span {
  padding: -5px;
  border:none;
}
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" type="text/css" href="css/formstyle.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<title></title>
</head>
<body>
	<form class="form" method="post" action="#">
		<div class="area">
			<fieldset>
				<legend>Cadastrar Computadores</legend>

				<div class="campo">
					<label for="nome">Nome</label>
						<input type="text" name="nome" id="nome" placeholder="Digite o nome" required>
				</div>

				<div class="campo">
					<label for="status">Status</label>
						<select name="status" id="status" required>
							<option value=""></option>
							<option value="#">Habilitado</option>
							<option value="#">Desabilitado</option>
						</select>
				</div>

				<div class="campo">
					<label for="fab">Fabricante</label>
						<input type="text" name="fab" id="fab" placeholder="Informe o fabricante">
				</div>

				<div class="campo">
					<label for="model">Modelo</label>
						<input type="text" name="model" id="model" placeholder="Informe o modelo" >
				</div>

				<div class="campo">
					<label for="pm">Placa-mãe</label>
						<input type="text" name="pm" id="pm" placeholder="Informe o modelo" >
				</div>

				<div class="campo">
					<label for="proc">Processador</label>
						<input type="text" name="proc" id="proc" placeholder="Informe o modelo" >
				</div>

				<div class="campo">
					<label for="ram">RAM</label>
						<input type="number" name="ram" id="ram" placeholder="Informe a qtd em GB" >
				</div>

				<div class="campo">
					<label for="hd">HD</label>
						<input type="number" name="hd" id="hd" placeholder="Informe a qtd em GB" >
				</div>

				<div class="campo">
					<label for="ssd">Possui SSD?</label>
					<span>Sim</span>
						<input type="checkbox" name="ssd" id="ssd" onchange="habilitar()">
				</div>

				<div class="campo">
					<label for="qtd">Quantidade</label>
						<input type="number" name="qtd" id="qtd" placeholder="Informe a qtd em GB" disabled>
				</div>

				<div class="campo">
					<label for="video">Placa de vídeo</label>
						<input type="text" name="video" id="video" placeholder="Informe o modelo" >
				</div>

				<div class="campo">
					<label for="fonte">Fonte de alimentação</label>
						<input type="text" name="fonte" id="fonte" placeholder="Informe o modelo" >
				</div>

				<div class="campo">
					<label for="leitor">Driver óptico</label>
						<input type="text" name="leitor" id="leitor" placeholder="Informe o modelo" >
				</div>

				<div class="campo">
					<label for="inventario">Nº de inventário</label>
						<input type="number" name="inventario" id="inventario" placeholder="Informe um número" >
				</div>

				<div class="campo">
					<label for="comentarios">Comentários</label>
						<textarea rows="8" cols="60" maxlength="500"></textarea>
				</div>

			</fieldset>

			<input type="submit" name="Enviar" value="Enviar">
			<input type="reset" name="Limpar" value="Limpar" style="margin-right: 15px;">
		</div>
	</form>
<body>

Here begins the menu I want to load the form inside so that it is centralized and without losing formatting

@charset "UTF-8";

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Arial', sans-serif;
}

.wrapper{
  display: flex;
  position: relative;
}

.wrapper .sidebar{
  height: 100%;
  background-color: #1D2731;
  position: fixed;
  border-right: 1px solid #0B3C5D;
}


.wrapper .main_content{
  width: 100%;
  margin-left: 250px;
  top: 0;
}

.wrapper .main_content .header{
  padding: 21px;
  background-color: #0B3C5D;
  color: #fff;
  position: fixed;
  width: 100%;

}
<div class="wrapper">
    <div class="sidebar">
      <div class="main_content">

        <div class="header">
          <a href="#">Sair</a>
        </div>
          <div id="conteudo">
            <!--conteudo-->
          </div> 
      </div>
    </div>
 </div>

I want to center this page inside the div id="content"

css css3

1 answer

0


I needed to make some changes to your css, there are some things to be adjusted, as I do not know if you will use this form formatting file on other pages, I took it for me to keep the structure.

  • I created a new style for ID conteudo

    #conteudo{
    background: #fff;
    position: relative;
    top: 60px;
    display: flex;
    justify-content: center;
    height: 100%;
}

  • To set the width of the page body, where the content will be, I used javascript to set this width, as the menu size is preset, recovered the full width of the page using screen.width and decreased 250 pixels(menu width). Ps: I did the same for the header.

    const conteudo = document.getElementById('conteudo');
const header = document.querySelector('.header');
conteudo.style.width = screen.width - 250;
header.style.width = screen.width - 250;
  • I changed some things, follow the link of the full functional example on jsfiddle.

Functional example: https://jsfiddle.net/snvca8w1/

  • Solved friend, thank you very much!!!

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.