I would like to have a long border underneath my menu UL, but the "border-bottom" property on the list items does not work well:
#headermenu {
height: 40px;
background: #f47a20;
position: relative;
}
#headermenu .menu {
background: #F47B20;
float: left;
border: 1px solid #D66C1C;
padding: 0.6em 1em;
margin-top: 0.5em;
list-style-type: none;
}
#headermenu-left {
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 70%;
margin: 0;
}
#headermenu-left .menu {
border-bottom: 4px solid #004B8D;
}
<body>
<div id="headermenu">
<ul id="headermenu-left">
<li class="menu">
Link 1
</li>
<li class="menu">
Link 2
</li>
<li class="menu">
Link 3
</li>
<li class="menu">
Link 4
</li>
<li class="menu">
Link 5
</li>
<li class="menu">
Link 6
</li>
</ul>
</div>
</body>
The border is interrupted at the corners by -I guess- the border-left and border-right properties not being there?
I can't put it on the <ul> element, because then the line runs too long.
You can put it on the UL if you get rid of the width on it. Remove your last rule and use this:
#headermenu {
height: 40px;
background: #f47a20;
position: relative;
}
#headermenu .menu {
background: #F47B20;
float: left;
border: 1px solid #D66C1C;
padding: 0.6em 1em;
margin-top: 0.5em;
list-style-type: none;
}
#headermenu-left {
padding: 0;
position: absolute;
top: 0;
left: 0;
margin: 0;
border-bottom: 4px solid #004B8D;
}
<body>
<div id="headermenu">
<ul id="headermenu-left">
<li class="menu">
Link 1
</li>
<li class="menu">
Link 2
</li>
<li class="menu">
Link 3
</li>
<li class="menu">
Link 4
</li>
<li class="menu">
Link 5
</li>
<li class="menu">
Link 6
</li>
</ul>
</div>
</body>
The problem, as you suggest, is the missing left and right borders, which have a width, but no color, so this distorts the appearance of the bottom border with the illusion of a missing notch.
To solve this you can simply define border-width: 0 for the element, and allow the border-bottom property to override that setting.
#headermenu {
height: 40px;
background: #f47a20;
position: relative;
}
#headermenu .menu {
background: #F47B20;
float: left;
border: 1px solid #D66C1C;
padding: 0.6em 1em;
margin-top: 0.5em;
list-style-type: none;
}
#headermenu-left {
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 70%;
margin: 0;
}
#headermenu-left .menu {
border-width: 0;
border-bottom: 4px solid #004B8D;
}
<body>
<div id="headermenu">
<ul id="headermenu-left">
<li class="menu">
Link 1
</li>
<li class="menu">
Link 2
</li>
<li class="menu">
Link 3
</li>
<li class="menu">
Link 4
</li>
<li class="menu">
Link 5
</li>
<li class="menu">
Link 6
</li>
</ul>
</div>
</body>
Unfortunately this is how borders work. Those are the ends of your border-left, and border-right. Here's a work around though, I added a div to the bottom of your list:
(I also removed your width:70%; from your list)
#bluebar {
position:absolute;
bottom:0px;
width:100%;
height:5px;
background-color:blue;
}
http://jsfiddle.net/BjGvp/6/
Related
I have created a bubble conversation html.
Now I am trying to add a footer to it.
(Footer similar code in https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_footer)
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
clear: both;
padding: 5px;
border-radius: 20px;
margin-bottom: 2px;
width: 80%;
background: #eee;
}
.him {
float: left;
border: 1px solid #000000;
}
.me {
float: right;
}
#footer {
height: 30px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
body {
padding-bottom: 30px;
}
<div>
<div>
<ul>
<li class="me">N-19</li>
<li class="me">N-18</li>
<li class="him">N-17</li>
<li class="me">N-16</li>
<li class="me">N-15</li>
<li class="me">N-14</li>
<li class="him">N-13</li>
<li class="me">N-12</li>
<li class="me">N-11</li>
<li class="me">N-10</li>
<li class="me">N-9</li>
<li class="me">N-8</li>
<li class="him">N-7</li>
<li class="me">N-6</li>
<li class="me">N-5</li>
<li class="me">N-4</li>
<li class="me">N-3</li>
<li class="me">N-2</li>
<li class="me">N-1</li>
<li class="him">N</li>
</ul>
</div>
<div id="footer">
Footer
</div>
</div>
But I am not seeing the last lines of the conversation. The problem is that the footer is overlaping them because of the float property of the < li > elements.
How can I avoid it?
check this out: css grid is a very good property of css.
we can divide screen into number of columns and rows . i used here css-grid.
for more info on css-grid read
https://css-tricks.com/snippets/css/complete-guide-grid/
ul {
list-style: none;
margin: 0;
padding: 0;
display:grid;
grid-template-columns:33% 33% 34%;
}
ul li {
display: block;
clear: both;
padding: 5px;
border-radius: 20px;
margin-bottom: 2px;
background: #eee;
}
.him {
grid-column:1/3;
border: 1px solid #000000;
}
.me {
grid-column:2/4
}
#footer {
height: 30px;
position: fixed;
bottom:0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
body {
padding-bottom: 30px;
}
<div>
<div>
<ul>
<li class="me">N-19</li>
<li class="me">N-18</li>
<li class="him">N-17</li>
<li class="me">N-16</li>
<li class="me">N-15</li>
<li class="me">N-14</li>
<li class="him">N-13</li>
<li class="me">N-12</li>
<li class="me">N-11</li>
<li class="me">N-10</li>
<li class="me">N-9</li>
<li class="me">N-8</li>
<li class="him">N-7</li>
<li class="me">N-6</li>
<li class="me">N-5</li>
<li class="me">N-4</li>
<li class="me">N-3</li>
<li class="me">N-2</li>
<li class="me">N-1</li>
<li class="him">N</li>
</ul>
</div>
<div id="footer">
Footer
</div>
</div>
Due to padding-bottom could not be applied here, my answer didn't fit in the case, therefore I've done a research on the alternatives for a grid layout proposed and, surprisingly, for the fixed positioning of the footer block.
In this example I've decided to leave the code without the <ul> which has quite a big list of default element css values. I supposed that the first message always comes from the user, and used :not() CSS selector to style the replies blocks. You can change .user and :not(user) to any classes like .me and .him according to your HTML.
section {display:flex;flex-direction:column}
section * {
width: 75%;
border: 1px solid #757575;
border-radius:20px;
padding:2px 10px;
margin-bottom:2px
}
.user {
background:#ccc;
margin-left: auto
}
section :not(.user) {
background:#eee
}
section :not(.user) + .user, .user + :not(.user) {
margin-top:5px
}
footer {
height: 30px;
position: sticky; /* Yes. It works now */
bottom: 0;
background: #000;
color: white;
text-align: center;
line-height: 28px
}
<section>
<div class="user">Need some help with HTML</div>
<div class="user">And CSS maybe</div>
<div class="user">Want it to work with long-lenth messages as well, you know. And in all the browsers, even IE...</div>
<div>Sure</div>
<div>Lets test this one</div>
<div>Quite a good in terms of browser support in 2019</div>
<div class="user">Awsome!</div>
<div class="user">Thank you so much</div>
<div>You are welcome</div>
<div class="user">Goodbye</div>
</section>
<footer>
<p>Sticky Footer</p>
</footer>
I'm having trouble aligning my drop down menu in my nav bar, I've tried every suggestion out there. I've tried left, float: left, right, and pretty much everything else. I think it is possibly something interfering. The drop down menu has everything aligned from center to right of the parent menu item.
https://jsfiddle.net/ethacker/j7tgq95j/3/
My html code:
<header>
<nav>
<h1> Welcome to Mommy Madness</h1>
<ul>
<li class="parentMenu">Home
<ul class="sub-menu">
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li class="parentMenu">Pregnancy
<!--
Gender Predictions:
Old Wive's Tale
Boy vs Girl- The Ramzi Method
-->
<ul class="sub-menu">
<li>Advice</li>
<li>Gender Predictions</li>
<li>Trying To Conceive</li>
</ul>
</li>
<li class="parentMenu">All About Baby
<ul class="sub-menu">
<li>Fetal Development</li>
<li>Guidelines </li>
<li> Milestones</li>
</ul>
</li>
<li class="parentMenu">Party Momma
<!--
Birthdays - Link to 1-10th bdays.
-->
<ul class="sub-menu">
<li>Pregnancy Announcement</li>
<li>Gender Reveal</li>
<li>Baby Shower</li>
<li>Birth Announcement</li>
<li> Birthdays</li>
</ul>
</li>
<li class="parentMenu">Stations
<ul class="sub-menu">
<li>Hospital Bag</li>
<li>Diaper Bag</li>
<li>Changing Station</li>
<li>Baby Gear</li>
</ul>
</li>
<li class="parentMenu">Memory Markers
<!--
Drop Down Menu:
DIY
Purchases
(Both to have holiday/event selectors on right of page)
-->
<ul class="sub-menu">
<li>DIY</li>
<li>Purchases</li>
</ul>
</li>
<li class="parentMenu">Reviews
<ul class="sub-menu">
<li>Games</li>
<li>Gear</li>
<li>Learning</li>
</ul>
</li>
<li class="parentMenu">Blog
<ul class="sub-menu">
<li>Fit Momma</li>
<li>Minimal Momma</li>
<li>Modern Momma</li>
<li>Organic Momma</li>
<li>Organizing Queen</li>
<li>Savings Savvy</li>
<li>Tech Savvy</li>
<li>Traditional Momma</li>
</ul>
</li>
</ul>
</nav>
My css code:
body {
background-color: beige;
color: lightblue;
padding: 0;
margin:0;
}
header {
background-color: lightblue;
padding: 5px 0;
margin: 0;
}
header h1 {
color: cadetblue;
font-family: Arial;
margin: 0;
padding: 5px 15px;
display: inline;
}
.navMenu{
display: inline;
margin: 0;
}
.navMenu .parentMenu {
display: inline-block;
list-style-type: none;
background-color: lightgray;
padding: 5px 10px;
border: thin solid darkgray;
border-radius: 3px;
color: honeydew;
position: relative;
margin: 0;
}
.navMenu .parentMenu a{
color: azure;
}
.navMenu .parentMenu .sub-menu{
display: none;
}
.navMenu .parentMenu:hover .sub-menu{
display: block;
position: absolute;
list-style-type: none;
margin:0;
}
.parentMenu:hover .sub-menu li{
border: thin solid darkgray;
padding: 4%;
background-color: lightgray;
color: honeydew;
text-align: left;
white-space: nowrap;
width: 100%;
list-style-type: none;
margin: 0;
}
.parentMenu .sub-menu li:hover {
background-color: lightsteelblue;
}
.section {
background-color: wheat;
color: darkslategray;
padding: 5px;
float: left;
display: inline;
width: 63%;
margin: 0 1% 1% 1%;
border-radius: 10px;
border: thin solid khaki;
box-shadow: lightgray;
}
#about {
float: right;
width: 30%;
margin: 1% 1% 0 0;
text-align: center;
}
#home{
margin: 1% 0 1% 1%;
}
h4, h3 {
color: lightseagreen;
}
This will align the submenu to the left:
.navMenu .parentMenu .sub-menu {
display: none;
position:absolute;
list-style-type: none;
padding:0;
margin: 0;
left:-1px;
top:27px;
}
.navMenu .parentMenu:hover .sub-menu {
display: block;
}
https://jsfiddle.net/am13qur4/
you did not specify where you want to align your drop down elements. Do you want to align all to the right, center or left. I assumed left so try adding the code below. You may need to adjust the left attribute's value and your hover background styling too.
.sub-menu a{
position: absolute;
left: 3%;
}
Let me know if this helps. Stay warm!
When the browser page is full size, the menu is centered in the middle page (That's the correct position) but when resizing the window, the menu isn't visible anymore except by scrolling to the max right of the site. I looked it up to be a responsiveness problem, however i failed to solve it. Any ideas??
HTML:
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1"onclick="checklist(this)"><button onclick="myFunction()">AA</button></li>
<li id="item2"><button onclick="myFunction2()">A </button></li>
<li id="item3">B </li>
<li id="item4">C </li>
<li id="item5">D </li>
<li id="item6">E </li>
<li id="item7">F </li>
</ul>
</div>
css:
lu, li{
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu{
width:150px;
height: 350px;
}
.menu li{
position: relative;
top:150px;
bottom: 0;
left: 725px;
right: 0;
margin: auto;
border-style:none;
}
Add margin:0 auto; in .menu
Remove left: 725px; from .menu li
See Fiddle: https://jsfiddle.net/sachinkk/61capLqy/
lu, li{
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu{
width:150px;
height: 350px;
margin:0 auto;
}
.menu li{
position: relative;
top:150px;
bottom: 0;
right: 0;
margin: auto;
border-style:none;
}
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1"onclick="checklist(this)"><button onclick="myFunction()">AA</button></li>
<li id="item2"><button onclick="myFunction2()">A </button></li>
<li id="item3">B </li>
<li id="item4">C </li>
<li id="item5">D </li>
<li id="item6">E </li>
<li id="item7">F </li>
</ul>
</div>
.
This is what i am trying to achieve
I want the separator to be extended to full height. that is, it should cover the entire nav bar's height.
Html markup is as follows.
.mynav li {
list-style: none;
display: inline;
border-left: 1px solid white;
padding: 10px;
}
<div class="mynav pull-right">
<ul>
<li>TRENDS
</li>
<li>PRODUCTS
</li>
<li>DESIGNERS
</li>
<li>MEMBERS
</li>
<li>SEARCH
</li>
<li>MY ACCOUNT
</li>
</ul>
</div>
Since OP has updated his question this would be the solution
.mynav ul {
border-top: 1px solid blue;
border-bottom: 1px solid blue;
}
.mynav li {
list-style: none;
display: inline
}
.mynav a {
padding: 10px;
display: inline-block;
font-size: 10px
}
.mynav li:not(:last-child) a {
box-shadow: 1px 0 red
}
<div class="mynav pull-right">
<ul>
<li>TRENDS
</li>
<li>PRODUCTS
</li>
<li>DESIGNERS
</li>
<li>MEMBERS
</li>
<li>SEARCH
</li>
<li>MY ACCOUNT
</li>
</ul>
</div>
you can use pseudo element
.mynav li {
list-style: none;
display: inline;
padding: 10px;
position:relative
}
.mynav li:not(:last-child):before{
content:'';
position: absolute;
right: 0;
top:0;
bottom: 0;
width: 1px;
background: red
}
<div class="mynav pull-right">
<ul>
<li>TRENDS
</li>
<li>PRODUCTS
</li>
<li>DESIGNERS
</li>
<li>MEMBERS
</li>
<li>SEARCH
</li>
<li>MY ACCOUNT
</li>
</ul>
</div>
Alternatively, you can use box-shadow
.mynav li {
list-style: none;
display: inline;
padding: 10px;
position:relative
}
.mynav li:not(:last-child){
box-shadow: 1px 0 red
}
<div class="mynav pull-right">
<ul>
<li>TRENDS
</li>
<li>PRODUCTS
</li>
<li>DESIGNERS
</li>
<li>MEMBERS
</li>
<li>SEARCH
</li>
<li>MY ACCOUNT
</li>
</ul>
</div>
Your css should be display: inline-block if you wish to add padding to the top/bottom of your <li> element.
Try to set the padding to the A tag instead of Li tag :
.mynav li {
list-style: none;
display: inline;
border-left: 1px solid white;
}
.mynav li a {
padding: 10px;
}
In your CSS add width:13%; or something which will fit your width.
Check the code here
I am trying to make a miniature vertical bar like in this site, where they have the navigation and the vertical bars in between each link. I have tried the solution to a previous question, but when I tried to use 'margin-left' to move the text, the bar wouldn't stay between each link, it'd to this.
HTML
<div id="nav-clearfix">
<div id="nav">
<ul class="nav-pages">
<li>HOME</li>
<li><div class="mini-divider"></div></li>
<li>ROSTER</li>
<li><div class="mini-divider"></div></li>
<li>GALLERY</li>
<li><div class="mini-divider"></div></li>
<li>ABOUT US</li>
<li><div class="mini-divider"></div></li>
<li>SPONSORS</li>
</ul>
</div>
</div>
CSS
#nav-clearfix {
width: 100%;
height: 100px;
background: #000;
}
#nav {
margin-left: 10%;
width: 100%;
}
.nav-pages {
padding-top: 10px;
}
.mini-divider {
position: absolute;
top: 26%;
bottom: 71%;
border-left: 1px solid white;
}
.nav-pages li, .mini-divider {
float: left;
margin-left: 50px;
}
CSS
.nav-pages li:not(:last-child) a:after{
content: "";
/* width: 0px; */
background: white;
margin-left: 20px;
position: absolute;
height: inherit;
color: white;
border: 1px solid white;
height: 15px;
}
Remove The Border Related HTML & CSS
<li><div class="mini-divider"></div></li>
DEMO
You can also use + css selector to give border to the next element no need to add extra element for border
added
*{
margin: 0;
padding: 0;
}
for removing default styles given by browsers
* {
margin: 0;
padding: 0;
}
#nav-clearfix {
width: 100%;
height: 100px;
background: #000;
}
#nav {
width: 100%;
}
.nav-pages {
padding-top: 10px;
text-align:center;
}
.nav-pages li {
display: inline-block;
padding: 0 10px;
}
.nav-pages li + li {
border-left: 1px solid white;
}
<div id="nav-clearfix">
<div id="nav">
<ul class="nav-pages">
<li>HOME</li>
<li>ROSTER</li>
<li>GALLERY</li>
<li>ABOUT US</li>
<li>SPONSORS</li>
</ul>
</div>
</div>
Use this .separator class for vertical separator.
CSS
ul > li{
float: left;
display: block;
position: relative;
}
ul > li > a{
padding: 4px 6px;
display: block;
}
.separator {
background: none repeat scroll 0 0 #222;
border-left: 1px solid #333;
float: left;
height: 30px;
width: 1px;
}
HTML
<ul>
<li >
<a href="#" >Home</a>
</li> <span class="separator"></span>
<li> Link 1 </li> <span class="separator"></span>
<li > Link 2 </li> <span class="separator"></span>
<li> Link3 </li> <span class="separator"></span>
<li > Contact </li>
</ul>
jsfiddle: demo