Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Marcosvn

Colocar form do lado direito

Por , em Desenvolvimento frontend

Recommended Posts

Marcosvn    3

Marcosvn
Postado

galera, estou com uma dificuldade pra colocar uma formulário de cadastro do lado direito da section

a imagem aparece assim:

kRP9J3z.png

o código html:

<body>
    

	
	
	<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand logo" href="#">Logo  </a>
    </div>
  </div>
</nav>
    
	
	<div id="section1" class="container-fluid">
	
		<div class="texto"> <h1>Section 1</h1>
		<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
		<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
		</div>
		
  <div class="container">
        <div class="row centered-form">
        <div class="col-xs-12 col-sm-8 col-md-4 col-sm-offset-2 col-md-offset-4">
        	<div class="panel panel-default">
        		<div class="panel-heading">
			    		<h3 class="panel-title">Please sign up for Bootsnipp <small>It's free!</small></h3>
			 			</div>
			 			<div class="panel-body">
			    		<form role="form">
			    			<div class="row">
			    				<div class="col-xs-6 col-sm-6 col-md-6">
			    					<div class="form-group">
			                <input type="text" name="first_name" id="first_name" class="form-control input-sm" placeholder="First Name">
			    					</div>
			    				</div>
			    				<div class="col-xs-6 col-sm-6 col-md-6">
			    					<div class="form-group">
			    						<input type="text" name="last_name" id="last_name" class="form-control input-sm" placeholder="Last Name">
			    					</div>
			    				</div>
			    			</div>

			    			<div class="form-group">
			    				<input type="email" name="email" id="email" class="form-control input-sm" placeholder="Email Address">
			    			</div>

			    			<div class="row">
			    				<div class="col-xs-6 col-sm-6 col-md-6">
			    					<div class="form-group">
			    						<input type="password" name="password" id="password" class="form-control input-sm" placeholder="Password">
			    					</div>
			    				</div>
			    				<div class="col-xs-6 col-sm-6 col-md-6">
			    					<div class="form-group">
			    						<input type="password" name="password_confirmation" id="password_confirmation" class="form-control input-sm" placeholder="Confirm Password">
			    					</div>
			    				</div>
			    			</div>
			    			
			    			<input type="submit" value="Register" class="btn btn-info btn-block">
			    		
			    		</form>
			    	</div>
	    		</div>
    		</div>
    	</div>
    </div>

    </div>

e o css personalizado (uso bootstrap):

.logo {
	border: 2px solid black;
	padding: 10px;
		
}

#section1 {
	background-image: url(../img/bggrid.png), url(../img/bg.jpg);
	background-repeat: repeat, repeat-x;
	opacity: 0.7;
	margin-top: -20px;
	padding: 9%;
	
	
}

.texto {
	background-color: gray;
	
	
}

me parece que a classe container.fluid impede o form de ficar ao lado direito mas quando removo o background nao pega a tela inteira....

alguem pode dar uma força ae ?

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

kelvim    11

kelvim
Postado

Divida o layout em duas divs dentro do container, uma para a section e outra para o form

<div class="container">
 
<div class="col-xl-6">

   <div id="section1" class="container-fluid">
	<div class="texto"> <h1>Section 1</h1>
	   <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
	   <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
	</div>
    </div>
</div>
<div class="col-xl-6">
  //form
</div>

</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito