My goal is to have my website as 100% device height, without a scroll bar at all if not imposed by text size.
It's a 6 by 3 grid:
- My Name (col-4) | Menu (col-8)
- My Photo (col-4) | My Text (col-8)
- Blank space (col-4 using offset) | Footer (col-8)
In xs size, it should look like this:
- My Name (col-8) | Menu (col-4) as a collapsable toggle menu
- My Text (col-12)
- Footer (col-12)
I'd like My Name aligned to the bottom and the right its own column at all times. My main issue is centering the toggle menu in its own column and perhaps vertica aligned to the bottom, so it's in vertical alignment with My Name. Also, I'd like to keep no margins nor padding between columns/rows.
Due to width restrictions that I set to my navbar for this customization, I can't seem to use the bootstraps default navbars and adjust it what I have in mind so I've been copying and pasting code. This is my 1st website and I'm basically learning along the way it's possible both HTML and CSS are not optimized.
Full code below:
html, body {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
background-color: beige;
}
nav {
height: 20%;
width:100%;
background-color: red;
display: table;
}
#navbar {
height: 20%;
background-color: red;
display: table;
vertical-align: bottom;
float: right;
}
.list {
display:inline-block;
margin-bottom: 10px;
margin-right: 40px;
margin-left: 40px;
text-align: center
}
ul {
display: table-cell;
vertical-align: bottom;
background: MidnightBlue;
text-align: center;
height: 100%;
width:100%;
float: none;
}
#wrapper {
margin: 0px 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#content {
height: 70%;
background-color: transparent;
display:table;
table-layout: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.row {
display:table-row;
background: transparent;
}
.col-left {
display: table-cell;
vertical-align: middle;
background: MidnightBlue;
text-align: center;
float:none;
}
.col-right {
display: table-cell;
vertical-align: middle;
background: ForestGreen;
text-align: center;
float:none;
}
img {
height: auto;
width: 90%;
max-width: 100%;
max-height: 100%;
}
p {
color: black;
}
footer {
height: 10%;
background-color: red;
font-size: 20px;
}
.no-padding {
padding: 0 !important;
margin: 0 !important;
}
.social {
float: right;
margin-right: 20px;
margin-top: 20px;
}<!DOCTYPE html>
<html>
<head>
<title>Playground</title>
<meta charset ="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='style.css' rel='stylesheet'>
</head>
<div id="wrapper">
<nav class="col-xs-8 col-sm-4 col-md-4 col-lg-4 no-padding">
<div class="row">
<h1 id="Brand" style="text-align: right; display:table-cell;vertical-align: bottom">Me, Myself and I</h1>
</div>
</nav>
<nav class="hidden-xs col-sm-8 col-md-8 col-lg-8 no-padding">
<div class="row">
<ul>
<li class="list"><a href="default.html">Home</a></li>
<li class="list"><a href="news.html">News</a></li>
<li class="list"><a href="contact.html">Contact</a></li>
<li class="list"><a href="about.html">About</a></li>
</ul>
</div>
</nav>
<nav style="background-color: blue; vertical-align: middle; line-height: 50px" class="navbar navbar-default col-xs-4 hidden-sm hidden-md hidden-lg no-padding">
<div class="container-fluid no-padding", style="position: absolute;; text-align: center;">
<div style="display:table-cell;position:absolute; vertical-align: middle">
<!-- Brand and toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" id="navbar" >
<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 no-padding" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav hidden-sm hidden-md hidden-lg no-padding">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="clearfix visible-xs-block"></div>
<body>
<div id="content">
<div class="row">
<div class="col-left hidden-xs col-sm-4 col-md-4 col-lg-4 no-padding">
<div class="content-table">
<img src="images/side.jpg", alt="Me", title="Hello, said me">
</div>
</div>
<div class="col-right col-xs-12 col-sm-8 col-md-8 col-lg-8 no-padding">
<div class="content-table">
<h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...</h1>
</div>
</div>
</div>
</div>
</body>
<footer class= "col-xs-12 col-sm-8 col-sm-offset-4 col-md-8 col-md-offset-4 col-lg-8 col-lg-offset-4">
Bye
<ul2 style="list-style-type:none">
<li class="social"><a href="#"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></li>
</ul2>
</footer>
</div>
</html>