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.
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
CSS 100% height with padding/margin
(15 answers)
Closed 2 years ago.
I have
html {
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
body {
padding: 0;
margin: 0;
height: 100%;
box-sizing: border-box;
background-color: $bgcolor;
}
.main-content {
height: 95%;
}
header {
background-color: $header-bg;
color: $header-text;
text-align: left;
padding: 20px;
height: 5%;
display: flex;
}
and I have a div with class main-content and a header.
For some weird reason I'm seeing extra whitespace at the bottom of my page. (header has a height of 5% - hence giving main-content height of 95%), any ideas why there's extra space there and how I can remove it??
html is
<body>
<%- include ('../partials/header.ejs') %>
<div class="main-content">
<%- body %>
</div>
</body>
header is -
<header>
<a id="aaa" href="/">AAA</a>
<nav id="topnav">
---
</nav>
</header>
Please try the snippet of code I am sharing with you in this response. I added the height: 100vh; corresponding to the 100% of the viewport height, applied to both html and body to keep the consistency of the height to the max of the screen since they don't have a default size. Also, since it is kind of hard to calculate the max width of any screen and subtract the 20px of padding that you have on the HEADER tag in each screen scenario, an overflow:hidden rule has been added to this element.
I also added the P tag to test the div with the class .main-content with some actual content on it to test the whole site with some real content on it.
I am assuming you are using some JavaScript HTML Markup template generator language tool such as EJS to create this page, hence I have temporarily replaced <%- body %> and <%- include ('../partials/header.ejs') %> blocks with real content to see the end result. Don't forget about placing them back instead of my hard-coded content, please.
I certainly hope this helps. Cheers, champion!
html {
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
padding: 0;
}
body {
padding: 0;
margin: 0;
height: 100vh;
min-height: 100%;
color:#b2d8d8;
box-sizing: border-box;
background-color: #004c4c;
overflow: hidden;
}
header {
background-color: #189ad3;
color: #f9fafc;
text-align: left;
height: 5%;
padding: 20px;
display: flex;
width: 100%;
position:relative;
}
.main-content {
height: 100%;
}
p {
padding: 10px;
text-align: justify;
text-justify: inter-word;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 BoilerPlate - Alvison Hunter</title>
<meta name="description" content="HTML5 BoilerPlate - Alvison Hunter">
<meta name="author" content="https://alvisonhunter.com/">
<link rel="stylesheet" href="css/styles.css?v=1.0"> </head>
<body>
<header> <a id="aaa" href="/">AAA</a>
<nav id="topnav"> --- </nav>
</header>
<div class="main-content">
<p>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>
</div>
<script src="js/scripts.js"></script>
</body>
</html>
.rightDiv {
position: absolute;
right: 0;
height: 80px;
width: 350px;
}
.content{
width:50%;
position:relative;
margin:auto;
padding:0px;
text-align:center;
top:10px;
}
#spandiv {
display: block;
font-size:16px;
background-color: #232F34;
color:#FFFFFF;
opacity:1;
top:5px;
overflow-wrap: break-word !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<div class="rightDiv">
<input type="text"/>
<div class="content">
<p id="spandiv">10122019(tjwmxuwmiihcxdfryfgfhrunlfsxrkhvmyqjjuwjddknjaybnrobpzferxaenxzenbkmlqqzesvfbnnsxwydfbzgbaxkccvoplgjxbikxjifojjmvqxmbjbrtmvbngq)</p>
</div>
</div>
</body>
</html>
I am new to CSS, I want CSS style property that grows the text in both the direction from center of parent element till it reaches end of the screen. I am not familiar with CSS properties, If such a property doesn't exist at all, can I create my own custom style ( I am stuck in my project I want to UI to look as I shown in the description below)
Check this code you have ask like this
Demo
.mainDiv {
height: auto;
width: 100%;
float: left;
text-align: center;
}
.content {
width: 100%;
position: relative;
margin: auto;
padding: 0px;
text-align: center;
top: 10px;
}
.content p {
font-size: 16px;
line-height: 18px;
background-color: #232F34;
color: #FFFFFF;
overflow-wrap: break-word;
padding: 15px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<title>StackOver flow</title>
</head>
<body>
<div class="mainDiv">
<input type="text" />
<div class="content">
<p>10122019(tjwmxuwmiihcxdfryfgfhrunlfsxrkhvmyqjjuwjddknjaybnrobpzferxaenxzenbkmlqqzesvfbnnsxwydfbzgbaxkccvoplgjxbikxjifojjmvqxmbjbrtmvbngq)</p>
</div>
</div>
</body>
</html>
Weird request, but follow this; you should create a parent with a ceratin width and height and make the child absolute and give it left: 0 right: 0 to center it inside the parent:
#parent {
width: 500px;
height: 150px;
border: 4px solid;
margin: auto;
}
#child {
text-align: center;
}
<div id="parent"></div>
<div id="child">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. 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.
</div>
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 */
}
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>
I am testing my codes parallel to a video tutorial. I have two CSS files. First one is working fine. Second CSS doesn't seems to apply to the HTML. My folder structure is as follows.
/
css (screen_style.css, screen_layout_large.css)
images (banner_large.jpg, logo_large.png, etc)
index.html
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Lynda.com | Creating a Responsive Web Design</title>
<link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
<link rel="stylesheet" type="text/css" href="css/screen_layout_large.css" />
</head>
<body>
<div class="page">
<header>
<a class="logo" href="#"></a>
</header>
<article>
<h1>Welcome</h1>
<p>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>
</article>
<div class="promo_container">
<div class="promo one">
<div class="content">
<h3>Promo Heading Here</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p><a class="cta" href="">Visit our blog</a></p>
</div>
</div>
<div class="promo two">
<div class="content">
<h3>Promo Heading Here</h3>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>
<p><a class="cta" href="">Read the article</a></p>
</div>
</div>
<div class="promo three">
<div class="content">
<h3>Promo Heading Here</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor inci did unt.</p>
<p><a class="cta" href="">Learn more</a></p>
</div>
</div>
</div>
<nav>
About Us
Contact Us
</nav>
<footer>
© AG IT Solutions.
</footer>
</div>
</body>
</html>
CSS/screen_tyle
#charset "UTF-8";
/* Global Content Formatting and Styles */
body {
color: #575c7a;
line-height: 1.5em;
font-family: Arial;
font-size: 14px;
background:#515673 url(../images/background_gradient.jpg) repeat-x 0 0;
}
.page {
max-width: 980px;
margin: 0 auto 0 auto;
padding: 0;
position: relative;
background-color: #fff;
}
h1 {
font-size: 2em;
font-weight: normal;
color: #a6430a;
margin: 0 0 0.5em 0;
}
h2 { font-size: 1.7em; margin: 0 0 1em 0;}
h3 { font-size: 1.5em; margin: 0 0 1em 0;}
p { margin:0 0 0.75em 0;}
a { color:#de9000;}
a:hover {color:#009eff;}
a.cta {
text-transform: uppercase;
font-size:.9em;
font-weight:bold;
text-decoration:none;
margin: .5em 0 0 0;
padding: 0 12px 0 0;
background: url(../images/cta_arrow.png) no-repeat right 0;
}
a.cta:hover {
background-position:right -50px;
}
.promo h3 {font-size: 1.1em; margin:0;}
.promo p {line-height:1.2em; font-size:.9em; margin-bottom:.5em;}
.promo { background-repeat: no-repeat;}
.promo.one { background-image: url(../images/promo_1.jpg);}
.promo.two { background-image: url(../images/promo_2.jpg);}
.promo.three { background-image: url(../images/promo_3.jpg);}
footer {
font-size: .85em;
color: #9ba0bd;
background-color:#575c7a;
padding: 10px 10px 10px 10px;
}
css/screen_layout_large
#charset "UTF-8";
/* Layout (global rules for all sizes) */
body {
margin: 0;
padding: 0;
}
header a.logo {
display: block;
position: absolute;
background-position: 0 0;
background-repeat: no-repeat;
}
/* Layout Large Screens (default for older browsers) */
header {
height: 275px;
background: url(../images/banner_large.jpg) no-repeat right 0;
}
header a.logo {
width: 150px;
height: 85px;
top: 28px;
right: 30px;
background-image: url(../images/logo_large.png);
}
None of the images are loading in header section which are scripted in screen_layout_large.css. Padding also not working. I have tried including !important with css attributes. But problem seems to be the CSS is not linking. When I remove the first CSS, it has only plain HTML.
Try to open your developer tools (F12 for google chrome) and inside head element find your two links to css files. Mouse2 -> Open link in new tab
If both files will not be empty (you should see any your css properties), let us to know. If one of them is empty, it means that you didn't connect it correctly.
Clear browser cash was the solution at this particular issue...