enter image description here
So I wanted the image and the navbar text to fill the entire screen horizontally, but can't find a way to do it. I have used CSS properties border padding and width to try and expand the background the navbar elements, but nothing seems to change it; the elements always remain centered with borders.
This only happens after I transition my code from HTML/CSS to Angular; this is how my code looks when I don't put it in components:
Does anyone know how to fix this? thanks in advance
Components
content_component.html <!-- Intro Header -->
<div class="all">
<header class="masthead">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<a href="#about" class="btn btn-circle js-scroll-trigger">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>About Me</h2>
<p>
hello
</p>
</div>
</div>
</div>
</section>
</div>
content_component.css
.all{
height:100%;
background: black;
color: white;
margin: 0;
}
.masthead{
display: table;
overflow:auto;
padding-left: 0px;
padding-right: 0px;
padding-top: 100px;
padding-bottom: 600px;
text-align: center;
color: white;
background: url('../../img/intro-bg.jpg') no-repeat bottom center scroll;
background-size: 100%;
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.intro-body {
display: table-cell;
vertical-align: middle;
.brand-heading {
font-size: 50px;
}
.intro-text {
font-size: 18px;
}
}
#media(min-width:768px) {
height: 100%;
padding: 0;
.intro-body {
.brand-heading {
font-size: 100px;
}
.intro-text {
font-size: 22px;
}
}
}
}
app_component.css
.container{
}
html{
margin:auto;
overflow: hidden;
}
You can set the body margin to auto
https://jsfiddle.net/wxmsud1d/
body {
margin:auto;
}
header {
background-color:red;
}
<header>Text goes here</header>
Related
I made a loading screen on my personal website. I found that the footer will cover my loading screen when I go into the website.
I want my loading screen can cover the entire screen when I go into the website. How can I do that?
This is my code, css and js.
<footer class="cfooter navbar-fixed-bottom text-center" id="cfooter">
<div class="container">
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">Powered by User</div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
</div>
</footer>
#cfooter {
display: block;
border: 1px solid 000000;
height: 100px;
text-align: center;
background-color: #000000;
color: #fff;
font-size: 15px;
}
div.load_screen {
position:fixed;
width: 100%;
height: 100%;
background: white;
}
img.load_screen {
z-index: 9999999;
position: fixed;
left: 50%;
top: 50%;
margin: -27px 0 0 -95px; /* -image-height/2 0 0 -image-width/2 */
background: white;
}
$(function() {
$("div.load_screen").fadeIn("slow")
setTimeout(function() {
$("div.load_screen").fadeOut("slow")
}, 3000);
})
add z-index: 999; to div.load_screen
Add #cfooter {z-index: 1}
and add top and left 0.
div.load_screen {
position:fixed;
width: 100%;
height: 100%;
background: red;
top: 0;
left:0;
}
Here is the working example. I have added red background just to test it:
https://jsfiddle.net/o7wd4mfp/4/
I'm working in codepen and having an issue where any new element overwrites (or more accurately, "grafts to") my header. I double-checked for simple things like not closing the row div and such but that didn't work. Also, the new element will display a white background over my html background and when I've tried using rgba to change the opacity it hasn't helped with anything.
So,
1. How can I "unlink" subsequent elements from my header rows?
2. How can I prevent the background of subsequent elements from (visibly) overlaying the html background?
Here's the codepen
HTML
<link href="css/bootstrap.css" rel="stylesheet"type="text/css"/>
<html>
<head class="row">
<div class="col-md-4 top-bar top-bar-left">
IH
</div>
<div class="col-md-4 top-bar top-bar-mid text-center">
<p>Isaak Hyde Web Design</p>
</div>
<div class="col-md-4 top-bar top-bar-right">
Bio
Projects
Contact
</div>
</div>
</head>
<body>
<div class="row bio-info">
</div>
</body>
</html>
CSS
html {
background: url(http://www.pixelstalk.net/wp-
content/uploads/2016/04/Black- background-wallpapers-pattern-light-
texture.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.top-bar{
font-family: Georgia;
color: blue;
background: gold;
border-radius: 50px;
}
.top-bar-left {
font-size: 24px;
padding: 5px 0px 0px 30px;
}
.top-bar-mid {
font-size: 30px;
padding: 5px 0px 1px 0px;
}
.top-bar-right {
font-size: 24px;
padding: 5px 0px 0px 190px;
word-spacing: 0.5em;
}
.bio-info {
margin-top: 50px;
}'
The .bio-info stuff was just to illustrate what I meant. Thank you for any help.
You are mixing up header with head, you got a header outside the body tag, a superfluous closing </div> in there and and some other basic stuff wrong
Here is a corrected version:
https://codepen.io/anon/pen/XpKOVm
You got your basics wrong for html as well as bootstrap.
First <html> encloses both <head> and <body> in that order. You put <header> in body not `.
In bootstrap you always enclose a .row in a .container. because .row has negative margin and if you do not enclose it in a .container then it makes content flow out of user screen and horizontal bar appears.
Here's a working fiddle.
html,body{
background: url(http://www.pixelstalk.net/wp-content/uploads/2016/04/Black-background-wallpapers-pattern-light-texture.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.top-bar{
font-family: Georgia;
color: blue;
background: gold;
border-radius: 50px;
}
.top-bar-left {
font-size: 24px;
padding: 5px 0px 0px 30px;
}
.top-bar-mid {
font-size: 30px;
padding: 5px 0px 1px 0px;
}
.top-bar-right {
font-size: 24px;
padding: 5px 0px 0px 190px;
word-spacing: 0.5em;
}
.bio-info {
margin-top: 50px;
color:white;
}
.container,.row{
background:transparent;
}
.container{
width:100%;
margin:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 top-bar top-bar-left">
IH
</div>
<div class="col-md-4 top-bar top-bar-mid text-center">
<p>Isaak Hyde Web Design</p>
</div>
<div class="col-md-4 top-bar top-bar-right">
Bio
Projects
Contact
</div>
</div>
</div>
<div class="container bio-info">
<h1>See this works</h1>
</div>
</body>
</html>
Many tweaks, enclosed everything in body, switched head to header since the first one is for meta-tags, stylesheets, title, etc. added a container-fluid to your header row. Added a fixed height to your header components and line-height to vertically center text as well.
In col-md viewports would be:
Snippet below: (external JSFiddle for resizing here)
html {
background: url(http://www.pixelstalk.net/wp-content/uploads/2016/04/Black-background-wallpapers-pattern-light-texture.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
header {
position: fixed;
width: 100%;
}
.top-bar {
font-family: Georgia;
color: blue;
background: gold;
border-radius: 50px;
text-align: center;
}
.top-bar-left {
font-size: 22px;
text-align: center;
height: 41px;
line-height: 41px;
/* padding: 5px 0px 0px 30px; */
}
.top-bar-mid {
font-size: 22px;
height: 41px;
line-height: 41px;
/* padding: 5px 0px 1px 0px; */
}
.top-bar-right {
font-size: 22px;
line-height: 41px;
height: 41px;
/* padding: 5px 0px 0px 10px; */
word-spacing: 0.5em;
}
.bio-info {
/* margin-top: 50px; */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<header class="container-fluid">
<div class="row">
<div class="col-md-4 top-bar top-bar-left">
IH
</div>
<div class="col-md-4 top-bar top-bar-mid text-center">
<p>Isaak Hyde Web Design</p>
</div>
<div class="col-md-4 top-bar top-bar-right">
Bio
Projects
Contact
</div>
</div>
</header>
<div class="row bio-info"></div>
</body>
After posting before I'm running into more problems with making my header responsive. I want to make my header image (logo) re-size down correctly with the browser and look correct on mobile devices.
like this web page does when re-sized down: http://timeandspace.org/
here is the fiddle link: www.jsfiddle.net/0m4z6u25/
Any tips on how to get the nav bar to do the same as the website linked up above will be a huge help!
Thanks
Firstly update the version of the bootstrap.css, use the latest stable to date(v3.3.6).
CDN link
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css
Next, You need to make lot of changes to your navbar code. I have made the changes to resemble your requirements. Here
<!--HEADER-->
<div class="header">
<div id="header-container" class="container">
<div class="headerdiv">
<a href="" class="headerleft">
<img src="http://i.imgur.com/DotvQDw.jpg" class="img-fluid" alt="header SU">
</a>
</div>
</div>
</div>
<nav class="navbar navbar-default" id="nav-main">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Brand" width="20" height="20" src="img/nav_logo.jpg">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Help</li>
<li>Events</li>
<li>Forums</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
and the CSS is
/* Stylesheet */
html,
body {
height:100%;
}
img {
max-width: 100%;
}
/* Salford SU Header */
.headerbox {
height: 200px;
width: 100%;
background-color:white;
}
#header-container{
padding-left: 140px;
padding-right: 140px;
}
.headerdiv {
height: 200px;
width:100%;
padding-top: 0px;
padding-bottom: 17px;
padding-left: 65px;
padding-right: 65px;
}
.headerleft {
height: 146px;
min-width:400px;
width: 50%;
float: left;
padding-right: 15px;
background-position: center left;
background-size: contain;
background-repeat: no-repeat;
display: block;
}
.header-right {
width: 40%;
height: 146px;
float: right;
border-left: 2px solid #c5c6c8;
padding-left: 15px;
}
.headerright1
{
height: 40px;
width: 100%;
text-align: justify;
vertical-align: bottom;
padding-top: 7px;
}
.headerright1 > a {
width: 34px;
display: inline-block;
vertical-align: bottom;
zoom: 1;
}
/*
#cover {
background:#222 url('img/header.jpg') center center no-repeat;
background-size:cover;
color:white;
height: 24.5%;
text-align:center;
display:flex;
align-items:bottom;
}
*/
/*NAVIGATION CSS*/
#nav-main {
background: #ed1e24;
}
#nav-main li {
font-family: 'Work Sans', sans-serif;
font-size: 18px;
color:white;
}
.section-content {
padding: 5rem 0;
}
#about {
background: url('img/working.jpg') center center no-repeat;
}
.about-text{
background: rgba(0,0,0,0.8);
color: white;
padding: 1.875rem;
}
#footer-main {
background: #f1163e;
color:white;
font-size: 0.8rem;
padding: 2.5rem 0;
}
#media (min-width: 158px) and (max-width: 600px) {
#header-container {
padding-left: 0%;
padding-right: 0%;
}
.headerleft {
background-position: center left;
background-size: contain;
background-repeat: no-repeat;
display: block;
min-width: 100%;
min-height: 100%;
}
.headerleft > a {
max-width: 100%;
max-height: 100%;
background-position: center left;
background-size: contain;
background-repeat: no-repeat;
display: block;
min-width: 100%;
min-height: 100%;
}
}
The Fiddle
Using media queries, you will need to resize the header image based on the screen width. You can then control the size, keeping it in proportion, and then you can show a different layout logo when on mobile - for example putting 'student's union' under the circle. This will not make it too small, and look good on a mobile.
An example of a media query:
#media (min-width: 900px) {}
Bootstrap also has some responsive classes such as visible-xs hidden-xs which could help here.
I want to make collapsible top boxes. but somehow I was not successful. I want to make objects such as cards on the links page materialize. but also bootstrap
card subject at this link: materializecss.com/cards.html
.card3 {
padding: 20px;
position: absolute;
background-color: #FFF;
width: 97.5%;
overflow-y: auto;
border-radius: 4px;
height: 92%;
z-index: 1;
overflow: hidden;
}
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="card3" class="card3">
.......
</div>
<div class="panel panel-default">
<div class="row">
<div class="col-md-6">
......
</div>
<div class="col-md-6">
.......
</div>
</div>
</div>
</div>
</div>
</div>
Have you tried styling the other divs? Because right now only one of the divs has styling, and that usually doesn't end up with a properly styled product.
you can try this one:
.container
{
background:gray;
padding: 20px;
}
.col-md-12 {
padding: 10px;
background-color: #FFF;
width: 97.5%;
overflow-y: auto;
border-radius: 4px;
height: 12%;
z-index: 1;
overflow: hidden;
}
.wrong
{
float:right;
top:0px;
margin-top:-70px;
cursor:pointer;
}
DEMO HERE
I have a requirement to have an overlay div positioned (z-order) above a [pre] element that is scrollable. The problem is, I can no longer scroll within the pre element because the overlay is blocking it.
Q: Is there any way to pass scroll events through divs so that they reach underlying elements?
CSS:
.dropzone {
pointer-events:none;
}
#myimage {
float: left;
border-width: 0px;
border-style: none;
background-color:none;
padding: 0px;
position: relative;
}
#myoverlay {
position: absolute;
background-color:#139C8A;
background-image: url('../images/drag-icon-white.png');
background-size: 160px 66px;
background-repeat: no-repeat;
background-position: center;
opacity:0.0;
z-index:-1;
}
#myresponse {
float: right;
border-width: 0px;
border-style: none;
background-color:none;
padding: 0px;
position: relative;
}
.mycode {
text-align:left;
color:#EFEFEF;
background-color:#3C3C48;
border-width: 0px;
border-style: none;
overflow-y: scroll;
position: relative;
}
HTML:
<div class="container">
<div id="myoverlay"> </div>
<div class="row">
<div class="col-md-12">
<div id="myimage">
<canvas id="myCanvas" width="970" height="485"></canvas>
</div> <!-- end col-md-4 -->
<div id="myresponse">
<pre id="mycode" class="mycode">
<span style="color:#139C8A"><i>(Response will appear here)</i></span>
</pre>
</div>
<div id="dropzone" class="dropzone-detect detect-droppable"></div>
</div>
</div><!-- end row -->
</div> <!-- /container -->
You've assigned the CSS to the class .dropzone. But there is no dropzone-class, just an ID! Try the following CSS:
#dropzone { pointer-events:none; }
But please note, that this isn't working in IE below version 11. For those browser, you can use a polyfill.