ayuda en posisionamiento de table

geshiro · 20 Junio 2015, 01:19 AM

quien me ayuda a posicionar mi tabla un poco mas hacia arriba por el boton daftar

Código (html4strict) [Seleccionar]


 <!DOCTYPE HTML>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Admin</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/login.css">
</head>
<body>
 <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Daycare</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user">Profile</span><span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#"><span class="glyphicon glyphicon-cog"></span>Settings</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-edit"></span>Edit</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-repeat"></span>Change your password</a></li>
            <li class="divider"></li>
            <li><a href="#"><span class="glyphicon glyphicon-off">Sign out</span></a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-flag">Reports</span><span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Top seller list</a></li>
            <li><a href="#">Top seller list</a></li>
          </ul>
        </li>
      </ul>
      <ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-home">Parents</span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-home">Category</span></a></li>
      <ul>
</nav>
     <div class="container">
    <div class="row">
        <div class="col-md-3">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>Home</a></li>
                <li><a href="#">Presentation</a></li>
                 <li><a href="#">aaa</a></li>
                  <li><a href="#">Home</a></li>
                   <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                     <li><a href="#">Users</a></li>
            </ul>
        </div>
        <div class="col-md-9 well">
           <div>
              <form  method="POST" class="navbar-form navbar-left" action="add_kids.php">
                   <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-plus"></span>Add kids</button>
                   <input type="text" class="form-control" placeholder="search">

                <br/>

                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Add kids</h4>
                         </div>
                         <div class="modal-body">
                        <form method="POST" action="add_kids.php" >
                        <div class="form-group">
                          <label for="baby-name">Baby name</label>
                          <input type="text" class="form-control" name="bby-name">
                        </div>
                       <div class="form-group">
                          <label for="Gender">Gender</label>
                          <select class="form-control" name="Gender">
                              <option>Select an option</option>
                              <option id="F">Female</option>
                              <option id="M">Male</option>
                          </select>
                        </div>
                        <div class="form-group">
                          <label for="phone">Phone</label>
                          <input type="text" class="form-control" name="phone">
                        </div>
                        <div class="form-group">
                          <label>Parent's name</label>
                          <input type="text" class="form-control"  name="parents_name">
                        </div>
                      </form>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" name="submit" class="btn btn-success">Submit</button>
                         </div>
                  </div>        
           </div>
           </div>
          </form>
        </div>
    </div>
</div>
     <div class="container" id="name">
        <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#daftar" role="tab" data-toggle="tab">Daftar</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content" id="table2">
          <div class="table-responsive" >
          </br>
            <table class="table table-hover">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Age</th>
                    <th>Phone</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>0998877</td>
                    <td>  </td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                      <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-edit"></span>edit</button>
                      <button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-trash"></span>Delete</button>
                    </td>
                  </tr>
                  <tr>
                    <td>0998877</td>
                    <td>aaaaaa</td>
                    <td>male</td>
                    <td>19</td>
                    <td>65746844</td>
                    <td>
                      <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-edit"></span>edit</button>
                      <button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-trash"></span>Delete</button>
                    </td>
                  </tr>
                  <tr>
                    <td>0998877</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                      <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-edit"></span>edit</button>
                      <button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-trash"></span>Delete</button>
                    </td>
                  </tr>
                  <tr>
                    <td>0998877</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                      <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-edit"></span>edit</button>
                      <button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-trash"></span>Delete</button>
                    </td>
                  </tr>
                  <tr>
                    <td>0998877</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                      <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-edit"></span>edit</button>
                      <button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-trash"></span>Delete</button>
                    </td>
                  </tr>
                </tbody>
            </table>
        </div>
      </div>
      <ul class="pagination">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
     <script src="js/jquery.js"></script>
     <script src="js/bootstrap.js"></script>
     <script src="js/elements.js"></script>
</body>
</html>

Código (css) [Seleccionar]


*
{
  /*#5cb85c*/
 margin: 0%;
 padding: 0%;
}

html,body
{
 
}
nav
{
 display:block;
}

.navbar-default
{
 background-color: #5cb85c;
 border-color:#e7e7e7;
}

.navbar-collapse
{
 border-color:red;
}
.navbar-default .navbar-brand
{
 color:white;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus 
{
  color: #3498db;
  background-color: transparent;
}

.navbar-default .navbar-nav > li > a {
  color: white;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #3498db;
  background-color: transparent;
}
.container {
  padding-right: -7%;
  padding-left: -7%;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 80%;
  }
}

@media (min-width: 2560px) {
  .container {
    width: 80%;
  }
}

@media (min-width: 1024px) {
  .container {
    width: 80%;
  }
}
  
.row {
  margin-right: 6%;
  margin-left: -10%;
}

@media (min-width: 992px) {
   .col-md-3
  {
    float: left;
  }

  .col-md-3
  {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-md-3 {
    width: 25%;
  }

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus{
  color: #fff;
  background-color: #5cb85c;
}

.form-control {
  display: block;
  width: 100%;
  height: 6%;
  padding: 4px 12px;
  font-size: 14px;
  margin-left: 10em;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.well {
  min-height: 5%;
  padding: 0.7%;
  margin-bottom: 5%;
}

.form-control
{
  display: flex;
  flex-direction:column-reverse;
}

div#name
{
  margin-top: -25%;
  padding-left: 7%;
}

Test Foro de elhacker.net SMF 2.1

ayuda en posisionamiento de table

geshiro