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.)
Related
TODO: Create an AngularJS directive to display list of images in an endless, smooth left to right scrolling loop. To keep it simple you can assume the fixed height/width for the images indicated above.the work should be done in the directive and styles without adding supporting libraries or plugins.
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
// list of images to scroll, each image is 280px x 200px
$scope.images = [
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost®%20Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Premium Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Premium Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby® GT350R]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby GT350®]/EXT/4/vehicle.png'];
})
.directive('myScroller', function () {
return {
// >> your directive code <<
};
});
.container {
width: 700px;
margin: 0 auto 100px;
padding: 20px;
overflow: hidden;
}
.container .image-list {
height:200px;
width:2240px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="container">
<h1>Static Images</h1>
<div class="image-list">
<img ng-repeat="image in images" ng-src="{{image}}" />
</div>
</div>
<div class="container">
<h1>Scrolling Images</h1>
<!-- use my scroller directive, see script.js file for directions -->
<div my-scroller="images"></div>
</div>
</div>
</div>
</body>
</html>
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;
I am just using float: left on an icon right now because I am struggling with positioning the text in my button such that the icon is in the "middle" (20% of the left) and the text is in the middle (80% of the right).
Like this:
**********************************
* Icon Text will be here *
* *
**********************************
Here is how I have the button set up:
<button class="button button-block">
<i class="ion-plus-round"></i><span>Add to Favorites</span>
</button>
Try CSS flexbox:
#container {
display: flex;
align-items: center;
}
#container > * {
margin-right: 5px;
}
<button>
<span id="container">
<img src="http://i.imgur.com/60PVLis.png" width="25" height="25" alt="">
<span>Add to Favorites</span>
</span>
</button>
I used a span to wrap the content because some browsers don't accept button elements as flex containers.
Browser Support
Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE 10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
How about something like this ?
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
});
.button-block {
display: inline-block;
vertical-align: middle;
}
.button-block i {
margin-right: 15px;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Pull to Refresh</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-content>
<div class="tabs" style="height:auto;">
<div class="row">
<div class="col" style="padding: 0">
<button class="button button-block button-positive">
<i class="ion-plus-round"></i><span>Add to Favorites</span>
</button>
</div>
</div>
</div>
</ion-content>
</body>
</html>
Here is an example using Font Awesome.
Add a left margin to the span to control the spacing between the two inline elements (i and span).
If you specify a width for the button, then you can set widths to the two child elements as needed.
button span {
margin-left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="button button-block">
<i class="fa fa-plus-circle"></i><span>Add to Favorites</span>
</button>
.btn-cont {Margin-left: 12px;}
<button><span class="btn-cont">Hello World</span><button>
Hi I'm trying to set a background image for an angularjs website. I've followed quite a few tutorials/examples. They do work. However I want my background image to be set in the bottom of the page above the footer behind a view without affecting the view that's on top. Some suggestions haven't been helpful.
The main culprit is this gap here..which is preventing the background from going to the bottom...I have no idea where in the code is causing this...does anyone know? It's not footer because I've commented it out and the gap still persists.
I've tried filling the div and image sizes to 100% and 100% width/height...no effect.
and this is the full background
As you can see the bottom half is missing.
If I use background-image in css...it crops the background and forces it to stay on top rather than bottom.
I've also tried using a div and filling it with background
.form-wrapperBack {
width: 100%;
height: 100%;
font-size: 14px;
text-align: center;
color: #bfbfbf;
font-weight: bold;
background: #fff;
font-family: Arial;
background-image: url("/img/river.png");
background-repeat: no-repeat;
background-height: 100%;
background-position: center bottom;
Please see image of what it looks like when I set the background in css:
/* general settings */
html {
min-height:100%;
overflow-x:hidden;
overflow-y:scroll;
position:relative;
width:100%;
background-color:#000;
}
body {
background-color:000;
font-family:"Verdana", sans-serif; color:#c4c4c4; font-size:16.0px; line-height:1.19em;
color:#FFF;
font-weight:100;
margin:0;
min-height:100%;
width:100%;
}
This is index.html
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">-->
<!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />-->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<img class="logo" src="img/history_00.png" />
<h7>Building lasting relationships<h7>
</header>
<body>
<ng-controller = "demoCtrl">
<ul class="nav nav-pills pull-right">
<li ng-class="{active: isState('home') }">
<a ui-sref="home">Home</a>
</li>
<li ng-class="{active: isState('form') }">
<a ui-sref="form">Join Us</a>
</li>
<li ng-class="{active: isState('about') }">
<a ui-sref="about">About</a>
</li>
<li ng-class="{active: isState('invest') }">
<a ui-sref="invest">Investments</a>
</li>
<li ng-class="{active: isState('contact') }"> </div>
<a ui-sref="contact">Contact</a>
</li>
<li ng-class="{active: isState('login') }">
<a ui-sref="login">log In</a>
</li>
<li ng-class="{active: isState('logout') }">
<a ui-sref="logout">log Out</a>
</li>
</ul>
<h3 class="text-muted"> </h3>
<br>
</div>
<div id="back-Img3">
<div ui-view class=""></div>
<br>
</div>
<!-- Loading the Footer -->
<div id="footer" ng-include="'partials/footer.html'"></div>
<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="js/rg-slider.min.js"></script>
<script src="js/script.js"></script>
<script data-require="ui-router#0.2.10" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="js/controllers/controllers.js"></script>
<script src="js/directives/directives.js"></script>
<script src="js/dialogs.js"></script>
<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>
If I edit the css and change the image sizing...it also changes the size of the view which I don't want.
style.css
/* general settings */
html {
min-height:100%;
overflow-x:hidden;
overflow-y:scroll;
position:relative;
width:100%;
background-color:#000;
}
body {
background-color:000;
font-family:"Verdana", sans-serif; color:#c4c4c4; font-size:16.0px; line-height:1.19em;
color:#FFF;
font-weight:100;
margin:0;
min-height:100%;
width:100%;
}
div[back-img3]{
width: 100%;
height:500px;
color: #fff;
}
Also it only shows a part of the background...not all of it.
Is there another way to set an image background in index.html?
Help would be appreciated thank you.
You should position your .form-wrapperBack fixed, make sure it has 100% width and height and that it stays at the top of page and set the background-size to cover:
.form-wrapperBack {
position: fixed;
height: 100%;
width: 100%;
top: 0;
background-image: url("/img/river.png");
background-size: cover;
}
I made a fiddle for you, using some random image.
If any of the rules above does not apply, it must be overridden by another css rule, with a stronger selector. You can easily find it by inspecting the element in a modern browser and either remove that rule or make your selector stronger.
div[back-img3]{
width: 100%;
height:500px;
color: #fff;
}
If you declare image as background of this particullary div it is always 500px and background is cropped to fit that.
Try to add background to the body element
background:src('file_path');
background-size:cover;
also you have little typo here:
body {
background-color:000;
This question arises when I tried the proper solution to a container which had multiple internal divs.
This works fine with a simple div in body
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
background-color:#990000;
}
-- well ain't that typical of this week: 60 hours of work creating by the book html and 1/10th is billable because it does not work: instructions don't work though followed to the letter; and they say nothing about having to highlight the entry and then hit tab to make id show up in the draft window!--
Why doesn't this work in a more complex page wherein the #wrapper becomes #container_toolbox with several more divs within it. In both I.E. and Mozilla there is always a gap at the right. Why?
html, body {
height: 100%;
margin: 0;
}
#container_toolbox
{
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
background-color:#99000;
}
Now, if I replace the first code with second in a test page, it works perfectly. Why, when there are nested divs within this #container_toolbox, does it not work.
I am using both Dreamweaver and Aptana'a download to create pages.
here are the two samples: the first is the one that works:
<head>
<title>ggggg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#container_toolbox
{
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
background-color: #990000;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#container {
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container_toolbox">
<p> in mature regions, and changes of focus among a large
pack of shops as various markets undergo change. How do you pick the right one to
work with you at any point in time? -- Well, maybe you shouldn't pick one.</p>
</div>
</body>
Here is the one that doesn't work I've had to eliminate html5 tags frequently:
<!doctype html>
<html class="no-js" lang="en">
<head>
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/b/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Toolbox</title>
<link href="../styles/toolbox_stylesheet.css" rel="stylesheet" type="text/css">
<link href="../styles/basic_style_2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" >
document.createElement("header");
document.createElement("hgroup");
document.createElement("section");
document.createElement("article");
document.createElement("footer");
document.createElement("nav");
</script>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#container_toolbox
{
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
}
</style>
</head>
<body>
<div id="container_toolbox">
<!--start container for page-->
<!--top section includes: header with logo; aside with contact info...
site navigation-->
<div id="head">
<div id="logoDiv"><img src="../images/headerLogo.jpg" alt="Fabshops.com"></div>
<div class="aside" id="contactAside">
<p>Phone: (973) 738 2599</p>
<p>Email: info#fabshops.com </p>
</div>
<div class="nav f" id="mainNav">
<ul class="navul" id="ulMainNav">
<li>Home</li>
<li>Equipment Types</li>
<!--<li>About</li>-->
<li>Contact</li>
<li>Newsletter</li>
<li>Toolbox</li>
</ul>
</div>
</div>
<div id="accentLine"> </div>
<!--body section includes: inner navigation; articles; aside-->
<!--*********************************************************************-->
<!--*********************************************************************-->
<article id="content_toolbox">
<!--begin content section-->
<!--*********************************************************************-->
<!--begin sideNav-->
<nav class="nav" id="sideNav">
<div class="nav" id="sideHeader">
<h2>Tool Box</h2>
</div>
<div id="lowerNav">
<ul class="sidenavul" id="sideNavList">
<li>Home</li>
</ul>
</div>
</nav>
<!--End sideNav-->
<!--*********************************************************************-->
<section class="sectionhd_toolbx" id="sectionhd_toolbx">
<!--begin contents of section head-->
<h1>Select the converter appropriate for your purposes.</h1>
<h2>Make sure your browser permits Javascript</h2>
<!--end contents of lead article-->
</section>
<!-- ******************************************************************** -->
<!--<section id="section_toolbx">--><!--begin contents of second article--><!--end contents of second article-->
<!--</section>-->
<!--end content section-->
<section id="toolbox">
<!-- Put the toolbox into a table as margin-left/rignt:auto is not working here -->
<!-- Begin toolbox table -->
<table class="tbtoolbx" id="tbtoolbox">
<tr>
<td id="tdleft"> </td>
<td id="tdmiddle">
<!--begin iframe section-->
<p>Volume & Capacity |
<a href="PressureConverter.html" target="calcIframe">Pressure
Converter</a> | <a href="LengthConverter.html" target="calcIframe">Length
Converter</a> | <a href="WeightConverter.html" target="calcIframe">Weight
Converter</a> | <a href="CurrencyConverter.html" target="calcIframe">Currency
Converter</a><br>
Temperature Converter</p>
<iframe name="calcIframe" src="../toolbox/Capacity_Volume.html" scrolling="no">You
need a Frames Capable browser to view this content. </iframe>
<!--end iframe section--> </td>
<td id="tdright"></td>
</tr>
</table> <!-- EndBegin toolbox table -->
</section>
</article>
<!-- ************************************************************************* -->
<!--***************************************************************************-->
<!--footer-->
<div class="footer" id="foot">
<p><Home | Equipment Types | <a href="../About/OurShops.html">Our Shops | Contact | Newsletter | Toolbox</p>
<p>Fabshops.com is a subdivision of Ridgeback Company, Inc</p>
<p>Headquarters: 61 Ormont Road, Chatham, NJ 07928</p>
<p>Web site designed by <a>TutorWright</a></p>
</div>
<!--end container for page-->
</div>
</body>
</html>
Chances are your inner divs have margins that are overflowing the container div and, in effect, becoming margins on it. Try {overflow: hidden;} on the wrapper.
It's hard to say for sure without some HTML or a demo, however.