Hi guys I am trying to add to my page a menu bar down the left hand side
my issue is its pushing all the html below this out of line. The menu bar is showing but its not able to be clicked on.
How can I sort this issue please..
Many thanks in advance
here is some code I added to the HTML and the Stylesheet.
HTML
<!DOCTYPE html>
<html>
<head>
<meta https-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Site tile </title>
<div id="wrapper">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
<a class="active" href="https://Sitehere.com"><i class="fa fa-home"></i></a>
<i class="fa fa-search"></i>
</i>
<i class="fa fa-globe"></i>
</div>
<!--CSS-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-light.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--/CSS-->
<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.plugin.js"></script>
<script src="js/jquery.countdown.js"></script>
<script>
This is what I added to the style sheet..
}
.icon-bar {
width: 90px; /* Set a specific width */
background-color: #555; /* Dark-grey background */
}
.icon-bar a {
display: block; /* Make the links appear below each other instead of side-by-side */
text-align: center; /* Center-align text */
padding: 16px; /* Add some padding */
transition: all 0.3s ease; /* Add transition for hover effects */
color: white; /* White text color */
font-size: 36px; /* Increased font-size */
}
.icon-bar a:hover {
background-color: #000; /* Add a hover color */
}
.active {
background-color: #4CAF50; /* Add an active/current color */
}
How do i stop this pushing all the HTML text below down the page? and is there any reason the bar can be seen but not interacted with?
many thanks in advance!
FULL HTML
<!DOCTYPE html>
<html>
<head>
<meta https-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Coming Soon </title>
<div id="wrapper">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
<a class="active" href="https://EXAMPLE.COM"><i class="fa fa-home"></i></a>
<i class="fa fa-search"></i>
</i>
<i class="fa fa-globe"></i>
</div>
<!--CSS-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-light.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--/CSS-->
<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.plugin.js"></script>
<script src="js/jquery.countdown.js"></script>
<script>
$(function () {
$('#defaultCountdown').countdown({until: new Date(2017, 8-1, 25)});
//Replace above date with your own, to find out more visit https://keith-wood.name/countdown.html
});
</script>
<!--/JS-->
</head>
<script type="text/javascript"> //<![CDATA[
var tlJsHost = ((window.location.protocol == "httpss:") ? "httpss://secure.comodo.com/" : "https://www.trustlogo.com/");
document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E"));
//]]>
</script>
<body>
<!--DARK OVERLAY-->
<div class="overlay"></div>
<!--/DARK OVERLAY-->
<!--WRAP-->
<div id="wrap">
<!--CONTAINER-->
<div class="container">
<img src="images/LOGO.png" alt="LOGO" class="image-align" />
<h1>
<span>We are</span><br/>
Reaching For <span class="yellow">The Moon.</span>
</h1>
<p>SITE TEXT HERE.</p>
<div id="defaultCountdown"></div>
<form action="#">
<input type="text" name="email" id="email" value="Subscribe to find out when we are done">
<input type="submit" value="GO!">
</div>
</form>
<p class="copyright">Designed by Investex.pro</p>
<img src="images/comodo_secure_seal_76x26_transp.png" alt="Comodo" class="image-align" />
</div>
<!--/CONTAINER-->
<!--/WRAP-->
<script language="JavaScript" type="text/javascript">
TrustLogo("https://EXAMPLE.COM/images/comodo_secure_seal_76x26_transp.png", "CL1", "none");
</script>
Comodo SSL
</body>
</html>
To stop the bar pushing the following content down, you can just set it to float: left; to take it out of the normal text flow and put it to the left. Now the text will appear next to the bar.
Also if you can't click on the bar, there is maybe a hidden div with a higher z-index. I would recommend checking your web inspector to find out, why you can't click on the bar.
Also: Make sure, your markup is valid! Your head section is a bit messy. <div> elements e.g. don't belong here.
.icon-bar {
width: 90px;
background-color: #555;
float: left;
margin-right: 1em;
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="wrapper">
<div class="icon-bar">
<a class="active" href="https://Sitehere.com"><i class="fa fa-home"></i></a>
<i class="fa fa-search"></i>
</i>
<i class="fa fa-globe"></i>
</div>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
you should replace your html down the link tags and close the head tag
<!DOCTYPE html>
<html>
<head>
<meta https-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Site tile </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--CSS-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-light.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--/CSS-->
</head>
<div id="wrapper">
<div class="icon-bar">
<a class="active" href="https://Sitehere.com"><i class="fa fa-home"></i></a>
<i class="fa fa-search"></i>
</i>
<i class="fa fa-globe"></i>
</div>
</div>
<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.plugin.js"></script>
<script src="js/jquery.countdown.js"></script>
<script>
you should change the background color for the a element
}
.icon-bar a {
display: block; /* Make the links appear below each other instead of side-by-side */
background:#555;
text-align: center; /* Center-align text */
padding: 16px; /* Add some padding */
transition: all 0.3s ease; /* Add transition for hover effects */
color: white; /* White text color */
font-size: 36px; /* Increased font-size */
}
Related
This question already has answers here:
Li item on two lines. Second line has no margin
(8 answers)
How to keep indent for second line in ordered lists via CSS?
(14 answers)
Closed 5 months ago.
Here is a inner section of a page :
The word office is falling right under the fontawesome icon and I want it to align with the text above it.
Code snippet:
.tabcontent {
float: left;
padding: 100px 30px;
border: none;
width: 33%;
border-left: none;
height: 580px;
background: #fff;
box-shadow: 0 -6px white, 0 6px white, -5px -9px 8px 4px #88888878, 5px -9px 8px 4px #88888878;
}
#ctab2 p,
#ctab4 p {
display: inline;
color: #000;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="ctab2" class="tabcontent">
<h3>Place of Service</h3>
<h5>Application Submission</h5>
<i class="fa fa-map-pin"></i>
<p>  Sharjah Ports Website</p>
<i class="fa fa-clock-o"></i>
<p>24 x 7</p><br><br>
<h5>Processing & Approval</h5>
<tr>
<td>
<i class="fa fa-map-pin"></i></td>
<td>
<p> &demo123 game Security & jikoi Dept. Office</p>
</td>
</tr><br>
<i class="fa fa-clock-o"></i>
<p>Monday – Thursday, 07:30 – 15:30</p><br><br>
</div>
you can use flexbox and put two elements in row, center the elements vertical
.container {
display:flex;
align-items: center;
}
.icon {
width: 24px;
height: 24px;
margin: 4px;
background-color: #cccccc;
}
.container-text {
margin: 0
}
css above and html
<div class="container">
<div class="icon"></div>
<p class="container-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
Replace the icon with your icon.
Don't use tr and td elements without table element, use some other elements like div or section
Don't use   in your p element, use margin or padding in css of the p element instead
there are different solutions. one of them is using the display flex.
but anyway good work. i would have stayed away from the float though. it may cause alot of issues for display.
also and should just be used inside
.tabcontent {
float: left;
padding: 100px 30px;
border:none;
width: 33%;
border-left: none;
height: 580px;
background: #fff;
box-shadow:0 -6px white,
0 6px white, -5px -9px 8px 4px #88888878, 5px -9px 8px 4px #88888878;
}
#ctab2 p,#ctab4 p
{display: inline;
color: #000;
}
.custom-wrapper { display: flex;flex-direction:row;}
.custom-wrapper > .fa {display:inline-block;}
.custom-wrapper > p {margin:0'}
<div id="ctab2" class="tabcontent">
<h3>Place of Service</h3>
<h5>Application Submission</h5>
<i class="fa fa-map-pin"></i>
<p>  Sharjah Ports Website</p>
<i class="fa fa-clock-o"></i>
<p>24 x 7</p><br><br>
<h5>Processing & Approval</h5>
<div class="custom-wrapper">
<i class="fa fa-map-pin"></i>
<p> &demo123 game Security & jikoi Dept. Office</p>
</div>
<br>
<i class="fa fa-clock-o"></i>
<p>Monday – Thursday, 07:30 – 15:30</p><br><br>
</div>
i am trying to build a new bootstrap "frame" template around my website content.
With the navbar i have no problems... But then there are a few problems with the footer.
The footer shall be:
sticky
have 2 rows
a fat gray one with 4 columns of responsive content
a thin black one that ends at the very bottom of the browser content frame
What i have so far:
sticky-footer.css:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 550px;
}
.footer {
background: black;
position: absolute;
bottom: 0;
width: 100%;
}
#contentFooter {
margin: 0px;
width: 100%;
background: dimgray;
padding: 50px 0 40px;
margin-bottom: 30px;
color: #939fa6;
}
#copyrightFooter {
color: black;
line-height: 30px;
}
#backToTopLink::before {
display: block;
content: "";
width: 15px;
height: 15px;
border-left: 1px solid #93959d;
border-top: 1px solid #93959d;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 50%;
top: 13px;
margin-left: -9px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ACME Inc.</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="sticky-footer.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://via.placeholder.com/200x70"></a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Bar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Qux</a>
</li>
</ul>
</div>
</div>
</header>
<div class="container">
<div class="mt-1">
<h1>ACME Inc. presents</h1>
</div>
<p class="lead">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<footer class="footer">
<div id="contentFooter">
<div class="container">
<div class="row">
<div class="col-md-3">
<h6>ACME Inc.</h6>
</div>
<div class="col-md-3">
<h6>How to reach us</h6>
<ul>
<li>foobar#acme.inc</li>
<li>+1 234 567 890</li>
<li>Earth, Milkyway</li>
</ul>
</div>
<div class="col-md-3">
<h6>General</h6>
<ul>
<li>Imprint</li>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
<div class="col-md-3">
<h6>Sponsored by</h6>
<img style="max-width: 100%; height: auto; width: auto; vertical-align: middle;" src="http://via.placeholder.com/350x100">
</div>
</div>
</div>
</div>
<div class="container" id="copyrightFooter">
<div class="row">
<div class="col-md-3">
<small class="text-muted">ACME Inc.</small>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</footer>
</body>
</html>
This does mostly work, but i have 3 remaining problems (see picture also):
When the browser image is so narrow that the responsive style kicks in, i suddenly have a white stripe below the black part of the footer. I would like the black part to continue down to the absolute bottom of the browser window.
I would like the ACME Inc. in the black part of the footer to be centered as soon as the responsive narrowing kicks in.
I need to define body { margin-bottom: 550px; } or otherwise the footer will "eat" some part of the content. The thing is... is there some way to make this "dynamically" so i don't need to recalculate the approximate footer height and refresh it in the body CSS rule?
Screenshot of problems from problem list
I was not able to create a runnable code sample with the stack overflow editor (cannot find the button: https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/), so i created a jsfiddle:
https://jsfiddle.net/8hb4d5t8/1/
When the browser image is so narrow that the responsive style kicks
in, i suddenly have a white stripe below the black part of the footer.
I would like the black part to continue down to the absolute bottom of
the browser window.
Define columns for smaller viewports as well. There are different column definitions for different windows sizes. So your divs should look like this:
<div class="container" id="copyrightFooter">
<div class="row">
<div class="col-3 col-md-3">
<small class="text-muted">ACME Inc.</small>
</div>
<div class="col-6 col-md-6">
</div>
</div>
</div>
This will make your divs have the same relative width as on big screens, if you want them to take a whole row, just set it to:
<div class="col-12 col-md-3"></div>
I would like the ACME Inc. in the black part of the footer to be
centered as soon as the responsive narrowing kicks in.
You can implement css that will only affect a certain screen width. This is done using Media queries.
So if you want to have this centered on small screens, you could do something like
#media screen and (max-width: 992px)
{
.some-css-class{
text-align: center;
}
}
This will only affect screens with a viewport width <= 992px.
The same goes for your third question:
I need to define body { margin-bottom: 550px; } or otherwise the
footer will "eat" some part of the content. The thing is... is there
some way to make this "dynamically" so i don't need to recalculate the
approximate footer height and refresh it in the body CSS rule?
You can define certain margins or paddings for your body element using media queries for different viewport widths.
This is your updated fiddle to this question.
This question already has answers here:
How to keep footer at bottom of screen [duplicate]
(6 answers)
Closed 5 years ago.
I am working on a web application and I am trying to keep my footer with text at the very bottom of the page.
I don't want it to move at all, just to always be at the bottom of the page, no matter the size of the page. As of right now, it works great with most browsers, but once I switch to mobile, it moves to the side of the side of the page.
How would I keep it at bottom for mobile as well?
Thanks!
<html>
<body>
<footer>
<div class="container" style="position:absolute; bottom:0px; left:520px;">
<p>Thank you and Goodbye</p>
</div>
</footer>
</body>
</html>
You can use sticky footer located here https://getbootstrap.com/examples/sticky-footer/ or at https://codepen.io/elmahdim/pen/Djlax. In addition you can also use navbar-fixed-bottom
USING STICKY FOOTER GET HERE https://jsfiddle.net/aice09/zy1x2svg/1/
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://getbootstrap.com/favicon.ico">
<title>Sticky Footer</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="sticky-footer.css" rel="stylesheet">
</head>
<body>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Use the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</body>
</html>
sticky-footer.css
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .text-muted {
margin: 20px 0;
}
USING NAVBAR_FIXED_BOTTOM
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Include this in your footer:
position:fixed;
.container
{
bottom: 0px;
position: fixed;
}
In a responsive design, you shouldn't have to set exact pixels for placing elements. In a mobile screen the width is much smaller, and that could be the cause of the footer moving to the side. Rather, something like this should be more appropriate based on your use-case:
<div class="container" style="position:absolute; bottom:0px; text-align:center;">
<p>Thank you and Goodbye</p>
</div>
If the content can be something other than the text here, an automatic margin, margin: auto;, can be useful.
HTML PART:
<html>
<body>
<div id="content">
<div id="main"></div>
</div>
<div id="bottom"></div>
</body>
</html>
The CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#content {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 180px;
}
#bottom {
position: relative;
margin-top: -180px;
height: 180px;
clear: both;
}
footer{position:absolute;bottom:0px;}
<html>
<body>
<footer>
<div class="container">
<p>Thank you and Goodbye</p>
</div>
</footer>
</body>
</html>
Guess The question is to fix the footer in bottom. The content size may vary but the footer must be visible always and it should be fixed. Here is the code. Hope it will be usefull. The background color are given just to differentiate sections.
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12">
<div class="col-md-12" style="background-color:grey;height:1000px;">Content Here</div>
</div>
<footer>
<div class="col-md-12 container" style="position:fixed; BOTTOM:0px;background-color:red;">
<p class="pull-right">Thank you and Goodbye</p>
</div>
</footer>
</body>
</html>
http://codepen.io/abravo227/pen/MbzxBW
HTML:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
<script type="text/javascript"></script>
</head>
<body>
<div class="navWrapper">
<nav id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div><!--End of Nav-->
<a id ="home" class="smooth"></a>
<div id="page1">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<h1 class="firstTitle text-primary text-center">Hi, I'm First Last</h1>
<h3 class="subTitle text-center">The most interesting man in the world</h3>
<img src="imgage.jpg" class="firstImg center-block img-rounded img-responsive" alt="First Last Resume">
</div>
<div class="col-xs-4 linkedIn"><div class="LI-profile-badge" data-version="v1" data-size="medium" data-locale="en_US" data-type="horizontal" data-theme="dark" data-vanity="#linkedin-info"><a class="LI-simple-link" href='www.linkedin.com'>First Last</a></div></div>
</div>
<div class="row" id="quote">
<div class="col-xs-4"></div>
<div class="col-xs-4"><blockquote><p><em>"Striving for excellence every day, in everything that I do."</em></p><footer>First Last</footer></blockquote></div>
<div class="col-xs-4"></div>
</div>
</div>
</div><!--End of Page 1-->
<a id ="about" class="smooth"></a>
<div id="page2">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 aboutMe"><i class="fa fa-commenting-o" aria-hidden="true"></i>
<h1>About Me</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
</div>
</div><!--end of page 2-->
</body>
</html>
CSS:
#nav {
position: fixed;
width: 100%;
height:50px;
text-align: center;
background-color: gray;
z-index: 1000;
}
#nav ul {
display: inline;
}
#nav li {
display: inline;
}
#nav a {
padding: 14px 16px;
display: inline-block;
color: white;
font-family: sans-serif;
}
#nav a:hover {
background-color: #0C5DA5;
}
#nav a:active {
text-decoration: underline;
color: yellow;
}
blockquote {
text-align: center;
position: relative;
}
#quote {
padding-top: 15px;
}
.linkedIn {
top: 30px;
float: right;
}
.firstTitle{
font-family: lobster, monospace;
color: blue;
}
.subTitle {
position: relative;
top: 0px;
font-family: lobster, monospace;
color: black;
font-size: 15px;
}
.firstImg {
position: relative;
width: 264px;
height: 296px;
border-color: gray;
border-width: 15px;
border-style: solid;
top: 0px;
}
#page1 {
padding-top: 40px;
height: 800px;
}
#page2 {
height: 800px;
background-color: red;
}
Would anyone be able to help me understand why my second page does not open up directly under the nav bar but instead a little bit underneath it? Really spinning my wheels on this one and havent been able to find anything searching.
Thanks in advance!
This is the css for div #page1:
#page1 {
padding-top: 40px;
height: 800px;
}
You need to add padding-top: 60px; on #page2 for your about me page to display properly. You can change the size of the padding as you wish. You need to add the padding because you need to count for the height of the navigation bar when you jump to a part of the page with id. The browser will jump so that the div you are jumping to align exactly to the top of your window. But your navigation bar takes up 50px in height, which is why part of your div #page2 is covered.
Here's my modification: http://codepen.io/anon/pen/WoYmVq
--
Or, you can create an empty div with id #page2 before your current #page2 div, and change your current #page2 div to some other id/class. Give the #page2 div a height of 50px. Now when you click on "About me", you will jump to the empty #page2 div, which will be covered by your navigation bar
Here's a demo: http://codepen.io/anon/pen/VmVNLx
How do I place the button in place shown in the figure using material design?
This is the code on index.html template.
<html>
<head>
{% load staticfiles %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="{% static 'img/book_icon.png' %}">
{% block title %}
<title>Bookstore</title>
{% endblock title %}
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="{% static "css/material.min.css" %}">
<link rel="stylesheet" href="{% static "css/styles.css" %}">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
</head>
<body>
<div class="demo-layout mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100">
<header class="demo-header mdl-layout__header mdl-layout__header--scroll mdl-color--grey-100 mdl-color-text--grey-800">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Bookstore</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search" />
<label class="mdl-textfield__label" for="search">Enter your query...</label>
</div>
</div>
</div>
</header>
<div class="demo-ribbon"></div>
<main class="demo-main mdl-layout__content">
<div class="demo-container mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="demo-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<div class="demo-crumbs">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent" id="add">
<i class="material-icons" role="presentation">add</i>
<span class="visuallyhidden">Add</span>
</button>
</div>
<!-- <div class="demo-crumbs mdl-color-text--grey-500">
Google > Material Design Lite > How to install MDL
</div> -->
<h3>Welcome to the Bookstore</h3>
<p>Bookstore App example.</p>
<h3>Bem vindo a Livraria</h3>
<p>Exemplo de uma aplicação de uma Livraria.</p>
</div>
</div>
<footer class="demo-footer mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<ul class="mdl-mini-footer--link-list">
<li>Bookstore 2015</li>
</ul>
</div>
</footer>
</main>
</div>
Fork on GitHub
<script src="{% static "js/material.min.js" %}"></script>
</body>
</html>
styles.css
This is the css style for material design.
.demo-ribbon {
width: 100%;
height: 40vh;
background-color: #3F51B5;
background: url(../img/background.jpg) no-repeat center center scroll;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.demo-main {
margin-top: -35vh;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.demo-header .mdl-layout__header-row {
padding-left: 40px;
}
.demo-container {
max-width: 1600px;
width: calc(100% - 16px);
margin: 0 auto;
}
.demo-content {
border-radius: 2px;
padding: 80px 56px;
margin-bottom: 80px;
}
.demo-layout.is-small-screen .demo-content {
padding: 40px 28px;
}
.demo-content h3 {
margin-top: 48px;
}
.demo-footer {
padding-left: 40px;
}
.demo-footer .mdl-mini-footer--link-list a {
font-size: 13px;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
In the CSS for the card that holds the FAB, put:
position: relative;
overflow: visible;
In the CSS for the FAB, put:
position: absolute;
right: 5px;
top: -25px;
You might have to make some small adjustments for responsiveness (I'm pretty green at web development), but that'll get you started.