How do I put the form in parallel to the paragraphs having bootstrap and own styles?

Question

How do I put the form in parallel to the paragraphs having bootstrap and own styles?

Navigation

#1 by (1 votes)

1

I still try to give functions to my website, which I am getting thanks to my colleagues (@Camilo Vasquez, @Alvaro Montoro, @Pepo Gonzalez) In this case, I try to put the form that is under the pad, to the right of the four paragraphs, parallel. Would that be possible in some way, put the form to the right of the paragraphs, sharing both the width of the page, leaving margins between them and sides? I leave the sample of my code. Thanks.

/* LA VERDAD ES QUE FUNCIONA CASI TODO GRACIAS A LOS RETOQUES DE Camilo Vasquez, Alvaro Montoro*/
html, body {
    height:100%;
    margin:0px;
    color:#444444;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    font:400 16px/1.8 sans-serif;
    }
    
    .nav-navbar-nav{
        font-size: 5;
    
    }
    .bgimg-1, .bgimg-2, .bgimg-3 {
    position:relative;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    }
    .bgimg-1 {
    background-image:url("../imagenes/bg_01.jpg");
    height:100%;
    }
    .bgimg-2 {
    background-image:url("../imagenes/bg_02.jpg");
    height:100%;
    }
    .bgimg-3 {
    background-image:url("../imagenes/bg_03.jpg");
    height:100%;
    }
    .caption {
    position:absolute;
    left:10%;
    top:48%;
    width:80%;
    margin:auto;
    color:#FFFFFF;
    font-size:24px;
    text-align:center;
    letter-spacing:10px;
    background-color:#444444;
    }
    h2 {
    text-transform:uppercase;
    font:20px sans-serif;
    letter-spacing:4px;
    color:#444444;
    }
    a {
    text-decoration:none;
    letter-spacing:3px;
    }
    .navbar-nav{
      margin-left: 5% !important;
    }
    
    #header{
      position: fixed;
      width: 100%;
      z-index: 1000;
      font-size: 6
    }
    
    .navbar{
      margin-bottom: 0px !important;
    }

    .navbar ul li a{
      font-size: 12px
    }
    
    
    /*OTRA LISTA DE ESTILOS*/
    body {
         min-width: 630px;
     }
     
     #container{
         margin-top: 51px;
         display: flex;
         flex-direction: row;
     }
     
     #container .column {
         position: relative;
     }
     
     #footer {
         clear: both;
     }
     
     /* IE hack */
     * html #left {
         left: 150px;
     }
     
     /*Haz que las columnas tengan la misma altura que las otras */
     #container {
         overflow: hidden;
     }
     
     /*Solución para el pie de página */
     * html body {
         overflow: hidden;
     }
     
     * html #footer-wrapper {
         float: left;
         position: relative;
         width: 100%;
         padding-bottom: 10010px;
         margin-bottom: -10000px;
         background: #fff;
     }
     
     /* Aesthetics */
     body {
         margin: 0;
         padding: 0;
         font-family:Sans-serif;
         line-height: 1.5em;
     }
     
     p {
         color: #555;
     }
     
     nav ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
     }
     
     nav ul a {
         color: darkgreen;
         text-decoration: none;
     }
     
     #header, #footer {
         font-size: large;
         background: #BCCE98;
     }
     
     #left {
         background: #DAE9BC;
     }
     
     #right {
         background: #F7FDEB;
     }
     
     #center {
         background: #fff;
     }
     
     #container .column {
         padding-top: 1em;
     }

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
     <link rel="icon" href="imagenes/icon.ico" />

     <!-- ESTOS ENLACES LES TENGO GRACIAS A Camilo Vasquez me sugirio para crear barra de navegacion-->
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>   
     <!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
     <title>Nueva</title>
     <link href="css/nueva.css" type="text/css" rel="stylesheet">
     <link href="css/todo.css" type="text/css" rel="stylesheet">


     <!-- AQUI TAMBIEN FORMO PARTE Camilo Vasquez AYUDANDO ME CON LOS BOTONES DE LA BARRA DE NAVEGACION-->
 </head>
 <body>
         <header id="header">
                 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                     <div class="container">
                         <!-- Logo and responsive toggle -->
                         <div class="navbar-header">
             
                             <a class="navbar-brand" href="#">
                                 <span class="glyphicon glyphicon-fire"></span> 
                                 Logo
                             </a>
                         </div>
                         <!-- Navbar links -->
                         <div class="collapse navbar-collapse" id="navbar">
                             <ul class="nav navbar-nav">
                                 <li class="active">
                                     <a href="#">PRINCIPAL</a>
                                 </li>
                                 <li>
                                     <a href="#">SOGRE MI</a>
                                 </li>
                                 <li>
                                     <a href="#">SOBRE MI</a>
                                 </li>
                                 <li class="dropdown">
                                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SOBRE MI <span class="caret"></span></a>
                                     <ul class="dropdown-menu" aria-labelledby="about-us">
                                         <li><a href="#">ESTUDIOS</a></li>
                                         <li><a href="#">PROYECTOS</a></li>
                                         <li><a href="#">CURRICULUM</a></li>
                                         <li><a href="#">CURRICULUM</a></li>
                                     </ul>
                                 </li>
                             </ul>
             
                             <!-- Search -->
                             <form class="navbar-form navbar-right" role="search">
                                 <div class="form-group">
                                     <input type="text" class="form-control">
                                 </div>
                                 <button type="submit" class="btn btn-default">Search</button>
                             </form>
             
                         </div>
                         <!-- /.navbar-collapse -->
                     </div>
                     <!-- /.container -->
                 </nav>
             </header>
             <div id="container">

                 </nav>
             
                 <main id="center" class="column col-md-8">
                     <article>
                     
                         <h1>BIENVENIDOS A MI SITIO WEB...</h1>
                         <p>Hola, me llamo Miguel y os voy a presentar mi sitio web, el cual estoy creando mientras realizo un curso de actívate. 
                          En principio esta creado para mostrar mi perfil, experiencia laboral, formación académica y todos los conocimientos que 
                          vaya adquiriendo en el curso. </p>
                                 
                         
                         <P></P>
                         <h2>CURRICULUM</h2>
                         <p>Aquí encontrareis los <a href="curriculum-1.html">trabajos </a>por los que me he movido, siendo el transporte por carretera lo que mas he desempeñado estos 
                                 últimos años. </p>
                         <h2></h2>
                         <h2>ESPEDIENTE ACADEMICO</h2>
                         <p>Mis estudios no son muchos, deje pronto la escuela para trabajar. Pero en los últimos años he retomado el tema académico,
                                 formandome en el tema de la programación y aunque llevo poco tiempo ya he creado alguna <a href="proyectos-4.html">humilde aplicacion.</a></p>
                         
                         <h2>EXPERIENCIA</h2>
             
                         <p>Como ya he dicho, mi carrera de desarrollador no a echo mas que empezar, y son pocos y pequeños los <a href="proyectos-4.html">proyectos </a>que he 
                             creado,   pero estoy dedicandome plenamente en sacar una aplicación que espero tenga una buena aceptación 
                         </p>
                         <h2></h2>
                         <h2></h2>
                 
             

                     
                     </article>                              
                 </main>
             
            
             </div>

             <P>#######################################################################################<br>
            @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</P>
             <main>
                <div class="innertube">
                    
                    
                    
                    
                    <h1>CONSULTAS</h1>
                    
                    <form action="" method="get">
                    <p>
                    <label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre" maxlength="50">
                    </p>
                    
                    <p>
                    <label for="apellidos">Apellidos:</label> <input type="text" name="apellidos" id="apellidos" maxlength="50">
                    </p>

                    
                    <p>
                    <label for="correo">Correo:</label> <input type="text" name="correo" id="correo" maxlength="100">
                    </p>
                    
                    
                    <p>
                    <label for="poblacion">Población:</label>
                    <select name="poblacion" id="poblacion">
                    <option>Alicante</option>
                    <option>Avila</option>
                    <option>La Parra</option>
                    <option>Madrid</option>
                    <option>Sevilla</option>
                    <option>Valencia</option>
                    </select>
                    </p>
                    
                    <p><label for="descripcion">Descripción:</label>
                    <textarea name="descripcion" id="descripcion" rows="6" cols="60"></textarea>
                    </p>
                    <p>
                    <input type="checkbox" name="info" id="info" checked="checked"> <label for="info">Deseo recibir información sobre novedades y ofertas</label>
                    </p>
                    <p>
                    <input type="checkbox" name="condiciones" id="condiciones"> <label for="condiciones"> Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos</label>
                    </p>
                    
                    <p>
                    <input type="submit" value="Enviar">
                    </p>
                    </form>
                    
                    
                    <!--<p><script>generateText(300)</script></p>-->
                    
                </div>
            </main>
             
         <div id="footer-wrapper">
                 <footer id="footer"><p>Footer...</p></footer>
             </div>
 </body>
 </html>

