Why this navbar background, won't change?
I need to put this navbar in a black background, but even with the !important argument I cannot get it working.
The css class is even at the bottom of my custom.css file.
What could be wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="
Welcome to the Cushion Store
">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="/static/css/custom.css">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Title</title>
</head>
<body>
<div>
<div class="container">
<div class="container-fluid bg-light nav-bar-fixed-top my_top_navbar_div">
<!--- GALLITO NAVBAR --->
<nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-bg">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Stickers <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Etiquetas</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Magnetos</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Pines</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Pines</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Empaques</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"><i class="fas fa-shopping-cart"></i></a>
</li>
<li class="nav-item active">
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Registro</a>
</li>
</ul>
</div>
</nav>
custom.css:
body {
font-family: 'Roboto', sans-serif;
}
/* === NavBar === */
.nav-item {
letter-spacing: .2em;
font-size: 14px;
text-transform: uppercase;
}
.dropdown-item {
}
/* == Footer ==== */
.my_footer {
background-color: #5a6268;
}
.my_footer p {
padding-top: 20px;
font-size: 14px;
}
/* == Category Page == */
.my_row_class {
padding-top: 15px;
}
.my_row_class .mx-auto p {
color: #000;
font-size: 12px;
}
.my_row_class .mx-auto p a {
color: #000;
font-size: 12px;
text-decoration: none;
}
.my_image {
width: 100%;
height: auto;
}
.my_title {
font-size: 16px;
text-transform: uppercase;
letter-spacing: .2em;
}
.my_image_padding {
padding-top: 16px;
}
.my_bottom_margin {
margin-bottom: 10px;
}
.card-body h4 {
font-size: 14px;
text-transform: uppercase;
letter-spacing: .2em;
}
/*=== Product Page ==*/
.my_prod_row_class {
padding-top: 15px;
padding-bottom: 20px;
}
.my_prod_row_class .mx-auto p {
color: #000;
font-size: 12px;
}
.my_prod_row_class .mx-auto p a {
color: #000;
font-size: 12px;
text-decoration: none;
}
.my_prod_title {
font-size: 16px;
text-transform: uppercase;
letter-spacing: .2em;
padding-top: 15px;
padding-bottom: 10px;
}
.my_prod_text {
padding-right: 20px;
}
/* === Pay With Card === */
.stripe-button-el {
width: 100% !important;
display: block !important;
background-color: #868e96 !important;
border: 0px !important;
background-image: none !important;
}
.stripe-button-el span {
display: block !important;
position: relative !important;
}
.errorlist li {
color: red;
font-weight: bold;
}
.my_custom_div {
margin-bottom: 20px !important;
}
.my_top_navbar_div {
height: 60px;
line-height: 50px;
}
.my_custom_menu {
text-align: right !important;
}
.my_custom_menu ul li {
list-style: none;
color: black;
text-transform: uppercase;
letter-spacing: .2em;
font-size: 12px;
padding-right: 20px;
display: inline;
}
.my_custom_menu ul li a {
text-decoration: none;
color: black;
list-style: none;
text-transform: uppercase;
letter-spacing: .2em;
font-size: 12px;
}
/* BOTONES JUMBOTRON */
.btn-azul {
text-decoration: none;
background-color: #5ba4e6;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
font-weight: 700;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
font-size: 1.4rem;
padding: 22px 30px;
border-radius: 6px;
border:none;
}
.btn-azul:focus {
outline:none;
}
.btn-azul:hover {
text-decoration: none;
background-color: #7ab6eb;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
font-weight: 700;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
font-size: 1.4rem;
padding: 22px 30px;
border-radius: 6px;
border:none;
}
.btn-naranja {
text-decoration: none;
background-color: #ffa31a;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
font-weight: 700;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
background-image: linear-gradient(to bottom,rgba(255,255,250,.09) 0%,rgba(0,0,0,.09) 100%);
font-size: 1.4rem;
padding: 22px 30px;
border-radius: 6px;
border:none;
}
button.btn-naranja:focus {
outline:none;
}
button.btn-naranja:hover {
text-decoration: none;
background-color: #ffad33;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
font-weight: 700;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
font-size: 1.4rem;
padding: 22px 30px;
border-radius: 6px;
border:none;
}
/* ==================== */
.btn-xlarge {
padding: 18px 28px;
font-size: 22px;
line-height: normal;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
nav.navbar {padding: 0 1rem;}
li.nav-item:hover {
background-color: saddlebrown;
}
/*=== NAVBAR === */
.navbar-bg {
background-color: black !important;
}
UPDATE 1:
I think that it has to do with mi css file that is saved in "cache"?
When I comment all my css clases the page looks the same. But when I remove/add back the classes directly in the HTML, through the console, I see changes in the page.
I've refreshed my page with CTRL + F5 but no effect takes place. I should mention that this is a web page developed with Django in PyCharm 2018.
Try this way:
<nav class="navbar navbar-expand-md bg-dark fixed-top">
and remove .navbar-bg class from your css file.
Just exactly the same problem with me. Here is the answer. Look at your code here:
<link rel="stylesheet" href="/static/css/custom.css">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
The order of your css stylesheet has been ordered that the custom.css is lower level than the bootstrap css style sheet. So that when the code runs, it just simply overrides your stylesheet by bootstrap style if available (in this case, because bootstrap has background Color already so it will automatically replace your background Color)
Solution:
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
<link rel="stylesheet" href="/static/css/custom.css">
Just put the custom css to the bottom of these links of everything will be fixed!
*Note: And don't forget the hard fresh (shift + reload) to make the changes!
Well, your code works (just tested it).
The reason it does not work for you could be that your browser saved a cached version of your webpage.
So in your browser, try a "hard reload" to remove any potential cached version and reload the page.
To do that in Chrome: open developer tools (hit F12) and then right click on the refresh icon of the browser. Select "empty cache and hard reload", and see if it works for you.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
check code
I have share one picture of my website login page below and I want zoom text animation on hover for "Sign In" button which is ...
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image:linear-gradient(to right, rgba(19,20,25,0.8), rgba(19,20,25,0.8)), url('../images/barbell-on-the-floor-1552252.jpg');
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Poppins', sans-serif;
}
.form{
position: relative;
width: 350px;
padding: 40px 60px;
background-color: #131419;
border-radius: 20px;
text-align: center;
box-shadow: -3px -3px 20px rgba(33, 150, 243,0.5),
10px 10px 10px rgba(33, 150, 243, 0.05);
}
.form h2{
color: #c7c7c7;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 4px;
}
.form .input{
text-align: left;
margin-top: 40px;
}
.form .input .inputbox{
margin-bottom: 20px;
}
.form .input .inputbox label{
display: block;
color: #868686;
margin-bottom: 5px;
font-size: 18px;
margin-left: 10px;
}
.form .input .inputbox input{
width: 100%;
height: 50px;
background-color: #131419;
border: none;
outline: none;
border-radius: 40px;
color: #fff;
padding: 5px 15px;
font-size: 18px;
color: #03a9f4;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]{
margin-top: 20px;
box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1),
2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]:active{
color: #006c9c;
margin-top: 20px;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input::placeholder{
color: #555;
font-size: 18px;
}
.create{
color:grey;
margin-top: 30px;
font-weight: lighter;
}
.create a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.forget{
color:grey;
margin-top: 15px;
font-weight: lighter;
}
.forget a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.inputbtn{
display: flex;
justify-content: center;
align-items: center;
}
.inputbtn input{
color: #2196f3;
background-color: transparent;
width: 100%;
height: 50px;
border-radius: 40px;
border-color: #2196f3;
overflow: hidden;
outline: none;
}
.inputbtn input:hover{
color:#255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
text-transform: scale(0.20)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="This website is for workout lovers and Here you can get knowledge about workout and nutrition">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="./images/dumbbell-pixel-variant (1).png" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,400;1,100&display=swap" rel="stylesheet">
<title>Workout</title>
</head>
<body>
<div class="form">
<h2>Login</h2>
<div class="input">
<div class="inputbox">
<label>Username</label>
<input type="text" placeholder="example#gmail.com">
</div>
<div class="inputbox">
<label>Password</label>
<input type="text" placeholder="••••••••">
</div>
<div class="inputbtn" id="submit">
<input class="submit" type="submit" value="Sign In">
</div>
</div>
<div class="create">
<p>or Create Account Click Here</p>
</div>
<div class="forget">
<p>Forget Password ? Click Here</p>
</div>
</div>
</body>
</html>
check Image:
From what you described, I believe this is what you want. I've added font-weight:bold; and font-size: 1.4em; to the .inputbtn input:hover{} CSS instruction.
This might not be the exact amount text zooming that you wanted but you can easily configure it as you wish.
Run and test:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image:linear-gradient(to right, rgba(19,20,25,0.8), rgba(19,20,25,0.8)), url('../images/barbell-on-the-floor-1552252.jpg');
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Poppins', sans-serif;
}
.form{
position: relative;
width: 350px;
padding: 40px 60px;
background-color: #131419;
border-radius: 20px;
text-align: center;
box-shadow: -3px -3px 20px rgba(33, 150, 243,0.5),
10px 10px 10px rgba(33, 150, 243, 0.05);
}
.form h2{
color: #c7c7c7;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 4px;
}
.form .input{
text-align: left;
margin-top: 40px;
}
.form .input .inputbox{
margin-bottom: 20px;
}
.form .input .inputbox label{
display: block;
color: #868686;
margin-bottom: 5px;
font-size: 18px;
margin-left: 10px;
}
.form .input .inputbox input{
width: 100%;
height: 50px;
background-color: #131419;
border: none;
outline: none;
border-radius: 40px;
color: #fff;
padding: 5px 15px;
font-size: 18px;
color: #03a9f4;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]{
margin-top: 20px;
box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1),
2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]:active{
color: #006c9c;
margin-top: 20px;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input::placeholder{
color: #555;
font-size: 18px;
}
.create{
color:grey;
margin-top: 30px;
font-weight: lighter;
}
.create a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.forget{
color:grey;
margin-top: 15px;
font-weight: lighter;
}
.forget a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.inputbtn{
display: flex;
justify-content: center;
align-items: center;
}
.inputbtn input{
color: #2196f3;
background-color: transparent;
width: 100%;
height: 50px;
border-radius: 40px;
border-color: #2196f3;
overflow: hidden;
outline: none;
}
.inputbtn input:hover{
color:#255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
text-transform: scale(0.20);
font-weight:bold;
font-size: 1.4em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="This website is for workout lovers and Here you can get knowledge about workout and nutrition">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="./images/dumbbell-pixel-variant (1).png" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,400;1,100&display=swap" rel="stylesheet">
<title>Workout</title>
</head>
<body>
<div class="form">
<h2>Login</h2>
<div class="input">
<div class="inputbox">
<label>Username</label>
<input type="text" placeholder="example#gmail.com">
</div>
<div class="inputbox">
<label>Password</label>
<input type="text" placeholder="••••••••">
</div>
<div class="inputbtn" id="submit">
<input class="submit" type="submit" value="Sign In">
</div>
</div>
<div class="create">
<p>or Create Account Click Here</p>
</div>
<div class="forget">
<p>Forget Password ? Click Here</p>
</div>
</div>
</body>
</html>
You could try something along the lines of ':placeholder:hover' in order to target the selector which lets you hover over the element and will affect the text within the placeholder. After that you could try to put the 'transition' property within the curly braces - {} - and set the 'font-size' property for the text size you desire. On theory it should adjust the font size to the value you've set whenever you hover your cursor over the placeholder.
Everything inside the pre tag currently is not being aligned left. It starting from I dont know its not even middle.
How do I style the content container in the correct way?
I have tried a few things, but it didn't work as expected.
Why I am getting a huge blank space to the left inside the content of the pre tag.
.d-lg-block {
display: block!important;
}
.code-examples {
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
margin: 0 0 40px;
}
.code-examples .nav-pills {
background-size: 100%;
background-image: linear-gradient(#555555, #444444);
border: 1px solid #444;
border-radius: 5px 5px 0 0;
zoom: 1;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
list-style: none;
line-height: normal;
margin: 0;
padding: 5px 10px;
position: relative;
z-index: 1;
}
.code-examples .nav-pills:before,
.code-examples .nav-pills:after {
content: '\0020';
display: block;
height: 0;
overflow: hidden;
}
.code-examples .nav-pills li {
display: inline;
}
.code-examples .nav-pills {
background-size: 100%;
background-image: linear-gradient(#555555, #444444);
border: 1px solid #444;
border-radius: 5px 5px 0 0;
zoom: 1;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
list-style: none;
line-height: normal;
margin: 0;
padding: 5px 10px;
position: relative;
z-index: 1;
height: 40px;
}
.code-examples .nav-pills li a {
color: #ccc;
display: inline-block;
line-height: normal;
float: left;
font-size: 14px;
padding: 3px 20px;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.code-examples .nav-pills li.active a {
background-size: 100%;
background-image: linear-gradient(#222222, #444444);
border-radius: 25px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.2);
color: #fff;
line-height: normal;
}
.code-examples .tab-content {
background: #333;
bottom: 0;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
box-sizing: border-box;
margin-bottom: -80px;
margin-top: 30px;
position: absolute;
top: 0;
}
/*.code-examples .tab-content pre {
background: transparent;
border: 0 !important;
bottom: 0;
color: #fff;
font-family: 'Ubuntu Mono', 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
font-size: 13px;
left: 20px;
line-height: 1.4;
margin: 0;
position: absolute;
right: 20px;
top: 20px;
}*/
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="d-lg-block">
<div id="quickstart_code_samples" class="code-examples">
<ul class="nav-pills">
<li class="active">Curl</li>
<li class=""> Ruby</li>
<li class=""> Python</li>
<li class=""> Php</li>
</ul>
<div class="tab-content">
<pre id="curlsample" class="tab-pane ace_editor ace-monokai ace_dark active" style="display: block;">
slksdk
sdflkdsfkld
sdflksdlkf
ldsksd
ddsds
</pre>
<pre id="rubysample" class="tab-pane ace_editor ace-monokai ace_dark" style="display: none;">
slksdk
sdflkdsfkld
sdflksdlkf
ldsksd
</pre>
</div>
</div>
</div>
It's in the middle because you have spaces there :D
It's TAB indented.
<pre>
Indented stuff
Indented stuff
</pre>
<pre>
Aligned left
Aligned left
</pre>
I have fix your code. try out this. you cant add pre. pre is use to show exact code block on screen. because of using pre tag you are getting more space in front of your list. I have added pre and div for you. use whatever you need.
.d-lg-block {
display: block!important;
}
.code-examples {
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
margin: 0 0 40px;
}
.code-examples .nav-pills {
background-size: 100%;
background-image: linear-gradient(#555555, #444444);
border: 1px solid #444;
border-radius: 5px 5px 0 0;
zoom: 1;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
list-style: none;
line-height: normal;
margin: 0;
padding: 5px 10px;
position: relative;
z-index: 1;
}
.code-examples .nav-pills:before,
.code-examples .nav-pills:after {
content: '\0020';
display: block;
height: 0;
overflow: hidden;
}
.code-examples .nav-pills li {
display: inline;
}
.code-examples .nav-pills {
background-size: 100%;
background-image: linear-gradient(#555555, #444444);
border: 1px solid #444;
border-radius: 5px 5px 0 0;
zoom: 1;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
list-style: none;
line-height: normal;
margin: 0;
padding: 5px 10px;
position: relative;
z-index: 1;
height: 40px;
}
.code-examples .nav-pills li a {
color: #ccc;
display: inline-block;
line-height: normal;
float: left;
font-size: 14px;
padding: 3px 20px;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
background-size: 100%;
background-image: linear-gradient(#222222, #444444);
border-radius: 25px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.2);
color: #fff;
line-height: normal;
}
.code-examples .tab-content {
box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
box-sizing: border-box;
padding: 20px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="d-lg-block">
<div id="quickstart_code_samples" class="code-examples">
<ul class="nav-pills nav " id="myTab" role="tablist">
<li class="nav-item ">
<a class="nav-link active" id="curl-tab" data-toggle="tab" href="#curlsample" role="tab" aria-controls="curlsample" aria-selected="true">Curl</a>
</li>
<li class="nav-item">
<a class="nav-link" id="ruby-tab" data-toggle="tab" href="#rubysample" role="tab" aria-controls="rubysample" aria-selected="false">Ruby</a>
</li>
<li class=""> Python</li>
<li class=""> Php</li>
</ul>
<div class="tab-content col-md-12" id="myTabContent">
<div id="curlsample" class="tab-pane fade show ace_editor ace-monokai ace_dark active" role="tabpanel" aria-labelledby="curl-tab">
<pre>
slksdk
sdflkdsfkld
sdflksdlkf
ldsksd
ddsds
</pre>
</div>
<div id="rubysample" class="tab-pane fade ace_editor ace-monokai ace_dark" role="tabpanel" aria-labelledby="ruby-tab">
slksdk sdflkdsfkld sdflksdlkf ldsksd
</div>
</div>
</div>
</div>
I am trying to get the social media icons to display in a line rather than stacked on top of one another. I have tried changing the display to inline rather than block but all that happens is that the icons get smaller in size but remain stacked on top of one another.
Here's the code:
html {
font-size: 100%;
/*font-size : 16px;*/
}
/*Top Header*/
.header {
background: #e7e5e4;
}
.header_left {
width: 65%;
float: left;
}
.header_right {
width: 35%;
float: right;
background: #e7e5e4;
}
.header_right li {
margin-left: 45%;
padding-top: 15px;
}
h1 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 4.500em;
padding: 50px 50px;
text-align: center;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
.elegantshadow {
color: #131313;
background-color: #e7e5e4;
letter-spacing: .15em;
text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2;
}
.header h2 {
font-size: 24px;
font-family: 'Niconne', cursive;
color: #131313;
text-align: center;
}
#font-face {
font-family: 'si';
src: url("../socicon/socicon.eot");
src: url("../socicon/socicon.eot?#iefix") format('embedded-opentype'), url("../socicon/socicon.woff") format('woff'), url("../socicon/socicon.ttf") format('truetype'), url("../socicon/socicon.svg#icomoonregular") format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#font-face {
font-family: si;
src: url(../socicon/socicon.svg) format(svg);
}
}
.header .soc {
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.header .soc li {}
.header .soc li a {
font-family: si!important;
font-style: normal;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-o-transition: .1s;
-ms-transition: .1s;
-moz-transition: .1s;
-webkit-transition: .1s;
transition: .1s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
overflow: hidden;
text-decoration: none;
text-align: center;
display: block;
position: relative;
z-index: 1;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 45px;
margin-right: 8%;
color: #ffffff;
background-color: #e7e5e4;
}
.header .soc-icon-last {
margin: 0 !important;
}
.header .soc-twitter:before {
content: 'a';
}
.header .soc-facebook:before {
content: 'b';
}
.header .soc-linkedin:before {
content: 'j';
}
.soc-email1:before {
content: '<';
}
.header .soc a:hover {
z-index: 2;
-webkit-transform: scale(1.1);
transform: scale(1.1);
background-color: #3371b7;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>Skramshots Photography</title>
<meta name="author" content="Mark Stewart" />
<meta name="description" content="This site is about photography by
Mark Stewart a.k.a. Skramshots" />
<meta name="keywords" content="HTML, CSS, Javascript, jQuery,
skramshots, photography">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" type="text/css" href="css/master2.css">
<link rel="stylesheet" type="text/css" href="css/imageeffects.css">
<link rel="stylesheet" type="text/css" href="css/blogsports.css">
<link rel="stylesheet" type="text/css" href="css/lightbox.css">
<link href="https://fonts.googleapis.com/css?
family=Niconne" rel="stylesheet">
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
</head>
<body>
<div class="header">
<ul class="soc">
<div class="header_left">
<h1 class="elegantshadow">SkramShots Photography
</h1>
<br>
<h2>Move your mouse pointer over the images</h2>
<br>
</div>
<div class="header_right">
<li>
<a class="soc-twitter" href="https://twitter.com/skramshots"></a>
</li>
<li>
<a class="soc-facebook" href="https://www.facebook.com/webpage.skramshots"></a>
</li>
<li>
<a class="soc-linkedin " href="https://www.linkedin.com/in/mark-stewart-8315443?trk=hp-identity-
name"></a>
</li>
<li>
<a class="soc-email1 soc-
icon-last btn lightbox-61896367686376 email" href="https://form.jotformeu.com/61896367686376"></a>
</li>
</div>
</ul>
<br>
</div>
</body>
</html>
I don't know how to attach the socicon.eot, svg, ttf or woff which I am using so I hope the code makes sense without them.
What I am actually doing is trying to implement a media query for mobile to have the icons display in a line but I am just trying to get it working as normal first `
First off remove margin-left: 45%; from .header_right li. That style is pushing those lis to the right, which is forcing them to stack.
You will then just need to add display:inline-block; or float:left; to .header_right li selector to make them display in a line.
I am trying to center a div, but it is not working. As you can see in the code below, I have the margin set, but the div doesn't move to the center.
body {
margin: 0;
padding: 0;
font-family: Helvetica;
font-weight: bold;
}
.body {
margin: 0 auto;
}
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
li {
float: left;
}
li a {
color: white;
display: block;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
.one, .two, .three, .name {
border-bottom: 4px solid black;
}
.one:hover {
border-color: #ED08FD;
}
.two:hover {
border-color: #0821FD;
}
.three:hover {
border-color: #FF41C0;
}
.name:hover {
border-color: #DAD8D9;
}
.name {
color: white;
padding-left: 15px;
}
.main-body {
text-align: center;
}
hr {
border: 1px solid #6E6E6E;
}
.circle-row {
width: 100px;ext-align: left;
padding-left: 4cm;
font-size: 35px;
}
.welcomeHeader, .background {
border: 2px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div class="body">
<div class="navbar">
<ul>
<li class="name">JordanCodes</li>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
</div>
<div class="header">
<img src="header-background.jpg">
</div>
<div class="main-body">
<h1 id="welcomeHeader">JordanCodes</h1>
<br>
<br>
<br>
<br>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
I have tried setting the width to 50%, which works, but since have the ul width set to 700px the div doesn't center properly.
If you want to center your ul element, try adding this:
body {width:100%;}
ul {margin:auto;}
please see: https://jsfiddle.net/ty8858hq/
on your styles.css try changing this:
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
to this:
ul {
list-style-type: none;
background-color: black;
margin: 0 auto 0; /* When 3 values are entered, the first one is the value for the top margin, the second is for the horizontal margin and the third one is for the bottom margin */
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
this should make your navbar to display at the center of your page, i hope this works well for you!
The property I'm using to center, or at least make it close to center should work. What I've done is added this css.
.one {
margin-left: 125px /*you can modify this*/;
}
You can also change the .one to .name, but .one looks better;
body {
margin: 0;
padding: 0;
font-family: Helvetica;
font-weight: bold;
}
.body {
margin: 0 auto;
}
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
li {
float: left;
}
li a {
color: white;
display: block;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
.one {
margin-left: 125px;
}
.one, .two, .three, .name {
border-bottom: 4px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div class="body">
<div class="navbar">
<ul>
<li class="name">JordanCodes</li>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
</div>
<div class="header">
<img src="header-background.jpg">
</div>
<div class="main-body">
<h1 id="welcomeHeader">JordanCodes</h1>
<br>
<br>
<br>
<br>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
I am trying to display a preview of sheet music listed on an ordered list. I can only get to display the image when hovering on the < li > element, but I would like to only see the image when hovering on the first section of each row ("[ view ]"). I've tried modifying different things, but I can't get it right. This is how my experiment looks so far: http://www.antonioromo.com/newsite/music.html
I'm sure I have redundant code and that I probably just need to change something simple, but I'm no expert.
This is the way I'm listing items:
<div id="SheetMusicStore">
<ol class="enlarge">
<li>
<span class="view">[ view ]</span>
<span class="preview"><img src="images/01gnw-tn.png" alt="Just Another Dusk" /><br />Just Another Dusk (Good Night Wishes)</span>
<span class="name">Just Another Dusk (Good Night Wishes)</span>
<span class="price">$3.99 BUY</span>
</li>
<li>
<span class="view">[ view ]</span>
<span class="preview"><img src="images/02gnw-tn.png" alt="My Nightlight" /><br />My Nightlight (Good Night Wishes)</span>
<span class="name">My Nightlight (Good Night Wishes)</span>
<span class="price">$3.99 BUY</span>
</li>
</ol>
</div>
This is my CSS code:
/** Sheet Music Store **/
#SheetMusicStore {
width: 500px;
margin: 40px auto;
}
ol.enlarge{
margin-left:0;
font-family: 'Trebuchet MS', Helvetica, Tahoma, Arial, Sans-serif;
font-size: 1em;
color: #999;
padding: 10px 20px;
-moz-box-shadow: inset 0 2px 2px #582E58;
-webkit-box-shadow: inset 0 2px 2px #582E58;
box-shadow: inset 0 2px 2px #582E58;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background: url(../images/sheet-bg.png) repeat 0 0 scroll;
color: #AAA;
}
ol.enlarge li{
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
background: transparent url(../images/sheet-item-bg.png) repeat-x bottom left scroll;
padding: 5px 0 7px 0;
list-style-position: inside;
font-size: 12px;
}
ol.enlarge img{
background-color: #eae9d4;
padding: 6px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
ol.enlarge span.preview{
position: absolute;
left: -9999px;
background-color: #eae9d4;
padding: 10px;
font-family: 'Trebuchet MS', Helvetica, 'Droid Sans', sans-serif;
font-size: .9em;
text-align: center;
color: #495a62;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
ol.enlarge li:hover{
color: #EEE;
z-index: 50;
}
ol.enlarge li:hover .view{
color:#FFFFCC !important;
}
ol.enlarge .view:hover{
cursor: pointer;
}
ol.enlarge span.preview img{
padding: 2px;
background: #ccc;
}
ol.enlarge li:hover span.preview{
top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: 300px; /*distance from the left of the thumbnail to the left of the popup image*/
z-index: 50;
}
ol.enlarge .price {
width: 62px;
height: 16px;
position: absolute;
top: 7px;
right: 0;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: transparent url(../images/buy-bg.png) repeat 0 0 scroll;
margin: 0 0 0 10px;
font-size: 10px;
text-align: center;
line-height: 16px;
text-shadow: none;
color: #BBB;
text-decoration: none;
z-index: 0;
}
ol.enlarge .price:hover {
color: #EEE;
}
Also, I don't know why there is a large blank space left at the very bottom of the page. Is it created by the elements created on the fly? Thanks in advance for any help!
You could nest the preview inside the view element. And just change the
ol.enlarge li:hover span.preview
to something like
span.view:hover span.preview
here is a demo on jsfiddle