I have written following code. However, i am not getting how to change default blue color of navigation bar. I want the color to be #1E90FF
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.row.content {height: 1500px}
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}
header {background: #1E90FF;color:white;padding: 35px;}
footer {background: #1E90FF;color:white;padding: 15px;}
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>List Of Forms</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body onload="fetchAmounts()">
<script src="prefilledform.js"> </script>
<br>
<center>
<div class="container-fluid">
<header>
<h1>Employee Reimbursement Forms</h1>
</header>
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Forms</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<br>
<br>
</div>
<div class="col-sm-9">
<h2>Account History </h2>
<div>
<footer>Logged in as: <%out.println(request.getAttribute("name")); %></footer>
</div>
</div>
</center>
</body>
</html>
I am using bootstrap 3. I also want to add effects like hover when i will click on active tab
including this on the page <style></style> tags serves for the per page basis well
and mixing it on two shades gives a brilliant effect like:
<style>
.nav-pills > li.active > a, .nav-pills > li.active > a:focus {
color: black;
background-color: #1E90FF;
}
.nav-pills > li.active > a:hover {
background-color: #efcb00;
color:black;
}
</style>
try this style it will help you...
<style type="text/css">
ul.nav.nav-pills li.active a{
background-color: #1E90FF!important;
}
ul.nav.nav-pills li a:hover{
background-color: #1E90FF!important;
color: #fff;
}
</style>
Related
Here in the below code i am trying to put my contact section to the right in the header section .Also i have tried using float to right but it is not working in this section.
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<span class="spans" id="firstSpan">Logo</span>
<span class="spans">About</span>
<span class="spans">Portfolio</span>
<span class="spans">Services</span>
<span class="spans">Contact</span>
</div>
</body>
</html>
I think it can help you.
.spans:last-child {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<span class="spans" id="firstSpan">Logo</span>
<span class="spans">About</span>
<span class="spans">Portfolio</span>
<span class="spans">Services</span>
<span class="spans">Contact</span>
</div>
</body>
</html>
I think if you want a colorful themed type you can use this
.header {
padding: 80px;
text-align: left;
background: #1abc9c;
color: white;
}
.spans:last-child {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<span class="spans" id="firstSpan">Logo</span>
<span class="spans">About</span>
<span class="spans">Portfolio</span>
<span class="spans">Services</span>
<span class="spans">Contact</span>
</div>
</body>
</html>
Float is not intended for styling purpose. Its a mis-used hack. float is for floating images within a paragraph.
The modern approach is to use flexbox: .header { display: flex; }
to move the contact element to the right, you have to give it a margin: auto;. this will make it consume all remaining space. You can target the contact element with: .header span:last-of-type.
On a sidenote, do not use spans but take an <ul> for a navbar like the sample below:
nav ul {
display: flex;
list-style: none;
padding: 0;
}
nav ul li {
margin: 5px;
}
nav ul li:last-of-type {
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav>
<ul>
<li>Logo</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
As my title suggests, my content goes off screen.
I've looked through my css file, and there's isn't any margins with minus something. So why is the content going off screen at both sides?
Appreciate any suggestions to why this is.
Thanks.
body{
background: linear-gradient(rgb(100,50,50), rgb(80,20,20)) no-repeat;
color: white;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
img{
margin: 1%;
}
/*Header*/
header {
background-color: #1d1e21;
height: 100vh;
position: relative;
}
header span {
color: #fff;
}
header input {
margin-top: 20px;
}
p#slogan {
color: #fff;
letter-spacing: 2px;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
padding: 0 0 0 10px;
}
ul li a {
color: #fff;
list-style-type: none;
}
ul li a:hover {
color: black;
list-style-type: none;
text-decoration: none;
}
/*Main*/
/*sloganAndSocial*/
#sloganAndSocial {
background-color: #1d1e21;
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NBC 2011</title>
<link rel="stylesheet" href="css/main.css" type="text/css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
<!--Header section-->
<header>
<div id="topBar">
<div class="row">
<h1 class="pull-left"><span>NORDIC </span>BARISTACUP</h1>
<form class="pull-right">
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div class="row">
<p class="pull-left" id="slogan">be together act together learn together</p>
<ul class="pull-right">
<li>ABOUT NBV</li>
<li>2011 EVENT</li>
<li>NORDIC ROASTER</li>
<li>RESULTS</li>
<li>LINKS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!--Main section-->
<div class="main">
<img src="" alt="bo!" class="cover" />
</div>
<div id="sloganAndSocial">
<div class="container">
<div class="row">
<h2 class="pull-left">"To create an environment in which knowledge<br>about coffee and its sphere can be obtained"</h2>
<ul class="share-buttons">
<li><img alt="Share on Facebook" src="images/flat_web_icon_set/inverted/Facebook.png"></li>
<li><img alt="Tweet" src="images/flat_web_icon_set/inverted/Twitter.png"></li>
<li><img alt="Share on Google+" src="images/flat_web_icon_set/inverted/Google+.png"></li>
<li><img alt="Pin it" src="images/flat_web_icon_set/inverted/Pinterest.png"></li>
<li><img alt="Send email" src="images/flat_web_icon_set/inverted/Email.png"></li>
</ul>
</div>
</div>
</div>
</header>
<!--Section1-->
</body>
</html>
You have two divs in your topBar with class row but which are not inside an element with class container. That is not intended by Bootstrap and therefore leads to unintended behaviour. You have to wrap those two divs in another div with class container.
Also, as #nik_m mentioned: Why are you wrapping the whole page in a header? That's not, what headers are supposed to do.
Remove pull-left and pull-right classes from the elements and better use flexbox for your alignments. It will make your life much easier!
Also, why the wrapper of the whole site is inside a header???
I have a navigation bar that has a black background with white text. The text changes to red when hovered over. however when the user is on the select page that specific background will change to red. however the hover over change the text to red. I want it so that when the user is on the home page, and they hover over the home button, the text doesnt change to red.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TL Custom Printing</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="topbar">
</div>
<div id="navbar">
<div id="navbtn">
<ul>
<li>Home</li>
<li><a href="custom.php" >Custom Printing</a></li>
<li>Products</li>
<li>Gallery</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="logo">
<img src="testlogo.png" alt="logo">
</div>
</body>
</html>
the CSS:
#navbtn {
width:100%;
Margin:20px;
white-space: nowrap;
text-align:center
}
ul {
width:100%;
list-style:none;
margin:0;
padding:0;
display: inline-block;
padding-top: 2.25em;
}
li {
width: 140px;
display: inline-block;
}
a {
text-align:center;
font-size: 1.25em;
padding:8px 0;
display:block;
width:100%;
text-decoration:none;
color:#FFF;
border-top-left-radius:8px;
border-top-right-radius:8px;
}
a:hover {
color:#F00;
background-color:#000;
}
You can use an active class to fix this easily: JSFiddle
<li>Home</li>
a.active {
background-color:#F00;
}
a.active:hover {
color: #fff;
}
I also added your active tab background color into the .active class removing your inline style
You could add:
<style type="text/css">
a:hover {
color:#FFF !important;
background-color:#000;
}
</style>
In your html pages but your "home" so it will rewritte the main css sheet.
index.html and style.css are on my local machine to practice coding.
Chrome and Safari are rendering the CSS correctly but FireFox 29 is not. Firefox recognize the css file but it's not rendering it. I've tried on a different machine and still have the same issue.
I've already validated my code and there were no errors. Am I missing any tag that is preventing this from rendering in Firefox?
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<link rel="stylesheet" type="test/css" href="style.css">
<title>Welcome!</title>
</head>
<body>
<div id="pagewrap">
<!-- Top Head of My Page -->
<div id="header">
<nav id="nav">
<div id="socialnetwork">
<img src="./Social_Icons/Linkedin.png" alt="LinkedIn">
<img src="./Social_Icons/facebook.png" alt="FB">
<img src="./Social_Icons/Instagram.png" alt="InstaGram">
<img src="./Social_Icons/Twitter.png" alt="Twitter">
<img src="./Social_Icons/Skype.png" alt="Yelp">
<!-- Icons from Dribble by Dawid Dapszus https://dribbble.com/dashoo-->
</div>
<!-- End of Social Network Links-->
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Resume</li>
<li>About Me</li>
<li>Contact </li>
</ul>
</nav>
</div>
</div>
<!--End of Page Wrap -->
</body>
</html>
body {
font-family:'Century Gothic', sans-serif;
}
a {
text-decoration: none;
}
#pagewrap {
width:950px;
margin: 0 auto;
}
#socialnetwork {
padding-top: 100px;
float:right;
}
#socialnetwork img{
height:30px;
}
#nav ul{
text-align: left;
border-bottom: groove;
}
#nav li{
margin:0 15px 0 0;
display: inline;
}
#nav li a:link{
color:#868686;
}
#nav li a:visited{
color:#868686;
}
#nav li a:hover{
color:#324EDC;
}
#nav li a:active{
color:#324EDC;
}
You are typing the wrong word in Link tag attribute value, you are typing "test/css" instead of "text/css"
Your Tag:
<link rel="stylesheet" type="test/css" href="style.css">
Updated Tag:
<link rel="stylesheet" type="text/css" href="style.css">
type="test/css"
Shouldn't it be: text/css?
As you can see, On hovering a li element,the right background image also disappears along with it with the help of background-image:none property. However only the hovered li disappears but the background image of previous li is still seen.Although a minor , I would like it removed. Can anyone tell me how?. :)
As I am new , Im not allowed to post images. Check the website out at http://ashwin931996.webege.com/
Thanks a lot btw
Use this jquery. Here i paste the full html code. use this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<link type="text/css" rel="stylesheet" href=""/>
<style type="text/css">
#header ul {
padding-top:1em;
}
#header ul li a.currentpage {
color:white !important;
background-color: #F96E5B !important;
}
#header ul li a {
text-decoration: none;
color:#676767;
font-family: 'Oswald', sans-serif;
font-size: 1em;
float:right;
line-height: 3em;
padding-right: 1em;
padding-left:1em;
}
#header ul li a.active
{background-color: #F96E99;
color: white;}
</style>
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.jpg">
<ul>
<li>
<a class="one active" href="#">CONTACT</a>
</li>
<li>
<a class="two" href="#">GALLERY</a>
</li class="one">
<li>
<a class="three" href="#">EVENTS</a>
</li>
<li>
<a class="four" href="#">HOME </a>
</li>
</ul>
</div>
<script type="text/javascript">
$("#header ul li a").click( function() {
$("#header ul li a").removeClass("active");
$(this).addClass("active");
})
</script>
</body>
</html>
Demo: http://jsfiddle.net/PbMg2/2/