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..
Related
I have a navbar that will stick to the top of the page when it slides, when this happens it adds two classes to the div "sticked in" this works perfectly but what I would like to do is
<div class="navbar navbar-expand-sm sticked in">
<div class="container">
<div class="header-logo">
<a href="http://localhost/2021/site/">
<img src="logo.svg" class="custom-logo">
</a>
</div>
</div>
</div>
After it sticks i would like to scale the img (logo.svg) down so what im looking for is the correct selectors for if "sticked in" is on my nav bar change the height of .header-logo img
for example:
.sticked.in > div > a > .header-logo img{
height: 20px;
}
obviously, these are the wrong selectors so im looking for a way of going down the css to header-logo img if "sticked in" is present
You don't need the > child selector. Example with toggle:
document.getElementById("toggle-class")
.addEventListener("click", function()
{
document.querySelector(".navbar")
.classList.toggle("sticked");
});
img {
height: 50px;
width: 50px;
background-color: red;
}
.sticked.in .custom-logo {
background-color: blue;
}
<div class="navbar navbar-expand-sm sticked in">
<div class="container">
<div class="header-logo">
<a href="http://localhost/2021/site/">
<img class="custom-logo">
</a>
</div>
</div>
</div>
<button id="toggle-class">Toggle</button>
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.
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.)
I'm trying to put a background image on my form (like behind the text and inputs, just like a background image of my web site), using the Bootstrap framework but the image appears at the bottom and I want it inside the "container".
My code is something like this:
<div class="container">
<div class="thumbnail">
<form....>
<fieldset>
.
.
.
</form>
<img src="cs.jpg" class="img-responsive">
</div>
<div>
Have you tried setting the background image of that container as the image? IE:
.container {
background-image: url("cs.jpg");
}
Or you can do it inline:
<div class="container" style="background-image: url('cs.jpg');">
...
</div>
or you could try like this..
<body>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
</div>
</div>
</body>
and in css like this:
.jumbotron {
position: relative;
background: #fff url("slide.jpg") center center;/*slide.jpg =>you image*/
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
I am creating a web site and want to add a hover effect on my buttons by loading another image/button with slightly different color suit that I created in Photoshop.
When I apply the code nothing happens.
Here is my code:
CSS:
#main{
position: relative;
background-color:#ececec;
height:900px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#main .button2{
position: absolute;
left:0.5%;
top: 71.5%;
z-index:20;
width:170px;
height:40px;
}
#main .button2:hover{
background-image : url(images/buttBootsRollover.png);
}
HTML:
<div id="main">
<article>
<section>
<a href="#index.php" > <img src="images/buttGloves.png" class="button" /></a>
<a href="#index.php" > <img src="images/buttBoots.png" class="button2" /></a>
<a href="#index.php" > <img src="images/buttEqu.png" class="button3" /></a>
</section>
</article>
Here is the picture which might give a better overview :
Eventually I want to add the same hover effect on all of the 9 buttons
The way you are doing this is a bit off. You're setting the background-image property on an element that contains an image which (presumably) takes up the whole space of your element. You're going to give yourself a headache trying to work with that, so rather than explain why you're getting the result you are, I'm just going to tell you not to do it that way and give you a solution:
Get rid of the img elements inside your div elements. Change the background-image property of your button2 class to the image that you want as the default. Leave your .button2:hover property as is.
This is what you are looking for. but I'm sure you haven't try in Google at-least. I recommend you to follow a simple CSS tutorial first.
#main{
background-color:#ececec;
height:500px;
width: 600px;
margin:0px auto;
}
.button{
z-index:1000;
width:170px;
height:40px;
display:block;
background-repeat:no-repeat;
}
#but_one{
background-image : url(images/but_one.png);
}
#but_two{
background-image : url(images/but_two.png);
}
#but_three{
background-image : url(images/but_three.png);
}
#but_one:hover{
background-image : url(images/but_one_h.png);
}
#but_two:hover{
background-image : url(images/but_two_h.png);
}
#but_three:hover{
background-image : url(images/but_three_h.png);
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="main.css" />
<title>hi css</title>
</head>
<body>
<div id="main">
<a href="index.php" ><img id="but_one" class="button" /></a>
<a href="index.php" ><img id="but_two" class="button" /></a>
<a href="index.php" ><img id="but_three" class="button" /></a>
<div>
</body>
</html>
maybe to achieve what you want you need the help of jquery
<div class="box">
<a href="#index.php" > <img src="images/buttGloves.png" class="button" /></a>
<div class="overlay">play me!</div>
</div>
<div class="box">
<a href="#index.php" > <img src="images/buttBoots.png" class="button2" /></a>
<div class="overlay">play me!</div>
</div>
<div class="box">
<a href="#index.php" > <img src="images/buttEqu.png" class="button3" /></a>
<div class="overlay">play me!</div>
</div>
jquery
$(function(){
$(".box").hover(function(){
$(this).find(".overlay").fadeIn();
}
,function(){
$(this).find(".overlay").fadeOut();
}
);
});
Working demo
Just have one background image and hide a bit of it.
For example - double up as demonstrated here http://jsfiddle.net/edheal/Qb7YG
Here is the code
CSS:
#wibble
{
background-image: url(http://well-spun.co.uk/portfolio/technologies/images/rollover.png);
background-position: left top;
background-repeat: no-repeat;
height: 14px;
width: 200px;
}
#wibble:hover
{
background-position: left -14px;
}
HTML:
<div id="wibble">
</div>
The image is 28px high - just show either the top or bottom half depending if it is hovering.