Here is my html:
<div>
<ul>
<li>Text 0</li>
<li>Text 1</li>
<li>Text Heading</li>
</ul>
</div>
here is my CSS:
ul{
position: relative;
top: -1.5rem;
left: -18rem;
list-style-type: none;
}
li{
display: inline;
margin-right: 0.5rem;
margin-left: 0.5rem;
}
a{
font-family: "Times New Roman", Serif;
color: white;
font-size: 18px;
text-decoration-line: none;
}
They are appearing like so:
Text0 Text1 Text
Heading
I want them to appear like so:
Text0 Text1 Text Heading
One solution I did was to do:
white-space: nowrap; for li.
But is that best practice ?
My second question is:
Is using position in CSS discouraged or no ?
You can use flexbox here to get the desired result. It's fine to use position in CSS but it's not necessary to use it in this case.
ul{
display: flex;
flex-wrap: nowrap;
list-style-type: none;
}
li{
margin-right: 0.5rem;
margin-left: 0.5rem;
}
a{
font-family: "Times New Roman", Serif;
color: black;
font-size: 18px;
text-decoration-line: none;
}
<div>
<ul>
<li>Text 0</li>
<li>Text 1</li>
<li>Text Heading</li>
</ul>
</div>
Related
I'm new to coding and my university has presented us with an assignment, and I need help removing the transparency from the drop-down menu. When you scroll down you can see the body of the page behind the navbar. No opacity is set. Also when I scroll down with the transparent nav bar the cursor fails to go past where the text of the body begins.
Thank you for any help!
I have attached a code snippet for both CSS and HTML:
body {
background-color: rgb(255, 255, 255);
font-family: Arial, Helvetica, sans-serif;
}
nav {
text-align: center;
}
ul {
margin: 0%;
padding: 0px;
list-style: none;
display: inline-block;
}
ul li {
float: left;
width: 300px;
height: 35px;
background-color: rgb(211, 211, 211);
line-height: 35px;
text-align: center;
font-size: 18px;
}
ul li a {
text-decoration: none;
color: rgb(0, 0, 0);
display: block;
}
ul li a:hover {
background-color: rgb(180, 180, 180);
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
.html logo {
height: auto;
width: auto;
max-width: 50px;
max-height: 50px;
padding-left: 2%;
}
.font-element {
font-family: 'Courier New', Courier, monospace;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The <b> Element </title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<img class="html logo" src="images/logo.png" alt="HTML&CSS">
<nav>
<ul>
<li>Home</li>
<li><a>HTML 5</a>
<ul>
<li><b> Element</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
<li>Element 7</li>
<li>Element 8</li>
<li>Element 9</li>
<li>Element 10</li>
</ul>
</li>
<li><a>CSS</a>
<ul>
<li>CSS 1</li>
<li>CSS 2</li>
<li>CSS 3</li>
</ul>
<li>Contact</li>
</ul>
</nav>
</header>
<h1>The <<span class="font-element">b</span>> Element</h1>
<p>The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names
in a review, actionable words in interactive text-driven software, or an article lede.
<h2>Example Code:</h2>
This is some <b>really bold text </b>.
<h2>The result:</h2>
This is some <b>really bold text</b>.
<p>You can find more information on the official W3C specification by clicking here.</p>
</body>
</html>
Just comment on these two lines on your CSS file
ul li {
position: relative;
float: left;
width: 300px;
/* height: auto; */
/* background-color: rgb(211, 211, 211); */
line-height: 35px;
text-align: center;
font-size: 18px;
}
That is happening because the text is over the dropdown and as per your code you want,
ul li:hover ul li {
display: block;
}
li to be hovered to show the other li. Now, because the text is over the dropdown when you move your cursor down the cursor is hovering on the text, and that is why it disappears.
Solution:
Bring the dropdown above the text.
Add z-index to the ul. Also, add position of relative.
ul {
margin: 0%;
padding: 0px;
list-style: none;
display: inline-block;
/* ↓↓ below ones ↓↓ */
position: relative;
z-index: 100;
}
Check it in action on Codepen.
Sorry, my bad, was really tired of trying to figure out the issue. So lemme rephrase the question - "How do i make drop-down menu appear below specific item of my centered horizontal menu". ( I've changed the code a bit)
HTML
<div class="menu">
<ul id="nav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4🔽
<ul id="dropdown">
<li>sublink1</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
CSS of centered .menu
#nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
height: 30px;
position: relative;
}
#nav li {
display: inline;
}
#nav a {
display: inline-block;
padding: 10px;
margin-top: 40px;
font-family: "oswald", sans-serif;
color: black;
text-decoration: none;
}
#nav a:hover {
background-color: rgba(107, 163, 252, 0.28);
}
just add
ul#dropdown
{
padding: 0px;
}
see jsfiddle here : https://jsfiddle.net/yxLzbkL3/
edit fyi : if the padding is not specified the user-agent styling from your browser will auto indent multiple lists using padding.
I have next navigation block in html template
<nav class="navigation">
<ul class="nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</nav>
with css
.navigation {
padding: 0 0 19px;
}
.nav {
font: 20px/22px "futura_demi_c", Arial, Helvetica, sans-serif;
text-align: justify;
text-align-last: justify;
list-style-type: none;
padding: 0;
margin: 0;
}
.nav:after {
content: "";
display: inline-block;
width: 100%;
overflow: hidden;
}
.nav li {
display: inline-block;
}
.nav a {
color: #020202;
}
Items have to be aligned justify in navigation block and occupy all entire width. And they are, if I use the code above.
But if i remove new lines after each 'li' all items move to the right without spaces between them
<nav class="navigation">
<ul class="nav">
<li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li>
</ul>
</nav>
Is it normal behaviour or my css is wrong?
Behaviour is the same for all browsers.
Jsfiddle examples: correct - http://jsfiddle.net/x9zfP/1 wrong - http://jsfiddle.net/AMK8z/1/
Tnx!
The behaviour is expected, because of the display: inline-block. This means whitespace between the elements will be considered.
See also CSS-Tricks - Fighting the Space Between Inline Block Elements
your css is wrong, "." is for class and "#" for id.
your ul has an id, so first replace all occurencies of ".nav" with "#nav"
here the correct css:
.navigation {
padding: 0 0 19px;
}
#nav {
font: 20px/22px "futura_demi_c", Arial, Helvetica, sans-serif;
text-align: justify;
text-align-last: justify;
list-style-type: none;
padding: 0;
margin: 0;
width:100%;
display:table
}
/* useless
#nav:after {
content: "";
display: inline-block;
width: 100%;
overflow: hidden;
}
*/
#nav li {
display: table-cell;
}
#nav a {
color: #020202;
}
basically your parent element need to have a width, and child need the property "display:table-cell".
The behavior is normal because your li has no padding or margin, so there's nothing there to keep the split apart.
This fixes your issue:
.nav li {
display: inline-block;
padding: 0 30px;
}
http://jsfiddle.net/AMK8z/1/
I have a drop down menu where I want some of the list items to be in one line.
See demo
You will notice that under Tab One, there are 9 rows. I want there to be three rows with three items in each row. How can this be done in CSS?
HTML:
<div id="wrapper">
<ul id="menu">
<li>Tab One
<ul style="width: 300%;">
<li>Column one</li>
<li>Column one</li>
<li>Column one</li>
<li>Column two</li>
<li>Column two</li>
<li>Column two</li>
<li>Column three</li>
<li>Column three</li>
<li>Column three</li>
</ul>
</li>
<li>Tab Two
<ul style="position: relative; left: -100%; width: 300%">
<li>Tab 2</li>
<li>Tab 2</li>
<li>Tab 2</li>
</ul>
</li>
<li>Tab Three
<ul style="position: relative; left: -200%; width: 300%">
<li>Tab 3</li>
<li>Tab 3</li>
<li>Tab 3</li>
</ul>
</li>
</ul>
</div>
CSS:
body {
font-family: arial;
margin: 0px;
padding-left: 40px;
padding-right: 40px;
}
#wrapper {
text-align: center;
height: auto;
margin: auto;
min-width: 500px;
}
#wrap {
display: inline;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#menu > li {
display: block;
position: relative;
float: left;
width: 33.3%;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 14px;
}
li:hover a {
background: #3b3b3b;
}
li:hover li a:hover {
background-color: black;
opacity: .7;
}
Working example: http://jsfiddle.net/w7a3N/5/
Remove > from #menu > li { and set inner <li> to <li style="width: 33%;">
Not sure if the style="width:33%;" is absolutely necessary since it works in Firefox 20 without it, but just to be safe.
UPDATE
You asked for a version that only does multiple columns under the first tab. Here you go:
http://jsfiddle.net/w7a3N/6/
Gave First tab an id like so <ul id="tab1" and then added this to CSS:
#tab1 li{
display: block;
position: relative;
float: left;
width: 33%;
}
I am building a simple page with a CSS-based collapsing menu on one side. The background for the page is a 3-stop linear gradient. At some point after putting in the collapsing menu, the page developed an extra band of blue at the bottom. It is below the <footer> section (there's nothing in the html below that, except the </body> and </html> tags). (This occurs in my Vivaldi browser (Chromium), and Edge, but not IceDragon (Firefox).)
If I hover over a "menuItem", it expands, and pushes the bottom of the gradient down toward the bottom edge of the browser. (The largest "menuItem" makes it almost disappear.) In Edge it then recovers the blue band when I stop hovering, while Vivaldi leaves it alone unless I move the cursor directly from the "menuItem"s to the "My opining:" bit.
Here's the html:
<body class="bkgdgradient">
<header>
<h1>Page title</h1>
<h3>tagline</h3>
</header>
<div class="layingout">
<div class="menuing">
<h4>My opining:</h4>
<div class="menuItem">
<h5>First Menu Category<h5>
<ul><p style="display: none;"></p>
<li>link item 1</li>
<li>link item 2</li>
<li>link item 3</li>
<li>link item 4</li>
</ul>
</div>
<div class="menuItem">
<h5>Second Menu Category<h5>
<ul>
<li>link item 1</li>
<li>link item 2</li>
<li>link item 3</li>
</ul>
</div>
<div class="menuItem">
<h5>Third Menu Category<h5>
<ul>
<li>link item 1</li>
</ul>
</div>
<div class="menuItem">
<h5>Fourth Menu Category<h5>
<ul>
<li>link item 1</li>
</ul>
</div>
<div class="menuItem">
<h5>Fifth Menu Category<h5>
<ul>
<li>link item 1</li>
<li>link item 2</li>
<li>link item 3</li>
</ul>
</div>
</div>
<div class="talking">
<p>A bunch of text.</p>
<p>A bunch more text.</p>
<p>Even more text</p>
<p>Finally finished</p>
</div>
</div>
<footer>
<p>About me</p>
<p>Contact me</p>
</footer>
</body>
And here's the CSS (internal to the page):
.bkgdgradient {
background-image: linear-gradient(#9cc3d2, #cfc4b8 30%, BurlyWood 95%);
}
header {
background-image: url("F14 & KC135R.jpg");
background-size: contain;
width: 1000px;
height: 556px;
}
h1 {
padding-left: 15px;
padding-top: 10px;
font-family: "Verdana", "Geneva", sans-serif;
font-size: 2.75em;
}
h3 {
text-align: right;
line-height: 800px;
padding-right: 30px;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 1.75em;
}
h4 {
font-family: "Arial", "Helvetica", sans-serif;
font-size: 1.25em;
}
.layingout {
display: grid;
grid-template-columns: 250px 700px;
grid-gap: 30px;
padding: 10px;
}
.menuing {
grid-column-start: 1;
grid-row-start: 1;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
color: SaddleBrown;
text-shadow: 1px 0px Sienna;
}
.menuItem {
padding: 0px;
margin: 0;
}
.menuItem h5 {
font-family: "Arial", "Helvetica", sans-serif;
font-size: 1em;
padding-left: 2px;
margin:0px;
}
.menuItem h5:hover {
font-size: 1.1em;
text-shadow: 2px 0px Sienna;
}
.menuItem ul {
background-color: Peru;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 0.9em;
line-height: 15px;
display: block;
list-style-type: none;
padding-left: 10px;
overflow: hidden;
height: 0px;
margin: 0px;
}
.menuItem li {
border-bottom: 1px solid Chocolate;
line-height: 22px;
padding-left: 5px;
}
.menuItem li a {
text-decoration: none;
color: Bisque;
}
.menuItem:hover ul {
height: auto;
}
.talking {
grid-column-start: 2;
grid-row-start: 1;
padding-top: 10px;
}
What bit had an unintended consequence in that styling? Does it have to do with making the background gradient apply to the body?
Thank you.
Edit One more item: In IceDragon, the <div> for the menu items does not expand down along with the menu; it seems to already be at the correct size to hold the expanding menus. Edge and Vivaldi expand it as necessary to contain the extra information.
Edit Fixed the <ul> close tags.
.body{
min-height: 100%;
}
.layingout {
display: grid;
grid-template-columns: 250px 700px;
grid-gap: 30px;
padding: 10px;
margin-bottom: 110px;
}
It could remove extra space from bottom