html css bootstrap formularios

asked by Miguel Espeso 18.11.2017 в 00:42

source

1 answer

How to show a start and end range grouped by states in MySql? Get the records that have been updated

score 1 · Accepted Answer

Code problems / recommendations:

You have an% orphan% co_of which can cause you problems. Delete it.
You have more than one </nav> . Although this is technically not a problem, it would be advisable to leave it in one for this case.
Columns ( <main> ) should be within a col-*-* to fit better (this is due to how they are defined and their margins). You should familiarize yourself with the grid system of Bootstrap. Create a .row that wraps the <div class="row"> of paragraphs.
As the paragraphs are within a <main> that occupies 8 columns (for the class <main> ), move the col-md-8 of the form to just after the <main> of the paragraphs and make it occupy 4 columns by adding the class <main> .

And that's it, Bootstrap will take care of putting it automatically on the right with the correct format. With those changes, the code looks like this:

/* LA VERDAD ES QUE FUNCIONA CASI TODO GRACIAS A LOS RETOQUES DE Camilo Vasquez, Alvaro Montoro*/

html,
body {
  height: 100%;
  margin: 0px;
  color: #444444;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font: 400 16px/1.8 sans-serif;
}

.nav-navbar-nav {
  font-size: 5;
}

.bgimg-1,
.bgimg-2,
.bgimg-3 {
  position: relative;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.bgimg-1 {
  background-image: url("../imagenes/bg_01.jpg");
  height: 100%;
}

.bgimg-2 {
  background-image: url("../imagenes/bg_02.jpg");
  height: 100%;
}

.bgimg-3 {
  background-image: url("../imagenes/bg_03.jpg");
  height: 100%;
}

.caption {
  position: absolute;
  left: 10%;
  top: 48%;
  width: 80%;
  margin: auto;
  color: #FFFFFF;
  font-size: 24px;
  text-align: center;
  letter-spacing: 10px;
  background-color: #444444;
}

h2 {
  text-transform: uppercase;
  font: 20px sans-serif;
  letter-spacing: 4px;
  color: #444444;
}

a {
  text-decoration: none;
  letter-spacing: 3px;
}

.navbar-nav {
  margin-left: 5% !important;
}

#header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  font-size: 6
}

