I need to apply this theme for my django template using css. I wrote the css file but I have a mistake that not all the style is applied to the template. Please help.
This is the full code including the theme.css and the base html:
nav {
/* Repeating background image */
background: url(http://weebtutorials.com/wp-content/uploads/2012/11/a.png);
width: 210px;
margin: 20px;
}
nav ul {
/* Removes bullet points */
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
/* Any child positioned absolutely will be positioned relative to this */
position: relative;
}
nav a {
color: #e8e8e8;
padding: 12px 0px;
/* Fill all available horizontal space */
display: block;
/* Remove underline */
text-decoration: none;
/*
New CSS3 animations:
apply transition to background property, taking 1s to change it
*/
transition: background 1s;
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
font-family: tahoma;
font-size: 13px;
text-transform: uppercase;
padding-left: 20px;
}
nav a:hover {
/*
RGBA background for transparancy:
last number(0.05) is the transparency
*/
background: RGBA(255, 255, 255, 0.05);
color: #fff;
}
nav a:hover span {
background: #7d2c41;
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
position: absolute;
left: 210px;
top: 0;
border-top: 1px solid #e9e9e9;
display: none;
}
nav ul ul li {
width: 200px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
}
nav ul ul li a {
color: #a8a8a8;
font-size: 12px;
text-transform: none;
}
nav ul ul li a:hover {
color: #929292;
}
nav span {
width: 12px;
height: 12px;
background: #fff;
display: inline-block;
float: left;
margin-top: 3px;
margin-right: 20px;
position: relative;
transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
nav span:before {
content: "";
width: 12px;
height: 2px;
background: #3a3b3b;
position: absolute;
left: 0px;
top: 5px;
}
nav span:after {
content: "";
width: 2px;
height: 12px;
background: #3a3b3b;
position: absolute;
left: 5px;
position: top;
}
.cust-dropdown {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 2px solid #fff;
position: absolute;
top: -120px;
right: 20px;
}
.cust-dropdown ul {
margin: -110;
padding-left: -145;
list-style: none;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link href="{{STATIC_URL}}css/theme.css" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li class="current"><span></span> Home </li>
<li> <span></span>AI assisted backtesting
</li>
<li> <span></span>Best stocks to trade today </li>
<li> <span></span>Get free data </li>
</ul>
</nav>
<div class="btn-group cust-dropdown pull-right">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown" role="button">
<i class="glyphicon glyphicon-menu-hamburger"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>About</li>
<li>Documentation</li>
<li>Pricing</li>
<li>Contact us</li>
<li>Register</li>
</ul>
</div>
</body>
</html>
First you should have the prerequisites in your settings.py file:
you must have django.contrib.staticfiles in your INSTALLED_APPS
you must have defined a STATIC_URL:
STATIC_URL = /static/
All this set, you put in your template file:
{% load static %}
<link href="{% static "css/theme.css" %}" rel="stylesheet">
See the docs for more details.
Related
I have two css files
Say sidebar.css and topbar.css
When I link these in one html file, the properties get exchanged
Suppose if I specify the margin:0 to sidebar and margin:30px to topbar, the topbar gets placed at 0px too. And many other properties inside gets overridden etc. How should I overcome this and is there a way where I can link these codes in a html file individually without such problem? If not what changes should I make in the code.
I have a webpage containing nav elements and I've inserted a sidebar into the code which also consists some nav and other elements which makes alterations in my original webpage. When we link two css files ,how can we make 'em seperate and independent.
Here is my sidebar code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sidebar Menu with sub-menu</title>
<link rel="stylesheet" href="sidebarnewstyle.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="sidebarnewstyle.css"/> <!-- href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"-->
</head>
<body>
<div class="btn">
<span class="fas fa-bars"></span>
</div>
<nav class="sidebar">
<div class="text">
Side Menu
</div>
<ul>
<li class="active">Dashboard</li>
<li>
<a href="#" class="feat-btn">RESULT
<span class="fas fa-caret-down first"></span>
</a>
<ul class="feat-show">
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
<li>IT</li>
</ul>
</li>
<li>
<a href="#" class="serv-btn">Subject-wise
<span class="fas fa-caret-down second"></span>
</a>
<ul class="serv-show">
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
<li>IT</li>
</ul>
</li>
<li>Subject</li>
<li>Change Password</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<div class="header">
SYSTEM
<script >
$('.btn').click(function(){
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
});
$('.feat-btn').click(function(){
$('nav ul .feat-show').toggleClass("show");
$('nav ul .first').toggleClass("rotate");
});
$('.serv-btn').click(function(){
$('nav ul .serv-show').toggleClass("show1");
$('nav ul .second').toggleClass("rotate");
});
$('nav ul li').click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
</script>
</body>
</html>
And this is the corresponding css file of sidebar
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
z-index: 0;
}
.btn{
position: absolute;
top: 15px;
left: 45px;
height: 45px;
width: 45px;
text-align: center;
background: #1b1b1b;
border-radius: 3px;
cursor: pointer;
transition: left 0.4s ease;
}
.btn.click{
left: 260px;
}
.btn span{
color: white;
font-size: 28px;
line-height: 45px;
}
.btn.click span:before{
content: '\f00d';
}
.sidebar{
position: fixed;
width: 250px;
height: 100%;
left: -250px;
background: #1b1b1b;
transition: left 0.4s ease;
}
.sidebar.show{
left: 0px;
}
.sidebar .text{
color: white;
font-size: 25px;
font-weight: 600;
line-height: 65px;
text-align: center;
background: #1e1e1e;
letter-spacing: 1px;
}
nav ul{
background: #1b1b1b;
height: 100%;
width: 100%;
list-style: none;
}
nav ul li{
line-height: 60px;
border-top: 1px solid rgba(255,255,255,0.1);
}
nav ul li:last-child{
border-bottom: 1px solid rgba(255,255,255,0.05);
}
nav ul li a{
position: relative;
color: white;
text-decoration: none;
font-size: 18px;
padding-left: 40px;
font-weight: 500;
display: block;
width: 100%;
border-left: 3px solid transparent;
}
nav ul li.active a{
color: cyan;
background: #1e1e1e;
border-left-color: cyan;
}
nav ul li a:hover{
background: #1e1e1e;
}
nav ul ul{
position: static;
display: none;
}
nav ul .feat-show.show{
display: block;
}
nav ul .serv-show.show1{
display: block;
}
nav ul ul li{
line-height: 42px;
border-top: none;
}
nav ul ul li a{
font-size: 17px;
color: #e6e6e6;
padding-left: 80px;
}
nav ul li.active ul li a{
color: #e6e6e6;
background: #1b1b1b;
border-left-color: transparent;
}
nav ul ul li a:hover{
color: cyan!important;
background: #1e1e1e!important;
}
nav ul li a span{
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 22px;
transition: transform 0.4s;
}
nav ul li a span.rotate{
transform: translateY(-50%) rotate(-180deg);
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #202020;
z-index: -1;
text-align: center;
}
.content .header{
font-size: 45px;
font-weight: 600;
}
.content p{
font-size: 30px;
font-weight: 500;
}
And this is a topbar which also has nav and other css elements in its style sheet resulting overlapping etc.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>NAv menu</title>
<link rel="stylesheet" type="text/css" href="topbarstyle.css">
</head>
<body>
<div class="navigation">
<nav>
I
II
III
IV
<div class="animation start-home">
</div>
</nav>
</div>
</body>
</html>
This is the code of topbar stylesheet
#import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap')
body {
font-family: 'Open Sans', sans-serif;
background: #2c3e50;
}
nav{
position: relative;
margin: 30px auto 0;
width: 420px;
height: 45px;
background: #000;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
}
nav a{
font-size: 15px;
color: white;
text-decoration: none;
line-height: 45px;
position: relative;
z-index: 1;
display: inline-block;
text-align: center;
}
nav .animation{
position: absolute;
height: 100%;
top: 0;
z-index: 0;
background: #4dff4d;
border-radius: 8px;
transition: all .5s ease 0s;
}
a:nth-child(1){
width: 100px;
}
nav .start-home,a:nth-child(1):hover~.animation{
width: 100px;
left: 0;
}
a:nth-child(2){
width: 110px;
}
nav .start-II,a:nth-child(2):hover~.animation{
width: 110px;
left: 100px;
}
a:nth-child(3){
width: 100px;
}
nav .start-III,a:nth-child(3):hover~.animation{
width: 100px;
left: 210px;
}
a:nth-child(4){
width: 100px;
}
nav .start-IV,a:nth-child(4):hover~.animation{
width: 120px;
left: 300px;
}
I've tried z-index and position as fixed / absolute. But is there no other way to link these stylesheets seperately in a single html file.
When you link two css files, they are both loaded by the browser and interpreted as one big file, there is no way around it.
(note that this is how for instance css resets work: the first file will 'reset' all css to standardize it and then your css files come and are applied)
Since you have in both files a definition for nav the end result will be a combination of both definitions, with the last one taking precedence.
The only way I see around this is to actually use classes instead of elements as selectors.
So, I am attempting to make a pretty dope navigation menu bar animation/transition for my website to create a slick looking effect. My goal here is to use only CSS, and not add in any javascript that just complicate things. This link has the kind of animation I'm looking for. Just to give you guys an idea. (Just browsing through W3 Schools to see what animation I'm looking for).
The idea here is to change topnav's background-color from page to page in as a smooth transition.
Here is what I currently have for my CSS styling. I am liking my current styling, but I just want to add in the transition from page to page for the background-color to act like a slider in a sort of way
ul.topnav li a:hover:not(.active) {
background-color: #4d4dff;
transition: 0.5s;
}
ul.topnav li a.active {
background-color: #00cc99;
color: black;
/* I would like to add in some sort of animations / transition here. */
}
<ul class="topnav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<li>Home
<!--Background when active-->
<li>About</li>
<li>Portfolio</li>
<!--If I click on this page, it would transition the background COLOR to this page-->
<li>Gallery</li>
<li>Contact Me</li>
</div>
</ul>
EDIT COMMENT FOR RESPONSE TO Muljayan
Take a look at this example here https://youtu.be/oCUCWnbre0k?t=1014 and follow this code.
HTML
* {
margin: 0;
padding: 0;
}
.navigation {
margin: 200px 20px;
background: #383838;
color: #FFF;
overflow: hidden;
height: 50px;
width: 1000px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.navigation li {
width: 100px;
border-bottom: 1px solid #666;
border-right: 2px ridge #585858;
float: left;
list-style-type: none;
font-family: 'ambleregular';
font-weight: normal;
font-size: 15px;
line-height: 28px;
padding: 10px 10px 10px 10px;
-webkit-transition: all .9s;
-moz-transition: all .9s;
-o-transition: all .9s;
-ms-transition: all .9s;
transition: all .9s;
}
.navigation li:hover {
background: #FE980F;
border-bottom: 1px solid #FFF;
}
.navigation li a {
text-decoration: none;
color: #FFF;
}
.navigation li a:hover {
color: #333;
}
/* Search box */
.search_box {
float: right;
border: 1px solid #3C3C3C;
background: #FFF;
border-radius: 0.3em;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
-o-border-radius: 0.3em;
position: absolute;
margin-top: 8px;
margin-right: 15px;
width: 228px;
left: 765px;
top: 204px;
}
.search_box form input[type="text"] {
border: none;
outline: none;
background: none;
font-size: 12px;
color: #acacac;
width: 75%;
padding: 5px;
}
/* Final STEP */
.search_box form input[type="submit"] {
border: none;
cursor: pointer;
background: url(images/search.png) no-repeat 0px 7px;
position: absolute;
right: 0;
width: 20px;
height: 25px;
}
<body bgcolor="#faf7fd">
<ul class="navigation">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="search_box">
<form>
<input type="text" value="Search" onfocus="this.value = ''; {this.value='Search' ;}">
<input type="submit " value=" ">
</form>
</div>
</body>
I used transitions on the li and an animation on the a tags to achieve the effects you needed. on each page without javascript you will have to change the classes out for the active page manually.
Example: On the about page the about a tag would have the class lnk and all the other a tags would have aLnk this is to highlight the current page.
.menu {
display: flex;
align-items: center;
width: 100%;
background-color: #333333;
height: 50px;
float: left;
}
ul {
width: 100%;
float: left;
color: #ffffff;
}
li {
width: 100px;
height: 34px;
float: left;
list-style: none;
background-color: transparent;
transition: ease-in-out .9s;
text-align: center;
padding-top: 10px;
}
li:hover {
background-color: orange;
transition: ease-in-out .9s;
}
.aLnk {
width: 100%;
height: 100%;
float: left;
text-decoration: none;
color: #ffffff;
transition: ease-in-out .9s;
}
.aLnk:hover {
color: yellow;
transition: ease-in-out .9s;
animation-name: changeColor;
animation-duration: .9s;
animation-iteration-count: infinate;
}
#keyframes changeColor {
10% {
color: #000000;
}
100% {
color: yellow;
}
}
.active {
background-color: orange;
}
.lnk {
color: yellow;
text-decoration: none;
}
.lnk:hover {
color: yellow;
}
<div class="menu">
<ul class="topnav">
<li class="active"><a class="lnk" href="index.html">Home</a></li>
<li><a class="aLnk" href="about.html">About</a></li>
<li><a class="aLnk" href="portfolio.html">Portfolio</a></li>
</ul>
</div>
I think this is not possible to do this with pure CSS. The reason for this being whenever you click on a link it loads a new page. To create the effect you desire it is necessary to keep in memory the previous background colour to cause the transition.
For example, if the final colours of the backgrounds are as follows
home page => blue
about page => red
portfolio page => green
If you go from home page to the about page the transition should be blue to red but let's say you're going from the portfolio page to the about page the transition should be green to red.
With pure CSS there is no way of knowing if the previous page had blue or green to transition into the red in the about page.
I would suggest you learn some front end framework like React, Vue or Angular. With those,
* {
margin: 0;
padding: 0;
}
.navigation {
margin: 200px 20px;
background: #383838;
color: #FFF;
overflow: hidden;
height: 50px;
width: 1000px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.navigation li {
width: 100px;
border-bottom: 1px solid #666;
border-right: 2px ridge #585858;
float: left;
list-style-type: none;
font-family: 'ambleregular';
font-weight: normal;
font-size: 15px;
line-height: 28px;
padding: 10px 10px 10px 10px;
-webkit-transition: all .9s;
-moz-transition: all .9s;
-o-transition: all .9s;
-ms-transition: all .9s;
transition: all .9s;
}
.navigation .active {
background: #FE980F;
border-bottom: 1px solid #FFF;
animation: animatedNav 1s;
animation-timing-function: ease-in;
}
#keyframes animatedNav {
0% {background: #383838;}
100% {background: #FE980F;}
}
.navigation li a {
text-decoration: none;
color: #FFF;
}
.navigation .active a {
color: #333;
}
<!-- home.html -->
<body bgcolor="#faf7fd">
<ul class="navigation">
<li class="active">Home</li>
<li>Products</li>
</ul>
</body>
<!-- products.html -->
<body bgcolor="#faf7fd">
<ul class="navigation">
<li>Home</li>
<li class="active">Products</li>
</ul>
</body>
you can create pretty impressive page transitions.
On a side note check the code below and see if this is the effect you desire.
The issue with this would be that the previously visited link will not have a transition
I have 3 links at the top of my webpage and a link embedded into an image.Those 3 have a different background color from the nav but, unfortunately, it also adds this to the image with the link. How do I take it off the image?
html{
font-family: abel;
background-color: #a4bdd1;
margin: 0;
padding: 0;
}
body{
overflow-x:hidden;
margin: 0;
padding: 0;
}
nav {
text-align: center;
background-color: #e4e6e5;
/* position: fixed;
top: 0;
left: 0;
z-index: 9999;*/
width: 100%;
border-bottom: solid #05182e 2px;
margin-top: -1px
}
nav li {
display: inline-block;
font-size: 35px;
padding: 15px;
font-weight: bold;
vertical-align: middle;
}
nav a{
border-radius: 10%;
padding: 8px;
background-color: #cccccc;
color: #1f3b5a;
text-decoration: none;
font-size: 30px;
transition: all 0.5s ease-in-out;
}
nav a:hover{
font-size: 40px;
transition: all 0.5s ease-in-out;
}
nav img{
width: 30%;
border: none;
transition: all 0.5s ease-in-out;
}
nav img:hover{
width: 40%;
transition: all 0.5s ease-in-out;
}
ul {
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Bitter:700' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<title>Brampton Thunder</title>
</head>
<body>
<nav>
<ul>
<li><img src="images/logo.png" alt="Canadian Women's Hockey League Logo"></li>
<li> Home</li>
<li> Roster</li>
<li> Schedule</li>
<li><img src="images/cwhllogo.png"></li>
</ul>
</nav>
You can do it like this:
nav ul li:last-child a {
background-color:#e4e6e5;
}
Check snippet below
html {
font-family: abel;
background-color: #a4bdd1;
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
margin: 0;
padding: 0;
}
nav {
text-align: center;
background-color: #e4e6e5;
/* position: fixed;
top: 0;
left: 0;
z-index: 9999;*/
width: 100%;
border-bottom: solid #05182e 2px;
margin-top: -1px
}
nav li {
display: inline-block;
font-size: 35px;
padding: 15px;
font-weight: bold;
vertical-align: middle;
}
nav a {
border-radius: 10%;
padding: 8px;
background-color: #cccccc;
color: #1f3b5a;
text-decoration: none;
font-size: 30px;
transition: all 0.5s ease-in-out;
}
nav ul li:last-child a {
background-color: #e4e6e5;
}
nav a:hover {
font-size: 40px;
transition: all 0.5s ease-in-out;
}
nav img {
width: 30%;
border: none;
transition: all 0.5s ease-in-out;
}
nav img:hover {
width: 40%;
transition: all 0.5s ease-in-out;
}
ul {
margin: 0;
}
<nav>
<ul>
<li>
<img src="images/logo.png" alt="Canadian Women's Hockey League Logo">
</li>
<li> Home
</li>
<li> Roster
</li>
<li> Schedule
</li>
<li>
<a href="http://cwhl.ca" target="_blank">
<img src="images/cwhllogo.png">
</a>
</li>
</ul>
</nav>
html
<li><img src="images/cwhllogo.png"></li>
CSS
.link { //whatever you want the link to look like }
.link:hover { //whatever you want the link to look like while being hovered on }
You can give the <a> with the <img> an id:
<a id="image"><img /></a>
Then, you can set its background-color as nothing:
a#image {
background-color: transparent;
}
Snippet:
a {
background-color: blue;
}
a#image {
background-color: transparent;
}
abc
<img src="//google.com/favicon.ico">
What you could do is give all <a> tags that need a background a class. That way you just need to write like so:
nav a.bg {
/* enter style here */
}
and like so in HTML:
<nav>
<li>Link 1</li>
<li>Link 2</li>
<li><img src="#"></li>
</nav>
Alternatively
Specify a background for all nav a, just like you did in the example. Then add a separate class to all nav a that contains an image, removing the background.
You could do it like so:
CSS:
nav a {
background: #333;
}
nav a.img {
background: transparent;
}
HTML:
<nav>
<li>Link 1</li>
<li>Link 1</li>
<li><img src="#"></li>
</nav>
Instead of removing it, use a little CSS and javascript to disable it. First you'll want to remove the transition that takes place when the anchor or image is rolled over (and get rid of the gray button behind the image):
nav li:last-of-type a:hover,
nav li:last-of-type a,
nav li:last-of-type a img{
font-size:0;
background:none;
transition:none;
width:30%;
cursor:default;
}
Then use a little jQuery to prevent the link from working:
$('nav li:last-of-type a').click(function(e){
e.preventDefault();
});
Full code and example:
$('nav li:last-of-type a').click(function(e) {
e.preventDefault();
});
html {
font-family: abel;
background-color: #a4bdd1;
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
margin: 0;
padding: 0;
}
nav {
text-align: center;
background-color: #e4e6e5;
/* position: fixed;
top: 0;
left: 0;
z-index: 9999;*/
width: 100%;
border-bottom: solid #05182e 2px;
margin-top: -1px
}
nav li {
display: inline-block;
font-size: 35px;
padding: 15px;
font-weight: bold;
vertical-align: middle;
}
nav a {
border-radius: 10%;
padding: 8px;
background-color: #cccccc;
color: #1f3b5a;
text-decoration: none;
font-size: 30px;
transition: all 0.5s ease-in-out;
}
nav a:hover {
font-size: 40px;
transition: all 0.5s ease-in-out;
}
nav img {
width: 30%;
border: none;
transition: all 0.5s ease-in-out;
}
nav img:hover {
width: 40%;
transition: all 0.5s ease-in-out;
}
ul {
margin: 0;
}
nav li:last-of-type a:hover,
nav li:last-of-type a,
nav li:last-of-type a img {
font-size:0;
background:none;
transition: none;
width: 30%;
cursor: default;
}
<nav>
<ul>
<li><img src="http://lorempixel.com/400/400" alt="Canadian Women's Hockey League Logo"></li>
<li> Home</li>
<li> Roster</li>
<li> Schedule</li>
<li>
<img src="http://lorempixel.com/400/400">
</li>
</ul>
</nav>
The HTML is:
<html>
<head>
<style>
#top-menu {
position: fixed;
z-index: 10;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color:rgba(255,255,0,0.5);
}
#top-menu li {
float: left;
list-style: none;
}
#top-menu a {
display: block;
padding: 10px 25px 5px 25px;
width: 4em;
text-align: center;
-webkit-transition: .5s all ease-out;
-moz-transition: .5s all ease-out;
transition: .5s all ease-out;
border-bottom: 3px solid cyan;
color: #aaa;
text-decoration: none;
}
#top-menu a:hover {
color: #000;
}
#top-menu li.active a {
border-bottom: 3px solid #333;
color: red;
}
#foo {
margin-top: 400px;
}
#bar {
margin-top: 400px;
}
#baz {
margin-top: 400px;
}
</style>
</head>
<body>
<ul id="top-menu">
<li class="active">
Top
</li>
<li>
Foo
</li>
<li>
Bar
</li>
<li>
Baz
</li>
</ul>
<h2 id="foo">Foo</h2>
<h2 id="bar">Bar</h2>
<h2 id="baz">Baz</h2>
</body>
</html>
When I test it in Firefox 42, there is some margin between the fixed bottom menu and the bottom of window.
How to eliminate the margin between the fixed bottom menu and the bottom of window ?
It's because the ul element has a default top/bottom margin.
In this instance, either add margin: 0 to the #top-menu element, or just reset the default margin(s) for all ul elements using a CSS reset.
Example Here
#top-menu {
position: fixed;
margin: 0; /* Added */
z-index: 10;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color:rgba(255, 255, 0, 0.5);
}
I've been working on some code, however css is being really arrogant to me and it wont let me make my circle list items all the same width and height :( also, when i created the footer, my list wont center in the page and sticks to the left.
Here is the code:
<html lang="en">
<head>
<title>PAGE | Home</title>
<link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/page.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<img class="logo" src="img/logo.png" />
</div>
<div class="footer">
<ul>
<li><a>0</a></li>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3/a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>6</a></li>
<li><a>7</a></li>
</ul>
</div>
</div>
<script src="js/jquery.js" type="text/javascript"></script>
</body>
Here is the CSS:
.loginFrame {
position: fixed;
border: 1px solid hsl(0, 0%, 60%);
border-radius: 2px;
background-color: #EAEAEA;
padding: 40px;
-webkit-box-shadow: 0 8px 6px -6px hsl(0, 0%, 60%);
-moz-box-shadow: 0 8px 6px -6px hsl(0, 0%, 60%);
box-shadow: 0 8px 6px -6px hsl(0, 0%, 60%);
}
.logo {
background: url("../img/logo.png") no-repeat center center;
height: 157px;
width: 477px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -238.5px;
margin-top: -78.5px;
opacity:0.6;
filter:alpha(opacity=60);
}
.wrapper {
margin-left: auto;
margin-right: auto;
position: relative;
min-height: 99%;
}
.footer{
height: 50px;
bottom: 3;
width: inherit;
text-align: center;
position: absolute;
}
.footer ul {
margin: 0;
padding: 0;
display: inline;
}
.footer ul li {
display: inline;
list-style: none;
}
.footer ul li:after {
content: " ";
}
.footer ul li:last-child:after {
content: "";
}
.footer ul li a {
width: 200px;
height: 100px;
border-radius: 50%;
color: white;
background-color: #3061a3;
padding: 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0 8px;
}
.footer ul li a:hover {
cursor: pointer;
background-color: #3974c3;
text-decoration: none;
}
Here is a screenshot:
If anyone can help me solve the problem, the help would be greatly appreciated! Thank you :D
~ rkshah
set text-align:center for your footer <ul> for centering menu items:
.footer ul {
margin: 0;
padding: 0;
display: inline;
text-align:center; /* added */
}
set display:block to <a> in your footer menu for customize width:
.footer ul li a {
width: 200px;
height: 100px;
border-radius: 50%;
color: white;
background-color: #3061a3;
padding: 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0 8px;
display:block; /* added */
}
Simple as this:
CSS
#navigation_center ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navigation_center ul li { display: inline; }
#navigation_center ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
HTML
<div id="navigation_center">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>