My CSS works fine but after adding Bootstrap through source files, some CSS styles were removed and were overridden by bootstrap's. I also tried using Bootstrap CDN but still, the same results. I also tried my previous projects as a reference, everything's the same but this one's not working. Here's my code:
This is my CSS and HTML File:
* {
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
}
#font-face {
font-family: Minima;
src: url(font/Minima.TTF);
font-family: Arial;
src: url(font/arial.TTF);
}
/*home background image*/
#header {
background-image: url("../images/home.jpg");
min-height: 700px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
#mytitle {
color:#f2f2f2;
font-size: 60pt;
padding-top:20%;
font-family: Minima;
text-align:center;
}
#subtitle {
color:#f4f4f4;
font-size: 18pt;
float:right;
margin-right:15.5%;
font-family: Arial;
}
#subtitle2 {
color:#f4f4f4;
font-size: 18pt;
float:right;
margin-right:15.5%;
font-family: Arial;
}
/*navigation */
.div-menu .sub-menu{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
margin-right:5%;
margin-left:5%;
float:right;
font-family: Arial;
}
.div-menu .sub-menu li {
float:left;
}
.div-menu .sub-menu li a {
display: block;
text-decoration: none;
color: #FFF;
text-align:center;
padding: 14px 16px;
}
/*for ghost button*/
.ghost-button-semi-transparent {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
border-color 0.2s ease-out;
border-radius: 7px;
font-size:15pt;
}
.ghost-button-semi-transparent:hover,
.ghost-button-semi-transparent:active {
background-color: #fff; /* fallback */
background-color: rgba(255, 255, 255, 0.4);
border-color: #fff; /* fallback */
border-color: rgba(255, 255, 255, 0.4);
transition: background-color 0.3s ease-in,
border-color 0.3s ease-in;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NAME | Web Profile</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div id="header">
<div class="div-menu">
<ul class="sub-menu">
<li>LOGO</li>
<li>Home</li>
<li>Profile</li>
<li>Experiences</li>
<li>Education</li>
</ul>
</div>
<div class="text">
<h1 id="mytitle">SOME CAPTION HERE</h1>
<h2 id="subtitle">CAPTION AGAIN</h2>
<br>
<br>
<h2 id="subtitle2">CAPTION AGAIN</h2>
</div>
</div>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>
Your order should be like this
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
you should change the order in which your css file is loaded ie,
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
Read more about it here: http://www.w3.org/TR/CSS2/cascade.html
Edit1:
As shown below * and body(tags) has lower precedence than class selectors, because of that your custom CSS is getting overridden by bootstrap, as bootstrap gives styles based on the classes such as container. To resolve this you can give a class to the body and apply all styles to that class.
* {
color: red;
}
.class{
color:purple;
}
span{
color: orange;
}
<p>p tag with out any class</p>
<p class="class"> Class has more precedence than * <p>
<span class="class"> Class has more precedence than tag(such as body, span, p etc) </span>
Related
Example of what the navigation bar should look like
I'm making my first website in html/css and I want to make a fixed navigation bar that can adapt to mobile screens. It should have a left aligned 'home' button and the rest of the buttons are center aligned. How can I make this with HTML/CSS? Thank you!
Here is my code at the moment:
body {
background-color: white;
margin:0;
}
li a {
font-size: 14px;
line-height: 17px;
font-family: 'Inter', sans-serif;
font-weight: 500;
}
ul {
list-style-type: none;
background-color: rgba(255, 255, 255, 0.4);
border: 1.5px solid rgba(0, 255, 255, 0.15);
backdrop-filter: blur(8px);
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
position: fixed;
top: 0;
width: 100%;
}
li {
display: inline-block;
}
li a {
text-decoration: none;
color: rgba(0, 0, 0, 0.60);
text-align: center;
padding: 12px 40px;
display: block;
transition:all 0.3s ease 0s;
text-align: center;
}
li a:hover {
color:black;
}
.left-links{
flex:1 1 200px;
text-align: left;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href="navBar.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700&display=swap" rel="stylesheet">
</head>
<div>
<ul>
<div class="left-links">
<li>Home</li>
</div>
<nav>
<li>Work</li>
<li>Me</li>
<li>Play</li>
</nav>
</ul>
</div>
<body>
<h1>Hello</h1>
</body>
</html>
You can achieve what you want by changing flex:1 1 200px; to just flex: 0.5; under .left-links in your css file.
EDIT: Sorry I forgot to also tell you to add display: flex; to ul in your css file as well
I've altered the code a little, but this is how I would tackle it.
By placing each section of links that are related together in a flex-box div, and displaying the entire nav element itself as a flex. We can independently address each grouping of links, as well as the nav as a whole.
Adding the flex-grow to the .right-links will inherit the entirety of the remaining space left from the home button, and adding in justify-content: center; centers the .right-links in that remaining space. This will work across screen widths and reduces the clutter of using lists when they might not be needed.
Hope this helps!
body {
background-color: white;
margin:0;
}
a {
font-size: 14px;
line-height: 17px;
font-family: 'Inter', sans-serif;
font-weight: 500;
}
nav {
display:flex;
align-items:center;
list-style-type: none;
background-color: rgba(255, 255, 255, 0.4);
border: 1.5px solid rgba(0, 255, 255, 0.15);
backdrop-filter: blur(8px);
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
position: fixed;
top: 0;
width: 100%;
}
a {
text-decoration: none;
color: rgba(0, 0, 0, 0.60);
text-align: center;
padding: 12px 40px;
display: block;
transition:all 0.3s ease 0s;
text-align: center;
}
a:hover {
color:black;
}
.left-links{
display:flex;
text-align: left;
}
.right-links{
justify-content:center;
flex-grow:1;
display: flex;
flex:1 1 200px;
text-align: left;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href="navBar.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700&display=swap" rel="stylesheet">
</head>
<div>
<nav>
<div class="left-links">
Home
</div>
<div class="right-links">
<div>
Work
</div>
<div>
Me
</div>
<div>
Play
</div>
</div>
</nav>
</div>
<body>
<h1>Hello</h1>
</body>
</html>
When mouse hover over the button all of the buttons are moving
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 10px;
border-radius: 0 0 10px 10px;
transition: 0.2s;
}
.nav div:hover
{
padding-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
I've expected that only one button will move but it isn't.
I need to write few word here because stackoverflow doesn't let me post this.
Also sorry for my English if its bad.
The buttons are siblings and sensible to changes of each other. If any sibling changes padding-top or padding-bottom, it will affect the others. They have the same parent and to change one button padding-top would change the parent height, affecting all the children (buttons).
Instead, in the hover you can use transform, like this:
.nav div:hover {
transform: translateY(-25px);
}
Transform affects the element individually without changing anything around.
You can do it like this
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 25px 10px 10px;
border-radius: 0 0 10px 10px;
transform: translateY(-25px);
transition: 0.2s;
}
.nav div:hover
{
transform: translateY(-5px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
Hi I'm learning html and css by Youtube tutorial, how to slide out navigation with css/html, but I've stucked with some codes.
Everything is working fine except
#sidebartoggler
display: none
&:checked + .page-wrap
.sidebar
left:0px
this one. When I click this, the sidebar should come out but it isn't.
I tried to fix the problem, trying to find anything wrong on my code for two days, but I couldn't and exhausted.
It would be a great help for me to figure what is wrong.
Please help me
ps. youtube link is https://www.youtube.com/watch?v=d4P8s-mkMvs
#import 'bourbon'
.page-content
position: relative
z-index:0
.toggle
text-decoration: none
font-size:30px
color: black
+position(fixed, 20px 0 0 200px)
z-index:1
.sidebar
+position(fixed, 0px 0 0px 0px)
width: 120px
padding: 30px
background: #333
z-index:0
li
color: rgba(255,255,255,0.8)
font-family: "Ubuntu",sans-serif
font-size: 16px
-webkit-font-smoothing: antialiased
margin-bottom: 16px
cursor:pointer
&:hover
color: rgba(255,255,255,1)
#sidebartoggler
display: none
&:checked + .page-wrap
.sidebar
left:0px
<!doctype html>
<html>
<head>
<title>GagaPro</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/slidebar.css">
</head>
<body>
<input type="checkbox" id="sidebartoggler" name="" value="">
<div class="page-wrap">
<label for="sidebartoggler" class="toggle">☰</label>
</div>
<div class="page-content">
<div class="wrapper">
</div>
</div>
<div class="sidebar">
<ul>
<li>Home</li>
<li>Project</li>
<li>Client</li>
<li>Blog</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</body>
</html>
I have tried your code using normal css and i found some thing cool.
No need to change any thing in HTML, only css will change little bit
CSS :
.page-content{
position: relative;
z-index:0;
}
.toggle{
text-decoration: none;
font-size:30px;
color: black;
+position(fixed, 20px 0 0 200px);
z-index:1;
}
.sidebar{
+position(fixed, 0px 0 0px 0px);
width: 120px;
padding: 30px;
background: #333;
z-index:0;
display:none;
}
li{
color: rgba(255,255,255,0.8);
font-family: "Ubuntu",sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
margin-bottom: 16px;
cursor:pointer;
}
li:hover{
color: rgba(255,255,255,1);
}
#sidebartoggler{
display:none;
}
#sidebartoggler:checked ~ .sidebar{
display:block;
}
I am trying to make a rectangular scalable div that has a transitional hover state. My code seems to work great in Chrome and Firefox, but IE10 simply refuses to entertain me. Below is my code and CSS example. Any help would be great.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
</head>
<body>
<div class="quote">
Interesting Quote
<p class="name">Quote Author</p>
</div>
</body>
CSS:
.quote {
font-size: 2em;
position: relative;
width: 20%;
padding: 5%;
float: left;
height: auto;
margin: .5%;
background-color: #99F;
color: #fff;
text-align: center;
}
.name {
font-size: .5em;
color: #000;
}
.quote:hover {
transition: background-color 0.5s ease-out;
background-color: #000;
}
.quote:hover .name {
transition: color 0.5s;
color: #FFF;
}
I was trying to use font icons in IE7+8 and ran into a problem that could easily be solved by an IE7 only stylesheet. Long story short, now both IE7 and IE9 run my IE7 only stylesheet somehow (IE8 runs perfectly fine). I can't understand why.
<head>
<!-- CSS3 in IE7+8 -->
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="js/selectivizr.js"></script>
<noscript><link rel="stylesheet" href="css/style.css" /></noscript>
<![endif]-->
<!-- META -->
<meta charset="utf-8" />
<!-- TITLE -->
<title>title</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="shortcut icon" href="img/favicon.ico" />
<!-- Icomoon in IE7 / IE7.CSS -->
<!--[if lte IE 7]>
<script src="js/lte-ie7.js"></script>
<link rel="stylesheet" href="css/ie7.css" />
<![endif]-->
<!--FONTS-->
<link href='http://fonts.googleapis.com/css?family=Maiden+Orange' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div id="header" role="banner">
<img src="img/logo.png" title="title" alt="" />
</div> <!-- end #HEADER -->
<div id="main" role="main">
<div class="left content">
<h2>WHAT WE DO</h2>
</div>
<div class="center content">
<h2>OUR SPECIALTIES</h2>
<ul>
<li><a aria-hidden="true" data-icon="f">WATER</a></li>
<li><a aria-hidden="true" data-icon="$">FIRE</a></li>
<li><a aria-hidden="true" data-icon="#">LIGHTING</a></li>
<li><a aria-hidden="true" data-icon="a">AUDIO</a></li>
<li><a aria-hidden="true" data-icon="!">TECH F/X</a></li>
</ul>
</div>
<div class="left content">
<h2>CONTACT US</h2>
<div class="info">
<p>Name</p>
<p>e: <span class="brown">email</span></p>
<p>p: <span class="brown">888-888-8888</span></p>
</div>
<div class="info">
<p>Name</p>
<p>e: <span class="brown">email</span></p>
<p>p: <span class="brown">888-888-8888</span></p>
</div>
</div>
</div> <!-- end #MAIN -->
<div id="footer" role="contentinfo">
<p>©</p>
</div> <!-- end #FOOTER -->
</div> <!-- end #CONTAINER -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>
CSS
#font-face {
font-family: 'icomoon';
src:url('/fonts/icomoon.eot');
src:url('/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('/fonts/icomoon.woff') format('woff'),
url('/fonts/icomoon.ttf') format('truetype'),
url('/fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* UNIVERSAL
=================================*/
body {
background-color: #292929;
background: url("/img/bg.png") repeat;
font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
font-size: 62.5%; /* 1em = 10px */
-webkit-font-smoothing: antialiased;
}
#container {
width: 960px;
margin: 0 auto;
}
h2 {
display: inline-block;
font-family: 'Maiden Orange', cursive;
font-size: 3.5em;
font-weight: 100;
color: #3c2811;
padding: 0 0 2px 0;
border-bottom: 1px #3c2811 solid;
}
a,
.center a:hover {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
color: #fff;
}
a,
.brown,
.center a:hover {
color: #3c2811;
}
li {
list-style: none;
margin: 0 0 20px 10px;
}
/* HEADER
=================================*/
#header {
background: url("/img/ribbon.png") no-repeat center;
height: 99px;
margin: 60px 0 0 0;
position: relative;
}
#header img {
display: inline-block;
position: absolute;
top: 13%;
left: 35%;
}
/* MAIN
=================================*/
#main {
overflow: hidden;
}
#main div:first-child h2 {
margin-left: 65px;
}
#main div:nth-child(2) h2 {
margin-left: 40px;
}
#main div:last-child h2 {
margin-left: 65px;
}
.content {
margin: 20px 0 0 0;
float: left;
height: 439px;
width: 320px;
}
.left {
background: url("/img/left-bg.png") no-repeat;
}
.left p {
font-size: 2em;
margin: 0 40px 0 20px;
line-height: 1.9;
}
/* CENTER */
.center {
background: url("/img/center-bg.png") no-repeat;
}
.center a {
color: #fff;
font-size: 3em;
-webkit-transition: color 0.15s ease-in;
-moz-transition: color 0.15s ease-in;
transition: color 0.15s ease-in;
}
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
padding: 0 30px 0 0;
}
/* CONTACT */
.info {
margin: 0 0 30px 0;
}
.info p:first-child {
padding: 0 0 10px 0;
}
.info p:nth-child(n+2) {
font-size: 1.7em;
line-height: 1.5;
}
/* FOOTER
=================================*/
#footer {
text-align: center;
font-family: 'Maiden Orange';
font-size: 2.4em;
margin: 0 0 20px 0;
}
What is before your <head> tag? Incorrect markup might trigger quirks mode or compatibility mode.
Try explicitly asking IE to render your page with the latest rendering engine available by adding this tag inside <head></head>:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
As #Phil mentioned, it could be quirks mode is triggering this. Too specific DOCTYPE tend to trigger it. To avoid triggering quirks mode with DOCTYPE, don't be specific. Use:
<!DOCTYPE html>
HTML5 for the win!