.navbar {
  margin-bottom: 0px !important;
}

.navbar ul li a {
  font-size: 12px
}


/*OTRA LISTA DE ESTILOS*/

body {
  min-width: 630px;
}

#container {
  margin-top: 51px;
  display: flex;
  flex-direction: row;
}

#container .column {
  position: relative;
}

#footer {
  clear: both;
}


/* IE hack */

* html #left {
  left: 150px;
}


/*Haz que las columnas tengan la misma altura que las otras */

#container {
  overflow: hidden;
}


/*Solución para el pie de página */

* html body {
  overflow: hidden;
}

* html #footer-wrapper {
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  background: #fff;
}


/* Aesthetics */

body {
  margin: 0;
  padding: 0;
  font-family: Sans-serif;
  line-height: 1.5em;
}

p {
  color: #555;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul a {
  color: darkgreen;
  text-decoration: none;
}

#header,
#footer {
  font-size: large;
  background: #BCCE98;
}

#left {
  background: #DAE9BC;
}

#right {
  background: #F7FDEB;
}

#center {
  background: #fff;
}

#container .column {
  padding-top: 1em;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
  <link rel="icon" href="imagenes/icon.ico" />

  <!-- ESTOS ENLACES LES TENGO GRACIAS A Camilo Vasquez me sugirio para crear barra de navegacion-->
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
  <title>Nueva</title>
  <link href="css/nueva.css" type="text/css" rel="stylesheet">
  <link href="css/todo.css" type="text/css" rel="stylesheet">


  <!-- AQUI TAMBIEN FORMO PARTE Camilo Vasquez AYUDANDO ME CON LOS BOTONES DE LA BARRA DE NAVEGACION-->
