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"
Related
I am trying to position an image to the right of the content area as shown in this dribble shot.
https://dribbble.com/shots/15571736-Money-Transfer-Website
Here is what I have so far.
https://codepen.io/pinapelkod/pen/RwLJJNm
.content {
position: relative;
}
.bg-image {
position: relative;
top: 350px;
left: 450px;
height: 350px;
z-index: 2;
}
When I float the image or position using top and left properties, the layout gets distorted.
By updating the bg-image class style I got the following result. If there is a different problem, specify it more clearly.
body {
background-color: white;
color: #1d2331;
}
.bg-image {
float: right !important;
width: 100%;
position: relative;
height: auto;
margin-right: -40% !important;
}
a.nav-link,
a.navbar-brand {
color: #1d2331;
}
a i {
color: #c9327b;
}
form .btn {
background-color: #1d2331;
color: #f3f1fe;
}
.action-call {
min-height: 35vh;
}
.feature {
background-color: #f3f1fe;
min-height: 56vh;
}
.feature .icon-link {
text-decoration: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header>
<nav class="navbar navbar-expand-md mt-4">
<div class="container-fluid mx-5">
<a class="navbar-brand" href=""> <i class="bi bi-app-indicator me-2"></i> <strong>Fincy App</strong></a>
<div class="vr ms-0"></div>
<div class="dropdown">
<button class="btn dropdown-toggle" type=" button" id="personalbtn" data-bs-toggle="dropdown"
aria-expanded="false"><strong>Personal</strong></button>
</div>
<ul class="navbar-nav ms-auto">
<li class="nav-item me-4">
<a class="nav-link" href="#"><strong>Download</strong></a>
</li>
<li class="nav-item me-4"><a class="nav-link" href="#"> <strong>Plans</strong></a></li>
<li class="nav-item me-4"><a class="nav-link dropdown-toggle" href="#"> <strong>Product </strong></a>
</li>
</ul>
<form class="ms-5">
<button class="btn btn-outline-success px-5" type="submit">Login</button>
</form>
</div>
</nav>
</header>
<article class="content">
<img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
<section class="mx-5 action-call d-flex align-items-center ">
<div class="container-fluid">
<div class="row t-row">
<h1> <strong>Send money <br>abroad more faster</strong></h1>
<div class="sendnow"></div>
</div>
</div>
</section>
<section class="feature d-flex align-items-center">
<div class="container-fluid">
<div class="mx-5 row b-row">
<div class="d-flex justify-content-start">
<div class="col-3 me-3">
<i class="fs-2 bi bi-shield-shaded"></i>
<h5> <strong>Safety guarantee</strong></h5>
<p>We make sure your money will <br>be safe 100% guarantee</p>
<a href="#" class="icon-link"> <strong>Read more</strong><i class="bi bi-chevron-right text-primary"></i>
</a>
</div>
<div class="col-3 me-3">
<i class="fs-2 bi bi-credit-card-2-front-fill"></i>
<h5> <strong>Send money in minutes</strong></h5>
<p>Your money will be sent faster <br>than your blue wallet</p>
<a href="#" class="icon-link"> <strong>Send money now</strong><i
class="bi bi-chevron-right text-primary"></i> </a>
</div>
</div>
</div>
</div>
</section>
</article>
<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div>
I restructured the html and added a bootstrap display (d-flex) class as shown below.
Update HTML structure:
<div class="d-flex mt-5">
<div class="col-3 ">
.....
</div>
<div class="col-3">
.....
</div>
<div class="col-6 content">
<img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
</div>
</div>
The corresponding CSS:
.content {
position: relative;
}
.bg-image {
position: relative;
top: -310px;
left: 160px;
height: 500px;
}
Link to codepen:
https://codepen.io/pinapelkod/pen/RwLJJNm
I have a table but the top part of the table is hiding under the navbar like shown in the below picture so i had to use br to show it on the page.why it is happening? how should i make it visible without using br,margin and padding.i am trying to figure it out from past few hours. thanks in advance
.scroll {
overflow-y: auto !important;
height: calc(100vh - 54px);
}
.search-wrapper{
flex-grow: 1;
}
::-webkit-scrollbar {
width: 8px;
height: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background: #c2c9d2;
}
.btn-outline-secondary:hover{
background-color: white;
font-weight: 500;
border-bottom: 3px solid #23485B ;
}
.btn-outline-secondary{
color: #23485B;
border: thin;
}
.sidedivtext{
color: #23485B;
}
.alert-dark{
background-color: #F5F5F5;
}
.bg-light{
background-color: #F5F5F5;
}
.text{
color: #797979;
}
.tableicons{
margin-right:25px;
opacity:60% ;
}
tr:hover .tableicons{
opacity:100% ;
}
.tablename{
padding-right:10vw;
}
.leftalign .tableicons {
padding-left: 0;
}
body{
padding-top: 60px;
}
.btn-primary{
background-color: #002B42;
font-size: 12px;
border-radius: 4px;
padding:10px;
}
.btn-light{
background-color: transparent;
border: none;
color: black;
font-size: 13px;
outline: none;
padding:10px;
margin-left: 20px;
}
#media only screen and (max-width: 768px) {
body{
padding-top: 0!important;
}
.navbar{
position: relative;
}
.navbar-nav{
align-items: center;
margin: 15px 0;
}
.nav-item{
margin:5px 0;
}
.navpull{
margin-right: 10px;
}
}
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<button class="navbar-toggler mr-5" type="button" data-toggle="collapse" data-target="#my-navbar" aria-controls="my-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="my-navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<button type="button" class="btn btn-primary"><i class="fa fa-bars" aria-hidden="true"> SAVED LISTS</i></button>
</li>
<li class="nav-item navpull">
<button class="btn btn-light"> <i class="fa fa-filter" aria-hidden="true"> SAVED FILTER</i></button>
</li>
<li class="nav-item navpull">
<button class="btn btn-light"> <i class="fa fa-history" aria-hidden="true"> SEARCH HISTORY</i></button>
</li>
</ul>
</div>
<div class="my-2 my-md-0 search-wrapper">
<input class="form-control" name="search" [(ngModel)]="search" type="search" placeholder="Search" />
</div>
</nav>
<br><br><br>
<div class="container-fluid">
<section class="row">
<div class="col-md-9 col-12 overflow-auto scroll">
<table class="table table-hover">
<tr>
<th class="text">Date</th>
<th class="text">List Name</th>
<th class="text text-right">No. of Entities</th>
<th class="text">Actions</th>
<th class="text"></th>
</tr>
<tbody>
<tr *ngFor="let items of data | filter: search">
<td class="text-dark font-weight-bold">
<span *ngIf="items.date">{{items.date | date:'MMM dd' }}</span>
<span *ngIf="!items.date"><i class="fa fa-refresh"></i></span>
</td>
<td class=" font-weight-bold tablename {{items.color}}">{{ items.name }}</td>
<td class="text-dark font-weight-bold text-right">{{ items.entities }}</td>
<td class="leftalign">
<span *ngFor="let x of items.actions.split(',')">
<i class="{{x}} tableicons"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
Details
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3 col-12 overflow-auto scroll">
<div class="alert alert-dark"><span class="text">No description yet</span>
<span class="font-weight-bold sidedivtext">+Add Description</span>
</div>
<p *ngFor="let str of s" class="text-center text-primary">{{str}}</p>
</div>
</section>
</div>
stackblitz link
body{
padding-top:60px;
}
will do the thing
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
The navigation bar is at a certain distance away from the top, after scrolling past the navigation-bar, it sticks to the top but unfortunately it's width expands beyond the container(it's defined in). The navigation-bar should retain it's original width, so how do I resolve it? Here's my github link too :- https://github.com/Archiie/MyPortfolio
.affix {
top: 0px;
margin: 0px 20px;
}
.affix + .container {
padding: 5px;
}
h1, h4 {
text-shadow: 4px 5px 3px #A866B2; /*#DCD4F9, #F74554 moves to the right, moves down, thickness of text's shadow*/
}
.main-container {
margin: 40px 0px;
border-radius: 10px;
background-color: #4B004C ; /*#800000, #4B004C, #E6E6E6*/
}
#head_tag, #footer_tag {
font-family: Tangerine, Monospace;
color: white;
}
#head_tag {
font-size: 100px;
height: 300px;
}
#footer_tag {
font-size: 50px;
}
.image {
border-style: solid;
border-radius: 50%;
border-width: 1px;
border-color: #000;
height: 230px;
width: 240px;
}
.img-responsive {
margin: 20px auto;
}
.navbar {
margin: 0px 20px;
z-index: 1;
}
.info {
font-family: Monospace;
font-size: 20px;
background-color: #E6E6E6; /*#4B004C, #E6E6E6*/
border-radius: 10px;
margin: 20px 20px;
padding: 20px 20px;
}
.boxSpacing {
margin: 20px auto;
}
.pics {
height: 300px;
width: 300px;
}
#aboutMe, #portfolio, #contactMe {
font-family: Lobster, Monospace;
font-size: 35px;
color: #6E326F;
}
.centeringIcon {
display: block;
text-align:center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<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.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="10">
<div class="container main-container">
<div class="row">
<div class="col-md-8">
<h1 class="text-center" id="head_tag">Archita's Portfolio</h1>
</div>
<div class="col-md-4">
<img src="images/Archi.jpg" class="img-responsive image">
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="365">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar"> <!-- This navigation bar should not change it's width even after scrolling past it-->
<ul class="nav navbar-nav">
<li>About Me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info">
<h3 class="text-center" id="aboutMe">About Me</h3>
<p>I'm a new-bee in front-end technology. I used to work on ROR, R and Python but now I'm exploring HTML, CSS, Bootstrap, jQuery, JavaScript, AngularJS and ReactJS.</p>
<p>I've also worked on several <span style="color:#960099">android projects </span>as well. I've also worked on highcharts and D3.</p>
</div>
<div class="info">
<h3 class="text-center" id="portfolio">Portfolio</h3>
<div class="row">
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
</div>
</div>
<div class="info">
<h3 class="text-center" id="contactMe">Contact</h3>
<p><b>Here's my contact details:</b></p>
<ul>
<li>Name:- Archita Sundaray</li>
<li>Phone no.:- +91 89514 88208</li>
<li>email address:- archi.sundaray5#gmail.com</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h4 class="text-center" id="footer_tag">~ made by Archita Sundaray</h4>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-linkedin centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-github centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-twitter centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-bitbucket centeringIcon"></i>
</div>
</div>
</div>
</body>
</html>
Check Now its working, when it is sticky then it's position fixed so you have to give it width or set left and right position
.affix {
top: 0px;
margin: 0px 20px;
width:1100px;
}
#media (max-width: 1199px)
{
.affix {
width: 900px;
}
}
#media (max-width: 991px)
{
.affix {
width: 680px;
}
}
#media (max-width: 768px)
{
.affix {
left:15px;
right:15px;
width:auto;
}
}
.affix + .container {
padding: 0px;
}
h1, h4 {
text-shadow: 4px 5px 3px #A866B2; /*#DCD4F9, #F74554 moves to the right, moves down, thickness of text's shadow*/
}
.main-container {
margin: 40px 0px;
border-radius: 10px;
background-color: #4B004C ; /*#800000, #4B004C, #E6E6E6*/
}
#head_tag, #footer_tag {
font-family: Tangerine, Monospace;
color: white;
}
#head_tag {
font-size: 100px;
height: 300px;
}
#footer_tag {
font-size: 50px;
}
.image {
border-style: solid;
border-radius: 50%;
border-width: 1px;
border-color: #000;
height: 230px;
width: 240px;
}
.img-responsive {
margin: 20px auto;
}
.navbar {
margin: 0px 20px;
z-index: 1;
}
.info {
font-family: Monospace;
font-size: 20px;
background-color: #E6E6E6; /*#4B004C, #E6E6E6*/
border-radius: 10px;
margin: 20px 20px;
padding: 20px 20px;
}
.boxSpacing {
margin: 20px auto;
}
.pics {
height: 300px;
width: 300px;
}
#aboutMe, #portfolio, #contactMe {
font-family: Lobster, Monospace;
font-size: 35px;
color: #6E326F;
}
.centeringIcon {
display: block;
text-align:center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<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.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="10">
<div class="container main-container">
<div class="row">
<div class="col-md-8">
<h1 class="text-center" id="head_tag">Archita's Portfolio</h1>
</div>
<div class="col-md-4">
<img src="images/Archi.jpg" class="img-responsive image">
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="365">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar"> <!-- This navigation bar should not change it's width even after scrolling past it-->
<ul class="nav navbar-nav">
<li>About Me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info">
<h3 class="text-center" id="aboutMe">About Me</h3>
<p>I'm a new-bee in front-end technology. I used to work on ROR, R and Python but now I'm exploring HTML, CSS, Bootstrap, jQuery, JavaScript, AngularJS and ReactJS.</p>
<p>I've also worked on several <span style="color:#960099">android projects </span>as well. I've also worked on highcharts and D3.</p>
</div>
<div class="info">
<h3 class="text-center" id="portfolio">Portfolio</h3>
<div class="row">
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
</div>
</div>
<div class="info">
<h3 class="text-center" id="contactMe">Contact</h3>
<p><b>Here's my contact details:</b></p>
<ul>
<li>Name:- Archita Sundaray</li>
<li>Phone no.:- +91 89514 88208</li>
<li>email address:- archi.sundaray5#gmail.com</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h4 class="text-center" id="footer_tag">~ made by Archita Sundaray</h4>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-linkedin centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-github centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-twitter centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-bitbucket centeringIcon"></i>
</div>
</div>
</div>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
JSFIDDLE - https://jsfiddle.net/adtdjog2/
Note: I am very inexperienced in programming as you can tell by the simplistic website here.
I am trying to figure out why everything is flowing outside the container div, with the exception of the search function?
BTW I have been using Chrome to view and test all programming. I noticed that it looks different when I put it in the jsfiddle, so not sure what I am doing wrong here in terms of sizing and positioning all elements.
Below is the code
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 logo"><img src="img/logo.PNG"></div>
</div>
<div class="row" style="padding-bottom: 50px;">
<div class="col-md-2 menu">Dashboard</div>
<div class="col-md-2 menu">Invoicing</div>
<div class="col-md-2 menu">Scheduler</div>
<div class="col-md-2 menu">Employees</div>
<div class="col-md-2 menu">User Management</div>
<div class="col-md-2 menu">Customers</div>
</div>
<div class="row" style="padding-bottom: 50px;">
<div class="col-md-2 button">New Employee</div>
<div class="col-md-2 button">Employee Schedule</div>
<div class="col-md-6" style="text-align:right">
<form>
<input type="text" placeholder="Search Employees..." required class="searchbox">
<input type="button" value="Search" class="searchbutton">
</form>
</div>
</div>
<div class="row col-md-12">
<div class="resultbox row">
<div class="table">
<div class="col-md-2 table_cell">Name</div>
<div class="col-md-2 table_cell">Status</div>
<div class="col-md-1 table_cell">Phone</div>
<div class="col-md-4 table_cell">Email</div>
<div class="col-md-3 table_cell">Title</div>
<br><br>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.container
{
margin:auto auto;
width:975px;
}
.resultbox
{
width:975px;
height: 500px;
background: linear-gradient(rgba(212, 0, 0, 0), #795548);
/*line-height: 50px;*/
text-align:left;
border-radius: 5px;
border: 1px solid #000;
color: #666;
font-weight:bold;
}
.logo
{
padding-top: 20px;
padding-bottom: 50px;
padding-left: 0px;
}
.menu
{
width: 162px;
height: 50px;
background: linear-gradient(gray, #eee);
line-height: 50px;
text-align:center;
border-radius: 5px;
border: 1px solid #000;
color: #666;
font-weight:bold;
padding-left: 0px;
padding-right: 0px;
}
.button
{
width: 150px;
height: 50px;
background: linear-gradient(rgba(212, 0, 0, 0), #795548);
line-height: 50px;
text-align:center;
/*border-radius: 5px;*/
border: 1px solid #000;
color: #666;
font-weight:bold;
padding-left: 0px;
padding-right: 0px;
}
.table
{
display:table;
width:100%;
table-layout:fixed;
}
.table_cell
{
display:table-cell;
width:194px;
border: solid black 0px;
padding-left: 0px;
padding-right: 0px;
}
.searchbox
{
height: 45px;
width: 200px;
}
.searchbutton
{
width: 50px;
height: 45px;
}
Please see image for overflow
You have two primary issues:
1) You're using fixed width elements that don't account for any change in viewport (ie They are not responsive) See Media Queries
2) You're not really using the grid system properly; for instance this > <div class="row col-md-12"> makes no sense. See Grid System
I know this is new to you so learning the fundamental principles of HTML/CSS (at the very least) is essential so you understand how Bootstrap works in general along with digging into the Documentation.
See working example Snippet below of how you could structure your code.
/**For Nav Pills Navigation**/
/*#nav {
margin-bottom: 20px;
}*/
div.logo {
padding-top: 20px;
padding-bottom: 20px;
}
.navbar#nav-menu {
background: linear-gradient(gray, #eee);
border-radius: 5px;
border: 1px solid #000;
color: #666;
font-weight: bold;
text-align: center;
}
.navbar #menu > li {
background: linear-gradient(gray, #eee);
border-radius: 5px;
border: 1px solid #000;
color: #666;
font-weight: bold;
text-align: center;
}
#searchForm .btn.btn-navi {
background: linear-gradient(rgba(212, 0, 0, 0), #795548);
border: 1px solid #000;
color: #666;
font-weight: bold;
}
div.resultbox {
margin-top: 20px;
background: linear-gradient(rgba(212, 0, 0, 0), #795548);
border-radius: 5px;
border: 1px solid #000;
color: #666;
font-weight: bold;
}
/**For NAVBAR Navigation**/
#media (min-width: 768px) {
.navbar#nav-menu {
margin-bottom: 5px;
}
}
#media (max-width: 768px) {
div.resultbox {
margin-top: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="logo">
<img src="http://placehold.it/1150x300/f00/fff" class="img-responsive" />
</div>
</div>
</div>
</div>
<!--Can be repalced with the below NAV PILLS -->
<div class="container">
<nav class="navbar navbar-default" id="nav-menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li>Dashboard
</li>
<li>Invoicing
</li>
<li>Scheduler
</li>
<li>Employees
</li>
<li>User Management
</li>
<li>Customers
</li>
</ul>
</div>
</nav>
</div>
<!--Can be used Instead of the above NAVBAR -->
<!--<div class="container">
<div class="row" id="nav">
<div class="col-sm-12">
<ul class="nav nav-pills nav-justified" id="menu">
<li role="presentation">Dashboard
</li>
<li role="presentation">Invoicing
</li>
<li role="presentation">Scheduler
</li>
<li role="presentation">Employees
</li>
<li role="presentation">User Management
</li>
<li role="presentation">Customers
</li>
</ul>
</div>
</div>
</div>-->
<div class="container">
<div class="row">
<form id="searchForm">
<div class="form-group">
<div class="col-sm-4">
<button type="button" class="btn btn-default btn-lg btn-block btn-navi">New Employee</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<button type="button" class="btn btn-default btn-lg btn-block btn-navi">Employee Schedule</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
<button class="btn btn-default btn-lg btn-navi" type="button">Go!</button>
</span>
</div>
</div>
</div>
</form>
</div>
<div class="resultbox">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Phone</th>
<th>Email</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>