I'm trying to add css to my website but It just load half of the page and stop. Anyone have an idea about this problem? Thank you so much.
It stopped loading right before the confirm textfield, the whole page was loaded correctly.
Sorry if the code is hard to read. I'm new to coding.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#taglib uri="/struts-tags" prefix="s"%>
<html>
<head>
<title>HVH's Store</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<style>
html, body {
position: relative;
}
ul.navbar-hungdtq > li {
font-weight: bold;
text-align: center;
}
.navbar{
margin-bottom: 0;
}
.navbar-footer > li {
font-weight: bold;
text-align: center;
}
.login-form{
padding: 10px;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
div.swiper-slide > img {
width: 600px;
height: 800px;
}
.container-hungdtq{
background: white;
padding: 1%;
width: 100%;
height: 10vh;
}
.main-hungdtq{
background: white;
padding-top: 1%;
}
.mega-menu {
position: absolute;
padding: 10px 0px;
width: 110vh;
height: 82vh;
border-radius: 0;
margin-top: 0px;
}
.mega-menu li {
display: inline-block;
float: left;
font-size: 0.94rem;
padding: 3px 0px;
}
.mega-menu li.mega-menu-column {
margin-right: 20px;
width: 20vh;
}
.mega-menu .nav-header {
padding: 0 !important;
margin-bottom: 10px;
display: inline-block;
width: 100%;
border-bottom: 1px solid #ddd;
}
li.mega-menu-column > ul > li > a{
color: #777;
}
li.mega-menu-column > ul {
display: inline-block;
}
li.mega-menu-column > ul > li {
font-size: 1.5vh;
}
.well{
padding: 8vh 0vh;
}
h4 {
font-size: 8vh;
}
/* Profile container */
.profile {
margin: 20px 0;
}
/* Profile sidebar */
.profile-sidebar {
padding: 20px 0 10px 0;
background: #fff;
}
.profile-userpic img {
float: none;
margin: 0 auto;
width: 50%;
height: 50%;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
}
.profile-usertitle {
text-align: center;
margin-top: 20px;
}
.profile-usertitle-name {
color: #5a7391;
font-size: 16px;
font-weight: 600;
margin-bottom: 7px;
}
.profile-usertitle-job {
text-transform: uppercase;
color: #5b9bd1;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
}
.profile-userbuttons {
text-align: center;
margin-top: 10px;
}
.profile-userbuttons .btn {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
padding: 6px 15px;
margin-right: 5px;
}
.profile-userbuttons .btn:last-child {
margin-right: 0px;
}
.profile-usermenu {
margin-top: 30px;
}
.profile-usermenu ul li {
border-bottom: 1px solid #f0f4f7;
}
.profile-usermenu ul li:last-child {
border-bottom: none;
}
.profile-usermenu ul li a {
color: #93a3b5;
font-size: 14px;
font-weight: 400;
}
.profile-usermenu ul li a i {
margin-right: 8px;
font-size: 14px;
}
.profile-usermenu ul li a:hover {
background-color: #fafcfd;
color: #5b9bd1;
}
.profile-usermenu ul li.active {
border-bottom: none;
}
.profile-usermenu ul li.active a {
color: #5b9bd1;
background-color: #f6f9fb;
border-left: 2px solid #5b9bd1;
margin-left: -2px;
}
/* Profile Content */
.profile-content {
padding: 20px;
background: #fff;
min-height: 460px;
}
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border:2px solid #03b1ce ;}
.tital{ font-size:16px; font-weight:500;}
.bot-border{ border-bottom:1px #f8f8f8 solid; margin:5px 0 5px 0}
</style>
<s:head/>
</head>
<body>
<!--Tool bar-->
<nav class="navbar navbar-default navbar-fixed-top main-hungdtq">
<div class="container-hungdtq">
<div class="col-md-1" >
<a class="navbar-brand" rel="home" href="#">
<img style="max-width: 100px; margin-top: -50px;" src="https://i.pinimg.com/736x/6f/55/e1/6f55e1ddd3d428846ab97062f9af3ad8--line-logo-design-logo-k.jpg">
</a>
</div>
<div class="col-md-1">
</div>
<div class="col-md-5">
<form action="SearchForBookAction">
<div class="input-group">
<input type="text" class="form-control" placeholder="Tìm kiếm" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<div class="col-md-1">
</div>
<s:set var="username" value="%{#session.USERNAME}"/>
<s:set var="fail" value="%{#session.failed}"></s:set>
<ul class="nav navbar-nav col-md-4">
<s:if test="%{#username == null || #username == ''}">
<li class="col-md-3"><span class="glyphicon glyphicon-user"></span> Đăng ký</li>
<!--Login-->
<li class="col-md-3">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span>Đăng nhập</a>
<div class="dropdown-menu login-form" style="padding: 15px; padding-bottom: 0px;">
<form action="login" class="form-inline">
<div class="form-group">
<label>Username: </label>
<input class="form-control" type="text" placeholder="Enter username" name="username">
</div>
<div>
<label>Password: </label>
<input class="form-control" type="password" placeholder="Enter password" name="password">
</div>
<input type="submit" value="Đăng nhập" class="btn btn-success" style="margin-top: 5px; margin-bottom: 5px; margin-left: 25%">
</form>
<script>
<s:if test="%{#fail != null}">
alert("Wrong username or password!");
</s:if>
</script>
</div>
</li>
<!--End of Login-->
</s:if>
<s:if test="%{#username != null || #username == ''}">
<li class="col-md-4"><span class="glyphicon glyphicon-log-in">Welcome, <s:property value="#username"/></span></li>
<li class="col-md-4"><span claRedirectToProfileActionss="glyphicon glyphicon-log-in"></span> Tài khoản của tôi</li>
<li class="col-md-2"><span class="glyphicon glyphicon-shopping-cart"></span></li>
</s:if>
</ul>
</div>
<!--Navigation bar-->
<nav class="navbar navbar-default">
<ul class="navbar-hungdtq nav navbar-nav row" style="width: 100%;">
<li class="col-md-1"></li>
<li class="col-md-2">SÁCH BÁN CHẠY</li>
<li class="col-md-2">KHUYẾN MÃI HOT</li>
<li class="dropdown col-md-2">
<a class="dropdown" data-toggle="dropdown" href="#">KHO SÁCH<span class="caret"></span></a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-column">
<ul>
<li class="nav-header">Khoa học kỹ thuật</li>
<li>Tin học</li>
<li>Y học</li>
<li>Điện - điện tử</li>
<li>Cơ khí</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Kinh tế</li>
<li>Quản trị - Lãnh đạo</li>
<li>Nhân vật - Bài học kinh doanh</li>
<li>Khởi nghiệp - Làm giàu</li>
<li>Marketing - Bán hàng</li>
<li>Tài chính - Ngân hàng</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Thiếu nhi</li>
<li>Truyện tranh</li>
<li>Truyện đọc</li>
<li>Tô màu - Luyện chữ</li>
<li>Kiến thức bách khoa</li>
<li>Manga</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Văn học trong nước</li>
<li>Phóng sự - Ký sự</li>
<li>Nhân vật văn học</li>
<li>Thơ ca</li>
<li>Tiểu thuyết lịch sử</li>
<li>Tiểu thuyết lãng mạng</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Văn học nước ngoài</li>
<li>Cổ tích - Thần thoại</li>
<li>Truyện lịch sử</li>
<li>Truyện ngắn</li>
<li>Truyện trinh thám</li>
<li>Vụ án</li>
</ul>
</li>
</ul>
</li>
<li class="col-md-2">SỰ KIỆN SÁCH</li>
<li class="col-md-2">KHO SÁCH CŨ</li>
</ul>
</nav>
<!--End of Navigation bar-->
</nav>
<!--End of Tool bar-->
<!--Body-->
<div style="padding-top: 180px ">
<div class="container">
<s:form cssClass="well form-horizontal" action="register" method="get" id="contact_form" theme="simple">
<center><h4>REGISTER</h4></center>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Tên của bạn:</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="name" placeholder="" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Username</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="username" placeholder="Tên tài khoản" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >Mật khẩu:</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="password" placeholder="" cssClass="form-control" type="password"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >Xác nhận:</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="confirm "placeholder=" mật khẩu của bạn" cssClass="form-control" type="password"/>
</div>
</div>
</div>
<!-- Pick -->
<div class="form-group">
<label class="col-md-4 control-label">Giới tính</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<s:combobox label="Hãy chọn giới tính của bạn" name="gender" cssClass="form-control selectpicker"
list="{'1':'Nam', '2':'Nu'}
"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<s:textfield name="email" placeholder="Địa chỉ E-Mail" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Địa chỉ</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="address" placeholder="Địa chỉ của bạn" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Số điện thoại</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<s:textfield name="phone" placeholder="(08)" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
<s:submit type="submit" cssClass="btn btn-warning" name="Đăng ký" /><span class="glyphicon glyphicon-send"></span>
</div>
</div>
</s:form>
</div>
</div>
<!--End of Body-->
<!--Footer-->
<footer class="footer">
<nav class="navbar navbar-default">
<ul class="navbar-footer nav navbar-nav row" style="width: 100%;">
<li class="col-md-1"></li>
<li class="col-md-2">VỀ CHÚNG TÔI</li>
<li class="col-md-2">LIÊN HỆ</li>
<li class="col-md-2">ĐỊA ĐIỂM</li>
<li class="col-md-2">ĐÓNG GÓP Ý KIẾN</li>
<li class="col-md-2">CHÍNH SÁCH</li>
</ul>
</nav>
</footer>
<!--End of Footer-->
</body>
This is the image of my website after being loaded
Related
I need to make panels/divs scrollable, but they have dynamic heights. So far, the only solutions I found are using arbitrary heights in various units, which I would like to avoid. I’m trying to go the Flex route but I’m missing something...
.app {
width: 100%;
height: 100vh;
background-color: #f4f3ef;
display: flex;
flex-direction: column;
border: 2px solid red;
.topbar {
border: 2px solid lightblue;
padding: 8px;
}
.container {
display: flex;
border: 2px dashed lightpink;
.panel {
border: 2px solid lightgreen;
background-color: #f4f3efbb;
padding: 8px;
flex: 1;
.tabs {
display: flex;
justify-content: center;
border-bottom: 1px solid lightgray;
padding-bottom: 8px;
& > button:not(:first-child) {
margin-left: 20px;
}
}
.input-container {
padding: 8px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid lightgray;
}
.scrollable {
overflow-y: auto;
p.message {
color: salmon;
font-weight: 500;
}
}
}
}
}
.note {
text-align: center;
}
<p class="note">The red border represents the viewport</note>
<div class="app">
<div class="topbar">Lorem ...</div>
<div class="container">
<div class="panel left-side">
<div class="tabs">
<button>Tab 1</button>
<button>Tab 2</button>
</div>
<div class="body">
<div class="input-container">
<input placeholder="Type something" />
<button>Send</button>
</div>
<divp class="scrollable">
<p class="message">This panel should be scrollable if it overflows</p>Lorem ...
Lorem ...
Lorem ...
</divp>
</div>
</div>
<div class="panel center-side">
<divp class="scrollable">
<p class="message">This panel should be scrollable if it overflows</p>Lorem ...
Lorem ...
</divp>
</div>
<div class="panel right-side">
<div class="tabs">
<button>Tab 1</button>
<button>Tab 2</button>
<button>Tab 3</button>
<button>Tab 4</button>
</div>
<div class="scrollable">
<p class="message">This panel should be scrollable if it overflows</p>Lorem...
</div>
</div>
</div>
</div>
Here’s a CodePen of a simplified version of my app: https://codepen.io/hubchau/pen/qBPqJRd
I set my content flexbox with min-height: 100%; and overflow: auto;:
https://codepen.io/logany-hi/pen/PoKLzWp?editors=1100
body {
overflow: hidden;
}
.body{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
}
/* SIDEBAR --------------------------------*/
.sidebar {
width: 340px;
color: #fff;
background: #021334;
}
.sidebar header {
text-align: center;
line-height: 50px;
border-bottom: 1px solid #fff;
background: #283562;
}
.sidebar ul {
list-style: none;
overflow: auto;
padding-left: 0;
height: calc(100vh - 50px);
margin-top: 2px;
}
.sidebar ul li.menuHeader {
padding: 15px;
color: rgba(255, 255, 255, 0.5);
border-top: 1px solid #021334;
border-bottom: 1px solid #021334;
}
.sidebar ul a {
position: relative;
display: block;
text-decoration: none;
padding: 15px 15px 17px 50px;
color: #fff;
border-bottom: 1px solid #283652;
}
.sidebar ul a:hover,
.sidebar ul a:active {
text-decoration: none;
background: #283652;
}
/* CONTENT ------------------------------------ */
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.breadcrumbs {
border-bottom: 1px solid #b6bcc6;
}
.breadcrumbs ul {
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumbs ul li {
line-height: 50px;
display: inline-block;
vertical-align: text-top;
}
.content {
flex: 1;
display: flex;
overflow: auto;
}
.box {
min-height: -webkit-min-content;
width:100%;
}
.page-content {
padding: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<main class="body">
<nav class="sidebar">
<header>
Ortund
</header>
<ul>
<li class="menuHeader">Basics</li>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About</li>
<li>Contact Us</li>
<li class="menuHeader">Admin</li>
<li>Manage KPAs</li>
</nav>
<div class="main">
<div class="page-header breadcrumbs">
<ul>
<li>Home</li>
<li>.::.</li>
<li>KPAs</li>
</ul>
</div>
<div class="content">
<div class="box">
<div class="page-content">
<div style="margin-top: 5px;">
<h3>Add KPAs</h3>
</div>
<div style="padding: 20px 0;">
<div class="card" style="width: 800px; margin-bottom: 50px;">
<div class="card-body">
<form id="createForm" method="post">
<div class="form-group row pb-2">
<label class="col-sm-4" for="KPA_Evaluation_Id">Evaluation</label>
<div class="col-sm-8">
<select class="form-control" id="KPA_Evaluation_Id" name="KPA.Evaluation.Id">
<option value="">No evaluation</option>
</select>
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Name">KPA 1</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="item_Name" name="item.Name" value="" />
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Description">Description</label>
<div class="col-sm-8">
<textarea class="form-control" id="item_Description" name="item.Description">
</textarea>
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Name">KPA 2</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="item_Name" name="item.Name" value="" />
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Description">Description</label>
<div class="col-sm-8">
<textarea class="form-control" id="item_Description" name="item.Description">
</textarea>
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Name">KPA 3</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="item_Name" name="item.Name" value="" />
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Description">Description</label>
<div class="col-sm-8">
<textarea class="form-control" id="item_Description" name="item.Description">
</textarea>
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Name">KPA 4</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="item_Name" name="item.Name" value="" />
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Description">Description</label>
<div class="col-sm-8">
<textarea class="form-control" id="item_Description" name="item.Description">
</textarea>
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Name">KPA 5</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="item_Name" name="item.Name" value="" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-4" for="item_Description">Description</label>
<div class="col-sm-8">
<textarea class="form-control" id="item_Description" name="item.Description">
</textarea>
</div>
</div>
<div class="fixed-bottom border-top p-3 bg-white" style="left: 340px;">
<button type="submit" class="btn btn-primary btn-sm ly-button text-white save">Create</button>
<a onclick="window.history.go(-1); return false;"
class="btn btn-outline-secondary btn-sm ly-button"
style="margin-left:10px; cursor:pointer;">Cancel</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
I am trying to build a static web page as a part of a bigger project (the project is in Laravel).
Everything seems to work fine except for the footer that is behaving unusually.
Despite being at the bottom of the HTML tree, it tends to occupy much more space, overlapping many of the elements above it.
I have already tried changing the div (footer) to the 'footer' element and then to a 'section' element but to no avail.
My HTML file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Medical Insurance</title>
<link rel="stylesheet" type="text/css" href="{{ asset('web/css/medicalInsuranceStyles.css') }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<!-- header -->
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-offset-1 col-md-3">
<a href="https://www.letsmd.com/">
<img id='main-logo' src="<?php echo e(asset('/web/images/logo-without-Tagline.svg')); ?>">
</a>
</div>
</div>
<!-- banner -->
<div id='banner-container'>
<div id="transparent-div"></div>
<div id='banner-text-div'>
<h1>Smart Health Insurance Cover</h1>
<h2>Starting from ₹5/day</h2>
</div>
</div>
<!-- content part one -->
<div>
<div class='col-md-12 col-sm-12 col-xs-12' id="content-div-one">
<h2>Same premium, <span id='content-div-one-span'>2x</span> the value</h2>
<button class="btn btn-default">Apply Now</button>
</div>
</div>
<!-- content part two -->
<div>
<div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12' id="content-div-two">
<h2><span>CARE COVER</span> PLAN</h2>
<p>Ensures affordable, comprehensive cover</p>
<ul>
<li>Coverage for family</li>
<li>Covers everything under a standard health policy</li>
<li>Sum Insured options upto 5lacs with deductibles</li>
<li>Sum Insured on family floater basis</li>
<li>Hospitalisation expenses + pre - post hospitalisation covered</li>
<li>All room/ICU/nursing/medicine/surgery etc charges covered</li>
<li>Day care procedures covered</li>
<li>Coverage available at all leading hospitals across the country</li>
<li>Deductible 50,000/100,000 options available. Deductible finances at 0% EMI</li>
<li>Tax benifits under section 80D</li>
</ul>
</div>
</div>
<!-- form -->
<div>
<div class='col-md-12 col-sm-12 col-xs-12' id="form-div">
<h2><span>GET</span> QUOTE</h2>
<form action="" method="POST">
<div id="form">
<section id="form-section-one">
<p>Enter Your Name</p>
<input type="text" name="name">
<p>Your Mobile No.</p>
<input type="number" name="number">
<p>Email-Id</p>
<input type="email" name="email">
</section>
<section id="form-section-two">
<p>Gender</p>
<input type="radio" name="gender" value='female'><span>Female</span>
<input type="radio" name="gender" value='male'><span>Male</span>
<input type="radio" name="gender" value='others'><span>Others</span>
<p>Source of Income</p>
<select name="income-source" id="">
<option value="" selected disabled>-- Select One --</option>
<option value="">alpha</option>
<option value="">beta</option>
<option value="">gamma</option>
</select>
<p>Annual Income/Salary</p>
<input type="number" name="salary">
</section>
<section id="form-section-three">
<p>Our team will get in touch with you for further processing</p>
<p>Please select the number of family members you want to get insured with you</p>
<select name="family-memers" id="">
<option value="" selected disabled>-- Select One --</option>
<option value="">alpha</option>
<option value="">beta</option>
<option value="">gamma</option>
</select>
<p id='greeting-text'>Thank You</p>
</section>
</div>
<button class="btn btn-default" id='form-btn'>Next</button>
</form>
</div>
</div>
<!-- video -->
<!-- <div>
<div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12' id="video-div">
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div> -->
<!-- media mentions -->
<div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12' id="media-mentions-div">
<h2><span>MEDIA</span> MENTIONS</h2>
<div class="row">
<div class="col-md-offset-2 col-md-2 col-sm-offset-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/2017.10.06_09-23-18bhaskar.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" class="img-responsive"src="<?php echo e(asset('/web/loancard/Media/vccircle.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/TheHindu-Logo.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/Zee-Business-CS6-1110x550.png')); ?>">
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-2 col-sm-offset-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/dribbble_001_2x.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/the-economic-times-logo-png-1.png')); ?>" >
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/yahoo-logo-png-transparent-background-768x256.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/yourstory.png')); ?>">
</div>
</div>
</div>
<!-- footer -->
<div class="row" id='footer'>
<div class="col-md-5 col-sm-5 col-xs-5 pull-left">
<p>Copyright © {{ date('Y') }} LetsMD. All rights reserved </p>
</div>
<div class="col-md-offset-1 col-md-6 col-sm-offset-1 col-sm-6 col-xs-6 pull-right">
<p>
Get social with us
<a href="https://www.facebook.com/LetsMDMedbay/" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
<a href="https://www.youtube.com/channel/UC4urUJpHcA9LpeRQ1O2hdjw" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube-play fa-stack-1x fa-inverse"></i>
</span>
</a>
<a href="https://in.linkedin.com/company/letsmd" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
</p>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="{{ asset('web/js/medicalInsuranceScript.js') }}"></script>
</html>
My CSS file :
#main-logo {
width: 50%;
margin-top: 5%;
}
#transparent-div {
width: 70%;
margin: 0 auto;
background: black;
opacity: 0.7;
color: white;
padding: 10px 50px;
min-height: 200px;
}
#content-div-one {
color: #E97C2B;
background: #f1efef;
text-align: center;
min-height: 300px;
}
#content-div-one button {
color: white;
background-image: linear-gradient(to right, #105e7b , #44b649);
box-shadow: 3px 3px 6px black;
border: none;
font-size: 170%;
font-weight: bold;
padding: 10px 20px;
}
#content-div-one button:hover {
font-size: 175%;
transition: all 0.2s;
box-shadow: 6px 6px 6px black;
}
#content-div-one button:focus {
outline:0;
}
.container-fluid {
margin: 0 !important;
padding: 0 !important;
}
#banner-container {
background-image: url('/images/family.jpg');
background-size: cover;
min-height: 500px !important;
padding-top: 20%;
position: relative;
}
#banner-text-div {
color: white;
margin: 0 auto;
width: 70% !important;
text-align: center;
position: absolute;
left: 15%;
bottom: 14%;
}
#banner-text-div h1 {
font-size: 400%;
font-weight: bolder;
font-style: italic;
}
#banner-text-div h2 {
font-size: 340%
}
#content-div-one h2 {
font-size: 300%;
font-weight: bold;
margin-top: 5%;
}
#content-div-one-span {
font-size: 300%;
}
#content-div-two h2 {
text-align: center;
color: #59A553;
margin-top: 8%;
}
#content-div-two p {
text-align: center;
color: #306577;
font-size: 150%;
/*margin-bottom: 6%;*/
}
#content-div-two h2 span {
font-weight: bolder;
}
#content-div-two ul {
color: #306577;
font-size: 150%;
margin: 5% 10%;
line-height: 200%;
}
#form-div {
background: #f1efef;
}
#form-div h2, #media-mentions-div h2 {
text-align: center;
color: #59A553;
margin-top: 10%;
margin-bottom: 5%;
}
#form-div h2 span, #media-mentions-div h2 span {
font-weight: bolder;
}
#form {
background: white;
padding: 5%;
box-shadow: 1px 1px 10px black;
width: 50% !important;
margin: 0 auto;
}
#form section p {
font-size: 150%;
color: #306577;
margin-top: 10%;
}
#form section select, #form section input[type='text'], #form section input[type='number'], #form section input[type='email'] {
width: 100%;
border: 2px solid #306577;
background: #f1efef;
font-size: 175%;
margin-bottom: 5%
}
#form section select {
height: 45px !important;
}
#form-btn {
width: 50%;
margin: 5% 25%;
text-align: center;
color: white;
background-image: linear-gradient(to right, #105e7b , #44b649);
box-shadow: 3px 3px 6px black;
border: none;
font-size: 170% !important;
font-weight: bold;
padding: 10px 20px;
margin-bottom: 10%;
}
#form-btn:hover {
font-size: 175%;
transition: all 0.2s;
box-shadow: 6px 6px 6px black;
}
#form section input[type='radio'] {
margin: 0px 10px;
}
#form-section-two span {
margin-right: 10%;
font-size: 120%;
}
#form-section-three p:first-child {
color: #E97C2B;
}
#greeting-text {
font-style: italic;
text-align: center;
font-size: 200% !important;
}
#media-mentions-div {
margin-bottom: 8%;
}
#footer {
background: grey;
color: white;
}
My JS file :
var sectionNumber = 2;
function toggleForm() {
if (sectionNumber === 0) {
$('#form-section-one').css('display','block');
$('#form-section-two').css('display','none');
$('#form-section-three').css('display','none');
}
else if (sectionNumber === 1) {
$('#form-section-one').css('display','none');
$('#form-section-two').css('display','block');
$('#form-section-three').css('display','none');
}
else if (sectionNumber === 2) {
$('#form-section-one').css('display','none');
$('#form-section-two').css('display','none');
$('#form-section-three').css('display','block');
}
else {
}
}
toggleForm();
What I expect (as stated) is that the footer should come at the bottom of the page and not overlap the elements above it.
What I expect :
What I'm getting :
Thank You
Add a wrapper row for the content above footer section
Check this fiddle
<div class="row">
<div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12'
id="media-mentions-div"></div>
</div>
Please excuse me for butchering all of the terms here, but I am going to try to get across what I hope to accomplish. Right now I have managed to create a background image that scales to the window size and a navigation bar. I would like to start adding some bootstrap grid items on top of all this, but also under the navigation bar. Here is my 3-year-old depiction of what I am trying to make:
As of right now, I have called the background image class and then the navigation class. I am now trying to add a container so that I can use a bootstrap grid of some sort to add the four buttons and a panel.
The issues I am running into are that it seems blank rows will 0 in height and not create the buffer from the top. Another issue i have is the layering. My bootstrap grid items appear behind my background.
Can someone please point me in the right direction for layout? Am I doing this all wrong and should be using something else entirely? I am really trying to keep all of this to a single index.html file and avoid importing unneeded assets or running a bunch of scripts.
Here is the code I am working with right now:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: .80;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("img/home_bg.jpg");
height: 100%;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #fff;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.8;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
.dropdown-menu form div {
padding: 0px 20px;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}
</style>
</head>
<body>
<div class="bgimg-1"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="myhomepage">title</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<?php if (isset($_SESSION['username']) && !empty($_SESSION['username'])): ?>
<li class="dropdown">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">WELCOME, <?php echo $_SESSION['username'] ?><span class="caret"></span></a>
<ul class="dropdown-menu">
<li>LOGOUT</li>
</ul>
</li>
</li>
<?php else: ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">REGISTER<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="reg_username" id="reg_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="email" name="reg_email" id="reg_email" class="form-control" placeholder=" Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="reg_password_1" id="reg_password_1" class="form-control" placeholder=" Password">
</div>
<div class="form-group">
<input type="password" name="reg_password_2" id="reg_password_2" class="form-control" placeholder=" Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="register-submit" id="register-submit" class="form-control btn btn-info" value=" Register Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LOGIN<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="log_username" id="log_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="password" name="log_password" id="log_password" class="form-control" placeholder=" Password">
</div>
<!--
<div class="form-group">
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
-->
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="login-submit" id="login-submit" class="form-control btn btn-info" value=" Login Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-2" style="background-color:yellow;">test1</div>
<div class="col-sm-2" style="background-color:yellow;">test2</div>
<div class="col-sm-2" style="background-color:yellow;">test3</div>
<div class="col-sm-2" style="background-color:yellow;">test4</div>
<div class="col-sm-2"></div>
</div>
</div>
</body>
</html>
I appreciate any and all help. Thank you.
Okay, after messing around with this a bit I figured out that you can just stack containers and then make the highest level container have an image in the style section. I am not sure if this is the proper approach, but it seems to be putting the bootstrap containers on top of the background. The only issues I see are the lack of padding at the moment and now my navigation bar dropdowns now display behind the container buttons. That being said, I wanted to at least get this up here in case anyone can fill in the blanks.
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #fff;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.8;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
.dropdown-menu form div {
padding: 0px 20px;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}
.button, .tablinks {
margin-bottom: 0;
background-color: #2d2d30;
color: #d5d5d5;
border: none;
outline:none;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.8;
}
.active, .button:hover, .tablinks:hover {
color: #fff;
background-color: #555 !important;
}
.container-bg {
position: relative;
opacity: .80;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("img/home_bg.jpg");
height: 100%;
}
</style>
</head>
<body>
<div class="container-bg">
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="myhomepage">title</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<?php if (isset($_SESSION['username']) && !empty($_SESSION['username'])): ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">WELCOME, <?php echo $_SESSION['username'] ?><span class="caret"></span></a>
<ul class="dropdown-menu">
<li>LOGOUT</li>
</ul>
</li>
<?php else: ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">REGISTER<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="reg_username" id="reg_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="email" name="reg_email" id="reg_email" class="form-control" placeholder=" Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="reg_password_1" id="reg_password_1" class="form-control" placeholder=" Password">
</div>
<div class="form-group">
<input type="password" name="reg_password_2" id="reg_password_2" class="form-control" placeholder=" Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="register-submit" id="register-submit" class="form-control btn btn-info" value=" Register Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LOGIN<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="log_username" id="log_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="password" name="log_password" id="log_password" class="form-control" placeholder=" Password">
</div>
<!--
<div class="form-group">
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
-->
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="login-submit" id="login-submit" class="form-control btn btn-info" value=" Login Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
</nav>
</div>
<!-- Tab links -->
<div class="tab" id="tab">
<button class="tablinks" onclick="openTab(event, 'tab1')" id="defaultOpen">tab1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">tab2</button>
<button class="tablinks" onclick="openTab(event, 'tab3')">tab3</button>
<button class="tablinks" onclick="openTab(event, 'tab4')">tab4</button>
</div>
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<!-- Tab content -->
<div id="tab1" class="tabcontent">
<h3>tab1</h3>
<p>list stuff for tab1</p>
</div>
<div id="tab2" class="tabcontent">
<h3>tab2</h3>
<p>list stuff for tab2</p>
</div>
<div id="tab3" class="tabcontent">
<h3>tab3</h3>
<p>list stuff for tab3</p>
</div>
<div id="tab4" class="tabcontent">
<h3>tab4</h3>
<p>list stuff for tab4</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
I couldn't find anything like this on internet so I'm asking you guys! The problem is that my icons overlap my collapsed navbar.
My code:
<div class="container-fluid">
<div class="row">
<div class="">
<div id="black">
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="img-responsive col-xs-4 col-sm-8 col-md-10 col-lg-12" href="#">
<img id="logo2" alt="Logo" class="" height="80%" width="73%" src="images/logo1.png">
</a>
</div>
<div class="container-fluid">
<div class="row">
<div class="">
<div id="black">
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="img-responsive col-xs-4 col-sm-8 col-md-10 col-lg-12" href="#">
<img id="logo2" alt="Logo" class="" height="80%" width="73%" src="images/logo1.png">
</a>
</div>
<!-- Navbar contentas -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="visible-lg" href="#">Pagrindinis</a></li>
<li><a class="visible-lg" href="#">Kontaktai</a></li>
<li><a class="visible-lg" href="#">Apie mus</a></li>
<li><a class="visible-lg" href="#">Paslaugos</a></li>
<li></li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li></li>
<li>Pagrindinis</li>
<li>Apie mus</li>
<li>Kontaktai</li>
<li>+370 67651008</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text" style="margin-left: 15px;" >Already have an account?</p></li>
<li class="dropdown">
<b>Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
<i class="fa fa-twitter"></i> Twitter
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Forget the password ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <b>Join Us</b>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div id="mint"></div>
<div class="" id="background1">
<div class="container-fluid">
<img class="img-responsive" id="logo1" src="images/logo1.png"/>
</div>
<div class="container-fluid">
<p id="p1" class="" >A great new free psd theme to showcase your<br>new application.</p>
</div>
<div id="sicons">
<img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4" src="images/icon1.png"/>
<img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4" style="margin-left: -15px; margin-right: -15px;" src="images/icon2.png"/>
<img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4" src="images/icon3.png"/>
</div>
</div>
CSS:
body {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
#black {
height: 48px;
background-color: #282828;
}
/*------------NAVBAR DALYKAI-------------------------*/
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
font-size:12px
}
#login-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
#login-dp .social-buttons{
margin:12px 0
}
#login-dp .social-buttons a{
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
.btn-fb{
color: #fff;
background-color:#3b5998;
}
.btn-fb:hover{
color: #fff;
background-color:#496ebc
}
.btn-tw{
color: #fff;
background-color:#55acee;
}
.btn-tw:hover{
color: #fff;
background-color:#59b5fa;
}
#media(max-width:768px){
#login-dp{
background-color: inherit;
color: #fff;
}
#login-dp .bottom{
background-color: inherit;
border-top:0 none;
}
}
/*-------------------------------------------------------------------------------------------------------------------------*/
#mint {
height: 10px;
background-color: #2ecc71;
}
#background1
{
height: 600px;
background-image: url("images/background1.jpg");
background-repeat: no-repeat;
background-size:100%;
}
.p {
font-family: Myriad Pro;
}
#logo1 {
width: 10%;
margin-left: 20%;
margin-top: 11%;
}
#logo2 {
margin-top: 5%;
}
#p1 {
font-family: helvica-thin;
margin-left: 20%;
margin-top: 2%;
color: white;
font-size: 1.5vw;
}
#sicons {
position: absolute;
margin-left: 20%;
background-color: grey;
}
#sicons a:hover {
color: green;
}
#white {
height: 245px;
}
#icons {
position: absolute;
}
#iframe {
/*margin-top: 55px;
margin-left: 350px;*/
border-radius: 10px;
overflow: hidden;
max-width: 560px;
max-height: 315px;
}
#button {
border-radius: 0px 10px 10px 0px;
height: 56px;
width: 141px;
background-color: #2ecc71;
border: 0;
box-shadow:none;
color: white;
font-size: 24px;
}
#p2 {
position: absolute;
text-align: center;
}
#grey {
height: 427px;
background-color: #e3e3e3;
}
#white1 {
height: 468px;
}
#grey1 {
min-height: 130px;
background-color: #e3e3e3;
}
From looking at your code sample, it appears the culprit is #sicons having a value of position: absolute;. Items positioned absolutely will always sit on top of relatively position items. Try assigning your navbar and #sicons containers with z-index values, making #sicons's value lower than your navbar.
For more information about how z-index works, how it interacts with positioned elements, and the stacking order, check out the answer on this Stack Overflow question: "Understanding z-index stacking order"
I am using django-allauth, bootstrap, font awesome and bootstrap-social for the social media login buttons in my login form. I can't figure out how to center the social buttons within my login-well below. It appears to be aligning to the right of the login well instead of centered. What should I be doing?
jsfiddle
html:
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="well login-well">
<div class="socialaccount_ballot col-md-11">
<ul class="socialaccount_providers">
<li>
<a title="Google" class="btn btn-block btn-social btn-md socialaccount_provider btn-google" href="/accounts/google/login/?process=+login+">
<i class="fa fa-google"></i>Log in with Google
</a>
</li>
<li>
<a title="Facebook" class="btn btn-block btn-social btn-md socialaccount_provider btn-facebook" href="/accounts/facebook/login/?process=+login+">
<i class="fa fa-facebook"></i>Log in with Facebook
</a>
</li>
<li>
<a title="Twitter" class="btn btn-block btn-social btn-md socialaccount_provider btn-twitter" href="/accounts/twitter/login/?process=+login+">
<i class="fa fa-twitter"></i>Log in with Twitter
</a>
</li>
</ul>
</div>
<div class="col-md-12">
<hr>
<form class="login" method="POST" action="/login/">
<div class="form-group"><label class="control-label" for="id_login">Username</label><input autofocus="autofocus" class="form-control" id="id_login" maxlength="30" name="login" placeholder="Username" required="required" title="" type="text" /></div>
<div class="form-group"><label class="control-label" for="id_password">Password</label><input class="form-control" id="id_password" name="password" placeholder="Password" required="required" title="" type="password" /></div>
<div class="form-group"><div class="checkbox"><label for="id_remember"><input class="" id="id_remember" name="remember" type="checkbox" /> Remember Me</label></div></div>
<div class="form-group pull-center">
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</div>
</form>
<hr>
</div>
<div class="form-group">
<small><a class="text-muted" href="/password_reset/">Forgot Password?</a></small>
<br>
<small><a class="text-muted" href="/signup/">Sign up</a></small>
</div>
</div>
</div>
</div>
</div>
css:
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
.socialaccount_providers li a.socialaccount_provider {
rem-border: 1px solid #ddd;
border-radius: 2px;
rem-box-shadow: 2px 2px 8px rgba(0,0,0,.7);
-padding: 10px;
margin-bottom: 6px;
display: block;
width: 100%;
overflow: hidden;
rem-font-size: 1.2em;
}
.socialaccount_providers li a.socialaccount_provider:hover {
text-decoration: none;
box-shadow: 1px 1px 2px rgba(0,0,0,.7);
}
.socialaccount_providers li a.socialaccount_provider.facebook {
background: #4B67A3;
color: #fff;
}
.socialaccount_providers li a.socialaccount_provider.facebook:before {
font-family: FontAwesome;
font-size: 1.9em;
content: "\f082";
display: inline-block;
padding-left: 8px;
padding-right: 8px;
}
What I want it to look like when social buttons are centered:
The ul.socialaccount_providers has a inexplicit padding-left = 40px;
Just throwing in .socialaccount_providers {padding-left:0;} fixes it.