I am trying to create a horizontal navbar and I am trying to put the items in one line and horizontal.
I have to create an unordered list and create some items in it and have a link for each text:
body {
padding: 0px;
margin: 0;
}
ul {
background-color: rgb(94, 94, 94);
}
li {
float: left;
}
a {
display: block;
}
<ul>
<li><a> Home </a></li>
<li><a> About </a></li>
</ul>
then I should set the float for <li> to left and give a block display to <a> tags.
But when I do this some CSS in <ul> does not work such as background-color, can u help me with it?
You can use flexbox for this:
ul {
list-style-type: none;
display: flex;
}
li {
padding: 5px;
}
<ul>
<li><a> Home </a></li>
<li><a> About </a></li>
</ul>
without using flex or grid.
when you set the <li> to inline-block you do 3 things:
remove the dot before the list
put everything in a 1 line (inline)
if there isn't enough space, it will be block to like columns
now there isn't anymore the bug of background not displayed
don't make <a> to block if is nested in another element that isn't... a child can style the parent
but if you style the parent then all child will be
body {
margin: 0;
}
/* parent */
ul {
background-color: rgb(94, 94, 94);
}
/* childs */
li {
display: inline-block;
}
<ul>
<!-- home -->
<li>
Home
</li>
<!-- about -->
<li>
About
</li>
</ul>
Related
I have a div. And this div contains a very long list. This list becomes scrollable automatically.
This div is then inside another div, which fills out the entire screen.
Scrolling works fine, but it only works when the mouse is over the inner div, the one that actually contains all the data.
But I want scrolling to work, also when the mouse is over the parent div, the one that fills out the entire screen.
How do I do that?
You can see the sample here:
https://openage.org/fs/jsl_forritun/?page=hlutir
It doesn't scroll when the mouse is over the darker part. /:
you have two divs that contains your content body
id= "nhreyfing"
give him this style padding: 0 20vw; background: black
or what so ever padding you wanna give him
id= "content"
give him your rgb(213, 191, 134) background
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #2B2832;
}
.main {
margin: 0 auto;
padding: 40px;
width: 700px;
height: 100vh;
overflow-y: auto;
background: #D5BF86;
}
.main ul {
margin: 0;
padding: 0;
}
.main ul li {
list-style: none;
}
.main ul li:nth-child(n+2) {
margin: 10px 0 0;
}
.main ul li a {
padding: 10px;
display: flex;
color: #000;
background: #C6B076;
text-decoration: none;
}
<div class="main">
<ul>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
</ul>
</div>
Do the following:
remove CSS properties from
BODY element {height:100%}
remove {max-width: 800px} and add CSS to id="initial_screen_base" element:
div#initial_screen_base {
max-width: 100vw;
padding: 0px 20vw;
background-color: rgb(43, 40, 50);
}
if you want it to me maxed always to 800px (for smaller devices it will be full width), make it like this:
div#initial_screen_base {
background-color: rgb(43, 40, 50);
max-width: 100vw;
padding: 0;
padding-right: calc((100% - 800px)/2);
padding-left: calc((100% - 800px)/2);
}
for your id="node":
div#node {
background-color: rgb(213, 191, 134);
}
You should remove you inline CSS and put them in a style TAG inside your HEAD. That way you will fave more clear code for yourself to edit.
So, I have an unordered list which contains buttons for a keypad. The problem is that for some reason, There's an extra <li> element in the end of the list and this just ends up screwing everything. How could I fix this?
<ul id="buttons">
<li><div><a><span>1</span></a></div><div><a><span>2</span></a></div><div><a><span>3</span></a></div></li>
<li><div><a><span>4</span></a></div><div><a><span>5</span></a></div><div><a><span>6</span></a></div></li>
<li><div><a><span>7</span></a></div><div><a><span>8</span></a></div><div><a><span>9</span></a></div></li>
<li style="max-width:80px;margin:auto;"><div><a><span>0</span></a></div><li>
</ul>
//as you can see only 4 li elements
//styles
li {
width: 100%;
border-spacing: 10px 5px;
display: table;
table-layout:fixed;
text-align: center;
}
ul {
position: relative;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
list-style-type: none;
}
But when I open the document in chrome, There are 5 <li> elements.
There is a typo error. Problem is at your last list item . It is not closed properly. It should be like this :
<li style="max-width:80px;margin:auto;"><div><a><span>0</span></a></div></li>
You have used <li> instead of </li> to close your last list item
so your could should be
<ul id="buttons">
<li>
<div><a><span>1</span></a></div>
<div><a><span>2</span></a></div>
<div><a><span>3</span></a></div>
</li>
<li>
<div><a><span>4</span></a></div>
<div><a><span>5</span></a></div>
<div><a><span>6</span></a></div>
</li>
<li>
<div><a><span>7</span></a></div>
<div><a><span>8</span></a></div>
<div><a><span>9</span></a></div>
</li>
<li style="max-width:80px;margin:auto;">
<div><a><span>0</span></a></div>
</li>
I am trying to make a horizontal drop down menu in CSS. However, it appears vertically:
I want the two topmost menu items to be horizontal. What can I do, besides making a table with one row?
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
<ul>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
</ul>
You can try floating the list items:
.root {
overflow: hidden; /* clear float */
}
.root > li {
float: left;
}
<ul class="root">
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
</ul>
You can add submenu a class/id with
.inline-menu{
display: inline;
}
http://jsfiddle.net/dyaskur/fby9fan6/
The gist of your question is actually this: what is the difference between inline and block elements? This is a fundamental question that is important to understanding the basics of layout in CSS/HTML. There is a good write-up on this topic and some of the trade-offs of the various approaches at:
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Basically, <li> is block-level tag, meaning that it displays as its own "block" element: receives a layout (settable dimensions), by default takes the entire width of the parent element, and has a forced break after the rendered element (is on a line to itself).
So, that leaves us with a number of approaches for having your menu items sit side-by-side:
Use inline-level elements for your menu items
Use block-level elements and float them
Use block-level elements and style them as inline-block
All of these approaches are detailed in the above link. Personally, I prefer to use floated block elements. I have a fiddle with some rough css to give you an idea. Note that there are some considerations in how to display your submenus as well. You'll note that I've implemented these as having display: block, with no float, because we want them to stack vertically.
HTML
<ul class="menu">
<li>
foo
<ul class="submenu">
<li>subfoo1</li>
<li>subfoo2</li>
</ul>
</li>
<li>
bar
<ul class="submenu">
<li>subbar1</li>
<li>subbar2</li>
</ul>
</li>
</ul>
CSS
ul.menu {
list-style: none;
}
ul.menu > li{
float: left;
position: relative;
}
ul.menu li {
background-color: #cccccc;
padding: 5px 20px;
}
ul.menu > li + li {
border-left: solid black 2px;
}
ul.menu li:hover > ul {
display: block;
}
ul.menu li a,ul.menu li a:link, ul.menu li a:hover, ul.menu li a:visited {
color: black;
text-decoration: none;
}
ul.submenu{
display: none;
list-style: none;
position:absolute;
left: 0;
padding: 0;
}
ul.submenu li {
float:none;
display: block;
}
ul.submenu > li + li {
border-top: solid black 1px;
}
You can just remove some <li> tags:
<ul>
<li>
abc
<ul>
abc
abc
</ul>
</li>
<li>
abc
<ul>
abc
abc
</ul>
</li>
</ul>
I'm doing some practice with layout using css, and I've come across a weird thing that I don't know how to explain. Where does the space highlighted in red in the following image come from, and how do I eliminate it?
HTML:
<body>
<div class="menu-bar">
<ul>
<li>
Home
<ul>
<li>Beach House</li>
<li>Ski Cabin</li>
<li>Country Cottage</li>
</ul>
</li>
<li>
News
<ul>
<li>World News</li>
<li>National News</li>
<li>Local News</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Email Address</li>
<li>Phone Number</li>
<li>Postal Address</li>
</ul>
</li>
<li>
About
<ul>
<li>About Me</li>
<li>About You</li>
<li>About Us</li>
</ul>
</li>
</ul>
</div>
</body>
CSS:
body {background: #77c4d3; padding:1%; }
div.menu-bar{position: relative; max-width: 700px;}
/*Styles for both menu and submenus: */
div.menu-bar ul { list-style-type: none; margin: 0; padding:20px; background: gray;}
div.menu-bar li { background:white; text-align:center; display:inline-block; padding:10px;}
/*Menu-specific styles: */
div.menu-bar > ul {width: 100%;}
div.menu-bar > ul > li {width:20%; border:0; margin: 0; padding-top: 10px; padding-bottom: 10px;}
/* Submenu-specific styles */
div.menu-bar ul ul {background-color: blue; padding-left: 10px; padding-right: 10px;}
/*Hide any unodered lists that are descendents of a list element by default*/
div.menu-bar li ul {
display: none;
}
/*Select any unordered lists that are children of list elements that are being hovered on.*/
/* The <ul> is display:block, but the individual <li> elements are inline-block, which is what matters.*/
div.menu-bar li:hover > ul {
display: block;
position: absolute;
}
That comes from the wrapping <ul> below <div class="menu-bar">. It's width is set to 100% in your css where you say:
div.menu-bar > ul {
width: 100%;
}
Since the buttons don't fully take up the space in that <ul> there is some extra grey space. If you add a text-align: center; to that style, it will nicely center your buttons, as so:
div.menu-bar > ul {
width: 100%;
text-align: center;
}
Or check out my JSFiddle for this.
There are a couple of things going on here to be aware of.
1.) You have space in your code, between your top-most <li>'s. This is a funky issue with whitespace. CSS-Tricks has a great summary of the issue. Essentially, you have to put your closing </li> tag back-to-back with the next opening <li> tag, to get rid of those tiny gaps.
2.) Secondly, your width is set to 20%. You can bump this up to even quarters, at 25%...although you'll notice that this pushes the last of your <li>s down a line. This is because...
3.) There is a 10px padding on div.menu-bar li which applies 10px of padding to the left, right, top and bottom. Your div.menu-bar > ul > li rules specify a top and bottom padding, but the left and right are left the same. My personal approach for this?
4.) Use box-sizing. By setting this CSS property to border-box, your padding is included in the width of your elements. In other words, you can set the following CSS:
div.menu-bar > ul > li {
width: 25%;
margin: 0;
padding: 12px;
box-sizing: border-box;
}
...and you'll end up with a set of list items that have a) no funky, tiny space between them and b) are all on the same line.
Hope that helps!
Each nav item's width is dependent on it's text content. It has no knowledge of how wide it's parent is. Each nav item is just shoved as far left as it can go next to it's neighbor.
If you are looking to have the nav items fill the bar evenly, you will need to use a flex solution. See here for a complete explanation.
I'm trying to show a nested (sub) list, but hide the parent ULs and LIs through an "active" class so that the sub list looks like the parent list.
The list with the "active" class isn't visible because it inherits display: none from its parent.
Code:
<ul>
<li>
Hidden
<ul>
<li class="active">Visible</li>
</ul>
</li>
</ul>
CSS:
li {
display: none;
}
li.active {
display: block;
}
Fiddle: http://jsfiddle.net/2C8qs
Any ideas?
If you can add span around the hidden text (http://jsfiddle.net/vittore/2C8qs/3/) :
<ul>
<li>
<span>Hidden</span>
<ul>
<li class="active">Visible</li>
</ul>
</li>
</ul>
li span, li li {
display: none;
}
li li.active {
display: block;
}
display: none hides the element and all of its children, that is final and adding display: block to a child won't make it visible again.
This will hide all children, except for the .active element:
ul.parent > li {
display: none;
}
ul.parent > li.active {
display: block;
}
EDIT: Oops, I misread the question. You can do something similar to the above though, if you wrap the other contents in an element.
An ugly CSS trick : http://jsfiddle.net/2C8qs/4/
Instead of using display none/block, I used text-indent, like that :
li {
text-indent: -99999em
}
li.active {
text-indent: 0
}
Note that can only work on inline / text elements.
I know this is very late to this question, but I've found what I would consider a nice solution and thought I'd post it here for whoever might need it in the future.
First of all, wrap all the <li>'s children with <p> (or <div> or anything, it doesn't matter really), but not any sub-<ul>'s. Then, to the child <ul> you want to be visible, add a class called showing. Example (we only want to show the SubSubThing list):
<ul>
<li>
<p>Item</p>
<ul>
<li>
<p>SubItem</p>
<ul>
<li>
<p>SubSubItem</p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Thing</p>
<ul>
<li>
<p>SubThing</p>
<ul class="showing">
<li>
<p>SubSubThing1</p>
</li>
<li>
<p>SubSubThing2</p>
</li>
<li>
<p>SubSubThing3</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Then apply this CSS:
ul>li {
list-style:none;
}
ul>li>p {
display: none;
}
ul.showing>li>p {
display:block;
}
/* Without removing padding and margin,
the sublists appear way over to the right */
ul {
margin-left: 0px;
padding-left: 0px;
}
li {
margin-left: 0px;
padding-left: 0px;
}
Now, only the <li>'s who are direct descendants of ul's with a showing class will display at all. The other items in the list will use no space.
To get the sublists to show bullet points would be easy via CSS, and to show different sublists it is simple to just use jQuery to set showing on the appropriate ul.
Hope that helps.
Obligatory JSFiddle
So the reason you can't simply hide the first li and reveal the second is because the second is contained by the first — you can't reveal and element that is contained by a hidden one.
Therefore, if you put the li element within a span that you'd like to hide, it becomes easy. I've created a class-free version for you here: http://jsfiddle.net/rgpnr6mh/3/
<ul>
<li><span>Hidden</span>
<ul>
<li>Visible</li>
</ul>
</li>
</ul>
I'm assuming you don't want to display the bullets:
ul {
list-style-type:none
}
li span{
display: none;
}
li li {
display: block;
}