I am making a small webpage which is shown below . There is a footer at the end over which "Made with love by Vipul Tyagi" is written. The problem is that it is coming over the previous division(feedback form). No matter how much top property I apply to the footer, it is not moving down even a bit.
Please have a look at my code and help me to find the problem. You will find it at the very end in html just above </body> tag.
Thanks in advance!
$(document).ready(function() {
$("#notif-list li").click(function(e) {
var num = parseInt($("#notif-number").text());
$(this).remove();
$("#notif-number").html("" + num - 1 + "");
});
});
.container1 {
position: relative;
color: white;
}
.centered {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.fa-input {
font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.top-left {
position: absolute;
top: 30%;
left: 55%;
transform: translate(-50%, -50%);
}
.heading {
font-family: 'Orbitron', serif;
}
#headmain {
font-size: 50px;
position: relative;
left: -55px;
color: white;
}
#headsecondary {
position: relative;
right: 5%;
color: white;
}
#top-content {
position: relative;
top: 40px;
width: 100%;
background-color: #bbb;
padding: 10px;
}
a {
color: white;
}
.number {
position: absolute;
top: -5px;
right: -2px;
padding: 5px 10px;
border-radius: 30%;
background: green;
color: white;
}
.borderimg {
border-radius: 30%;
}
.carosel {
width: 670px;
}
.service-list {
font-family: 'Lobster', cursive;
font-size: 50px;
}
.labels {
font-size: 15px;
}
.login-box {
width: 320px;
height: 520px;
top: 290px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
box-sizing: border-box;
padding: 70px 30px;
}
.login-box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"],
input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #1c8adb;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: #39dc79;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 14px;
color: #fff;
}
.login-box a:hover {
color: #39dc79;
}
#media screen and (max-width: 450px) {
.carosel {
width: 300px;
}
.top-left {
position: absolute;
top: 35%;
left: 55%;
transform: translate(-50%, -50%);
}
#headmain {
font-size: 30px;
position: relative;
left: -20px;
color: white;
}
#headsecondary {
font-size: 20px;
position: relative;
right: 5%;
color: white;
}
#service-list {
font-family: 'Lobster', cursive;
font-size: 30px;
}
.login-box {
width: 300px;
height: 500px;
position: relative;
top: 50px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
box-sizing: border-box;
padding: 70px 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top" style="opacity: 0.9;top: 10px;">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#"><img src="sankalpsoft.png" style="height: 30px; width: 30px;bottom : 10px;" /></a>
<a class="navbar-brand" href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">SankalpSoft</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
About Us
</li>
<li>Why We?</li>
<li>Products</li>
<li>Services</li>
<li>Blogs</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="color: white;" onMouseOver="this.style.color='yellow';" onMouseOut="this.style.color='white';">Notification<span class="number" id="notif-number">4</span></a>
<ul class="dropdown-menu" id="notif-list">
<li style="padding: 10px 5px;">Notification 1</li>
<li style="padding: 10px 5px;">Notification 2</li>
<li style="padding: 10px 5px;">Notification 3</li>
<li style="padding: 10px 5px;">Notification 4</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="width: 100%;padding-left: 0;padding-right: 0;">
<img src="https://i.postimg.cc/PpNsdrDS/back-img.jpg" alt="Snow" style="width: 100%;height: 350px;filter: grayscale(10%) brightness(60%) contrast(1);box-shadow: 5px 15px 8px #888888;">
<div class="top-left">
<h1 class="heading" id="headmain">SankalpSoft Solutions</h1>
<h3 class="heading" id="headsecondary">We Provide intelligent business support</h3>
</div>
</div>
</div>
<div class="container carosel" style="height: 340px;top: 40px;">
<h2 style="text-align: center;" class="service-list">Services We provide</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style="box-shadow: 20px 10px 8px #888888;border-radius: 10%;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active borderimg">
<img src="https://i.postimg.cc/kVQDWsY0/business.jpg" alt="business" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/XGnqL5Tp/outsourcing.jpg" alt="outsourcing" style="width:100%;">
</div>
<div class="item borderimg">
<img src="ttps://i.postimg.cc/dDLwYnmJ/webdevelopment.jpg" alt="webdevelopment" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/K1T6YHRy/applicationdevelopment.png" alt="applicationdevelopment" style="width:100%;">
</div>
<div class="item borderimg">
<img src="https://i.postimg.cc/gn105QC9/customersupport.jpg" alt="customersupport" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container login-box" style="position: relative;border-radius: 10%;">
<h1 class="login service-list" style="text-align: center;">Feedback here</h1>
<p class="login service-list labels">Name</p>
<input type="text" name="Name" placeholder="" id="usernm" required>
<p class="login service-list labels">Contact No</p>
<input type="password" name="password" placeholder="" id="contact" required>
<p class="login service-list labels">Message</p>
<input type="text" name="message" placeholder="" id="msg" required>
<input class="service-list" type="submit" name="submit" value="Submit" id="signupbut" class="login"></input>
</div>
<div class="container footer" style="position: relative;background-color: black;width: 100%;margin: 0;padding: 10px;">
<p style="color: white; font-size: 20px;text-align: center;">Made with <span>❤</span> by Vipul Tyagi</p>
</div>
</body>
</html>
EDIT
Although I have found the solution, but I still don't understand what was the issue? I have never seen such behaviour with top prperty!
Wrap your footer around a footer tag and use that tag to adjust the position on your page. The inline css i used is
margin-top: 50%;
I've added a js fiddle for you as well. Take a look at this link:https://jsfiddle.net/zfhassaan/5syxnme1/1/
In the style of class="container footer" , you have used position as relative. So, you can add top: some pixels (for eg: top: 200px) to your style, to keep the footer where ever you want.
For reference: https://www.w3schools.com/css/css_positioning.asp
Related
I want the image in my site to completely change when the browser is resized.
I've been using media-queries, but I can't seem to get it right. Any thoughts/tips?
The thing is I have tried the display trick with media query but its not working
I did this, but it's not working even when I am lowering the viewport. The image in the laptop viewport remains the same in the phone viewport.
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display: block;
}
.blocks {
display: none;
}
}
<div class="col-lg-6 border:1px">
<img class="blocks" src="https://via.placeholder.com/200" alt="laptop-mockup">
<img class="mob" src="https://via.placeholder.com/200/ff0000" alt="android-mockup">
</div>
The whole html and css code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News homepage</title>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght#600;700;800&family=PT+Sans:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="navigator">
<nav class="navbar navbar-expand-sm navbar-dark navbar-light">
<a class="navbar-brand" href=""> <img src="C:\Users\91826\Desktop\news-homepage-main\css\images\logo.svg" alt="My Happy SVG" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation navbar-light">
<span class="navbar-toggler-icon navi"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer">Home </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#pricing"> New </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#cta"> Popular </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link" href="#footer"> Trending </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer"> Categories </a>
</li>
</ul>
</div>
</nav>
</div>
<div class="row ">
<div class="col-lg-6 border:1px">
<img class="blocks" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-desktop.jpg" alt="laptop-mockup">
<img class="mob" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-mobile.jpg" alt="android-mockup">
</div>
<div class="tag">
<h1 class="tagline">The Bright<br />Future of<br />Web 3.0?</h1>
</div>
<div class="read">
<h1 class="readline">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people.
But is it really fulfilling its promise?</h1>
</div>
<button class="button-50 readmore" type="button" name="button">READ MORE</button>
<div class="col-lg-6 border:1px">
<div class="new">
<h1>New</h1>
<h2>Hydrogen VS Electric Cars</h2>
<h3>Will hydrogen-fueled cars ever catch up to EVs?</h3>
<hr>
<h2>The Downsides of AI Artistry</h2>
<h3>What are the possible adverse effects of on-demand AI image generation?</h3>
<hr>
<h2>Is VC Funding Drying Up?</h2>
<h3>Private funding by VC firms is down 50% YOY. We take a look at what that means.</h3>
</div>
</div>
</div>
</div>
<div class="info">
<div class="row">
<div class="col-lg-4 box">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-retro-pcs.jpg" alt="" />
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1 "> 01</h1>
<h2 class="infohead2"> Reviving Retro PCs</h2>
<h3 class="infohead3"> What happens when old PCs<br>are given modern upgrades?</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-gaming-growth.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf1 inf">
<h1 class="infohead1"> 02</h1>
<h2 class="infohead2"> Top 10 laptops of 2022</h2>
<h3 class="infohead3">Our best picks for various <br> needs and budgets.</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-top-laptops.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1"> 03</h1>
<h2 class="infohead2"> The Growth of Gaming</h2>
<h3 class="infohead3">How the pandemic has sparked <br> fresh opportunities.</h3>
</div>
</div>
</div>
</div>
</div>
<hr class="hori">
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Saswat Seth.
</div>
</body>
</html>
CSS
.navigator {
margin-bottom: 2%;
}
body {
padding: 0% 10% 2% 10%;
}
.nav-link {
color: black;
}
:hover.nav-link {
color: #6B728E;
}
.navigator {
padding: 2% 5% 0% 0%;
}
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display:block;
}
.blocks {
display:none;
}
}
.new {
height: 85%;
width: 23%;
background: hsl(240, 100%, 5%);
position: absolute;
right: 140px;
padding: 2%;
}
.navelement {
padding-right: 6%;
font-size: 100%;
}
h1 {
color: hsl(35, 77%, 62%);
font-family: 'noto sans';
font-weight: 600;
}
h2 {
color: #fff;
font-size: 23px;
margin-top: 10%;
font-family: 'noto sans';
font-weight: 700;
}
h3 {
color: #6B728E;
font-size: 15px;
padding: 4% 0%;
line-height: 25px;
}
hr {
color: #fff;
border-top: solid white;
}
.tag {
position: absolute;
bottom: 20px;
}
.tagline {
font-family: 'noto sans';
color: #000;
font-weight: 800;
font-size: 60px;
}
.read {
padding: 2% 38%;
position: absolute;
bottom: 54px;
right: -15px;
}
.readline {
font-size: 110%;
color: #6B728E;
line-height: 27px;
}
.button-50 {
height: 49px;
width: 200px;
appearance: button;
background-color: hsl(5, 85%, 63%);
background-image: none;
border: 1px solid #000;
border-radius: 4px;
box-shadow: #B73E3E 4px 4px 0 0, #000 4px 4px 0 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "Montserrat";
font-size: 18px;
font-weight: 400;
line-height: 20px;
margin: 20% 5% 10% 0%;
overflow: visible;
padding: 14px 30px;
text-align: center;
text-transform: none;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
position: absolute;
bottom: -45px;
right: 45%;
}
.button-50:focus {
text-decoration: none;
}
.button-50:hover {
text-decoration: none;
}
.button-50:active {
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
outline: 0;
}
.button-50:not([disabled]):active {
box-shadow: #C9BBCF 2px 2px 0 0, #1d1716 2px 2px 0 1px;
transform: translate(2px, 2px);
}
.readmore {
margin: 10% 3% 5% 0;
font-family: 'Poppins';
font-weight: 400;
}
.info {
margin-top: 5%;
margin-left: 10%;
position: absolute;
right: 10%;
}
.infoimg {
width: 315%;
padding: 20%;
}
.infohead1 {
color: #7D9D9C;
}
.infohead2 {
color: #000;
}
.inf {
padding: 30%;
margin-left: 68px;
white-space: nowrap;
}
.hori {
margin-top: 10%;
color: #000;
border-top: solid black;
}
#media (max-width:350px) {
img{
object-fit: cover;
height: 400px;
}
}
#media screen and (max-width:400px) {
.mob {
display: block;
}
}
I've been having some problems with my page correctly responding to browser resizing. I've made a full screen background image carousel but it seems that it creates a problem, when my browser is resized. When I expand my hamburger menu all of its items may not be visible, depending on the browser height , for example, it can be seen fully , or it can be cut when the browsers height is smaller. The option #2 would be okay, if the navigation bar was <nav class="navbar static-top navbar-expand-xl">, but without the fixed-top class the menu pushes down my carousel, and if I expand the menu it makes it even worse. Here's a snippet:
* {
padding: 0;
margin: 0;
}
#import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');
body {
overflow-x: hidden;
font-family: 'Lato', sans-serif;
color: #505962;
margin: 0;
padding: 0;
}
.carousel-item {
height: 100vh;
background-position: center;
background-size: cover;
}
.navbar-brand img {
height: 120px;
margin-left: 30%;
}
.navbar {
background-color: rgba(0, 0, 0, 0.5);
height: 65px;
}
.navbar-nav.mr-auto li {
padding: 0 5px;
}
.navbar-nav.mr-auto li a {
color: white;
font-family: "Raleway", sans-serif;
font-size: 22px;
font-style: bold;
display: inline-block;
border-bottom: 1px solid;
border-color: transparent;
}
.navbar-nav.mr-auto li.active a {
border-image: linear-gradient(90deg, #00ccff 33.33%, #001eff 33.33% 66.66%, #ff0000 66.66% 100%);
border-image-slice: 1;
}
.nav.navbar-nav li a {
color: white;
text-decoration: none;
font-family: "Raleway", sans-serif;
font-size: 22px;
font-style: bold;
display: inline-block;
}
.nav.navbar-nav {
margin-right: 5%;
}
.navbar-nav.mr-auto li a:hover {
border-image: linear-gradient(90deg, #00ccff 33.33%, #001eff 33.33% 66.66%, #ff0000 66.66% 100%);
border-image-slice: 1;
}
.navbar-nav.mr-auto {
margin-left: 5%;
}
.carousel-control-prev:hover {
cursor: pointer;
}
.carousel-control-next:hover {
cursor: pointer;
}
#media all and (max-width:1200px) {
.navbar {
width: fit-content;
height: fit-content;
background-color: rgba(0, 0, 0, 0.5);
}
}
#loginbutton,
#signupbutton {
margin: 10px;
border-radius: 8px;
background-color: transparent;
width: 90px;
height: 45px;
border-color: transparent;
font-family: "Raleway", sans-serif;
color: white;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
#loginbutton:hover,
#signupbutton:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
transition: background-color 0.4s ease;
}
.modal-body {
text-align: center !important;
}
.modal-backdrop {
z-index: -1 !important;
}
.modal-content {
color: white !important;
}
.form-control {
background-color: rgb(24, 24, 24, 0.4) !important;
border-color: transparent !important;
}
.form-group {
display: block;
text-align: center;
}
.form-group label {
display: block;
}
.form-group i {
text-align: center;
display: block;
position: relative;
}
input {
color: white !important;
width: 250px !important;
margin-left: 28% !important;
text-align: center !important;
}
::placeholder {
color: white !important;
opacity: 1 !important;
text-align: center !important;
}
button.close {
color: white !important;
opacity: 1 !important;
margin-right: 3% !important;
}
.modal-header h2 {
margin-left: 41%;
}
#loginform {
margin-left: -10%;
height: 610px;
width: 600px !important;
border-radius: 20px !important;
margin-top: 15%;
}
#loginmodalbutton {
margin-top: 26.5%;
margin-left: 1%;
width: 80px;
height: 35px;
background-color: transparent;
color: white;
font-weight: bolder;
font-size: 18px;
display: inline-block !important;
text-align: center !important;
border-radius: 5px;
}
#loginmodalbutton:hover {
background-color: rgb(88, 2, 8);
}
button:focus {
outline: 0 !important;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
box-shadow: none !important;
}
#loginbody {
transition: 2s all;
-webkit-backdrop-filter: blur(5px) grayscale(100%);
backdrop-filter: blur(5px) grayscale(100%);
}
#signupform {
height: 30rem;
}
.eee {
position: absolute;
top: 20%;
margin-left: 30%;
color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="includes/script.js"></script>
<meta charset="UTF-8">
<meta name="viewport" , content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/css/flag-icon.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar fixed-top navbar-expand-xl">
<div class="navbar-header">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="collapse_target">
<a class="navbar-brand" href="index.html"><img src="img/bmw_logo.png"></a>
<ul class="nav navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#"> Home</a></li>
<li class="nav-item"><a class="nav-link" href="#"> Products</a></li>
<li class="nav-item"><a class="nav-link" href="#"> Cars</a></li>
<li class="nav-item"><a class="nav-link" href="#"> Motorbikes</a></li>
</ul>
<ul class="nav navbar-nav">
<button type="button" data-toggle="modal" data-target="#loginModal" id="loginbutton"> LOGIN </button>
<button type="button" data-toggle="modal" data-target="#signupModal" id="signupbutton"> SIGN UP</button>
</ul>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content card card-image" id="loginform" style="background-image: url('https://www.pixelstalk.net/wp-content/uploads/2016/07/Wallpapers-HD-1080P-3D-Download.jpg'); background-size: 230%;background-position: center;">
<div class="modal-header">
<h2 class="modal-title" id="exampleModalLabel" key="report_title">LOGIN</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="loginbody">
<form class="needs-validation" novalidate>
<div class="form-group" id="loginmail">
<i class="fas fa-envelope"></i>
<label for="exampleInputEmail1" key="label_email"> Enter your email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" data-translate="email_placeholder" placeholder="Enter email" key="email" required>
<div class="invalid-feedback" key="invalid_email">
Please enter a valid email address
</div>
</div>
<div class="form-group" id=loginpass>
<i class="fas fa-id-card"></i>
<label for="exampleInputPassword1" key="label_password">Enter your password</label>
<input type="password" class="form-control" id="exampleInputPassword1" data-translate="password_placeholer" placeholder="Password" key="password" required>
<div class="invalid-feedback" key="invalid_password">
Please enter a password
</div>
</div>
<button type="submit" class="btn btn" key="submit" id=loginmodalbutton>LOGIN</button>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog" id="signupModal">
<div class="modal-dialog">
<div class="modal-content card card-image" id="signupform" style="background-image: url(img/bmw_signup.jpg); background-position: center; background-size: 100%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="signupbody">
<div class="form-group">
<input type="text" data-translate="email_placeholder" name="email" class="form-control" placeholder="Email" key="email">
</div>
<div class="form-group">
<input type="username" data-translate="username_placeholder" name="username" class="form-control" placeholder="Username" key="username">
</div>
<div class="form-group">
<input type="password" data-translate="password_placeholder" name="password" class="form-control" placeholder="Password" key="password">
</div>
</div>
<button type="submit" class="btn btn" id="modalsignup" key="modalsignup"> Create
Account</button>
</div>
</div>
</div>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="7000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" style="background-image:url(https://images3.alphacoders.com/823/thumb-1920-82317.jpg)"></div>
<div class="carousel-item" style="background-image: url(https://www.itl.cat/pics/b/28/284520_full-hd-wallpapers.jpg);"></div>
<div class="carousel-item" style="background-image: url(https://wallpaperaccess.com/full/2159447.jpg);"></div>
</div>
<div class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</div>
<div class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</div>
</div>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</html>
One option is to make the font size (and the padding/margins if you prefer) responsive. You can also use max-height to perhaps move the menu to the right of the hamburger icon (shifting it up to make room). Example:
.nav.navbar-nav li a {
font-size: 5vh;
}
#media (max-height: 400px) {
.navbar-collapse {
margin-left: 80px;
margin-top: -40px;
}
}
I am trying to make a full screen layout using bootstrap 4, like this:
100% height and width
My issue is that the left and right column (between nav and footer) are not taking up the remaining space. Secondly I would need to center that content within the column. I have played around with giving those sections fixed heights of (90vh) but then I am writing a lot of workaround code for mobile/tablet. Is there any solution for this that I am missing, probably something painstakingly obvious!
Any help is appreciated, thanks!
body {
font-family: 'Montserrat', sans-serif;
background-color: #fcfcfc;
}
.navbar-colored{
background-color: rgba(255,255,255,0.9) !important; /*#94a7b7*/
box-shadow: 1px 1px 10px rgba(0,0,0,0.15);
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-duration: 1.0s;
}
.nav-item {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-duration: 1.1s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.nav-item a {
color: rgba(17,17,17,0.85);
}
.cart-icon {
padding-right: .75rem;
}
.cart-icon strong {
border-radius: 0;
font-weight: bold;
margin: .3em 0;
border: 2px solid #446084;
color: #0062A8;
position: relative;
display: inline-block;
vertical-align: middle;
text-align: center;
font-size: 1em;
}
.navbar{
position:fixed;
width:100%;
background color: transparent;
z-index:10;
flex-wrap: nowrap;
padding: 0.8rem 1.0rem;
}
.navbar-light .navbar-toggler {
border:none;
}
.row .no-pad {
margin-left: 0px;
}
.color-img-col {
padding-left: 20px;
padding-right: 20px;
}
.col-right {
background-color: #e6e6e6;
padding-left: 4%;
padding-right: 4%;
}
.col-left {
background-color: #fcfcfc;
}
.col-lg-4 .steps-small li {
padding-top: 10px;
}
.builder-color-img {
max-width: 80%;
}
.left-content {
margin-left: 9vw;
width: 72%;
}
[data-attribute-link] {
cursor: pointer;
}
.builder-checkout {
background-color: #0062a86b /*#7e94a78c*/;
}
.product-gallery {
background-color: #e6e6e6;
}
/*Builder Main Header / Navigation*/
.builder-header h1 {
font-size: 30px;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
color: #202020;
padding-bottom: 17px;
}
.builder-header hr {
color: #9b9b9b;
margin-top: 0px;
margin-bottom: 0px;
}
h2.builder-step-title {
font-size: 18px;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-style: italic;
color: #202020;
padding-top: 40px;
}
.steps-small {
padding-bottom: 25px;
}
.steps-small ul {
list-style-type: none;
overflow: hidden;
padding-left: 0px;
cursor: pointer;
}
.steps-small .active {
color: #0062A8;
font-weight: 500;
}
.steps-small :hover {
color: #0062A8;
}
.steps-small li {
float: left;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
color: #8a8a8a;
padding-right: 10px;
}
.steps-small img {
width: 20px;
height: 10px;
padding-left:5px;
padding-right:3px;
}
/*Builder Bar*/
.review-bar {
background-color: #0062a8d9 /*#94a7b7*/;
color: white;
text-transform: uppercase;
padding-left: 9vw;
}
.picker-header {
float:left;
font-weight: 200;
font-size: 15px;
padding-left: 7px;
}
span[data-product-attribute-variation-result] {
font-weight: 500;
font-size: 15px;
padding-left: 5px;
}
.pa_color, .pa_neck, .pa_hem, .pa_size, .pa_body, .builder-checkout {
padding-top: 3.5vh;
padding-bottom: 3.5vh;
cursor: pointer;
}
.review-bar .pa_color:hover, .review-bar .pa_neck:hover, .review-bar .pa_hem:hover, .review-bar .pa_size:hover, .review-bar .pa_body:hover {
/*box-shadow: inset 0 0 10px #0062A8;*/
box-shadow: 0 0 8px #0062A8;
}
.builder-checkout:hover {
box-shadow: inset 0 0 10px #0062A8;
}
/*color Screen*/
.white-color-btn, .black-color-btn, .navy-color-btn, .grey-color-btn {
height: 30px;
width: 30px;
border-radius: 30px;
border:1px solid black;
}
/*Next Button*/
.next-btn {
font-size: 14px;
border-radius: 30px;
padding: 15px 50px 15px 50px;
font-weight: 200;
color: #202020;
border: 1px solid #202020;
}
.next-btn:hover {
background-color: #202020;
color: white;
}
.next-btn img {
width: 26px;
height: 10px;
padding-left:10px;
}
.review-bar img {
width: 15px;
height: 15px;
float: left;
margin-top: 3px;
}
.next-btn:hover {
color: white;
}
.image-gallery {
display: flex;
align-items: center;
flex-wrap: wrap;
overflow: hidden;
overflow-y: scroll;
}
.image-gallery img {
padding: 20px 0px;
}
.carousel-indicators li {
text-indent: 0px;
}
.selection-button-top {
padding-top: 50px;
padding-left: 0px;
}
.selection-button-bottom {
padding-bottom: 50px;
padding-top: 30px;
padding-left: 0px;
}
.selection-button {
padding-top: 30px;
padding-left: 15px;
padding-left: 0px;
}
.circle-btn {
border-radius: 30px;
height: 30px;
width: 30px;
text-indent: 40px;
cursor: pointer;
background-color: transparent;
color: #202020;
border: 1px solid #202020;
}
.circle-btn:hover {
border: 1px solid #3ca0e7;
font-weight: 500;
background-color: #202020;
}
.container-fluid .review-bar {
-webkit-overflow-scrolling: touch;
}
.nav-link {
padding: .5rem;
position: relative;
text-decoration: none;
cursor: pointer;
margin-left: 2rem;
margin-right: 2rem;
}
.nav-link:hover {
font-weight: 500;
}
.nav-link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #0062A8;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.steps-small li {
padding-top: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> -->
<link rel="stylesheet" type="text/css" href="buildertwo.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,500i|Poppins:400,500" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<title>OneTee Builder 2.0</title>
</head>
<body>
<nav class="navbar navbar-light">
<button class="navbar-toggler x-button" type="button" data-toggle="collapse" data-target="#navbarsmall" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div class="x-icon"><span></span><span></span><span></span><span></span></div>
</button>
<div class="collapse navbar-collapse" id="navbarsmall">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sizing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shipping</a>
</li>
</ul>
</div>
<div class="cart-item has-icon">
<a href="https://onetee.shop/cart/" title="Cart" class="header-cart-link is-small">
<span class="cart-icon image-icon">
<strong>0</strong>
</span>
</a>
</div>
</nav>
<div id="carouselBuilder" class="carousel slide carousel-fade" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active" data-product-attribute="pa_color" data-slide-number="1">
<div class="container-fluid">
<div class="row main-row align-items-center">
<div class="col-sm-12 col-lg-6 col-left">
<div class="left-content">
<div class="builder-header no-sm-mobile">
<h1>Build your shirt</h1>
<div class="steps-small">
<ul>
<li data-target="#carouselBuilder" data-slide-to="0" class="active">Color<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="1">Neck<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="2">Hem<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="3">Size<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="4">Body<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="5">Checkout</li>
</ul>
</div>
<hr>
</div>
<h2 class="builder-step-title">Step 1. Select Your Colour</h2>
<div class="selection-button-top">
<button class="button circle-btn black-btn white-trigger" data-product-attribute="pa_color" data-product-attribute-variation="black">black</button>
</div>
<div class="selection-button-bottom">
<button class="button circle-btn white-btn white-trigger" data-product-attribute="pa_color" data-product-attribute-variation="white">white</button>
</div>
<button type="button" class="btn next-btn" data-target="#carouselBuilder" data-slide-to="1">Next<img src="next.png" class="next-arrow" alt="next" /></button>
</div>
</div>
<div class="col-sm-12 col-lg-6 col-right text-center align-self-center">
<div class="right-content">
<img class=" img-fluid" alt="Responsive image" src="black.png">
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item" data-product-attribute="pa_neck" data-slide-number="2">
<div class="container-fluid">
<div class="row main-row align-items-center">
<div class="col-sm-12 col-lg-6 col-left">
<div class="left-content">
<div class="builder-header no-sm-mobile">
<h1>Build your shirt</h1>
<div class="steps-small">
<ul>
<li data-target="#carouselBuilder" data-slide-to="0">Color<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="1" class="active">Neck<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="2">Hem<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="3">Size<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="4">Body<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="5">Checkout</li>
</ul>
</div>
<hr>
</div>
<h2 class="builder-step-title">Step 2. Select Your Neck Line</h2>
<div class="col-12 selection-button-top">
<button class="button circle-btn black-btn white-trigger" data-product-attribute="pa_neck" data-product-attribute-variation="crew">crewneck</button>
</div>
<div class="col-12 selection-button-bottom">
<button class="button circle-btn white-btn white-trigger" data-product-attribute="pa_neck" data-product-attribute-variation="v-neck">vneck</button>
</div>
<button type="button" class="btn next-btn" data-target="#carouselBuilder" data-slide-to="2">Next<img src="next.png" class="next-arrow" alt="next" /></button>
</div>
</div>
<div class="col-sm-12 col-lg-6 col-right text-center align-self-center">
<div class="right-content">
<img class=" img-fluid neck-img" alt="Responsive image" src="v-neck-black.png">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="container-fluid review-bar">
<div class="row flex-row flex-nowrap">
<div class="pa_color col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="0">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Colour:<span data-product-attribute-variation-result="">Black</span>
</div>
</div>
<div class="pa_neck col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="1">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Neck:<span data-product-attribute-variation-result="">Crew</span>
</div>
</div>
<div class="pa_hem col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="2">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Hem:<span data-product-attribute-variation-result="">Straight</span>
</div>
</div>
<div class="pa_size col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="3">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Size:<span data-product-attribute-variation-result="">L</span>
</div>
</div>
<div class="pa_body col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="4">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Body:<span data-product-attribute-variation-result="">Slim</span>
</div>
</div>
<div class="builder-checkout col-4 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="5">
<div class="picker-header">Checkout
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="js/boostrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="buildertwo.js"></script>
</body>
</html>
I hope this helps. This is a really simple explanation, but I trust that you can implement this into your code. The problem with your columns is that they are not the correct height. They are too short, so even after the review bar is added under the columns, there is still a bunch of space.
This is how I would solve it. you can use the calc() function built in css. You can see me using it in my solution below. If you know the height of the review-bar ahead of time, you can just subtract that from 100vh or 100% (I'm using 100vh).
I'm assuming that the review bar is 50px, but of course, it can be different. This implementation works with any screen size. If you run the snippet, go full screen, and adjust the screen size, you'll see the top-content will adjust itself and push the review bar to the bottom.
So try to implement this into your code and see if it works! If it doesn't I'll keep trying to help. And if this is not the solution you're looking for, I apologize.
Also, welcome to Stack Overflow! It says here that you're a new user.
* {
margin: 0;
padding: 0;
}
.top-content {
width: 100%;
height: calc(100vh - 50px);
background-color: blue;
}
.review-bar {
width: 100%;
height: 50px;
background-color: green;
}
<div class='top-content'>
This content here would be your two columns
</div>
<div class='review-bar'>
This, of course, would be your review bar
</div>
I have two navbars in my application which seems to be off-sync. i.e, this:
I would like to have the navbar collapsed across the logo.
Like this:
Tried deploying this logo under navbar-header class too. But faces problems with alignment.
MY CODE:
admin.html:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>MDM - Admin Suite</title>
<div th:replace="fragments/header :: header-css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}" href="../../css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body ng-app="uploadFileApp">
<div th:replace="fragments/header :: header"/>
<div class="sidebar">
<ul>
<li>Home</li>
<li>Service</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container uploadposition">
<div ng-controller="uploadFileController">
<form class="form-horizontal" id="uploadForm" action="#">
<div class="form-group">
<label class="control-label col-sm-2" for="uploadfile">Upload File:</label>
<div class="col-sm-5">
<input id="upload" class="form-control" type="file" file-model = "uploadedFile" placeholder="Upload File"></input>
</div>
<button type="submit" class="uploadButton" ng-click = "doUploadFile()">Upload</button>
</div>
</form>
<div class="col-sm-offset-2">
<p ng-bind="uploadResult"></p>
</div>
<hr/>
</div>
<div id="pas-table-div" style="display:none;">
<h3>PAS MDM Reject Records</h3>
<div ng-show="loading" >
<h3>Loading...</h3>
</div>
<div class="col-sm-offset-2">
<p ng-bind="submitResult"></p>
</div>
<table st-table="display_records" st-safe-src="employees" ng-init="getData()" ng-show="employees.length"
class="table table-striped" ng-controller="uploadFileController">
<thead>
<tr>
<th>Policy Number</th>
<th width="100px">First Name</th>
<th st-sort="salary">Last Name</th>
<th>Error Description</th>
<th>Validated/Corrected in PAS</th>
<th>Note</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr st-select-row="row" st-select-mode="multiple"
ng-repeat="row in display_records">
<td>{{row.PolicyNumber}}</td>
<td>{{row.FirstName}}</td>
<td>{{row.LastName}}</td>
<td>{{row.ErrorDescription}}</td>
<td>{{row.PASValidated}}</td>
<td>{{row.Note}}</td>
<td><button type="button" class="btn btn-danger" ng-click="deletRecord(row.PolicyNumber)">
<i class="glyphicon glyphicon-trash"> </i>
</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td style="border-bottom: 1px solid #ddd;"></td>
<td style="border-bottom: 1px solid #ddd;">
<button type="button" class="submitButton" ng-click="submit(employees)">Submit</button>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage"></div>
</td>
</tr>
</tfoot>
</table>
</div>
<script src="/js/jsaApp.js"></script>
<script src="/js/uploadFileCtrl.js"></script>
</div>
</body>
</html>
header.html:
<html xmlns:th="http://www.thymeleaf.org">
<head>
<div th:fragment="header-css">
<!-- this is header-css -->
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}" href="../../css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</div>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" th:fragment="header">
<div class="container">
<div class="navbar-header">
<!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav-collapse" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> -->
<a class="navbar-brand" href="#" th:href="#{/}"><img class="logoImg" height="25" width="55" src="http://static1.squarespace.com/static/56bcdc788259b5861e880ebe/t/5a96fae971c10bede98395de/1520548852981/?format=1500w"></img></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li th:classappend="${module == 'tasks' ? 'active' : ''}">
Tasks
</li>
<li th:classappend="${#httpServletRequest.getRequestURI() == '/dashboard' ? 'active':''}"><a th:href="#{/dashboard}"><span>Dashboard</span></a></li>
<li th:classappend="${#httpServletRequest.getRequestURI() == '/orders' ? 'active':''}"><a th:href="#{/orders}"><span>Orders</span></a></li>
<li th:classappend="${#httpServletRequest.getRequestURI() == '/income' ? 'active':''}"><a th:href="#{/income}"><span>Income</span></a></li>
<li role="separator" ></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li th:if="${#authorization.expression('!isAuthenticated()')}">
<a href="/signin" th:href="#{/signin}">
<span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> Sign in
</a>
</li>
<li th:if="${#authorization.expression('isAuthenticated()')}">
<a href="/logout" th:href="#{#}" onclick="$('#form').submit();">
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Sign out
</a>
<form style="visibility: hidden" id="form" method="post" action="#" th:action="#{/logout}"></form>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
main.css:
h1 {
color: #0000FF;
display: inline;
}
h2 {
color: #FF0000;
}
footer {
margin-top: 60px;
}
.uploadposition {
position: absolute;
right: 0px;
top: 100px;
width: 85%;
}
.navbar-inverse {
margin-bottom: 0px !important;
position: relative !important;
}
.logoImg {
background-size: 70.7%;
background-repeat: no-repeat;
background-position: 50%;
}
.submitButton {
background-color: #24b54b;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 17px;
padding: 4px 31px;
text-decoration: none;
}
.submitButton:hover {
background-color: #15ad3b;
}
.submitButton:active {
position: relative;
top: 1px;
}
.uploadButton {
background-color: #16529c;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #2958b0;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 17px;
padding: 4px 31px;
text-decoration: none;
}
.uploadButton:hover {
background-color: #0c458a;
}
.uploadButton:active {
position: relative;
top: 1px;
}
.leftNavbar {
width: 10%;
float: left;
}
.navbar .navbar-brand {
padding-top: 5px;
}
.navbar .navbar-brand img {
height: 40px;
width: 70px;
}
body {
padding: 0;
margin: 0;
height: 90vh;
}
.buttons {
position: absolute;
right: 0;
top: 0;
text-decoration: none;
padding: 5px 10px;
margin: 5px;
background: #000;
color: #ccc;
}
.buttons a {
display: block;
}
.button:hover {
color: #ccc;
}
.sidebar {
background: #1a1c1d;
color: #787d80;
width: 125px;
height: 100%;
text-align: left;
transform-origin: left;
transform-style: preserve-3d;
transition: all 0.5s;
overflow: hidden;
}
.sidebar:hideDown {
transform: rotateY(90deg) skewY(10deg);
}
.sidebar:hideUp {
transform: rotateY(90deg) skewY(-10deg);
}
.sidebarHeader {
padding: 20px 10px;
font-weight: 700;
text-align: center;
}
.sidebar ul {
padding: 0;
margin: 0;
list-style-type: none;
display:inline-block;
}
.sidebar li {
padding: 15px 10px;
}
.sidebar a {
text-decoration: none;
color: inherit;
transition: color 0.5s;
}
Can someone help me with this?
I have been messing around with this for a couple days and cannot get this section to work. I want one large div element to span two rows on the left and have two stacked div elements on the right.
Here is the code.
<!DOCTYPE html>
<html>
<head>
<title>Athenz -- DJ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Bree+Serif|Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="_/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="_/css/mystyles.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- NAVIGATION MENU BAR -->
<div class="jumbtron">
<section class="navbar navbar-fixed-top center" role="navigation">
<ul id="top-nav" class="nav navbar-nav">
<li>Home</li>
<li>Model</li>
<li>Actress</li>
<li>DJ</li>
<li>Entreprenuer</li>
<li>Press</li>
<li>Contact</li>
</ul><!-- nav -->
</section><!-- navbar -->
<div id="djbanner" class="col-lg-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src='images/dj/dj1.jpg' alt="DJ Photo 1">
</div>
<div class="item">
<img src='images/dj/dj2.jpg' alt="DJ Photo 2">
</div>
<div class="item">
<img src='images/dj/dj3.jpg' alt="DJ Photo 3">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
</div>
<div id="dj-body" class="container">
<div class="row">
<div class="col-lg-6">
<div class="big-box">image</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6"><div class="mini-box">1</div></div>
<div class="col-lg-6"><div class="mini-box">2</div></div>
<div class="col-lg-6"><div class="mini-box">3</div></div>
<div class="col-lg-6"><div class="mini-box">4</div></div>
</div>
</div>
</div>
</div> <!-- container -->
<section class="navbar navbar-fixed-bottom" role="navigation">
<div class="container">
<ul id="bottom-nav" class="nav navbar-nav">
<li>Energy Wellness</li>
<li>Bookings</li>
<li><img src="images/social/facebook.png" /></li>
<li><img src="images/social/twitter.png" /></li>
<li><img src="images/social/youtube.png" /></li>
<li><img src="images/social/soundcloud.png" /></li>
</ul><!-- nav -->
</div>
</section><!-- navbar -->
<script>
$('.carousel').carousel({
interval: 4000
})
</script>
<script src="_/js/bootstrap.js"></script>
<script src="_/js/myscript.js"></script>
</body>
</html>
Thats the main page. Here is the CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* ------------ Navigation Bar Section ------------ */
.navbar.center {
text-align: center;
margin: 0 auto;
}
.navbar {
background-color: rgba(0,0,0,0.5);
background: rgba(0,0,0,0.5);
border-color: rgba(0,0,0,0.5);
}
.navbar-nav li a {
color: white;
}
ul#top-nav.nav.navbar-nav li a {
font-family: 'Raleway', sans-serif;
margin-right: 50px;
}
ul#top-nav.nav.navbar-nav {
float: none;
display: inline-block;
}
/* ----------- Home Page Section -------------*/
.quarter {
width: 50%;
height: 99.9%;
float: left;
}
.contents {
height: 50%;
width: 100%;
}
#athenz-logo {
z-index: 1050;
position: absolute;
background-image: url('../../images/logo/athenz-logo.png');
background-size: cover;
background-color: white;
top: 50%;
left: 50%;
width: 360px;
height: 225px;
margin-left: -180px;
margin-top: -112.5px;
border-left: 4px solid #468AD4;
border-top: 4px solid #468AD4;
}
#athenz-logo::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 49.5%;
border-bottom: 4px solid #468AD4;
}
#athenz-logo::after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 49%;
width: 4px;
border-right: 4px solid #468AD4;
}
#home-top-left {
background-image: url('../../images/home/home_tl.jpg');
background-size: cover;
position: relative;
border-bottom: 2px solid;
border-bottom-color: #468AD4;
border-right: 2px solid;
border-right-color: #468AD4;
}
#home-top-right {
background-image: url('../../images/home/home_tr.jpg');
background-size: cover;
position: relative;
border-bottom: 4px solid;
border-bottom-color: #468AD4;
border-left: 2px solid;
border-left-color: #468AD4;
}
#home-bottom-left {
background-image: url('../../images/home/home_bl.jpg');
background-size: cover;
position: relative;
overflow: hidden;
border-top: 2px solid;
border-top-color: #468AD4;
border-right: 4px solid;
border-right-color: #468AD4;
}
#home-bottom-right {
z-index: 1051;
padding: 75px;
position: relative;
overflow: hidden;
}
/* ------------- DJ STYLING STARTS ------------- */
div#carousel-example-generic.carousel.slide {
height: 100%;
}
div#carousel-example-generic.carousel.slide div.carousel-inner div.item img {
width: 100%;
}
.big-box,
.mini-box {
background-color: #10BCFF;
color: white;
text-align: center;
margin: 2px;
font-size: 1.5em;
}
.big-box {
height: 120px;
}
.mini-box {
height: 60px;
}
/* --------- Footer Section -------- */
ul#bottom-nav.nav.navbar-nav {
float: right;
}
ul#bottom-nav.nav.navbar-nav li {
margin: 0;
}
section.navbar.navbar-fixed-bottom div.container {
margin-right: 0;
}
section.navbar.navbar-fixed-bottom {
height: 50px;
z-index: 1060;
}
ul#bottom-nav.nav.navbar-nav li {
margin: 0;
text-align: center;
font-size: 12px;
right: 0;
padding: 0;
}
ul#bottom-nav.nav.navbar-nav li a img {
width: 28px;
}
I am Pretty sure I closed everything but I cannot get it to work on my computer. Tried display, position and several other options but nothing seemed to work. Thanks for you help in advanced.
<div class="row">
<div class="col-md-6">Tall</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">Top</div>
</div>
<div class="row">
<div class="col-md-12">Bottom</div>
</div>
</div>
</div>