I'm new to html and css. I'm trying to learn them but I have been having some issues. Basically I've been trying to create the website with the background image that has the navbar along the top (this works when previewing with brackets not yet here).
Can I change the colour of the navbar?
Also, how to have h5 header centred on the left side of the page, with h5 header below it, but as four lines, not as 2 long ones overlaying the image.
If anyone could help out that'd be great.
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
}
.txtpic {
position: absolute;
text-align: center;
background-image: http: //i.imgur.com/pE2NrKh.jpg;
color: white;
}
.list {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 25px;
font-weight: bolder;
}
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<title>Kyrgystan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<title>Kyrgystan exped</title>
<link href="Calums2.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
</head>
<body>
<img height="100%" src="http://i.imgur.com/pE2NrKh.jpg" style="position: relative; top: 0; left: 0;" width="100%">
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li>Home
</li>
<li>Team
</li>
<li>Krygyzstan
</li>
<li>Blog
</li>
<li>Expeditions
</li>
</ul>
</nav>
<style>
text-align:justify;
</style>
</div>
<div class="txtpic" style="top: 100%;">
<div class="row-sm-3"></div>
<h3>Title is H3</h3>
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div>
</body>
</html>
if you want to change your navbar text color try with
.navbar-default .navbar-nav>li>a {
color: red !important;
}
EDIT:
Let say this is the html markup
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</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>Home
</li>
<li>Team
</li>
<li>Krygyzstan
</li>
<li>Blog
</li>
<li>Expeditions
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="list">
<div class="txtpic" style="text-align: center">
<h3>Title is H3</h3>
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div>
</div>
1- / youre previous code you was trying to put an image as an background with img element
1-1/ better way to do it with css just
.list {
background: url(http://i.imgur.com/pE2NrKh.jpg);
background-size: cover;
}
also you said that you cant change the color of your navbar text, you need to select the a element with .navbar-nav > li > a
.navbar-nav > li a{
color: white !important
}
For having the contents of h5 as 4 lines instead of the default way they appear try using the <br> tag. This tag breaks the line and starts a new line. So you could write it the following way:
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips.
<br> We have over a thousand nights under canvas between us, and there are more in the pipeline.
<br> We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart.
<br> So far our outings have taken us across Europe, Asia and Africa.
</h5>
check out the following link to help you understand this tag better
The reason why this is not on top of the background image is that you have defined absolute positioning in the class 'txtpic'. try changing it to something else and tell me what happens.
Also the navbar background-color seems to change when i try to do so. If you want to change the text color use 'color:' instead of 'background-color'.
Related
I've created a basic horizontal navigation bar. It has your generic options: Homepage, contact us, about, and games. However, even though contact us, games, and Homepage are close together, I want to make it so about is on the opposite side of the web page/navigation bar, far away from the others but still connected to it through a huge empty space of the navigation bar. How would I go about doing this? Below is my current CSS code if it helps:
.horiznavli {
display: inline;
padding:20px 32px 20px;
border-color: #333333;
background-color: #333;
color:white;
text-align: center;
font-family: "Lucida Grande", Times, Serif
}
.horiznavli:hover{
background-color: #4CAF50;
}
.horiznavli:active{
background-color: grey;
}
#HorizNav{
position: relative;
left: -60px
}
#HorizNav #spaced {
}
EDIT: My apologies here is the HTML code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="frontpage.css">
<meta charset="UTF-8">
<meta name="description" content="Official Dark Matter Studios site">
<meta name="keywords" content="HTML, Studio, Game, Dark Matter">
<meta name="author" Content="Matt Jones">
<title> Dark Matter Studios </title>
</head>
<body>
<ol id = "HorizNav" style = "list-style-type:none">
<li class = "horiznavli"> HomePage </li>
<li class = "horiznavli"> About </li>
<li class = "horiznavli"> Games </li>
<li class = "horiznavli" id = "spaced"> Conact Us </li>
</ol>
<h1 id="title_screen"> Dark Matter Studios</h1>
<div id="wrapper">
<h1> What is Dark Matter Studios all about? </h1>
<p> Dark Matter studios is an independent game development dedicated to producing quality games out of a passion and love for gaming.<br>
Born from the frustration of anti-consumerism, microtransactions and DLC eccentric practices held by many AAA companies </p>
<br>
<br>
<h1> WHAT WE'RE ALL ABOUT </h1>
<p> Dark Matter Studios was founded around the principle of honesty and integrity with our fans. After all, without them we wouldn't get anywhere! Though Dark Matter studios holds itself responible the following standards: </p>
<ol style="list-style-type: circle">
<li> Honesty with our customers. </li>
<li> No Microtransactions or overpriced DLC</li>
<li> We are honest with our customers, we don't promise things and not deliver</li>
<li> We promise high quality games, with no graphical downgrades on release</li>
<li> We stick to our word, we do not mislead our customers to gain a quick buck off them</li>
</ol>
</div>
</body>
</html>
.horiznavli {
float:left;
padding:20px 32px 20px;
border-color: #333333;
background-color: #333;
color:white;
text-align: center;
font-family: "Lucida Grande", Times, Serif
}
.horiznavli:hover{
background-color: #4CAF50;
}
.horiznavli:active{
background-color: grey;
}
#HorizNav{
position: relative;
left: -60px
}
#HorizNav #spaced {
}
#HorizNav.ul li:nth-child(3)
{
float:right!important;
margin-left:100px!important;
}
It's better if you had added your html code as well. Anyway if you are using bootstrap you can use this code and no need of css.
<nav class="navbar navbar-default">
<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="#">Brand</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">Homepage <span class="sr-only">(current)</span></li>
<li>Contact us</li>
<li>Games</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Otherwise if you are using html and css only, use this code.
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Games</li>
<li>Contact</li>
<li style="float:right">About</li>
</ul>
</body>
Tell me if this is what you wanted.
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 saw this post Navigation Menu CSS loads slowly, causes it to align vertically for a few seconds?
Tried it but it didn't help.
Using it in asp.net project.
Site.Master code:
<head>
<style>
.body {
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
.navbar {
margin-bottom: 0;
background-color: black;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 2px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: black !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #fff !important;
background-color: #fbb534 !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
</style>
</head>
<body data-target=".navbar">
<header>
<nav class="navbar navbar-default" style="margin-bottom: 0px; clear: none; background-color: white; border-color: white;">
<div class="container" style="margin-left: 0px;">
<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>
<img src="../../Images/Logo.png" width="130" height="40" style="margin-right: 40px;" />
</div>
<div class="collapse navbar-collapse" id="myNavbar" >
<ul class="nav navbar-nav navbar-left">
<li style="padding-left: inherit"><a id="A1" runat="server" href="~/Admin" title="Admin">ADMIN</a></li>
<li style="padding-left: inherit"><a id="A2" runat="server" href="~/Configuration" title="Configuration">CONFIGURATION</a></li>
<li style="padding-left: inherit"><a id="A3" runat="server" href="~/Reports" title="Reports">REPORTS</a></li>
<li style="padding-left: inherit"><a id="A4" runat="server" href="~/Upload" title="Upload">UPLOAD</a></li>
<li style="padding-left: inherit"><a id="A5" runat="server" href="~/Billing" title="Billing">BILLING</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
after 1-2 seconds:
----------------------EDIT STARTS HERE-----------------------
Note: Bootstrap css were not used, extremely sorry for that.
Plain css and html in site.master page are used.
Ok, So I finally, kind of, found the issue myself.
Trials: Tried all the suggestions provided in the answers, Thank you all for that but they didn't help.
Issue: I created an empty aspx page with no content in it and loaded it with master page. What I see is below:
On the other hand when the page with some content loads it sets the navbar correctly like this, looks like when the Admin page loads it is empty for 1-2 seconds and when it renders it sets the correct style:
So what I did is I put below code to make it less ugly :(
li{
display: inline;
}
which now will show up like :
Any other suggestions guys ?
Your code is missing the part where you include Bootstrap, and that is the main point. Your navbar is styled by Bootstrap, so it won't be styled until the Bootstrap's CSS file is loaded.
Put the Bootstrap CSS in the <head> part of your page in a <link> element.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
This is your code without bootstrap: https://jsfiddle.net/xa2ychxn/ and this is your code with the Bootstrap's CSS file in the <head> section: https://jsfiddle.net/edaovwjt/
You are using class names from Bootstrap (navbar navbar-default). As you don't have any CSS code to make the navbar inline, when you finally get the expected result that means that something else gets loaded: that's Bootstrap.
I think you are loading something in the page using Ajax, and the content that is loaded contains bootstrap's CSS. That's why you don't know that you are using it, and why it is loaded some time after the page rendering.
Have you tried putting the styles in a CSS file or in a style tag in the head?
<html>
<head>
<style type="text/css">
.navbar {
margin-bottom: 0px;
clear: none;
background-color: white;
border-color: white;
}
.container {
margin-left: 0px;
}
.navbar-header img {
margin-right: 40px;
width: 130px;
height: 40px;
}
.navbar-left li {
padding-left: inherit;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<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>
<img src="../../Images/Logo.png" />
</div>
<div class="collapse navbar-collapse" id="myNavbar" >
<ul class="nav navbar-nav navbar-left">
<li><a id="A1" runat="server" href="~/Admin" title="Admin">ADMIN</a></li>
<li><a id="A2" runat="server" href="~/Configuration" title="Configuration">CONFIGURATION</a></li>
<li><a id="A3" runat="server" href="~/Reports" title="Reports">REPORTS</a></li>
<li><a id="A4" runat="server" href="~/Upload" title="Upload">UPLOAD</a></li>
<li><a id="A5" runat="server" href="~/Billing" title="Billing">BILLING</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
Alternatively, if you do have a linked CSS sheet, check the styles applied to the classes in your header. Some of the elements are probably rendered according to the CSS styles first, then the inline styles are overriding them as elements are rendered.
I know this might be a longshot but can you try using Minified versions of the bootstrap and jquery.Just give it a try and let me know
Try using these :
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The problem seems to come from external style sheets.
During the brief period where the LI elements are displayed vertically, i guess you're still busy loading CSS from external files.
Does it still happen if you add the following CSS to the style element in the head of your page?
.navbar ul
{
list-style:none;
}
.navbar ul li
{
display:inline-block;
}
.navbar ul li a
{
/* i have no idea if this is right. it is just an approximation. */
/* you will have to fiddle with it until it is right. */
padding:10px 20px;
}
(or see this codepen)
I am trying to align three images (in a bootstrap row) to be vertically central (currently the images are at the top, but I want the choice to either centre them vertically or pull it to the bottom
Here is the image
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Vintarn Burmese</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<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>
<![endif]-->
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
<style>
.navbar-default {
margin-top: 30px;
background-color: transparent;
border: hidden;
}
.navbar-default ul {
margin-top: 5px;
font-family: sans-serif;
font-size: 1.1em;
}
.navbar-default li {
font-family: sans-serif;
background-color: rgba(255,253, 208, 0.7);
border-radius: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
.navbar-brand {
font-family: 'Marck Script', cursive;
font-size: 2.5em;
}
.testDiv {
height: 100%;
width: 100%;
background-color: rgba(255,192,203,0.8);
}
p {
line-height: 170%;
font-family: sans-serif;
}
.lead {
font-family: sans-serif;
font-size: 1.8em;
}
.marginTop {
margin-top: 20px;
}
.frontImage {
width: 90%;
margin-top: 30px;
margin-left: 5%;
margin-bottom: 30px;
height: 100%;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar color-me"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a class="navbar-brand">Vintarn Burmese</a>
</div>
</div> <!-- class="navbar-header" -->
<div class="collapse navbar-collapse navbar-right listing">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li data-toggle="modal" data-target="#aboutModal">Kittens</li>
<li data-toggle="modal" data-target="#contactModal">My Cats</li>
<li>History</li>
<li data-toggle="modal" data-target="#aboutModal">About Millie</li>
<li data-toggle="modal" data-target="#contactModal">Links</li>
<li data-toggle="modal" data-target="#contactModal">Gallery</li>
<li data-toggle="modal" data-target="#contactModal">Contact Us</li>
</ul>
</div> <!-- class="collapse navbar-collapse" -->
</div> <!-- class="container" -->
</div> <!-- class="navbar navbar-default" -->
<div class="testDiv">
<div class="container contentContainer" id="">
<div class="row-fluid">
<div class="col-md-4 col-sm-4">
<img src="images/landing/bvna-member-signature.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
<div class="col-md-4 col-sm-4">
<img src="images/landing/Vania-8-mths-2.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
<div class="col-md-4 col-sm-4">
<img src="images/landing/gccflog.jpg" class="img-thumbnail img-responsive frontImage center-block">
</div>
</div>
<div class="col-md-8 col-md-offset-2 col-sm-12 marginTop" id="">
<h1 class="lead">Welcome to the story of the Vintarn Burmese...</h1>
<p>My name is Christine Stalker and the first Burmese to come into my life was a brown girl called 'Floo'. She belonged to a vet I worked for in London in 1972 whilst training to be a veterinary nurse and she was simply the naughtiest cat I'd ever met - but she was utterly adorable! I promised myself that one day, I would have a Burmese of my own... Three years later, in 1975, whilst working in Bedford as a newly qualified veterinary nurse, I bought my own very first Burmese (a brown tortie) called Tantabin Amazing Grace - better known as "Eccles" from a local breeder, Mrs Bettina Stapleton. Bettina mentored me into showing and breeding and thus began what has become, over the past 40 years, an enduring "love affair" with Burmese cats! I am a qualified Registered Veterinary Nurse (RVN) and I worked full time in Veterinary Practice for 30 years, until 2002. This was followed by four years in publishing at OUR CATS in Manchester. From 2006 - 2011 I owned & published a trade magazine. I now work part-time for a local charity - this means I get to spend lots of time at home with my cats. I share my home in Cheshire with three adorable Burmese cats. Two are now retired from breeding and have been neutered, they are: 'Whisper' (Imperial Grand Champion & Imperial Grand Premier Vintarn Whisper a Wish) and 'Bo' (Champion Vintarn Rosies Rainbow) - who is Whisper's daughter. Last but not least, is my latest addition, a lilac girl called 'Lyra' (Vintarn Lilac Lyra) I am hoping that Lyra will have her first litter in 2015. My prefix, Vintarn, was registered with the G.C.C.F. in 1977. I enjoy showing my beautiful cats at Championship Shows in the UK, and was delighted when my lilac tortie, Vania, became my first Grand Champion on 8th March 2008! Vania is now retired and lives a life of luxury in Southport! Whisper, Vania's daughter made me very proud in November 2009, by becoming Best of Variety Burmese at the Cheshire Area Cat Show. She was then became a Grand Champion on 6th February 2010, at the Shropshire Cat Show, following in her mother's footsteps! She has subsequently gone on to gain the dual title of Imperial Grand Champion & Imperial Grand Premier. Whilst I enjoy showing, my cats are, first and foremost, my beloved pets.
</p>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Marck+Script::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
</body>
</html>
My main issue with using CSS libraries is that they often overwrite custom CSS styles that I specifically set. For example, here I have a list that exists within a Bootstrap expand/collapse menu:
<ul class="nav navbar-nav">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
I want to set my own font color, so I use the following CSS:
nav li {
font-size: 16px;
color: #004687;
}
But when I view in Firefox's Inspector, I see the color I have chosen is being overridden by Bootstrap.
My custom CSS occurs after the Bootstrap files have been loaded in the of the HTML document.
How do I prevent this happening without setting style="color: #004687" to every element?
EDIT: Thanks for the suggestions thus far, but none have been successful. I'm pasting the full original code to give you greater detail:
<div class="container">
<header class="navbar navbar-static-top bs-docs-nav">
<div class="col-md-4 visible-xs" id="mobile-nav-outer">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Menu
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" id="mobile-nav-inner" role="navigation">
<ul class="nav navbar-nav">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
</nav>
</div>
</header>
</div>
My CSS is included like this:
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/docs.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
#mobile-nav-outer {
border: 1px solid #CCC;
background-color: #FFF;
}
#mobile-nav-inner {
border: 1px solid #CCC;
background-color: #FFF;
margin: 3px;
}
nav li {
font-size: 16px;
color: #004687;
}
.nav-mobile-link {
font-size: 16px;
color: #004687;
}
</style>
</head>
EDIT 3: I have found a cheap workaround by using ID's rather than classes which works due to CSS specificity (ID's override classes). This isn't a very clean solution and I'd still like to know why I cannot override the Bootstrap classes with my own.
Overwrite it with additional class added to the list:
<ul class="nav navbar-nav custom-class">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
and in your custom styles:
.nav.custom-class li {
font-size: 16px;
color: #004687;
}
try to place custom css file below bootstrap.css.
or
nav li {
font-size: 16px !important;
color: #004687 !important;
}