So since im new I cant show you guys any pictures to demonstrate the issues that im having, but ill try to explain it to you in the best way.
I have a background-image: url(), that works as my "hero" for my website, I also have a bootstrap button that i use as a "browse your pc for a file" button, but for some reason the button isnt clickable when inside my hero tag, only when i put it outside.
HTML
<body>
<div id="hero">
<div id="hero-overlay">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">AppInvest</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Upload</li>
<li>Analyze</li>
<li>About</li>
</ul>
</div>
</nav>
<label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" style="display:none;">
Browse...
</label>
<div style="background:transparent !important" class="jumbotron text-center">
<h1>
AppInvest
</h1>
<div class="container">
<div class="row">
<div class="col-sm-1 text-left">
<p>Who are we?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS
body {
margin: 0px;
}
#hero {
background-image: url('../img/rarri.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
top: 0;
bottom: 0;
height: 100vh;
z-index: -10;
}
#hero-overlay {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: -5;
background-color: rgba(0,0,0,0.5);
}
Also if you could give me some tips on the best way to make an upload button with a "total files attached" at the center of the screen i would appreciate it.
And yeah obviously its CSS and HTML related.
The button isn't clickable because of the negatvie z-index of #hero. the z-index has no effect anyway in this szenario so i removed it and it works:
https://jsfiddle.net/967h3ty2/
To have a "total files attached" at the center of the screen you need to count the uploaded files on the server side using php or a similar technology.
Related
So I have been busy with a navbar and I want to make it fixed but whenever I use position: fixed, the navbar does stay fixed but it creates whitespace and pushes everything down (the parent container and it's sister elements).
So what could be causing this and how do I solve this issue?
Thanks in advance for your help.
Screenshot of how it looks with the issue
The HTML
The CSS
nav {
padding: 15px;
position: fixed;
width: 100%;
z-index: 1;
top: 0;
}
.hero-section {
background-image: url(img/dylann-hendricks-Ll-A9nKuOhk-unsplash.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 0px 0px;
height: 100vh;
}
<pre>
<code>
<section class="hero-section">
<nav class="navbar">
<div class="logo">KM</div>
<div class="links-container">
<div>About</div>
<div>Skills</div>
<div>Projects</div>
</div>
</nav>
<div class="intro-container">
<div class="greeting rev-block"><span>Hi there,</span></div>
<div class="my-name rev-block" id="onemore1">
<span>I'm Khanya Mateta</span>
</div>
<div class="job-title rev-block" id="onemore2">
<span>Front End Developer</span>
</div>
<div class="contact-btn">Contact Me</div>
<div class="social-media">
<img src="img/github.png" />
<img src="img/linkedin.png" />
<img src="img/twitter.png" />
</div>
</div>
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
</section>
</code>
</pre>
Try using this in the css for nav element:
left: 0;
right: 0;
Adjust the left and right values while using position: fixed.
Using this I solved the same issue in my site.
Thank you 😊.
I am currently building a website using bootstrap.
This is my HTML file:
http://www.bootply.com/D5ltZOOcQE
<header class="navbar navbar-inverse navbar-static-top" role="banner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Santorini</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Committee</li>
<li>Events</li>
<li>Constitution</li>
</ul>
</nav>
</div>
</header>
<div class="jumbotron">
<div class="container">
<h1>Welcome</h1>
<p class="lead">Welcome to my website.</p>
<p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4" align="center">
<img class="contact" src="img/facebook.png" height="120" width="120">
</div>
<div class="col-sm-4" align="center">
<img class="contact" src="img/emailIcon.png" height="120" width="120">
</div>
<div class="col-sm-4" align="center">
<img class="contact" src="img/twitter.png" height="120" width="120">
</div>
</div>
</div>
So, what I wanted to do is have a big jumbotron, similar to the one in the getboostrap.com website. That means I wanted it at least twice the size of my current jumbotron.
In the <head> of my HTML file, I have a place where I have put a special rule for my jumbotron, so that I include the picture and also some other stuff. This is the code:
.jumbotron {
position: relative;
background: url('img/background.jpg') no-repeat center center;
overflow: hidden;
height: 100%;
width: 100%;
background-size: cover;
}
However, when I change the size of height to 500px for example, I see no change. I think this is because my jumbotron kind of adapts to the size of my container? So if I add more text it will grow but now it doesn't. However, I want the whole picture to show, and this doesn't happen right now.
Any help is welcome :)
Just to add to this, and not necessarily saying this is the ultimate solution. I rarely touch any of the built in bootstrap code and create my own classes. These normally will apply no problem to any bootstrap classes you may be using. for instance.
<div class="jumbotron customclass">
.customclass {
width: 100%;
height: 500px;
}
This generally always works for me best and you avoid messing with bootstrap directly which could potentially break other portions of your website if you have already designed quite a bit utilizing bootstrap.
Very rarely do I ever target bootstrap classes directly.
You can see an example from your original bootply here: http://www.bootply.com/Qcdz3AxWvP
I added a background color as well, just to show how creating your own class works just fine.
In your Bootply you have the height set at 100% and your question states 500px which maybe matters and may very well not. The Jumbotron class doesn't have a set height, padding is used instead. Setting the height should be no different then the rules in your question so perhaps you have multiple jumbotron rules or you haven't placed your stylesheet after bootstraps.
*(you should have zero need to use !important)
Bootstrap Rules (Not complete)
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #eee
}
.container .jumbotron,
.container-fluid .jumbotron {
padding-right: 15px;
padding-left: 15px;
border-radius: 6px
}
.jumbotron .container {
max-width: 100%
}
#media screen and (min-width:768px) {
.jumbotron {
padding-top: 48px;
padding-bottom: 48px
}
.container .jumbotron,
.container-fluid .jumbotron {
padding-right: 60px;
padding-left: 60px
}
.jumbotron .h1,
.jumbotron h1 {
font-size: 63px
}
}
See working example Snippet at FullPage.
/*FOR DEMO ONLY*/
.navbar.navbar-inverse {
margin-bottom: 0;
}
/*FOR DEMO ONLY*/
.jumbotron.jumbotron-one {
position: relative;
background: url('http://placehold.it/2000x500/f00/fff') no-repeat center center;
background-size: cover;
height: 100%;
width: 100%;
margin-bottom: 0;
}
#media (min-width: 768px) {
.jumbotron.jumbotron-one {
height: 500px;
}
}
.jumbotron.jumbotron-two {
position: relative;
background: url('http://placehold.it/2000x500/ff0/fff') no-repeat center center;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<header class="navbar navbar-inverse navbar-static-top" role="banner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Santorini</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Committee
</li>
<li>Events
</li>
<li>Constitution
</li>
</ul>
</nav>
</div>
</header>
<div class="jumbotron jumbotron-one">
<div class="container">
<h1>Welcome</h1>
<p class="lead">Height 500PX</p>
<p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a>
</p>
</div>
</div>
<div class="jumbotron jumbotron-two">
<div class="container">
<h1>Welcome</h1>
<p class="lead">Default Height (padding)</p>
<p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a>
</p>
</div>
My guess is bootstrap.css is overriding whatever custom css you have. To correct this, change custom css height to this height: 500px !important, or load your css file before bootstrap.css (Remember, when 2 CSS files are used, the first one loaded always takes precedence, unless !important is used.)
Hi i was trying to create a website with the help of bootstrap 3.3
However I am stuck up with an issue that the image I am using is not responsive ie after a certain period it breaks.
This is the HTML code snippet:-
<div class="img-responsive" id="intro"> <!-- This is the container to display image-->
<div class="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 ">
<div class="box" style="margin-top:62px;">
<h1>Welcome to my world</h1>
<p>Welcome to web development program</p>
<button type="button" class="btn btn-default" id="continue">Continue</button>
</div>
</div>
</div>
The below is my css code snippet:-
#intro{
background: url('images/prog.jpg') fixed;
background-size: cover;
height:650px;
/*position: fixed;*/
}
#continue{
margin-left: 218px;
margin-top: 27px;
color: blue;
}
Please help me with this.I am not sure why the class img-responsive is not working.
img-responsive class for img tag only not for div.
as this is background image, it will not resize but yes, you can use different size image on specific break point
Thanks
I want to place a div above a twitter bootstrap navigation menu, Intro is the div that I want to display above the menu which must be fixed. The issue is I have placed a background image on the menu, but it shows the background image on the Intro div as well, I want to display the background image after the Intro div. Please help me solve this issue.
<div class="navbar navbar-inverse navbar-fixed-top">
<div id="Intro">
This is page is created with bootstrap
</div>
<div class="container">
<div class="navbar-header">
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li> Home </li>
<li> Contact </li>
</ul>
</div>
</div>
.navbar-inverse {
background-color : #fffff;
border-color:transparent;
background: #ffffff;
url('bgimg.gif') repeat-x;
}
Move <div id="Intro">above the navbar code:
<div id="Intro">
This is page is created with bootstrap
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
Add some space on top of navbar-fixed:
.navbar-fixed-top {
top: 20px;
Make this size the height you want for <div id="Intro">
Add additional styling to <div id="Intro">
#Intro {
top: 0;
position: fixed;
EDITED:
Additional styling for intro div. Add some dimensions and background color to intro div. Try this :
#Intro {
top: 0;
position: fixed;
background-color: #fff;
height: 40px;
width: 100%;
}
I want to make my Logo in my header clickable and link to the homepage but i don't know exactly how to do this right.
My code:
Navigation menu:
HTML
<div id="myMenu">
<div class="myWrapper">
<nav>
<div class="logo"></div>
</nav>
</div>
</div>
CSS
#myMenu
{
width: 100%;
height: 30px;
z-index: 999;
background-color: #252e30;
}
.myWrapper
{
max-width: 660px;
margin: 0 auto;
}
.logo
{
display: inline-block;
width: 156px;
height: 30px;
margin-top: 5px;
background-size: auto 43px;
background-image: url(../images/mylogo.png);
background-repeat: no-repeat;
}
I want my logo make clickable and link to the page: Homepage.cshtml
Instead of using CSS to set your logo as a background image, what would be wrong with using the img tag, surrounding by a link? Like so:
<div id="myMenu">
<div class="myWrapper">
<nav>
<img src="../images/mylogo.png" height="30" width="156" />
</nav>
</div>
</div>
This has the added benefit of being more accessible (especially if you use an alt attribute on your logo), which makes search engine bots happier. Image content that conveys meaning to the user should never bet set using CSS.
You better use an image wrapped in an anchor-tag.
But else this should work:
<div class="logo" onclick="window.location.href='homepage.html'"></div>
You can't make a background image a link. Move the image into the HTML code, and then make that a link.
<div id="myMenu">
<div class="myWrapper">
<nav>
<div class="logo"></div>
</nav>
</div>
</div>
also it can be like following example:
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #000000;">
<div class="logo" >
<a href="{% url 'major' %}">
<img src="{% static 'images/logo.gif' %}" style="width:80px;height:80px;"/>
</a>
</div>
.....
</nav>
Use an <a> instead of the <div> for the logo..