How do I make the <h1> element and the <ul> element inline?
What I have tried so far:
body{
margin:0;
}
header{
background:#999;
color:white;
padding:15px 15px 0px 15px;
}
header h1{
margin:0;
display: inline;
}
nav ul{
margin:0;
display: inline;
}
nav ul li{
background:black;
color:white;
display: inline-block;
list-style-type: none;
padding:5px 15px;
}
nav ul li a {
color:white;
}
<header>
<h1>My Page</h1>
<nav>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</nav>
</header>
Just change the parent element <header> to a flexbox using display:flex; like this:
header{
display: flex;
/* other css properties below */
}
Check and run the following Code Snippet for a practical example of the above flexbox approach:
/* CSS */
body {
margin:0;
}
header{
background:#999;
color:white;
padding:15px 15px 0px 15px;
display: flex;
}
header h1{
margin:0;
}
nav ul{
margin:0;
}
nav ul li{
background:black;
color:white;
display: inline-block;
list-style-type: none;
padding:5px 15px;
}
nav ul li a {
color:white;
}
<!-- HTML -->
<header>
<h1>My Page</h1>
<nav>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</nav>
</header>
Related
Apparently, when I go down the list in the menu from the left side, the text becomes black and the background darkens however when i do it from the right, the text is still white. Also, when I resize the page and make it smaller, the words in the header of the menu converge with each other. I want the page to remain static when the window is resized like as in http://www.nfl.com when it's resized.
Here's my code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://WWW.W3.ORG/tr/XHTML1/dtd/XHTML1-TRANSITIONAL.DTD">
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>My Webpage</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
My Webpage</header>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<br class ="clearFloat" />
</div>
</div>
<section>
Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
</section>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color: #43a286;
width:20%;
}
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
width:150px;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu ul li:hover li {
display:block;
width:100%;
}
#navMenu li:hover {
background-color: #357e68;
}
#navMenu ul li:hover ul li a:hover {
}
#navMenu a:hover {
color:#000000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
With your fiddle, you did not center the li elements which would not stretch the a elements to full width. You need to change this CSS selector:
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
width:100%;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
This will stop the cutoff on the a tags. This also centers the list elements, which may not be desired, but you may build off and customize. Another thing, the dropdown will not conform to the parent unless you add this:
#navMenu ul li ul {
width: 100%;
}
Finally, to prevent tab converging, set the min-width attribute on the tabs. This is an arbitrary number and you may change to your liking. A side note, since min-width overrides width, this will affect the dropdown. You may want to omit this:
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
min-width: 500px;
}
I've included a snippet with the JSFiddle code edited:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color: #43a286;
width:20%;
}
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
//width:150px;
width: 100%;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu ul li:hover li {
display:block;
width:100%;
}
#navMenu ul li ul {
width: 100%;
}
#navMenu li:hover {
background-color: #357e68;
}
#navMenu ul li:hover ul li a:hover {
}
#navMenu a:hover {
color: #000000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
<title>My Webpage</title>
<body>
<header>
My Webpage</header>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<br class ="clearFloat" />
</div>
</div>
<section>
Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
</section>
</body>
So yea, the menu bar won't extend 100% horizontally. It's only going half the way on my computer screen. Also, I want it to fit any screen 100%, so when I decrease the screen width, I want it to adjust properly, not just get all messy looking. Also, any advice on the coloring would be appreciated. Thanks so much for any help you bring forth.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://WWW.W3.ORG/tr/XHTML1/dtd/XHTML1-TRANSITIONAL.DTD">
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>My Webpage</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
My Webpage</header>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<br class ="clearFloat" />
</div>
</div>
<section>
Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
</section>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color: #43a286;
}
#navMenu ul li a {
text-align:center;
font-famil:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
width:150px;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background-color: #357e68;
}
#navMenu ul li:hover ul li a:hover {
background:#265a4a;
color: #000000;
}
#navMenu a:hover {
color:#000000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
A little bit of math can be done.
I noticed that if I set the width of each main li in the nav to 100%, it would leave each to fit 100% of the viewport. However they would all be stacked upon one another like this:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color: #00aeef;
width:100%;
}
#navMenu ul li a {
text-align:center;
font-famil:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
width:150px;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background-color: #0076a3;
}
#navMenu ul li:hover ul li a:hover {
background:#0076a3;
color: #fff;
}
#navMenu a:hover {
color:#fff;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<br class ="clearFloat" />
</div>
</div>
<section>
Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
</section>
So what I did was find out how many "Product" links you had and get that divided into 100%. In other words: 100% divided by how many "Product links". You have 5, so I set the width of each li to 20%
Here's your code: http://jsfiddle.net/DVJmS/40/
I need to make a list 100% height, and each list item 20%. I was able manage this. But when adding a border at the bottom of each list item, the list becomes more than 100% height and scrollbar appears.
How to make a list with borders fit the the screen height ?
html,body {height:100%; margin:0;}
.list {
width: 200px;
height:100%;
}
.list ul {
height:100%;
margin: 0;
padding:0;
list-style: none;
}
.list ul li {
border-bottom: 1px solid #000; /* Scrollbar appears with this*/
height:20%;
}
.list ul li a {
text-decoration: none;
display: block;
padding: 1em 1em 1em 0.2em;
color:#000;
}
.list ul li a:after
{
content:"»";
float:right;
}
<div class="list">
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
</ul>
</div>
Try adding this to your .list ul li :
box-sizing: border-box;
Try the following code :
html,body {height:100%; margin:0;overflow:hidden;}
.list {
width: 200px;
height:100%;
}
.list ul {
height:100%;
margin: 0;
padding:0;
list-style: none;
}
.list ul li {
border-bottom: 1px solid #000;
box-sizing:border-box;
height:20%;
}
.list ul li a {
text-decoration: none;
display: block;
padding: 1em 1em 1em 0.2em;
color:#000;
}
.list ul li a:after
{
content:"»";
float:right;
}
<div class="list">
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
</ul>
</div>
html,body {height:100%; margin:0;}
.list {
width: 200px;
height:100%;
}
.list ul {
height:100%;
margin: 0;
padding:0;
list-style: none;
}
.list ul li {
border-bottom: 1px solid #000; /* Scrollbar appears with this*/
box-sizing:border-box;
height:20%;
}
.list ul li a {
text-decoration: none;
display: block;
padding: 1em 1em 1em 0.2em;
color:#000;
}
.list ul li a:after
{
content:"»";
float:right;
}
<div class="list">
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
</ul>
</div>
Use box-sizing property.
box-sizing: border-box;
I am trying to put up a menu items on a header block, but the design requirements are to standout the current menu item by putting a big top border.
But the problem is, the menu item is growing top-bottom, like default.
If i make a menu item to position:absolute, then they all collapse.
Any solutions to this? Thx!
Here's the jsfiddle:
http://jsfiddle.net/yc7ymmp4/1/
Here's the HTML:
<div class="main">
<div class="bottomBar">
<ul>
<li class="current">Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</div>
</div>
Here's the CSS:
.main{
width:100%;
height:479px;
background:#EEE;
position:relative;
}
.bottomBar{
height:105px;
position:absolute;
bottom:0;
}
ul{
list-style:none;
padding:0;
margin:0;
position:relative;
}
li{
float:left;
width:auto;
border:1px solid #000;
positio1n:absolute;
display:inline-block;
}
li a{
color:#000;
padding:43px 43px;
display:block;
}
li a:hover{
background:#00a94e;
}
.current{
border-top:10px solid #000;
}
You could do this:
.current{
border-top:10px solid #000;
margin-top:-9px;
}
The negative margin on the top "offsets" the border thickness (the 1 pixel discrepency is to line up things correctly). For a fixed amount of offset, this method works pretty well.
You can use the box-shadow property.
.current{
box-shadow: 0 -10px 0 #000;
}
.main{
width:800px;
height:160px;
background:#EEE;
position:relative;
}
.bottomBar{
height:105px;
position:absolute;
bottom:0;
}
ul{
list-style:none;
padding:0;
margin:0;
position:relative;
}
li{
float:left;
width:auto;
border:1px solid #000;
display:inline-block;
}
li a{
color:#000;
padding:43px 43px;
display:block;
}
li a:hover{
background:#00a94e;
}
.current{
box-shadow: 0 -10px 0 #000;
}
<div class="main">
<div class="bottomBar">
<ul>
<li class="current">Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</div>
</div>
I developed a submenu with CSS & jQuery and my intention was that it was vertical submenu but I´m getting a horizontal menu.
I already tried to "play" with display in CSS but its not working, like #menu ul li ul li a {display: inline-block;}.
Anyone there knows the trick to put this submenu vertical?
My jsfiddle with full example:
http://jsfiddle.net/jcak/9EcnL/7/
My html:
<section id="menu-container">
<nav id="menu">
<ul>
<li>Home
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Procuts
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
</section>
My css:
#menu ul li ul li {display: none;}
#menu-container
{
background:green;
width:100%;
height:46px;
float:left;
z-index:7;
}
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
display: inline-block;
float:left;
height:46px;
position: relative;
line-height:46px;
font-weight:300;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
#menu ul li a:hover
{
color:#fff;
}
#menu ul li ul {
position: absolute;
left: 0;
-webkit-padding-start: 0;
width: 300px;
}
#menu ul li ul li
{
color:#fff;
}
By default, a ul will be vertical.
The float:left is what is making this whole menu be horizontal instead.
Have a go at removing that and seeing how the menu behaves.
Working Fiddle
#menu ul li
{
display: inline-block;
height:46px;
position: relative;
line-height:46px;
font-weight:300;
}