-1

Gostaria de saber como eu consigo alinhar as divs da imagem a abaixo:

inserir a descrição da imagem aqui

Eu tô usando bootstrap, e esse templete já veio com essa caixa de login ao lado direito. Eu estou com dificuldade em posicionar essa outra div com o texto ao lado do login. Segue o código:

   <div class="section-banner">
        <div class="text-banner">
            <div class="titulo">
                <h2>Plataforma Recode</h2>
                <h3>Reprogramar para Transformar </h3>
            </div>
        </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <div class="col-md-5" style="font-color: white;">

    </div>
    <div class="container" >
    <div class="row">
    <div class="col-md-12">
        <?php if($this->settings->info->install) : ?>
          <div class="row">
                        <div class="col-md-12">
                                <div class="alert alert-info"><b><span class="glyphicon glyphicon-warning-sign"></span></b> <a href="<?php echo site_url("install") ?>">Great job on uploading all the files and setting up the site correctly! Let's now create the Admin account and set the default settings. Click here! This message will disappear once you have run the install process.</a></div>
                        </div>
            </div>
        <?php endif; ?>

        <?php echo $content ?>

    </div>
    </div>
    </div>
    <br />
    </div>

arquivo css

.section-banner {
    background: url(../images/bg.png) no-repeat fixed;
    min-height: 480px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.text-banner {
    width: 500px;
    float: left;
    text-align: center;
    padding: 3% 4%;
    background-color: #7a5eaa;
}

.titulo h2 {
    font-size: 2.5em;
    color: #fff;
    font-weight: 700;
}

.titulo h3 {
    font-size: 1.5em;
    color: #fff;
    font-weight: 300;
}
0

3 Respostas 3

1

O problema é que vc está criando uma div "solta", usando float:left e fora do Grid do Bootstrap.

inserir a descrição da imagem aqui

Como vc quer uma div ao lado da outra basta colocar duas col-6 e não uma col-12 outra div "solta" com float.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
	<style>
			.section-banner {
				background: url(https://placecage.com/100/100) no-repeat fixed;
				min-height: 480px;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}
	
			.text-banner {
				width: 500px;
				float: left;
				text-align: center;
				padding: 3% 4%;
				background-color: #7a5eaa;
			}
	
			.titulo h2 {
				font-size: 2.5em;
				color: #fff;
				font-weight: 700;
			}
	
			.titulo h3 {
				font-size: 1.5em;
				color: #fff;
				font-weight: 300;
			}
		</style>
	</head>
	
	<body>
	
	
		<div class="section-banner">
	
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<!-- <?php if($this->settings->info->install) : ?> -->
						<div class="row mt-5">
							<div class="col-md-6">
								<div class="text-banner">
									<div class="titulo">
										<h2>Plataforma Recode</h2>
										<h3>Reprogramar para Transformar </h3>
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="alert alert-info"><b><span class="glyphicon glyphicon-warning-sign"></span></b>
									<a href="<?php echo site_url("install") ?>">Great job on uploading all the files and
										setting up the site correctly! Let's now create the Admin account and set the
										default settings. Click here! This message will disappear once you have run the
										install process.</a></div>
							</div>
						</div>
						<!-- <?php endif; ?>
			
					<?php echo $content ?>
			 -->
					</div>
				</div>
			</div>
			<br />
		</div>
	
	
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>

0

O ".text-banner" seria o que você quer alinhar a direita ? Se for, muda a propriedade de "float: left;" para "float: right;". Mas caso você queira deixar os dois alinhados de forma igual, você pode colocar as 2 DIVs em uma DIV pai e alinhar usando flex-box.

2
  • Sim, é o "text-banner" eu quero que fique a esquerda, e o login na direita mesmo. As duas divs estão numa div pai, a chamada "section-banner". Só que eu não estou conseguindo alinhar as duas 7/06/2019 às 18:32
  • Entendi, vou colocar outra resposta então.
    – leozera
    7/06/2019 às 18:33
0

Fiz um exemplo pra você usando o bootstrap mostrando como você pode deixar o seu template.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Teste alinhamento</title>
    <link rel="stylesheet" href="estilo.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="section-banner col-lg-12">

    <div class="container">
        <div class="row justify-content-end">
            <div class="text-banner col-lg-6">
                <div class="titulo">
                    <h2>Plataforma Recode</h2>
                    <h3>Reprogramar para Transformar </h3>
                </div>
            </div>
            <div class="w-100"></div>
            <div class="col-lg-6 login">
               LOGIN
            </div>
        </div>
    </div>
    <br />
</div>
</body>
</html>

CSS:

.section-banner {
    background: black;
    min-height: 480px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.text-banner {
    width: 500px;
    text-align: center;
    padding: 3% 4%;
    background-color: #7a5eaa;
}

.login{
    color: black;
    background: white;
    width: 500px;
    text-align: center;
}

.titulo h2 {
    font-size: 2.5em;
    color: #fff;
    font-weight: 700;
}

.titulo h3 {
    font-size: 1.5em;
    color: #fff;
    font-weight: 300;
}

Não mexi muito no tamanho dos elementos, apenas fiz em foco de alinhar os dois elementos a direita. Você pode usar a propriedade "justify-content-end" (o que é um termo bem parecida ao usado na flex-box), na DIV pai dos elementos, e entre os elementos filhos voce pode usar a propriedade "div class="w-100">

Link: https://getbootstrap.com.br/docs/4.1/getting-started/introduction/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .