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
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.
I am new to css
I am trying to develop a navigation bar for website it works fine when it is in full screen, but when i decrease the size of window few elements came down but the background colour remain intact to first row only.
Here's the code
.navbar {
background-color: rgb(11, 29, 66);
height: 60px;
border-radius: 0px;
}
.navbar ul {
margin: 0px;
padding: 0px;
overflow: auto;
}
.navbar li {
float: left;
list-style: none;
margin: 10px 10px;
border-right: 2px solid gold;
}
.navbar li a {
text-decoration: none;
color: khaki;
padding-right: 0.5cm;
font-family: 'Big Shoulders Stencil Display', cursive;
font-size: 28px;
}
<nav class="navbar">
<ul>
<li>
<img src="favicon-32x32.png" alt="Home">
</li>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
</nav>
It's your height property on the navbar. I removed it, run the snippet below:
.navbar {
background-color: rgb(11, 29, 66);
border-radius: 0px;
}
.navbar ul {
margin: 0px;
padding: 0px;
overflow: auto;
}
.navbar li {
float: left;
list-style: none;
margin: 10px 10px;
border-right: 2px solid gold;
}
.navbar li a {
text-decoration: none;
color: khaki;
padding-right: 0.5cm;
font-family: 'Big Shoulders Stencil Display', cursive;
font-size: 28px;
}
<nav class="navbar">
<ul>
<li>
<img src="favicon-32x32.png" alt="Home">
</li>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
</nav>
You can add the background color to your .navbar ul
like this :
.navbar ul {
margin: 0px;
padding: 0px;
overflow: auto;
background-color: blue;
}
I want the first row of my container (the one with logo and button) to be 100% gray, as it is.
However, I'm having trouble with the second row. I want the second row to be yellow. But I can't seem to make it happen.
The color of the container keeps invading the second row. How do I make the second row to be 100% wide and yellow? I've tried width: 100%, but it didn't solve the problem.
body {
background-color: rgb(210, 210, 210);
margin: 0px;
padding: 0px;
}
#container {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
background-color: rgb(97, 97, 97);
}
#Hyperlinks {
text-align: right;
background-color: darkgoldenrod;
}
#Logo {
width: 20%;
}
#Button {
width: 80%;
text-align: right;
}
#Button button {
margin-right: 40px;
background-color: rgba(27, 129, 107, 0.5);
border: none;
color: white;
padding: 10px 15px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
#Logo p {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande';
font-size: 1.2rem;
color: white;
padding-left: 40px;
}
#Hyperlinks a {
font-size: 1.2rem;
text-align: center;
text-decoration: none;
color: white;
padding-right: 5px;
}
#Hyperlinks ul {
text-align: left;
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-left: 40px;
}
#Hyperlinks>ul>li {
display: block;
padding: 10px 50px 10px 2px;
margin-right: 10px;
}
#Hyperlinks ul ul {
display: none;
}
<nav>
<div id="container">
<div id="Logo">
<p>MySitee.com</p>
</div>
<div id="Button">
<button type="button">Click me</button>
</div>
<div id="Hyperlinks">
<ul>
<li>Home</li>
<li>Tutorial
<ul>
<li>Tutorial 1</li>
<li>Tutorial 2</li>
<li>Tutorial 3</li>
</ul>
<!-- repare onde o li é quebrado... esse ul fica dentro dele, filho msm -->
</li>
<li>About</li>
<li>Newsletter
<ul>
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
To remove the gray color which is invaded by #container, it is needed to fill the empty space with the #hyperlink and this can be done using flex-grow: 1.
And still, you can see the gray borders. This was made by the padding option of #container class. And to remove it on child #hyperlink class, it is needed to set the margin css attribute with the reverse value of parent padding css. So for example, if #container contains padding-left: 10px;, to remove it, it is needed to set margin-left: -10px css on #hyperlink.
body{
background-color: rgb(210,210,210);
margin:0px;
padding: 0px;
}
#container{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right:10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
background-color: rgb(97, 97, 97);
}
#Hyperlinks{
text-align: right;
background-color: darkgoldenrod;
flex-grow: 1;
margin-left: -10px;
margin-right: -10px;
margin-bottom: -10px;
}
#Logo{
width: 20%;
}
#Button{
width: 80%;
text-align: right;
}
#Button button{
margin-right: 40px;
background-color: rgba(27, 129, 107,0.5);
border: none;
color: white;
padding: 10px 15px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
#Logo p{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande';
font-size: 1.2rem;
color: white;
padding-left: 40px;
}
#Hyperlinks a{
font-size: 1.2rem;
text-align: center;
text-decoration: none;
color: white;
padding-right: 5px;
}
#Hyperlinks ul{
text-align: left;
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-left: 40px;
}
#Hyperlinks>ul>li{
display: block;
padding: 10px 50px 10px 2px;
margin-right: 10px;
}
#Hyperlinks ul ul{
display: none;
}
<header>
<nav>
<div id="container">
<div id="Logo">
<p>MySitee.com</p>
</div>
<div id="Button">
<button type= "button">Click me</button>
</div>
<div id="Hyperlinks">
<ul>
<li>Home</li>
<li>Tutorial
<ul>
<li>Tutorial 1</li>
<li>Tutorial 2</li>
<li>Tutorial 3</li>
</ul>
<!-- repare onde o li é quebrado... esse ul fica dentro dele, filho msm -->
</li>
<li>About</li>
<li>Newsletter
<ul>
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</header>
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 a ul with a title in a div and I'm trying to make the ul scroll while keeping the title fixed. I also want to have the title match the width of the ul. I'm able to do one of those at a time, but not both together. Either I get a ul with a title that is 100% of the ul width, or I get a title that stays put when the list scrolls, but it doesn't match the ul width. Can someone point out what I'm doing wrong?
fiddle here: http://jsfiddle.net/9zcRy/2/
The HTML
<div class="talkingPointsHolder">
<div class="genericScriptsHolder">
<span class="listHeader">List One</span>
<ul
class="scrollingList">
<li>item 1.1</li>
<li>item 1.2</li>
<li>item 1.3</li>
<li>item 1.4</li>
<li>item 1.5</li>
<li>item 1.6</li>
<li>item 1.7</li>
<li>item 1.8</li>
<li>item 1.9</li>
<li>item 1.10</li>
<li>item 1.11</li>
<li>item 1.12</li>
</ul>
</div>
<div class="genericScriptsHolder">
<span class="listHeader">List Two</span>
<ul
class="scrollingList">
<li>item 2.1</li>
<li>item 2.2</li>
<li>item 2.3</li>
<li>item 2.4</li>
<li>item 2.5</li>
<li>item 2.6</li>
<li>item 2.7</li>
<li>item 2.8</li>
<li>item 2.9</li>
<li>item 2.10</li>
<li>item 2.11</li>
<li>item 2.12</li>
</ul>
</div>
The CSS
.talkingPointsHolder {
border: 1px solid black;
background: #eeeeee;
height: 200px;
overflow: auto;
}
.genericScriptsHolder {
float: left;
width: 48%;
margin: 0px 2px 0px 2px;
/* uncomment to make the title match the ul width (see listHeader too)*/
/*position: relative;*/
}
.listHeader {
color: #ffffff;
background: #444444;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
font-weight:bold;
font-size:11px;
text-align: left;
text-indent: 1em;
position: absolute;
z-index:10;
/* uncomment to make the title match the ul width (see genericScriptsHolder too)*/
/*width: 100%;*/
}
.scrollingList {
position: relative;
top: 31px;
}
.scrollingList li {
overflow: auto;
height: 20px;
color: #666666;
background-color: #cccccc;
font-weight: lighter;
padding: 10px;
margin: 2px;
list-style-type: none;
}
You need to define the width of an element if you're using position: absolute;
I set the width your .list-header to match the width of your .genericScriptsHolder and then adjusted the padding accordingly.
Here's the fiddle: http://jsfiddle.net/9zcRy/15/
Notice that I removed the horizontal margins that you created for the scrolling list line items and instead edited the styling on the parent .genericScriptsHolder element.
.genericScriptsHolder {
float: left;
width: 48%;
margin: 0px 5px 0px 5px;
/* uncomment to make the title match the ul width (see listHeader too)*/
/*position: relative;*/
}
.listHeader {
color: #ffffff;
background: #444444;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
font-weight:bold;
font-size:11px;
text-align: left;
text-indent: 1em;
position: absolute;
width: 48%;
z-index:10;
.scrollingList li {
overflow: auto;
height: 20px;
color: #666666;
background-color: #cccccc;
font-weight: lighter;
padding: 10px;
margin: 2px 0 0 0;
list-style-type: none;
}
http://jsfiddle.net/9zcRy/9/
.listHeader {
color: #ffffff;
background: #444444;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
font-weight:bold;
font-size:11px;
text-align: left;
text-indent: 1em;
position: absolute;
z-index:10;
width:46%;