I am trying to size a navbar logo on the left side of the horizontal navbar and then have the rest of the navbar items take the same vertical space and be vertically centered in the space. The navbar items currently do not use the full vertical space. Every sizing attribute that I've tried has created another problem. Thanks for all help.
Note: Can't use bootstrap. Wish I could.
/****************************************/
/* Fixed top navbar with dropdowns */
/****************************************/
.m-navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
/*.m-navbar li {
float: left;
}*/
.m-navbar-right {
float: right;
}
.m-navbar-left {
float: left;
}
.m-navbar li a, .m-menu-form {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border: none;
font-size: 100%;
font-family: "Lato", sans-serif;
}
.m-navbar li a:hover:not(.active), .m-dropdown:hover, .m-menu-form:hover {
/*background-color: #ddd;*/
background-color: #9dd0f0;
}
.m-navbar-logo-img {
padding: 3px 0px 4px 4px;
width: auto;
max-height: 33px;
position: relative;
}
.m-navbar li a.active {
color: white;
background-color: #00719c;
}
.m-navbar li.m-dropdown {
display: inline-block;
}
.m-dropdown-content {
display: none;
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="navbar.css">
<title>Navbar Problem</title>
</head>
<body>
<div class="m-outer">
<div class="m-fixed-header">
<div class="m-navbar">
<ul>
<li class="m-navbar-left"><img class="m-navbar-logo-img" src="bugicon.png"></img></li>
<li class="m-navbar-left">
<form name="idForm" method="post" action="">
<input type="submit" name="action" class="m-menu-form" value="Home">
</form>
</li>
<li class="m-dropdown m-navbar-left">
Menu 1
<div class="m-dropdown-content">
Drop 1<br>
Drop 2<br>
Drop 3<br>
</div>
</li>
<li class="m-dropdown m-navbar-left">
Menu 2
<div class="m-dropdown-content">
Drop 1<br>
Drop 2<br>
Drop 3<br>
Drop 4<br>
Drop 5<br>
</div>
</li>
<li class="m-navbar-right"><a href='#'>Logoff </a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
did you try it with display:flex;
/****************************************/
/* Fixed top navbar with dropdowns */
/****************************************/
.m-navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
display: flex;
flex-shrink: 1;
display: -webkit-flex;
-webkit-justify-content: space-around;
justify-content: space-around;
}
/*.m-navbar li {
float: left;
}*/
.m-navbar-right {
float: right;
}
.m-navbar-left {
float: left;
}
.m-navbar li a, .m-menu-form {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border: none;
font-size: 100%;
font-family: "Lato", sans-serif;
}
.m-navbar li a:hover:not(.active), .m-dropdown:hover, .m-menu-form:hover {
/*background-color: #ddd;*/
background-color: #9dd0f0;
}
.m-navbar-logo-img {
padding: 3px 0px 4px 4px;
width: auto;
max-height: 33px;
position: relative;
}
.m-navbar li a.active {
color: white;
background-color: #00719c;
}
.m-navbar li.m-dropdown {
display: inline-block;
}
.m-dropdown-content {
display: none;}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="navbar.css">
<title>Navbar Problem</title>
</head>
<body>
<div class="m-outer">
<div class="m-fixed-header">
<div class="m-navbar">
<ul>
<li class="m-navbar-left"><img class="m-navbar-logo-img" src="bugicon.png"></img></li>
<li class="m-navbar-left">
<form name="idForm" method="post" action="">
<input type="submit" name="action" class="m-menu-form" value="Home">
</form>
</li>
<li class="m-dropdown m-navbar-left">
Menu 1
<div class="m-dropdown-content">
Drop 1<br>
Drop 2<br>
Drop 3<br>
</div>
</li>
<li class="m-dropdown m-navbar-left">
Menu 2
<div class="m-dropdown-content">
Drop 1<br>
Drop 2<br>
Drop 3<br>
Drop 4<br>
Drop 5<br>
</div>
</li>
<li class="m-navbar-right"><a href='#'>Logoff </a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Related
I have two specific questions concerning my website for my class.
First, my floating left-side vertical nav bar is getting in the way of the different sections on my theme/genre page of my website.
Whenever I go to this page, the nav bar by default is pushing my first section ("Horror") over to the right. This is good and I want ALL of my sections to permanently move to the right so that my nav bar will not be floating over any of my sections. However, right now only this first section is moved to the right and while the nav bar "floats" down, the nav bar either floats directly over the sections or the sections just get distorted and look weird.
Here is the Theme.html page code below. I only included the first "section" for brevity's sake.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="favicon-animated%20dice.ico" rel="icon" type="image/x-icon">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<title>Rolling Solo Theme/Genre</title>
<meta charset="utf-8">
<link rel="stylesheet" href="rollingsolo.css" type="text/css">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="js/float-panel.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<div id="header">
<h1>Rolling Solo</h1>
<h2>"I Roll Solo"</h2>
</div>
</header>
<div id="headings">
<h1>Board Games Theme & Genre</h1>
</div>
<div id="nav" class="float-panel">
<nav class="navigation"><!--Added .navigation-->
<ul class="mainmenu"><!--Added .mainmenu-->
<li>Home</li>
<li>Theme/Genre>
<ul class="submenu"><!--Added .submenu-->
<li>Horror</li>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Space</li>
<li>Nuclear Apocalypse</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<section id="Horror"class="sections"><h3>Horror</h3>
<hr>
<img src="theme/Arkham%20Horror-The%20Card%20Game(Medium).jpg" height="80" width="80" alt="arkham horror pic" class="images">
<p>Arkham Horror is a great deck building game.</p>
<br>
<img src="theme/Kingdom%20Death-Monster(medium).jpg" height="80" width="80" alt="kingdom death monster pic" class="images">
<p>This game was a mega-hit during its Kickstarter campaign last year. Extremely in demand and a great buy, if you can get your hands on it.</p>
<br>
</section>
I have looked in my CSS class "sections" and tried many times to move that blue border over to the right, but still cannot do it.
Here is my CSS code below for the theme/genre's sections and navigation code:
.sections {border-style: ridge; /*adjusts the Theme/Genre Sections*/
border-width: 10px;
border-color: #1D3D94;
padding-left: 20px;
padding-right: 20%;
overflow:auto;}
.images {float: left; /*adjust the pics in the Theme/Genre Sections*/
padding-top: 10px;
padding-right: 10px;}
#nav {float: left; width: 200px; margin: 10px 0;}
/* define a fixed width for the entire menu */
.navigation {width: 190px;}
/* reset the lists to remove bullet points and padding */
.mainmenu, .submenu {list-style: none;
padding: 0;
margin: 0;}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;}
/* add hover behavior */
.mainmenu a:hover {background-color: #C5C5C5;}
/* when hovering over a .mainmenu item,
display the submenu inside it.*/
.mainmenu li:hover .submenu {display: block;
max-height: 200px;}
/*Now, overwrite the background-color for .submenu links only.
.submenu a {background-color: #999;}
/* hover behavior for links inside .submenu */
.submenu a:hover {background-color: #666;}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.*/
.submenu {overflow: auto;
max-height: 0;
-webkit-transition: all 0.5s ease-out;}
Is there any way to permanently move these sections to the right out of the way of the nav bar?
Secondly, I do not want use a scroll bar function in the nested directoires but instead show ALL of my sections together when my mouse hovers over the "Theme/Genre >" heading in my nav bar. As of now, it only shows five of the seven sub-directories before having to use a scroll bar to scroll down to see the rest.
How do I remove the scroll bar and show ALL seven sub-directories?
Thanks a lot for any and all help you may give. I do appreciate it.
You could handle your submenu items with the css :hover states.
And you could place your menu and your content like this :
<div class="site-container">
<nav class="menu"><!-- Your menu--></nav>
<main><!-- Your main content--></main>
</div>
and add display: flex; on the .site-container.
Set the width: of your menu to 200px for example
And the width of the main content to calc(100% - 200px);
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
/* This is for including the padding and the borders into the width*/
*, *::before, *::after {
box-sizing: border-box;
}
.site-container {
display: flex;
flex-flow: row wrap;
}
.menu {
width: 200px;
}
.menu ul {
padding: 0;
background: #C5C5C5;
margin-top: 0;
list-style: none;
}
.menu nav > ul {
}
.menu ul li a {
display: block;
padding: 5px;
color: black;
font-weight: bold;
text-decoration: none;
}
.menu ul li a:hover {
color: white;
}
.menu ul li.has-child {
background: #5B5B5B;
}
.menu ul li.has-child li {
display: none;
background: #8E8E8E;
}
.menu ul li.has-child:hover li{
display: block;
}
main {
/*Total size minus the menu size*/
width: calc(100% - 200px);
padding: 10px;
}
main h1 {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.theme-item {
border: 4px solid black;
padding: 20px;
margin-bottom: 50px;
}
.theme-title {
position: relative;
margin-bottom: 40px;
}
.theme-title:before {
position: absolute;
content: '';
display: block;
width: 80%;
height: 3px;
background: black;
top: calc(100% + 10px);
left: 0;
}
.games-list {
padding: 0;
list-style: none;
}
.games-list .game {
width: 100%;
margin-bottom: 30px;
}
/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {
content: '';
display: table;
clear: both;
}
.games-list .game img {
float: left;
}
.games-list .game .description {
float: left;
padding-left: 15px;
}
<div class="site-container">
<div class="menu">
<nav>
<ul>
<li>Home</li>
<li class="has-child">
Theme/Genre
<ul>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Horror</li>
<li>Action</li>
<li>Aventure</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<h1>Board Games Themes & Genre</h1>
<div class="theme-list">
<div class="theme-item">
<h2 class="theme-title">Horror</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
<div class="theme-item">
<h2 class="theme-title">Sci-Fi</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
</div>
</main>
</div>
You could do an improvement by fixing your menu at the top left of the screen with position: fixed; top: 0; left: 0; z-index: 2;, so it's always visible. And set position: absolute; left:100%; top: 0; on the submenu and position: relative; on its parent li, so the submenu will appears at the right of your menu. It will prevent the menu from doing "Yo-yo".
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
/* This is for including the padding and the borders into the width*/
*, *::before, *::after {
box-sizing: border-box;
}
.site-container {
position: relative;
}
.menu {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 200px;
}
.menu ul {
padding: 0;
background: #C5C5C5;
margin-top: 0;
list-style: none;
}
.menu ul li a {
display: block;
padding: 5px;
color: black;
font-weight: bold;
text-decoration: none;
}
.menu ul li a:hover {
color: white;
}
.menu ul li.has-child {
background: #5B5B5B;
position: relative;
}
.menu ul li.has-child ul {
display: none;
background: #8E8E8E;
position: absolute;
left: 100%;
top: 0;
}
.menu ul li.has-child:hover ul{
display: block;
}
main {
padding-left: 210px;
padding-right: 10px;
}
main h1 {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.theme-item {
border: 4px solid black;
padding: 20px;
margin-bottom: 50px;
}
.theme-title {
z-index: 1;
position: relative;
margin-bottom: 40px;
}
.theme-title:before {
position: absolute;
content: '';
display: block;
width: 80%;
height: 3px;
background: black;
top: calc(100% + 10px);
left: 0;
}
.games-list {
padding: 0;
list-style: none;
}
.games-list .game {
width: 100%;
margin-bottom: 30px;
}
/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {
content: '';
display: table;
clear: both;
}
.games-list .game img {
float: left;
}
.games-list .game .description {
float: left;
padding-left: 15px;
}
<div class="site-container">
<div class="menu">
<nav>
<ul>
<li>Home</li>
<li class="has-child">
Theme/Genre
<ul>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Horror</li>
<li>Action</li>
<li>Aventure</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<h1>Board Games Themes & Genre</h1>
<div class="theme-list">
<div class="theme-item">
<h2 class="theme-title">Horror</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
<div class="theme-item">
<h2 class="theme-title">Sci-Fi</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
</div>
</main>
</div>
Use padding-left
Make sure the items that are listed are sitting in a 'container' so that all the children inside the container can sit wherever the parent sits. This allows you to use the following CSS rules for content (with the id of #content for example):
#content {
position: relative;
padding-left: 5em;
box-sizing: border-box;
width: 100%;
}
Explanation
position: relative - make sure the children abide by the basic rules of the parent
padding-left: 5em - Push the parent (content) to the right of the menu by 5em, all children will be relative to the parent
box-sizing: border-box - keep all the padding relative to the inside the width and height of the container (by subtracting the size) rather than appending size dynamically.
width: 100% - Let the container fill the rest of the space (1)
1) if width: 100% is over-taking the space of the menu then consider using width: calc(100% - 5em) where 5em is the width of the menu
Note It's worth putting into consideration that to do this you normally need a fixed/max-width menu and would be ideal to do so. Otherwise text, images and so on may expand the menu infinitely within a percentage of that space.
element:hover
To eliminate the scrollbar on the menu you will have to find what is taking up the space. If these are more items that you want to show/hide when the cursor is above the menu item you can use the element selector :hover which can tell the menu to hide certain items. You can then use it to set before the hover event occurs and during the hover event. For example:
body { background: white; }
body:hover {background: red;}
A more relative example would be to set the height of the main menu item so that the rest cannot be shown (with the use of overflow: hidden)
ul li ul li {display: none};
ul li:hover ul li {display: block}
What I'm trying to achieve:
I tried using a nested unordered list but found it difficult to set 2 buttons to the left and 2 buttons to the right, I am now trying something a little different but still no success, also I want the distance between these button to stay constant when viewed on different sized displays. Any help would be greatly appreciated.
(If anyone is familiar with xml you'll know that that its possible to give things a weight. so say you have 3 items in a box and you give them all a weight of 1 each items would take up a third of the space in the box, is there anything like this in html?)
This is what I have so far.
#navContainer nav {
display: inline-block;
}
#nav1 {
background: aqua;
position: absolute;
left: 0;
}
#nav2 {
background: pink;
position: absolute;
right: 0;
}
<div id="navContainer">
<nav id="nav1">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
</nav>
<nav id="nav2">
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
</div>
How about a flexbox approach, then you only need one list
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
width: 100%;
justify-content: space-between; /* spreads things across the horizontal line */
}
.signin {
margin-left: auto; /* moves this to the right */
margin-right: 10px; /* gap between signin and signup */
}
.help {
margin-right: auto; /* don't need this really */
margin-left: 10px; /* gap between highscores and help */
}
<nav id="nav1">
<ul>
<li class="highscores">Highscores</li>
<li class="help">Help</li>
<li class="signin">Signin</li>
<li class="signup">Signup</li>
</ul>
</nav>
you can use flexbox,
just using 1 ul removing extra markup unnecessary
ul {
display: flex;
justify-content: space-between;
align-items: flex-end;
background: lightblue;
height: 160px;
margin: 0;
padding: 0;
}
li {
background: purple;
border-radius: 10px;
padding: 10px;
margin: 0 10px;
list-style: none;
color: white
}
li:nth-last-of-type(2) {
margin-left: auto
}
<ul>
<li>Highscores</li>
<li>Help</li>
<li>Signin</li>
<li>Signup</li>
</ul>
just using 1 nav and 2 ul if you want to keep the container at a minimal state
nav{
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 160px;
background: lightblue
}
ul:last-of-type {
margin-left: auto
}
ul {
display: flex;
margin: 0;
padding: 0;
}
li {
background: purple;
border-radius: 10px;
padding: 10px;
margin: 0 10px;
list-style: none;
color: white
}
<nav id="navContainer">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
You can do it with the Flexbox:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
ul {
list-style: none;
display: flex;
}
ul > li {
margin: 5px;
padding: 5px 0;
width: 125px;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px #000;
font-weight: bold;
text-transform: uppercase;
border-radius: 25px;
background: purple;
}
#navContainer {
display: flex;
justify-content: space-between;
}
<div id="navContainer">
<nav id="nav1">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
</nav>
<nav id="nav2">
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
</div>
I don't understand ur question completely, but I think this might be your solution:
<html>
<head>
<title>Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/pageFormatting.css">
<style>
#navContainer nav {
display: inline-block;
}
li {display:inline;margin:20px;}
#nav1 {
background-color: aqua;
position: absolute;
left: 0;
display:inline-block;
}
#nav2 {
background-color: pink;
position: absolute;
right: 0;
display:inline-block;
}
</style>
</head>
<body>
<div id="navContainer">
<nav id="nav1">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
</nav>
<nav id="nav2">
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
</div>
</body>
</html>
I added tags and the head and body tags. Within those style tags I wrote the css. nav1 is now left en nav2 is now right.
Tell me if I'm wrong.
I am currently using collapsible contents from Bootstrap. So this is the actual visualization when I clicked on the background of collapsible-header.
1st part ( not yet collapsed)
2nd part (After collapsed)
As you noticed, the icon wasn't changed when I clicked on the collapsible-header background. The lists collapsed but I want the icon to be changed along by pressing the background afterwards.
However, there is no problem if i clicked on the icon itself and i will have the icon changed to plus sign and the contents will be collapsed as well.
But I would like to have my collapsible-header background to be responsive along with the icon as well. Please do help. Here's the sample code but I cant have proper visualization and I would like to apologize for the inconvenience.
<div class="col-md-12" style="margin:20px 0 0 0">
<ul class="collapsible collapsible-landing" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<span class="pull-left"><h3>Categories</h3></span>
<span class="pull-right">
<i class="zmdi zmdi-plus"></i>
<i class="zmdi zmdi-minus"></i>
</span>
</div>
<div class="collapsible-body">
<ul class="collapsible-list">
<li> Sample 1 </li>
<li> Sample 2 </li>
<li> Sample 3 </li>
<li> Sample 4 </li>
<li> Sample 5 </li>
<li> Sample 6 </li>
<li> Sample 7 </li>
<li> Sample 8 </li>
<li class="clearfix"></li>
</ul>
</div>
</li>
</ul>
</div>/
Heres the css part
.catehide2, .cateshow2 {
float: right;
font-size: 20px;
color: #000000;
text-align: center;
padding:0;
}
.catehide2:hover, .cateshow2:hover {
color: #9e9e9e;
text-decoration: none;
opacity: 1;
}
.categorybox1 ul{
list-style-type:none;
margin:0;
padding:0;
display:none;
height:auto;
font-family: 'Roboto', sans-serif;
font-weight:450;
font-size:15px;
color:#424242;
border:0;
}
.categorybox1 ul li{
float: left;
width: 25%;
padding: 0 0 15px 40px;
}
.categorybox1 ul li a:link, .categorybox1 ul li a:visited {
color:#424242;
text-decoration: none;
}
.categorybox1 ul li a:hover, .categorybox1 ul li a:active {
color:#9e9e9e;
text-decoration: none;
}
.collapsible-landing {
border-top: none;
border-right: none;
border-left: none;
border-bottom: none;
margin: 0.5rem 0 1rem 0;
box-shadow: none;
}
.collapsible-landing .collapsible-header {
display: block;
cursor: pointer;
height: 60px;
line-height: 60px;
padding: 0 24px;
background-color: #fff;
border-bottom: none;
}
.collapsible-landing .collapsible-header h3 {
font-size: 16px;
font-weight: 500;
padding:0;margin: 0;
line-height: 60px;
}
.collapsible-landing .collapsible-header i {
width: auto;
font-size: 1.6rem;
line-height: 60px;
display: block;
float: left;
text-align: center;
margin-right: 0;
}
.collapsible-landing .collapsible-body {
background: #ffffff;
display: none;
border-bottom: none;
box-sizing: border-box;
}
.collapsible-list li a {
width:25%;
padding:10px 24px;
float:left;
color:#424242;
}
.collapsible-list li a:hover {
text-decoration: none;
border-bottom: none;
color:#9e9e9e;
}
.collapsible-list li.clearfix {
clear:both;
padding: 0 0 20px 0;
}
UPDATED
Pure CSS Way
Problem of icon change on expand and collapse of accordion has been resolved.
Check example code at CODEPEN
HTML:
<div class="col-md-12 " style="margin:20px 0 0 0">
<ul class="collapsible collapsible-landing">
<li>
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#test">
<h3 class="panel-title accordion-toggle">Categories</h3>
</div>
<div class="collapsible-body collapsible-body panel-collapse collapse" id="test">
<ul class="collapsible-list">
<li> Sample 1 </li>
<li> Sample 2 </li>
<li> Sample 3 </li>
<li> Sample 4 </li>
<li> Sample 5 </li>
<li> Sample 6 </li>
<li> Sample 7 </li>
<li> Sample 8 </li>
<li class="clearfix"></li>
</ul>
</div>
</li>
</ul>
</div>
CSS:
ul {
list-style: none;
margin: 0;
padding: 0;
height: auto;
font-family: 'Roboto', sans-serif;
font-weight: 450;
font-size: 15px;
color: #424242;
border: 0;
}
.collapsible-landing {
border-top: none;
border-right: none;
border-left: none;
border-bottom: none;
margin: 0.5rem 0 1rem 0;
box-shadow: none;
}
.collapsible-list {
background: #efefef;
}
.collapsible-list li a {
width: 25%;
padding: 10px 24px;
float: left;
color: #424242;
}
.collapsible-list li a:hover {
text-decoration: none;
border-bottom: none;
color: #9e9e9e;
}
.collapsible-list li.clearfix {
clear: both;
padding: 0 0 20px 0;
}
.accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Material-Design-Iconic-Font';
content: "\f273";
float: right;
color: inherit;
}
.panel-heading.collapsed .accordion-toggle:after {
/* symbol for "collapsed" panels */
content: "\f278";
}
you have a lot of css while a small jquery function just solve your problem easily.
Hoping it will help you!
$(function(){
$('#collapse1').on('hide.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-chevron-down"></span> Show');
})
$('#collapse1').on('show.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-chevron-up"></span> Hide');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Collapsible Panel</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a id="button" data-toggle="collapse" data-target="#collapse1">
<span class="glyphicon glyphicon-chevron-down"></span> show
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
</div>
Note: Click full page when testing.
As you can see by the snippet, the section with the class "common" is set to a fixed position, but it seems to be relative to the other section. How do I fix it so that the common section is fixed relative to the browser?
Jsfiddle:
https://jsfiddle.net/my1c76vb/?utm_source=website&utm_medium=embed&utm_campaign=my1c76vb
Code:
HTML5:
<?php session_start(); ?>
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Log in</title>
<body>
<section class="common">
<header>
<img src="resources/header.png" alt="Sqeaking Duck"/>
</header>
<aside class="menu">
<h3>Guest</h3>
<hr>
<nav>
<ul>
<li>Home</li>
<li>Log in</li>
<li>Register</li>
</ul>
</nav>
</aside>
</section>
<section class="login">
<form action="loginManager.php" method="post">
<fieldset>
<legend>Log in</legend>
User: <input type="text" name="username" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['userErr'] : '';?></span><br>
Password: <input type="password" name="password" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['passErr'] : '';?></span><br>
<input type="submit" name="submit" value="Submit">
</fieldset>
</form>
<p><span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['generalErr'] : '';?></span></p>
</section>
</body>
CSS:
/*Common pages */
.common {
z-index: 1;
margin-top: 10px;
position: fixed;
width: 100%;
}
header {
width: 100%;
text-align: center;
background-color: CornflowerBlue;
}
.menu {
margin-top: 25px;
width: 80px;
background-color: black;
text-align: center;
}
.menu h3 {
color: white;
display: inline-block;
margin: 0;
padding-top: 5px;
}
.menu hr {border-color: white;}
.menu nav {
display: inline-block;
text-align: left;
width: 100%
}
.menu ul {
list-style: none;
padding: 0px 0px 0px 10px;
margin: 0;
}
.menu li {
padding-bottom: 10px;
}
.menu a {
text-decoration: none;
color: white;
}
/*Log in page*/
.login {
text-align: center;
z-index: 0;
margin-top: 300px;
}
/*General*/
body {
background-color: grey;
}
First thing I noticed is that the fixed element is having a margin-collapse. Google how to fix margin-collapsing. I added,
padding-top: 1px;
to the body.
Next I added,
height: 2000px to the body so the body can scroll and you can see the position:fixed in play
https://jsfiddle.net/my1c76vb/1/
I am guessing you want a layout which somewhat represents YouTubes layout (with a fixed header and a side bar).
The elements that have a fixed positioning are "lifted up" from the page so the rest of the page renders as if those elements wouldn't even be there. That in mind you have to adjust your layout a little:
CSS
* {
padding: 0;
margin: 0;
}
header {
background-color: #222;
position: fixed;
top: 0;
width: 100%;
height: 150px;
}
.container {
margin-top: 150px; /*Same as header height*/
margin-left: 150px; /*Same as menu width*/
}
.menu {
background-color: #333;
position: fixed;
left: 0;
width: 150px;
}
.content {
padding: 10px;
}
HTML
<header></header>
<section class="container">
<aside class="menu">
<!-- Menu here -->
</aside>
<div class="content">
<!-- Content here -->
</div>
</section>
Here is a demo
The content must have a margin (or padding) so that it wont get buried under the fixed elements.
/*Common pages */
.common {
z-index: 1;
margin-top: 10px;
position: relative;
width: 100%;
}
header {
width: 100%;
text-align: center;
background-color: CornflowerBlue;
}
.menu {
margin-top: 25px;
width: 80px;
background-color: black;
text-align: center;
}
.menu h3 {
color: white;
display: inline-block;
margin: 0;
padding-top: 5px;
}
.menu hr {border-color: white;}
.menu nav {
display: inline-block;
text-align: left;
width: 100%
}
.menu ul {
list-style: none;
padding: 0px 0px 0px 10px;
margin: 0;
}
.menu li {
padding-bottom: 10px;
}
.menu a {
text-decoration: none;
color: white;
}
/*Log in page*/
.login {
text-align: center;
z-index: 0;
margin-top: 320px;
}
/*General*/
body {
background-color: grey;
}
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Log in</title>
</head>
<body>
<section class="common">
<header>
<img src="resources/header.png" alt="Sqeaking Duck"/>
</header>
<aside class="menu">
<h3>Guest</h3>
<hr>
<nav>
<ul>
<li>Home</li>
<li>Log in</li>
<li>Register</li>
</ul>
</nav>
</aside>
</section>
<section class="login">
<form action="loginManager.php" method="post">
<fieldset>
<legend>Log in</legend>
User: <input type="text" name="username" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['userErr'] : '';?></span><br>
Password: <input type="password" name="password" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['passErr'] : '';?></span><br>
<input type="submit" name="submit" value="Submit">
</fieldset>
</form>
<p><span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['generalErr'] : '';?></span></p>
</section>
</body>
</html>
I am new to CSS so please excuse if this s basic question ,
I am trying to develop a similar User Interface as show in this picture below
This is my code
<div class="container">
<div class="marquee-sibling">Indices </div>
<div class="marquee">
<ul class="marquee-content-items">
<li><span>NASDAQ</span><br>
<span>4655.92</span>
<span>17.93</span>
<span>0.39%</span>
</li>
<li><span>DJIA</span><br>
<span>16414.39</span>
<span>15.82</span>
<span>0.1%</span>
</li>
</ul>
</div>
</div>
But could you please tell me why only the first span is visible and others are hidden ??
http://jsfiddle.net/Wf43X/319/
I have tried something like this..
body {
margin: 0px;
padding: 0px;
background-color: #fff;
}
.marquee {
margin: 10px;
padding: 10px;
}
span {
display: inline-block;
margin:0px;
padding:0px;
}
.container{
display: flex;
justify-content: center;
list-style-type: none;
}
.ind-cont {
background-color: #000;
width: 200px;
height: 100px;
margin: 0px;
padding:0px;
}
.txtcolor {
color: #fff;
}
.txtcolorb {
color: #aaa;
}
.ind-name {
margin: 20px;
}
.capital {
float: right;
margin: 20px;
}
.floatright {
float: right;
margin: 10px;
margin-right: 20px;
}
.one-share {
margin: 10px;
margin-left: 20px;
}
<div class="container">
<div class="marquee-sibling"> </div>
<div class="marquee">
<span class="ind-cont">
<span class="ind-name txtcolor ">NASDAQ</span>
<span Class="capital txtcolor">4655.92</span>
<span class="one-share txtcolorb">17.93</span>
<span class="per txtcolorb floatright">0.39%</span>
</span>
<span class="ind-cont">
<span class="ind-name txtcolor ">DJIA</span>
<span Class="capital txtcolor">16414.39</span>
<span class="one-share txtcolorb">15.82</span>
<span class="per txtcolorb floatright">0.1%</span>
</span>
</div>
</div>
You can do this with Flexbox
ul {
display: flex;
justify-content: center;
list-style-type: none;
}
li {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
background: black;
color: white;
border: 1px solid white;
paddgin: 10px;
}
li span {
flex: 50%;
padding: 5px;
box-sizing: border-box;
}
li > span:nth-child(4n+2),
li > span:nth-child(4n+4) {
text-align: right;
}
li > span:nth-child(4n+1),
li > span:nth-child(4n+2) {
font-size: 16px;
font-weight: bold;
}
li > span:nth-child(4n+3),
li > span:nth-child(4n+4) {
font-size: 14px;
color: #aaa;
}
<div class="container">
<div class="marquee-sibling">Indices </div>
<div class="marquee">
<ul class="marquee-content-items">
<li>
<span>NASDAQ</span>
<span>4655.92</span>
<span>17.93</span>
<span>0.39%</span>
</li>
<li>
<span>DJIA</span>
<span>16414.39</span>
<span>15.82</span>
<span>0.1%</span>
</li>
</ul>
</div>
</div>
You are breaking a line after the first span, and this code is hiding whatever is after the first line:
.container {
overflow: hidden;
height: 45px;
}
I also think that the flexbox ideas is the best but if you still want to stay with your code, I think you should try changing the size height of your .container in your css. you will be able to see the rest of your 'li' element. The text is in white color and you can't really see it when you run your code cause the background is white.