I have a nav element with an unordered list and several items. I am using Flexbox to ensure sufficient width between the items and account for Media Queries. However, My background-color property isn't spanning the entire width/height of the navbar. Do I need to set these properties on a different element?
nav {
background-color: #dddddd;
& ul {
display: flex;
width: 100%;
list-style-type: none;
& li {
flex-grow: 1;
flex-shrink: 1 auto;
flex-basis: 100%;
}
& li a {
text-decoration: none;
}
}
}
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<ul>
</nav>
1st. Close your ul with </ul>
2nd. Are you talking about the margin at left and right? By default, body have an 8px margin.
If you add this will remove it:
body {
margin: 0;
}
Also, I compiled your SASS to CSS just showing the example here.
The following could be really helpful to understand the default CSS value for each HTML elements.
Default CSS Values for HTML Elements
https://www.w3schools.com/cssref/css_default_values.asp
body {
margin: 0;
}
nav {
background-color: #dddddd;
}
nav ul {
display: flex;
width: 100%;
list-style-type: none;
}
nav ul li {
flex-grow: 1;
flex-shrink: 1 auto;
flex-basis: 100%;
}
nav ul li a {
text-decoration: none;
}
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
Related
I've looked at several related posts here and none seem to cut to the core of my challenge.
The scenario is that I have an li element that contains a ul element. I want the widths of the li elements inside the contained ul to be at least as wide as the parent li.
Below are two examples. The first example displays the way I want it to. The second illustrates the issue. I want the items that start "Sub-Item 1" and "Sub-Item 2" to take on the width of the item that starts "Long Item". If you run the code snippet it should be pretty clear what I am after.
I am looking for a 100% CSS solution.
Any assistance would be appreciated.
<style>
ul {
padding:0;
}
ul li {
position: relative;
display: inline-block;
list-style: none;
text-decoration: none;
text-align: center;
float: left;
background-color: red;
white-space:nowrap;
}
ul li ul {
position: absolute;
display: flex;
flex-direction: column;
text-align: left;
background-color: lightgoldenrodyellow;
padding:0;
}
ul li ul li {
text-align: left;
width: 100%;
margin-left: 0;
border-style: none;
background-color: lightgoldenrodyellow;
padding:0;
}
</style>
<div style="position:absolute;top:0;">Example 1
<ul>
<li>
Short Item
<ul>
<li>This is longer than First Item and displays as desired.</li>
<li>Filler - width is same as sibling</li>
</ul>
</li>
</ul>
</div>
<div style="position:absolute; top:200px;">Example 2
<ul>
<li>
Long Item - This is deliberately longer. I want the width of li below to display as wide but it doesn't
<ul>
<li>Sub-Item 1: Shorter than Long Item and does NOT display as desired</li>
<li>Sub Item 2: Filler - width is same as sibling</li>
</ul>
</li>
</ul>
</div>
This can be accomplished by using flex and wrapping the "Short Item" text in a span tag.
ul {
display: flex;
padding:0;
}
ul li {
position: relative;
display: flex;
flex-basis: auto;
flex-direction: column;
list-style: none;
text-decoration: none;
background-color: red;
white-space:nowrap;
}
span{
flex-basis: auto;
flex-grow: 1;
}
ul li ul {
display: flex;
flex-direction: column;
text-align: left;
background-color: lightgoldenrodyellow;
padding:0;
}
ul li ul li {
text-align: left;
width: 100%;
margin-left: 0;
border-style: none;
background-color: lightgoldenrodyellow;
padding:0;
}
<div>Example 1
<ul>
<li>
<span>Short Item</span>
<ul>
<li>This is longer than First Item and displays as desired.</li>
<li>Filler - width is same as sibling</li>
</ul>
</li>
</ul>
</div>
I have a navigation with ten items inside it and I want to maximize its length and set the spaces between the items equally.
So far, this is what I've done. But it only looks nice if the menu items' lengths are equal, but mine isn't. Ideas, anyone? Thanks in advance.
<nav class="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<!-- eight more menu items -->
</ul>
</nav>
And here's my stylesheet.
.menu {
width: 100%;
}
.menu li {
display: inline-block;
width: 10%; /* since I have 10 items */
text-align: center;
}
View this codepen.
You will need to float your li items left.
CSS:
.menu {
width: 100%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
width: 8%;
text-align: center;
margin: 0% 1%;
float: left;
padding: 0;
}
It's important to keep track of your total width (100%). Each item should be 10% (since you are having 10 items) in total. This means when you want a margin of 1% on the left and on the right side, your li item should have a width of 8%.
Your total width should always be 100%. Otherwise your user will be able to scroll horizontally.
add margin for li in css file.
.menu li {
display: inline-block;
margin-left:1%;
width: 6%; /* since I have 10 items */
text-align: center;
}
Or use #media rule is used to define different style rules for different media types/devices
Use the modern flexbox technique for the solution. No need to set any width or margin.
Check the browser compatibility table: Flexbox
Use the CSS Prefixer to support some of the older browsers:
* {
margin: 0;
padding: 0;
}
.menu ul {
display: flex;
flex-direction: row nowrap;
justify-content: space-around;
}
.menu li {
list-style: none;
}
<nav class="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
you could have ato add float css rule to the ul element.
.menu ul{padding:0px;}
.menu {
width: 100%;
}
.menu ul li {
float:left;
width: 10%; /* since I have 10 items */
text-align: center;
}
try with above code
Something has bugged me for years. If you look at this fiddle
you'll see a simple unordered list with some padding on the a element and a background colour to create a box.
There is white space between each item in the list. How can you get rid of it so the boxes are touching horizontally?
Html is:
<div id="dvLinks">
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</div>
css is:
#dvLinks ul {
margin: 0;
padding: 0;
list - style - type: none;
}
#dvLinks ul li {
display: inline;
}
#dvLinks ul li a {
text - decoration: none;
padding: .1em 1em;
color: #000;
background-color: # 33EEDD;
}
There are several ways. A few are:
1) Remove thew white space between the list item elements:
<li>One</li><li>Two</li><li>Three</li>
jsFiddle example
2) Put HTML comments between the list item elements
<li>One</li><!--
--><li>Two</li><!--
--><li>Three</li>
jsFiddle example
3) Float them left:
#dvLinks ul li {
display: inline;
float:left;
}
jsFiddle example
It's very simple:
CSS
#dvLinks ul li { display: table-cell; }
RESULTS
inline leaves white-space between elements.
Write elements on same line rather than writing them on different lines.
Change
<li>One</li>
<li>Two</li>
<li>Three</li>
to
<li>One</li><li>Two</li><li>Three</li>
Updated fiddle here.
You have to set the ul font-size to 0 and then you have to set the font-size of the li in what ever your like
#dvLinks ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0;
}
#dvLinks ul li { display: inline; font-size: 16px; }
#dvLinks ul li a
{
text-decoration: none;
padding: .1em 1em;
color: #000;
background-color: #33EEDD;
}
See the Demo here
This is a common problem with the inline/inline-block.
Another solution is the following:
// All elements in one line
<ul><li>Element #1</li><li>Element #2</li>...</ul>
// Or
// No space between li elements
<ul><li>
Element #1</li><li>
Element #2</li>...
</ul>
// Or
// Comments between li elements
<ul><li>
Element #1</li><!--
--><li>Element #2</li><!--
...-->
</ul>
// Or by using CSS
// Change the li display attribute to
ul li
{
display : table-cell;
}
Anyway, best solution for me is the float left. You can do it like that:
<ul id="list" class="clearfix">
<li>Element #1</li>
<li>Element #2</li>
<li>Element #3</li>
</ul>
and in CSS
/* Clear fix resource : http://www.webtoolkit.info/css-clearfix.html */
.clearfix:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix
{
display: inline-block;
}
html[xmlns] .clearfix
{
display: block;
}
* html .clearfix
{
height: 1%;
}
#list li
{
display : block;
float : left;
}
You can use negative margins.
#dvLinks ul li {
margin: 0 -1px;
}
You could add
li { margin-left: -5px;}
http://jsfiddle.net/3gmZa/6/
I have an evenly distributed menu like :
HTML
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
</nav>
CSS
nav ul {
padding:0;
margin:0;
text-align: justify;
text-transform: uppercase;
background-color: #000;
}
nav ul:after {
content:'';
width: 100%;
display: inline-block;
height: 0;
line-height: 0;
font-size: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #fff;
}
This works great to spread the menu items accross the whole width of the bar as can be seen in this fiddle: http://jsfiddle.net/SjDEX/.
However, you can also see that a result of the ::after element the height of the ul is increased making extra space below the menu items.
Is there a way to get rid of this by making the after element not take up vertical space?
Setting its height to 0 does nothing and changing its display to block or something else breaks the layout.
It is the ul itself that has that height, not the :after, so just add
nav ul {
height: 20px;
}
Fiddle
And this code can be reduced to this:
nav ul:after {
content:'';
width: 100%;
display: inline-block;
}
I'm trying to create a header consisting of an h1 and a nav element. I want the bottom of the nav to be aligned with the bottom of the h1.
Here's what I've tried:
HTML
<header>
<h1>Web site Header</h1>
<nav>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
</header>
CSS
header {vertical-align: bottom; width: 100%; height: 300px;}
h1 {vertical-align: bottom; float: left;}
nav {vertical-align: bottom; float: right;}
nav ul li {display: inline;}
I could do this by setting exact margins for my elements, but I thought this would be cleaner (if it's possible). Any advice on how to fix it/if it can be done?
Thanks!
As clean as it can get:
<style>
header > * { display: inline-block; }
nav li { display: inline; }
</style>
Direct header descendants are now inline blocks, i.e. they don't push surrounding content to flow beneath them, yet they can still utilize the margin and padding property as blocks.
It's possible to do in many different ways. Margins are designed for positioning, but if you'd rather not use margins or padding, you can use absolute positioning:
CSS:
header
{
display: block;
height: 300px;
width: 100%;
}
h1
{
float: left;
margin: 0;
height: 32px;
}
nav
{
display: block;
height: 32px;
position: relative;
}
nav ul
{
bottom: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
}
nav ul li
{
display: inline-block;
}
HTML:
<header>
<h1>Web site Header</h1>
<nav>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
</header>
This relies on knowing the height of the header, and setting both the header and the nav to the same heights/margins.