Problem 1:
The row is overflowing with other content (specifically on the other divisions that I made).
Question 1:
How to make a division to get the whole height of the viewport? like using "height: 100%"
Screenshot:
Normal Screenshot (PC View)
This is when the user is on "phone view" or with a smaller resolution.
Codes:
HTML Code (index.html)
<!DOCTYPE html>
<html>
<head>
<!--Meta Data-->
<meta charset="utf-8">
<meta name="author" content="Kirk Niverba" />
<meta name="description" content="Prospekt is a gaming community which helps users to comunicate, cooperate, collaborate, and share ideas or just to bond with other players or gamers out there!">
<link rel="author" href="https://plus.google.com/u/0/100208830349097131526" />
<link rel="publisher" href="https://plus.google.com/u/0/100208830349097131526" />
<meta property="og:title" content="Prospekt | A Gaming Community" />
<meta property="og:type" content="article" />
<meta property="og:image" content="http://wallpapercave.com/wp/rJRFZZ8.png" />
<meta property="og:url" content="http://prospekt.ml" />
<meta property="og:description" content="Prospekt is a gaming community which helps users to comunicate, cooperate, collaborate, and share ideas or just to bond with other players or gamers out there!" />
<meta property="fb:admins" content="100003700811738" />
<!--Insert Required APIs-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/box.css">
<script src="assets/js/jquery-3.1.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/smoothscroll.js"></script>
<title>Prospekt | A Gaming Community</title>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="//prospekt.ml">Prospekt | A Gaming Community</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Prospekt</li>
<li>Introduction</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Navigation <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Glossary</li>
<li>
</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Member Area <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Sign In</li>
<li>Register</li>
<li>Forgot Password</li>
<li>Your Dashboard</li>
<hr />
<li>Admin Login</li>
<li>cPanel</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid box-1 text-center" id="section1">
<br>
<br>
<h1> Welcome to Prospekt! </h1>
<hr>
<div class="row info">
<div class="col-sm-4">
<h1 class="title"> Why Prospekt? </h1>
<p class="content"> Why you should visit or use Prospekt as your social website? You should use Prospekt because it's <b>free</b>, <b>lightweight</b>, <b>fast</b>, and <b>reliable</b>.</p>
<p class="content"> We assure you your own privacy, security, enjoyment, and more when you visit our website. This website is also <em>mobile-friendly</em>, supported by jQuery and Bootstrap3. When you're a member, we assure your privacy and all the security measures to make you safe out there! Enjoy gaming! </p>
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Learn More...
</div>
<div class="col-sm-4">
<h1 class="title">Who We Are?</h1>
<p class="content">We are the gamers, or players, or geeks. It doesn't matter who you are in reality, it matters how you play or cooperate with others, avoiding to be toxic or salty out there!</p>
<p class="content">There are many ways to behave in the "tribunal" or to the games. Learn how to control yourself or became a <em>"non-salty/toxic"</em> player!</p>
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Anti Toxic Campaign
</div>
<div class="col-sm-4">
<h1 class="title">What Do We Do?</h1>
<p class="content"> We do many things, just like other people do. It doesn't mean that we're just sitting in front of a computer for hours, even days, is we aren't doing anything or we aren't even socializing with other people. <br><br><b>[Developer]: </b>As a developer of this website, I gave like a hundred of hours contributing to this website, I want you to cooperate with the system, by not being a toxic or a salty player. Enjoy my website and Happy Gaming out there!</p>
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Testimonials
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Developer Bio
</div>
</div>
</div>
<div class="container-fluid box-2 text-center" id="section2">
<h1> Other Informations </h1>
<hr>
</div>
</body>
</html>
Javascript (used for scrollspy and smooth scroll)
$(document).ready(function(){
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
CSS File
/*
Author: Kirk Niverba
Project Name: Prospekt - DivCSS
Date: Sept 4, 2016
License: MIT License
*/
.box-1 {
height: 700px;
background-color: lightgreen;
color: black;
padding: 15px;
}
.box-2{
height: 640px;
background-color: #faf0e6;
color: black;
padding: 15px;
}
hr {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr:after {
content: "ยง";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
}
h1.title{
font-family: Impact;
}
p.content {
font-family: Century Gothic;
font-size: 17px;
}
.info{
overflow: hidden;
}
Why not just use min-height:100%?
.box-1 {
min-height: 100%;
background-color: lightgreen;
color: black;
padding: 15px;
}
.box-2{
min-height: 100%;
background-color: #faf0e6;
color: black;
padding: 15px;
}
http://www.codeply.com/go/rnKegYatGf
Remove this line from your CSS. This is messing your code up.
.box-1 {
height: 700px;
Related
Problem
I'm having a problem with flex boxes. It is wrapping the content like it should, however any items that overflow the parent container are truncated. See the image below:
Here's the HTML of the entire page:
<html lang="enUS">
<head>
<!-- Page Title (Shows up in title bar of browser) -->
<title>Test Page: User Drill Down</title>
<!-- Favirotie Icons (Shows up next to the URL in the browser address bar)
Generated from https://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="180x180" href="http://localhost:22080/core/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:22080/core/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:22080/core/images/favicons/favicon-16x16.png">
<link rel="manifest" href="http://localhost:22080/core/images/favicons/site.webmanifest">
<link rel="mask-icon" href="http://localhost:22080/core/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="http://localhost:22080/core/images/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="http://localhost:22080/core/images/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- JavaScript Core Files -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/ajax.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/heartbeat.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/treewalker.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/verify.js"></script>
<!-- Install Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/APIs/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
<!-- Install FontAwsome CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/APIs/fontawsome/fontawesome-free-5.15.1-web/css/all.min.css">
<!-- Install Custom Common CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/core/css/common.css">
<!-- Install Custom Header CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/core/css/header.css">
<!-- Install Slider CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/core/css/toggle.css">
<!-- Install Bootstrap Datepicker -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/APIs/datepicker/css/bootstrap-datepicker3.min.css">
<style type="text/css">.table-hover > tbody > tr:hover
{
color: #FFFFFF;
background-color: #000000;
}
.table-striped > tbody > tr:nth-of-type(odd)
{
background-color: #000033;
}
.table > thead > tr > th,.table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td
{
border-top-color: #660000;
}
.table > thead > tr > th
{
border-bottom-color: #660000;
}
table-bordered
{
border-color: #660000;
}
.table-bordered > thead > tr > th,.table-bordered > tbody > tr > th,.table-bordered > tfoot > tr > th,.table-bordered > thead > tr > td,.table-bordered > tbody > tr > td,.table-bordered > tfoot > tr > td
{
border-color: #660000;
}
.table-bordered th,.table-bordered tdborder-color
{
#660000: undefined;
}
.slider
{
background-color: #000033;
}
.slider:before
{
background-color: #808080;
}
input:checked:disabled + .slider
{
background-color: #FFFFFF;
}
input:disabled + .slider
{
background-color: #FFFFFF;
}
input:checked + .slider
{
background-color: #9999FF;
}
input:focus + .slider
{
box-shadow-color: #9999FF;
}
.cb-std:before
{
color: #99FF99;
}
.cb-std:checked:before
{
color: #99FF99;
}
.rb-std:before
{
color: #99FF99;
}
.rb-std:checked:before
{
color: #99FF99;
}
legend
{
border-bottom-color: #FF9999;
}
tooltip
{
color: #FFFFFF;
background-color: #000000;
}
tooltip-inner
{
color: #FFFFFF;
background-color: #000000;
}
</style>
</head>
<body href-link="drilldown.php" session-timeout="600" popup-time="30" style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">
<!-- Timeout Modal Dialog -->
<div class="container">
<!-- Modal -->
<div class="modal fade" id="logoutDialogBox" role="dialog" style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" id="logoutHead">
<h4 class="modal-title">Login Session Expired</h4>
</div>
<div class="modal-body" id="logoutBody">
<p>You have been inactive for some time. Your session will expire
in <span id="logoutTime"></span> seconds. Click on
the Stay Logged In button to stay logged in, or to logout now, click
the Logout button.</p>
</div>
<div class="modal-footer" id="logoutFoot">
<button type="button" class="btn btn-default" id="buttonStayLoggedIn">Stay Logged In</button>
<button type="button" class="btn btn-default" id="buttonLogout">Logout</button>
</div>
</div>
</div>
</div>
</div>
<!-- Beginning of header Nav Bar -->
<div id="navigationBarHeader">
<!-- Navbar header with logo, time, and logout button -->
<nav id="navigationBar" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<!-- Sea-Core Logo Image -->
<img class="navbar-brand" alt="Brand" src="http://localhost:22080/core/images/branding/base_small.png">
<!-- Div for the time -->
<div class="navbar-text" id="timeday">9:29:11 PM</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Nav Bar, Left Side -->
<ul class="nav navbar-nav">
<button type="button" id="returnHome" class="btn btn-default navbar-btn">Home</button>
</ul>
<!-- Nav Bar, Right Side -->
<ul class="nav navbar-nav navbar-right">
<li>
<!-- All pages have the logout button -->
<button type="button" id="logout" class="btn btn-default navbar-btn">Logout</button>
</li>
</ul>
<span class="icon-bar"> </span>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- End of header Nav Bar -->
<!-- Beginning of function bar -->
<nav id="functionBar1" class="nav nav-inline" hidden="">
<button type="button" id="something" class="btn btn-default navbar-btn">Item 1</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 2</button>
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="something" class="btn btn-default navbar-btn">Item 3.1</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 3.2</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="something" class="btn btn-default navbar-btn">Item 4.1</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 4.2</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 4.3</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 4.4</button>
</div>
</nav>
<!-- End of function bar -->
</div>
<!-- Start of main content area -->
<div id="mainFrame">
<div style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0);" id="errorTarget"></div>
<div style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0);" id="responseTarget"></div>
<div class="row row-list">
<div id="link-nav" class="col-xs-2 link-nav-div"></div>
<div id="main" class="col-xs-8 link-main-div">
<div>
<div class="row" style="place-content: center; text-align: center;">
<span style="font-size: 24px; font-weight: bold;">Drill Down Test Module</span>
<span> </span>
</div>
<div class="row" style="place-content: center; text-align: center;">
<span style="font-size: 24px; font-style: italic;">Users</span>
</div>
</div>
<div class="image-border" style="left: 67px !important; width: 1211px !important; height: 6px !important; padding-bottom: 18px !important; padding-top: 12px !important;">
<canvas width="1211" height="6"></canvas>
</div>
<form class="form-horizontal">
<div class="row">
<div class="container" id="ddlink" style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">
<div class="flex-box-row" id="xddlink2">
<span class="text-control"> 0 </span>
<span class="text-control"> 1 </span>
<span class="text-control"> 2 </span>
<span class="text-control"> 3 </span>
<span class="text-control"> 4 </span>
<span class="text-control"> 5 </span>
<span class="text-control"> 6 </span>
<span class="text-control"> 7 </span>
<span class="text-control"> 8 </span>
<span class="text-control"> 9 </span>
<span class="text-control"> A </span>
<span class="text-control"> B </span>
<span class="text-control"> C </span>
<span class="text-control"> D </span>
<span class="text-control"> E </span>
<span class="text-control"> F </span>
<span class="text-control"> G </span>
<span class="text-control"> H </span>
<span class="text-control"> I </span>
<span class="text-control"> J </span>
<span class="text-control"> K </span>
<span class="text-control"> L </span>
<span class="text-control"> M </span>
<span class="text-control"> N </span>
<span class="text-control"> O </span>
<span class="text-control"> P </span>
<span class="text-control"> Q </span>
<span class="text-control"> R </span>
<span class="text-control"> S </span>
<span class="text-control"> T </span>
<span class="text-control"> U </span>
<span class="text-control"> V </span>
<span class="text-control"> W </span>
<span class="text-control"> X </span>
<span class="text-control"> Y </span>
<span class="text-control"> Z </span>
</div>
</div>
</div>
</form>
<div class="image-border" style="left: 168px !important; width: 1009px !important; height: 6px !important; padding-bottom: 18px !important; padding-top: 12px !important;">
<canvas width="1009" height="6"></canvas>
</div>
<div class="row">
<div class="container" id="dddata">
</div>
</div>
<div class="image-border" style="left: 67px !important; width: 1211px !important; height: 6px !important; padding-bottom: 18px !important; padding-top: 12px !important;">
<canvas width="1211" height="6"></canvas>
</div>
<div class="bottom-links">
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-2">
<a onclick="window.open('http://localhost:22080/core/misc/privacy.php');">Privacy Policy</a>
</div>
<div class="col-xs-2">
<a onclick="window.open('http://localhost:22080/core/misc/cookie.php');">Cookie Policy</a>
</div>
<div class="col-xs-2">
<a onclick="window.open('http://localhost:22080/core/misc/about.php');">About Us</a>
</div>
<div class="col-xs-2">
<a onclick="window.open('http://localhost:22080/core/misc/contact.php');">Contact Us</a>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
<div class="vspace10"></div>
</div>
<div id="link-stat" class="col-xs-2 link-status-div"></div>
</div>
</div>
<!-- End of main content area -->
<div>
<form id="token_form">
<input type="hidden" name="token_data" id="token_data" value="144542ef22e58a893ce414ddbd3cdad9342037fe12194ad94003f6ac85471b53">
</form>
</div> <!-- Install Timer -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/timer.js"></script>
<!-- Install regular jQuery -->
<script type="text/javascript" src="http://localhost:22080/APIs/jquery/BaseJQuery/jquery-3.3.1.min.js"></script>
<!-- Install Bootstrap -->
<script type="text/javascript" src="http://localhost:22080/APIs/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- Install FontAwsome -->
<script type="text/javascript" src="http://localhost:22080/APIs/fontawsome/fontawesome-free-5.15.1-web/js/fontawesome.min.js"></script>
<!-- Install Logout Modal Handlers -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/modal.js"></script>
<!-- Common Javascript -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/common.js"></script>
<!-- Install Custom Checkbox -->
<script src="http://localhost:22080/APIs/checkbox/dist/js/bootstrap-checkbox.js"></script>
<!-- Install Datepicker -->
<script src="http://localhost:22080/APIs/datepicker/js/bootstrap-datepicker.min.js"></script>
<!-- Install Header Custom JavaScript -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/header.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/common.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/html.js"></script>
<script type="text/javascript" src="http://localhost:22080/test/drilldown.js"></script>
<!-- Checkbox Boot Script -->
<script type="text/javascript">
function featureCheckbox() {
$(':checkbox').checkboxpicker({
html: true,
offLabel: '<span class="glyphicon glyphicon-remove">',
onLabel: '<span class="glyphicon glyphicon-ok">'
});
}
</script>
<!-- Tooltip Boot Script -->
<script type="text/javascript">
function featureTooltip() {
$('[data-toggle="tooltip"]').tooltip();
}
</script>
<!-- Datepicker Boot Script -->
<script type="text/javascript">
function featureDatepicker() {
$('.datepicker').datepicker();
}
</script>
</body>
</html>
And here is the relevant CSS:
/* Flex boxes */
.flex-box-row {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
overflow-wrap: break-word;
overflow: hidden;
}
.flex-box-row>*{
flex: 0 0 auto;
}
span.text-control {
font-size: 14pt;
font-weight: bold;
cursor: pointer;
}
Here are some other screenshots that shows the results of other solutions that I have tried:
In this one, the zero is truncated from the beginning.
Here part of the beginning and ending text is cut off.
NOTE: overflow-wrap and overflow CSS attributes have no effect. I've tried it both ways.
NOTE: Since there are a series of SPAN elements as the flex child, I tried adding min-width: 0; as suggested by some of the linked questions but it does not work.
NOTE: This is related to another question here about partitioning large database tables into smaller pieces. That is located here:
Splitting up large data sets into smaller pieces for web viewing Needless to say, I have solved that problem.
Basically, anything that is outside the parent container in those two boxes is not displayed (you can't even click on them), but then content displays normally on the next line. As shown in the image with the flexbox highlighted, it extends past the container. I need to constrain that.
Also Bootstrap 3 is being loaded, but is not being used for the flexbox.
Research
I have done a lot of research into this over the past two days and here's what I have found:
Prevent flex items from overflowing a container
Flexbox item multiline text overflow
Truncated text in nested flexbox items
Centering Items with Flexbox and Overflow
Flexbox items with block content overflow the flexbox container
https://codepen.io/ScottWhittaker/pen/apKqpK
https://css-tricks.com/flexbox-truncated-text/
And many more....
Things that I have tried
I have tried multiple solutions with varying results. However, the main issue of truncating the items is still there no matter what solution that I have tried.
EDIT: 06/05/2021 2230 PDT
As people have pointed out about mixing inline and stylesheets, I'm working on that right now. However, the big issue here is that SOME mixing between stylesheets and inline styles cannot be avoided. The primary reason are theme colors (kinda hard to have many themes with stylesheets) and computed sizes such as the image-border stuff. Also some of the font things with the title headers must also be specified inline because JSON from the server can specify it. Everything inside the DIV with id="main" is generated on the client with JavaScript that interprets JSON from the server. Everything else is a template page that's generated by PHP on the server. Furthermore, when I try to do a minimal code set to reproduce the problem, I can't. That tells me that it's a stylesheet causing the problem, but I'm not sure which one. Bootstrap 3 is being loaded and used throughout the page. I wonder if it's a Bootstrap problem or a problem with one of my stylesheets. I will continue to try to build a minimal example to reproduce the problem though. As for all the external links pointing to localhost, I'm working on that as well.
I would recommend first of all not to mix up inline styles and stylesheets so much - its very hard to tell whats the issue when there is so many inline styles in a large html document. (Also keep in mind any inline styles will take presedence over your classes in the external stylesheet)
Maybe you could supply a minimal reproduction of the error with only the bit of HTML and CSS that is relevant to the problem in a codepen or a jsfiddle? It would make it much easier to help you
After doing a considerable amount of research, testing, and debugging, I found the problem. It seems that bootstrap-3's container class was the culprit. Removing that class for the HTML hierarchy corrected the problem in all cases. With that in mind, I took a look at the class. It had different properties depending on the width of the window. Looking at the docs, it's part of the responsive page functionality which allows a page to be optimally viewed on different size devices.
It was also causing a problem with tables too. Rows would have missing columns. That has been corrected as well.
Thank you to everyone who responded.
I followed the example code here to put a dismissible drawer under a top app bar but it doesn't work.
Here is what I tried:
// Note: these styles do not account for any paddings/margins that you may need.
body {
display: flex;
height: 100vh;
}
.mdc-drawer-app-content {
flex: auto;
overflow: auto;
position: relative;
}
.main-content {
overflow: auto;
height: 100%;
}
.app-bar {
position: absolute;
}
// only apply this style if below top app bar
.mdc-top-app-bar {
z-index: 7;
}
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Default Page Title</title>
<link rel="stylesheet" type="text/css" href="drawer.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="./drawer.css">
</head>
<header class="mdc-top-app-bar app-bar" id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="mdc-top-app-bar__navigation-icon mdc-icon-button material-icons" href="#">menu</button>
<span class="mdc-top-app-bar__title">Dismissible Drawer</span>
</section>
</div>
</header>
<aside class="mdc-drawer mdc-drawer--dismissible mdc-top-app-bar--fixed-adjust">
<div class="mdc-drawer__content">
<div class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
<span class="mdc-list-item__text">Inbox</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
<span class="mdc-list-item__text">Outgoing</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
<span class="mdc-list-item__text">Drafts</span>
</a>
</div>
</div>
</aside>
<div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust">
<main class="main-content" id="main-content">
App Content
</main>
</div>
<body>
<script src="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.js"></script>
<script>
// Instantiate MDC Drawer
const drawerEl = document.querySelector('.mdc-drawer');
const drawer = new mdc.drawer.MDCDrawer.attachTo(drawerEl);
// Instantiate MDC Top App Bar (required)
const topAppBarEl = document.querySelector('.mdc-top-app-bar');
const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarEl);
topAppBar.setScrollTarget(document.querySelector('.main-content'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
</script>
</body>
</html>
In order to have the header on the side of the dismissble drawer, you need the following structure:
// Instantiate MDC Drawer
const drawerEl = document.querySelector('.mdc-drawer');
const drawer = new mdc.drawer.MDCDrawer.attachTo(drawerEl);
// Instantiate MDC Top App Bar (required)
const topAppBarEl = document.querySelector('.mdc-top-app-bar');
const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarEl);
topAppBar.setScrollTarget(document.querySelector('.main-content'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
// Note: these styles do not account for any paddings/margins that you may need.
body {
display: flex;
height: 100vh;
}
.mdc-drawer-app-content {
flex: auto;
overflow: auto;
position: relative;
}
.main-content {
overflow: auto;
height: 100%;
}
.app-bar {
position: absolute;
}
// only apply this style if below top app bar
.mdc-top-app-bar {
z-index: 7;
}
<!-- IMPORTS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap">
<link rel="stylesheet"
href="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- CONTENT -->
<aside class="mdc-drawer mdc-drawer--dismissible">
<div class="mdc-drawer__content">
<div class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated"
href="#"
aria-current="page">
<i class="material-icons mdc-list-item__graphic"
aria-hidden="true">inbox</i>
<span class="mdc-list-item__text">Inbox</span>
</a>
<a class="mdc-list-item"
href="#">
<i class="material-icons mdc-list-item__graphic"
aria-hidden="true">send</i>
<span class="mdc-list-item__text">Outgoing</span>
</a>
<a class="mdc-list-item"
href="#">
<i class="material-icons mdc-list-item__graphic"
aria-hidden="true">drafts</i>
<span class="mdc-list-item__text">Drafts</span>
</a>
</div>
</div>
</aside>
<div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar app-bar"
id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="mdc-top-app-bar__navigation-icon mdc-icon-button material-icons"
href="#">menu</button>
<span class="mdc-top-app-bar__title">Dismissible Drawer</span>
</section>
</div>
</header>
<main class="main-content"
id="main-content">
App Content
</main>
</div>
<!-- IMPORTS -->
<script src="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.js"></script>
Changes to make this work:
First, you don't need the class mdc-top-app-bar--fixed-adjust since we won't need to adjust the items anymore
Next, move the header itself into the app content (here, called mdc-drawer-app-content).
I looked at this example's HTML in order to see how they did it themselves
Here is the custom CSS that worked for me. Mine is a permanent drawer, so you may need some JS to apply the changes dynamically if you want the drawer to be dismissible, but it solves the layout issues.
First, the critical bit:
.mdc-drawer {
position: fixed;
top: 64px;
}
Since the drawer is now fixed-position, it no longer affects the layout, and the top bar sees it has room to fill the whole width of the page. Pushing the drawer down 64 px keeps it from covering the top bar.
However, this has some side-effects that have to be dealt with. First, most obviously, your main content does the same thing the top bar does--it thinks it has room to fill the whole page, so it gets lost behind the drawer. This is fixable by simply pushing it over:
main {
margin-left: 255px;
}
Second, you will notice that if you resize the viewport, the drawer doesn't show a scroll bar when it should, and when the scroll bar does appear, it won't go all the way to the bottom. This is because you've pushed the bottom of the drawer down off the page.
To fix this, make the drawer's scrollable content shorter:
.mdc-drawer__content {
height: calc(100% - 128px);
}
(I would have expected it to be 100% - 64px, but for some reason it needs 128. I haven't figured out why.)
I've created a basic horizontal navigation bar. It has your generic options: Homepage, contact us, about, and games. However, even though contact us, games, and Homepage are close together, I want to make it so about is on the opposite side of the web page/navigation bar, far away from the others but still connected to it through a huge empty space of the navigation bar. How would I go about doing this? Below is my current CSS code if it helps:
.horiznavli {
display: inline;
padding:20px 32px 20px;
border-color: #333333;
background-color: #333;
color:white;
text-align: center;
font-family: "Lucida Grande", Times, Serif
}
.horiznavli:hover{
background-color: #4CAF50;
}
.horiznavli:active{
background-color: grey;
}
#HorizNav{
position: relative;
left: -60px
}
#HorizNav #spaced {
}
EDIT: My apologies here is the HTML code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="frontpage.css">
<meta charset="UTF-8">
<meta name="description" content="Official Dark Matter Studios site">
<meta name="keywords" content="HTML, Studio, Game, Dark Matter">
<meta name="author" Content="Matt Jones">
<title> Dark Matter Studios </title>
</head>
<body>
<ol id = "HorizNav" style = "list-style-type:none">
<li class = "horiznavli"> HomePage </li>
<li class = "horiznavli"> About </li>
<li class = "horiznavli"> Games </li>
<li class = "horiznavli" id = "spaced"> Conact Us </li>
</ol>
<h1 id="title_screen"> Dark Matter Studios</h1>
<div id="wrapper">
<h1> What is Dark Matter Studios all about? </h1>
<p> Dark Matter studios is an independent game development dedicated to producing quality games out of a passion and love for gaming.<br>
Born from the frustration of anti-consumerism, microtransactions and DLC eccentric practices held by many AAA companies </p>
<br>
<br>
<h1> WHAT WE'RE ALL ABOUT </h1>
<p> Dark Matter Studios was founded around the principle of honesty and integrity with our fans. After all, without them we wouldn't get anywhere! Though Dark Matter studios holds itself responible the following standards: </p>
<ol style="list-style-type: circle">
<li> Honesty with our customers. </li>
<li> No Microtransactions or overpriced DLC</li>
<li> We are honest with our customers, we don't promise things and not deliver</li>
<li> We promise high quality games, with no graphical downgrades on release</li>
<li> We stick to our word, we do not mislead our customers to gain a quick buck off them</li>
</ol>
</div>
</body>
</html>
.horiznavli {
float:left;
padding:20px 32px 20px;
border-color: #333333;
background-color: #333;
color:white;
text-align: center;
font-family: "Lucida Grande", Times, Serif
}
.horiznavli:hover{
background-color: #4CAF50;
}
.horiznavli:active{
background-color: grey;
}
#HorizNav{
position: relative;
left: -60px
}
#HorizNav #spaced {
}
#HorizNav.ul li:nth-child(3)
{
float:right!important;
margin-left:100px!important;
}
It's better if you had added your html code as well. Anyway if you are using bootstrap you can use this code and no need of css.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Homepage <span class="sr-only">(current)</span></li>
<li>Contact us</li>
<li>Games</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Otherwise if you are using html and css only, use this code.
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Games</li>
<li>Contact</li>
<li style="float:right">About</li>
</ul>
</body>
Tell me if this is what you wanted.
I'm new to html and css. I'm trying to learn them but I have been having some issues. Basically I've been trying to create the website with the background image that has the navbar along the top (this works when previewing with brackets not yet here).
Can I change the colour of the navbar?
Also, how to have h5 header centred on the left side of the page, with h5 header below it, but as four lines, not as 2 long ones overlaying the image.
If anyone could help out that'd be great.
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
}
.txtpic {
position: absolute;
text-align: center;
background-image: http: //i.imgur.com/pE2NrKh.jpg;
color: white;
}
.list {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 25px;
font-weight: bolder;
}
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<title>Kyrgystan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<title>Kyrgystan exped</title>
<link href="Calums2.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
</head>
<body>
<img height="100%" src="http://i.imgur.com/pE2NrKh.jpg" style="position: relative; top: 0; left: 0;" width="100%">
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li>Home
</li>
<li>Team
</li>
<li>Krygyzstan
</li>
<li>Blog
</li>
<li>Expeditions
</li>
</ul>
</nav>
<style>
text-align:justify;
</style>
</div>
<div class="txtpic" style="top: 100%;">
<div class="row-sm-3"></div>
<h3>Title is H3</h3>
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div>
</body>
</html>
if you want to change your navbar text color try with
.navbar-default .navbar-nav>li>a {
color: red !important;
}
EDIT:
Let say this is the html markup
<nav class="navbar navbar-default" 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" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Team
</li>
<li>Krygyzstan
</li>
<li>Blog
</li>
<li>Expeditions
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="list">
<div class="txtpic" style="text-align: center">
<h3>Title is H3</h3>
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div>
</div>
1- / youre previous code you was trying to put an image as an background with img element
1-1/ better way to do it with css just
.list {
background: url(http://i.imgur.com/pE2NrKh.jpg);
background-size: cover;
}
also you said that you cant change the color of your navbar text, you need to select the a element with .navbar-nav > li > a
.navbar-nav > li a{
color: white !important
}
For having the contents of h5 as 4 lines instead of the default way they appear try using the <br> tag. This tag breaks the line and starts a new line. So you could write it the following way:
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips.
<br> We have over a thousand nights under canvas between us, and there are more in the pipeline.
<br> We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart.
<br> So far our outings have taken us across Europe, Asia and Africa.
</h5>
check out the following link to help you understand this tag better
The reason why this is not on top of the background image is that you have defined absolute positioning in the class 'txtpic'. try changing it to something else and tell me what happens.
Also the navbar background-color seems to change when i try to do so. If you want to change the text color use 'color:' instead of 'background-color'.
I am trying to align three images (in a bootstrap row) to be vertically central (currently the images are at the top, but I want the choice to either centre them vertically or pull it to the bottom
Here is the image
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Vintarn Burmese</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
<style>
.navbar-default {
margin-top: 30px;
background-color: transparent;
border: hidden;
}
.navbar-default ul {
margin-top: 5px;
font-family: sans-serif;
font-size: 1.1em;
}
.navbar-default li {
font-family: sans-serif;
background-color: rgba(255,253, 208, 0.7);
border-radius: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
.navbar-brand {
font-family: 'Marck Script', cursive;
font-size: 2.5em;
}
.testDiv {
height: 100%;
width: 100%;
background-color: rgba(255,192,203,0.8);
}
p {
line-height: 170%;
font-family: sans-serif;
}
.lead {
font-family: sans-serif;
font-size: 1.8em;
}
.marginTop {
margin-top: 20px;
}
.frontImage {
width: 90%;
margin-top: 30px;
margin-left: 5%;
margin-bottom: 30px;
height: 100%;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar color-me"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a class="navbar-brand">Vintarn Burmese</a>
</div>
</div> <!-- class="navbar-header" -->
<div class="collapse navbar-collapse navbar-right listing">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li data-toggle="modal" data-target="#aboutModal">Kittens</li>
<li data-toggle="modal" data-target="#contactModal">My Cats</li>
<li>History</li>
<li data-toggle="modal" data-target="#aboutModal">About Millie</li>
<li data-toggle="modal" data-target="#contactModal">Links</li>
<li data-toggle="modal" data-target="#contactModal">Gallery</li>
<li data-toggle="modal" data-target="#contactModal">Contact Us</li>
</ul>
</div> <!-- class="collapse navbar-collapse" -->
</div> <!-- class="container" -->
</div> <!-- class="navbar navbar-default" -->
<div class="testDiv">
<div class="container contentContainer" id="">
<div class="row-fluid">
<div class="col-md-4 col-sm-4">
<img src="images/landing/bvna-member-signature.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
<div class="col-md-4 col-sm-4">
<img src="images/landing/Vania-8-mths-2.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
<div class="col-md-4 col-sm-4">
<img src="images/landing/gccflog.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
</div>
<div class="col-md-8 col-md-offset-2 col-sm-12 marginTop" id="">
<h1 class="lead">Welcome to the story of the Vintarn Burmese...</h1>
<p>My name is Christine Stalker and the first Burmese to come into my life was a brown girl called 'Floo'. She belonged to a vet I worked for in London in 1972 whilst training to be a veterinary nurse and she was simply the naughtiest cat I'd ever met - but she was utterly adorable! I promised myself that one day, I would have a Burmese of my own... Three years later, in 1975, whilst working in Bedford as a newly qualified veterinary nurse, I bought my own very first Burmese (a brown tortie) called Tantabin Amazing Grace - better known as "Eccles" from a local breeder, Mrs Bettina Stapleton. Bettina mentored me into showing and breeding and thus began what has become, over the past 40 years, an enduring "love affair" with Burmese cats! I am a qualified Registered Veterinary Nurse (RVN) and I worked full time in Veterinary Practice for 30 years, until 2002. This was followed by four years in publishing at OUR CATS in Manchester. From 2006 - 2011 I owned & published a trade magazine. I now work part-time for a local charity - this means I get to spend lots of time at home with my cats. I share my home in Cheshire with three adorable Burmese cats. Two are now retired from breeding and have been neutered, they are: 'Whisper' (Imperial Grand Champion & Imperial Grand Premier Vintarn Whisper a Wish) and 'Bo' (Champion Vintarn Rosies Rainbow) - who is Whisper's daughter. Last but not least, is my latest addition, a lilac girl called 'Lyra' (Vintarn Lilac Lyra) I am hoping that Lyra will have her first litter in 2015. My prefix, Vintarn, was registered with the G.C.C.F. in 1977. I enjoy showing my beautiful cats at Championship Shows in the UK, and was delighted when my lilac tortie, Vania, became my first Grand Champion on 8th March 2008! Vania is now retired and lives a life of luxury in Southport! Whisper, Vania's daughter made me very proud in November 2009, by becoming Best of Variety Burmese at the Cheshire Area Cat Show. She was then became a Grand Champion on 6th February 2010, at the Shropshire Cat Show, following in her mother's footsteps! She has subsequently gone on to gain the dual title of Imperial Grand Champion & Imperial Grand Premier. Whilst I enjoy showing, my cats are, first and foremost, my beloved pets.
</p>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Marck+Script::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
</body>
</html>