</head>

<body>
  <header id="header">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <!-- Logo and responsive toggle -->
        <div class="navbar-header">

          <a class="navbar-brand" href="#">
            <span class="glyphicon glyphicon-fire"></span> Logo
          </a>
        </div>
        <!-- Navbar links -->
        <div class="collapse navbar-collapse" id="navbar">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#">PRINCIPAL</a>
            </li>
            <li>
              <a href="#">SOGRE MI</a>
            </li>
            <li>
              <a href="#">SOBRE MI</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SOBRE MI <span class="caret"></span></a>
              <ul class="dropdown-menu" aria-labelledby="about-us">
                <li><a href="#">ESTUDIOS</a></li>
                <li><a href="#">PROYECTOS</a></li>
                <li><a href="#">CURRICULUM</a></li>
                <li><a href="#">CURRICULUM</a></li>
              </ul>
            </li>
          </ul>

          <!-- Search -->
          <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
              <input type="text" class="form-control">
            </div>
            <button type="submit" class="btn btn-default">Search</button>
          </form>

        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container -->
    </nav>
  </header>
  <div id="container">

    <div class="row">
      <main id="center" class="column col-md-8">
        <article>

          <h1>BIENVENIDOS A MI SITIO WEB...</h1>
          <p>Hola, me llamo Miguel y os voy a presentar mi sitio web, el cual estoy creando mientras realizo un curso de actívate. En principio esta creado para mostrar mi perfil, experiencia laboral, formación académica y todos los conocimientos que vaya
            adquiriendo en el curso. </p>


          <P></P>
          <h2>CURRICULUM</h2>
          <p>Aquí encontrareis los <a href="curriculum-1.html">trabajos </a>por los que me he movido, siendo el transporte por carretera lo que mas he desempeñado estos últimos años. </p>
          <h2></h2>
          <h2>ESPEDIENTE ACADEMICO</h2>
          <p>Mis estudios no son muchos, deje pronto la escuela para trabajar. Pero en los últimos años he retomado el tema académico, formandome en el tema de la programación y aunque llevo poco tiempo ya he creado alguna <a href="proyectos-4.html">humilde aplicacion.</a></p>

          <h2>EXPERIENCIA</h2>

          <p>Como ya he dicho, mi carrera de desarrollador no a echo mas que empezar, y son pocos y pequeños los <a href="proyectos-4.html">proyectos </a>que he creado, pero estoy dedicandome plenamente en sacar una aplicación que espero tenga una buena
            aceptación
          </p>
          <h2></h2>
          <h2></h2>




        </article>
      </main>


      <main class=" col-md-4">
        <div class="innertube">

          <h1>CONSULTAS</h1>

          <form action="" method="get">
            <p>
              <label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre" maxlength="50">
            </p>

            <p>
              <label for="apellidos">Apellidos:</label> <input type="text" name="apellidos" id="apellidos" maxlength="50">
            </p>


            <p>
              <label for="correo">Correo:</label> <input type="text" name="correo" id="correo" maxlength="100">
            </p>


            <p>
              <label for="poblacion">Población:</label>
              <select name="poblacion" id="poblacion">
                    <option>Alicante</option>
                    <option>Avila</option>
                    <option>La Parra</option>
                    <option>Madrid</option>
                    <option>Sevilla</option>
                    <option>Valencia</option>
                    </select>
            </p>

            <p><label for="descripcion">Descripción:</label>
              <textarea name="descripcion" id="descripcion" rows="6" cols="60"></textarea>
            </p>
            <p>
              <input type="checkbox" name="info" id="info" checked="checked"> <label for="info">Deseo recibir información sobre novedades y ofertas</label>
            </p>
            <p>
              <input type="checkbox" name="condiciones" id="condiciones"> <label for="condiciones"> Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos</label>
            </p>

            <p>
              <input type="submit" value="Enviar">
            </p>
          </form>


          <!--<p><script>generateText(300)</script></p>-->

        </div>
      </main>

    </div>

  </div>

  <P>#######################################################################################<br> @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
  </P>


  <div id="footer-wrapper">
    <footer id="footer">
      <p>Footer...</p>
    </footer>
  </div>
</body>

</html>