<div class="nav">
<ul class="nav">
<a class="nav" href="#">
<li class="nav">item1</li>
</a>
<a class="nav" href="#">
<li class="nav">item2</li>
</a>
<a class="nav" href="#">
<li class="nav">item3</li>
</a>
</ul>
<div class="line"></div>
</div>
This is my HTML navbar
CSS:
ul.nav {
display: inline-block;
font-size: 0;
}
li.nav {
display:inline-block;
border-bottom: 2px solid gray;
padding: 15px 20px;
text-align: center;
font-size: 16px;
}
div.nav {
width: 100%;
display: inline-block;
}
How do I style the div.line so it is exactly next to the list (right), fills the rest of the page (width) and has the same height as the ul.nav/div.nav?
Thanks,
First of all, sorry about the english level!
You can do something like:
.line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: gray;
}
e.g: http://jsfiddle.net/X8fE4/
That's basically turn the div.line into an absolute alement behind your navigation. It will have the width of the parent div.nav, it's not a beautiful solution, but is well supported :)
this might help you:
preview: http://jsfiddle.net/webcarvers/7uZgW/3/embedded/result/
code: http://jsfiddle.net/webcarvers/7uZgW/3/
JS:
$(document).ready(function(){
$("div.two").css({
//-2 is for border width
"width": ($(window).width() - $("div.nav").outerWidth() - 2) + "px",
"height": ($("div.nav").height()-2) + "px"
});
});
div.nav {
display: flex;
display: ms-flex;
display: -webkit-flex;
{
Edit: You also need to add the property flex-grow to .line.
.line {
flex-grow: 1;
}
http://jsfiddle.net/eWHnU/
Related
I have a sidebar that is set to flex with direction column. I am trying to get my menu ul to be vertically centered, and my .logo-container to be on the top of the page.
Is there any way to get one child to flex-start and another one centered?
Code:
<aside class="side-bar">
<nav class="navigation">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
</nav>
</aside>
CSS:
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
}
.navigation {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.logoname {
display: inline-block;
}
* {
color: black;
}
ul {
list-style: none;
}
Codepen
Many thanks!
What you can do is to create an empty/invisible element as a third flex item inside the flex parent (in my example below it's the divwith class xxx) and apply justify-content: space-between to the flex parent (instead of center).
Depending on your actual code and content you should make sure that that additional element has the same height as the nav element (30px in your and my example). And again, depending on the situation you might want to add visibility: hidden; to the additional element (xxx) to make it invisible but still have its height included in the flex position calculations:
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
}
.navigation {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100%;
}
.logoname {
display: inline-block;
}
* {
color: black;
}
ul {
list-style: none;
}
.xxx {
height: 30px;
visibility: hidden;
}
<aside class="side-bar">
<nav class="navigation">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
<div class="xxx"></div>
</nav>
</aside>
You can try this approach.
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
}
.navigation {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
* {
color: black;
}
ul {
list-style: none;
}
.logo-container {
display:grid;
justify-content:space-around;
margin:0 auto;
padding-top: 20px;
}
.logo-container img {
text-align:center;
padding:5px;
}
<aside class="side-bar">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<nav class="navigation">
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
</nav>
</aside>
All you have to do is to have the logo and ul in separate divs within the parent div that has the column direction styling, apply flex-shrink:0 to the div containing the logo and flex-grow: 1 to the other div.
That will allow the logo to be at the top and the other div to take the rest of the space - then you can apply flex styling in the navigation -container to center the ul within that div.
UPDATE - the OP wanted the ul centered into the height of the viewport - as noted in the comments this is as simple as offsetting the position of the ul in the bottom div by half the height of the top div - so in this case - moving it up by 20px) because the top div is 40px in height. This allows centering of the ul into the viewport height without resorting to adding empty divs just to get the alignment.
html {
box-sizing: border-box;
color: white;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
padding: 8px;
}
.navigation {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
align-items: center;
}
.logo-container {
flex-shrink:0
}
.logoname {
display: inline-block;
padding : 8px;
color: lime;
}
.navigation-container {
flex-grow:1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul {
list-style: none;
position: relative;
top: -20px
}
li a{ color: white; }
<aside class="side-bar">
<nav class="navigation">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<div class="navigation-container">
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
</div>
</nav>
</aside>
I know there are duplicates of similar questions to this but I just can't get my footer to stay at the bottom, and I've tried multiple suggested fixes. Please show me how to move the footer to the bottom of the page. Does it have something to do with the body? Whoever posts a solution could you say what it was that was incorrect?
<head>
<meta charset="utf-8">
<title>CopperMug</title>
<link href="Coppermug Stylesheet.css" rel="stylesheet" type="text/css">
</head>
<div class="navbar" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</div>
<body id="body">
<div>
<img src="../Final Logo Assets/Coppermug banner no background 2-min.png" class="img" id="logo">
</div>
</body>
<footer>
<a class="service-link" href="#">Privacy Policy</a>
<a class="service-link" href="#">Terms of Service</a>
</footer>
</html>
#charset "utf-8";
/* CSS Document */
html {
background-image: url("../Final Logo Assets/Blur Mug-min Opacity-min.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#body {
}
#header,
li .nav-link {
font-family: "Copperplate Gothic";
color: #000000
}
#logo { display: block;
margin-left: 26%;
margin-right: auto;
margin-top: 12%;
width: 50%;}
#navbarSupportedContent {
color: black;
font-family: "Copperplate Gothic";
font-size: .99em;
padding: 1em;
}
#navbarSupportedContent li {
list-style-type: none;
display: inline-block;
}
div #navbarSupportedContent {
width: 100%;
}
.navbar {
text-align: center;
position: relative;
font-size: 150%;
margin-left: 3%;
}
.navbar-nav {
text-align: center;
position: relative;
font-size: 150%;
}
footer .service-link {
color: #000000;
}
footer {
text-align: center;
clear: both;
position: relative;
height: 40px;
margin-top: -40px;
}
What you have currently is a footer element which exists as just another plain element in the page flow (FYI, you have a redundant position:relative on it), so where it ends up is wherever the content above it ends (ie your image).
If you want a footer slammed to the bottom of the viewport that always remains visible regardless of content length or scroll position, then you'd use position: fixed on your footer, as crodev's answer shows. However this takes up screen real estate and is used with intention and good reason (like some action bar during some kind of funneled user experience).
However, for regular page circumstances, when you have short content, and want the footer to appear at the bottom of the viewport, it's best using a flex layout like below (which offers all kinds of advantages as well):
Codepen
body {
height: 100vh;
margin: 0;
}
#container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
#header {
background-color: red;
min-height: 100px;
}
#content {
flex: 1;
background-color: green;
/* to test a longer page */
/* min-height: 3000px; */
}
#footer {
background-color: blue;
min-height: 100px;
}
.section {
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
}
<div id="container">
<div id="header" class="section">
header
</div>
<div id="content" class="section">
content
</div>
<div id="footer" class="section">
footer
</div>
</div>
HTML:
<div class="footer">
<p>Footer</p>
</div>
CSS:
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: transparent;
color: white;
text-align: center;
}
CSS
.nested-menu {
.list-group-item {
cursor: pointer;
}
.nested {
list-style-type: none;
}
ul.submenu {
height: 0;
}
& .expand {
ul.submenu {
list-style-type: none;
height: auto;
li {
a {
color: #FFF;
padding: 10px;
display: block;
}
}
}
}
}
HTML
<div class="nested-menu">
<a class="list-group-item" (click)="addExpandClass('pages')">
<span>
<i class="fa fa-universal-access"></i>
Account
</span>
</a>
<div class="nested" [class.expand]="showMenu === 'pages'">
<ul class="submenu">
<li>
<a [routerLink]="['account/password']" (click)="eventCalled()">
<span>Password reset</span>
</a>
</li>
<li>
<a [routerLink]="['account/user']" (click)="eventCalled()">
<span>User</span>
</a>
</li>
</ul>
</div>
</div>
before clicking it looks like this. height: 0 is not hiding the child links. How to hide them ?
You need to add overflow:hidden; to your submenu class.
ul.submenu {
height: 0;
overflow: hidden;
}
You cannot set the height for inline elements. You will have to convert that to either block element or inline-block element to be able to do it.
Set display: inline-block; or display: block;
I would like to evenly space the 3 links ('About', 'Hours', 'Contact') within the containing 'banLinks' div. I do not want to use a list of any kind.
I would like each link to be evenly spaced, taking up 1/3 of their container. I am very new to HTML and CSS and I'm not sure how to do this.
I think one way of doing it may be by dividing the width of the div container in pixels by 3, account for the font size, then set the margins somehow around this figure. But to me this seems a bit unseemly, I'n not sure if this is the done thing.
<body>
<div id="wrapper">
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav>
<div class="banLinks">
<a id="about" href="#">About</a>
<a id="hours" href="#">Hours</a>
<a id="contact" href="#">Contact</a>
</div> </nav>
</div><!-- .wrapper-->
</body>
CSS:
#wrapper {
}
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
}
#about, #hours, #contact {
font-size: 20px;
border: 2px solid blue;
}
Here is a jsfiddle. https://jsfiddle.net/yuy84gmq/6/
you can do this using flexbox. Do as followed:
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: space-around; //or space-between whatever you like best
}
JSfiddle: https://jsfiddle.net/yuy84gmq/10/
flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add this to style:
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
padding: 0;
}
.banLinks a{
width: calc(33% - 4px);
display: inline-block;
margin: 0;
}
Use a display table
.banLinks {
display:table;
table-layout:fixed;
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
}
.banLinks a {
display:table-cell;
}
Here is the fiddle: https://jsfiddle.net/yuy84gmq/8/
A couple of options here...both of which work regardless of the number of list items...assuming there is enough width.
Display:Table-cell
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
display: table;
}
.banLinks a {
display: table-cell;
border: 1px solid grey
}
<div class="banLinks">
<a id="about" href="#">About</a>
<a id="hours" href="#">Hours</a>
<a id="contact" href="#">Contact</a>
</div>
Flexbox
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
display: flex;
}
.banLinks a {
flex: 1;
border: 1px solid grey
}
<div class="banLinks">
<a id="about" href="#">About</a>
<a id="hours" href="#">Hours</a>
<a id="contact" href="#">Contact</a>
</div>
Instead of usual a links, put them into a list, and set the list to be inline. Then you can apply margin to the list items to space them out.
HTML
<nav>
<ul class="banLinks">
<li><a id="about" href="#">About</a></li>
<li><a id="hours" href="#">Hours</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
</nav>
CSS
.banLinks li { display:inline-block;margin:0 10px;} /* Adjust left/right margin as appropriate */
The picture below shows what I would like to get.
It is a menu within a container, where the menu may wrap to multiple lines when the window/screen gets too narrow for all menu items to fit in. At the same time I would like the menu to have a background which expands to full screen in width, while expanding in height with the menu when it gets wrapped to multiple lines. Currently I think this is not possible with CSS, but I am also just a CSS amateur. My current solution involves #media queries to set the height of the menu background for resolutions where wrapping appears. This does not take into account that font-size could change, thus making each line of menu higher.
Here is a jsFiddle with a basic setup, which does NOT what I want:
https://jsfiddle.net/n3jmyq2f/3/ (Edited, was not the final version)
Here is the code:
<div class="container">
<div class="menu_wrap">
<div class="menu_bg"></div>
<div class="menu">
<ul>
<li>item 1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</div>
<div class="content">It's me, Mario!</div>
CSS:
.container {
width:50%;
margin: 0 auto;
background:lightgreen;
height:300px;
}
.menu_bg{
position: absolute;
background: #afafaf;
width: 100%;
left:0;
height:30px;
z-index: -1;
}
ul {
height:30px;
background: #afafaf;
}
li {
display:inline-block;
}
The first option is the simplest.
Stop thinking of the .container as something that must contain everything. It's just a class that can be reused as and when required.
If you take the menu div out of the "container" but put a .container div inside you get the effect you are looking for.
JSfiddle Demo
*,
body {
padding: 0;
margin: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
}
.menu {
background: #afafaf;
}
ul {
border: 1px solid green;
}
li {
display: inline-block;
}
.content {
height: 300px;
}
<div class="menu">
<div class="container">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">It's me, Mario!</div>
</div>
2nd Option
Use a pseudo-element
*,
body {
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
height: 300px;
}
ul {
background: #afafaf;
position: relative;
border: 1px solid green;
}
ul:before {
content: '';
position: absolute;
height: 100%;
background: inherit;
width: 100vw;
left: 50%;
transform: translateX(-50%);
z-index: -1
}
li {
display: inline-block;
}
<div class="container">
<div class="menu">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
<div class="content">It's me, Mario!</div>
</div>
JSfiddle Demo
if in .container you change
width:50%;
to
width:100%;
it will do it
fiddle
you could also use the .menu-wrap class (which I've seen in your markup) to do this