I want to center align the button vertically, It should remain aligned vertically even if height and line-height of li is changed, or font-size of the button is changed.
ul {
display: table;
width: 300px;
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
background-color: aqua;
}
ul li {
float: right;
margin-right: 8px;
height: 80px;
line-height: 80px;
}
ul li.header-logo {
float: left;
font-size: 50px;
}
#button {
padding: 4px 6px;
background-color: #ff9191;
border: 2px solid #00b5cc;
line-height: 24px;
}
<div id="logo-row">
<ul>
<li class="header-logo">AAA</li>
<li><div id="button">BUTTON</div></li>
<li>LINK</li>
</ul>
</div>
Add a display:inline to your button - and it should be fine
ul {
display: table;
width: 300px;
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
background-color: aqua;
}
ul li {
float: right;
margin-right: 8px;
height: 80px;
line-height: 80px;
}
ul li.header-logo {
float: left;
font-size: 50px;
}
#button {
display:inline;
padding: 4px 6px;
background-color: #ff9191;
border: 2px solid #00b5cc;
line-height: 24px;
}
<div id="logo-row">
<ul>
<li class="header-logo">AAA</li>
<li><div id="button">BUTTON</div></li>
<li>LINK</li>
</ul>
</div>
Related
I am trying to get my nav bar to display horizontally in a line at the top of my web page below my h1 tag. I tried all sorts of different methods to get it to line up horizontally but it won't change. My nav bar continues to display vertically centered. I want it to be a thin bar up at the top below the h1. As of right now, it displays with each li stacked on top of the other instead of side by side. Any help or ideas are appreciated.
#wrapper{
background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main {
margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid ;
text-align: right;
display:inline-block;
}
nav a{
text-decoration: none;
border: 1px solid;
width: 100%
}
nav a:link{color:cyan;}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
Make the li elements inline-block, and add box-sizing:border-box:
CSS: #wrapper {
background-color: #FFFFFF;
color: #000066;
width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main {
margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
box-sizing: border-box;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
box-sizing: border-box;
}
nav {
display: inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid;
text-align: right;
display: inline-block;
}
nav a {
text-decoration: none;
border: 1px solid;
width: 100%;
}
nav a:link {
color: cyan;
}
nav a:visited {
color: #6699FF;
}
nav a:hover {
color: gold;
}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
I don't understand your question. what did you want?.But Is this you want?
#wrapper{ background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;}
main {margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 98% !important;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid;
text-align: right;
display: inline-block;
}
nav > ul > li {
float: left;
display: inline-block;
}
nav a{text-decoration: none;
border: 1px solid;
}
nav a:link{color:cyan;
}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
</header>
</div>
I have an unordered list that contains several list elements inside. Also inside is an image element which is to be centered. I tried to center it using the margin: auto; property but since there are list elements on the side, it takes that into account when centering itself. How do I center the image in respect to it's container?
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
float: left;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: block;
margin: auto;
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="assets/image/twitter-icon.png" alt="Twitter Icon">
</ul>
</nav>
You may have to position the image absolute into the nav element using:
position: absolute;
left: 50%;
transform: translateX(-50%);
Also position:relative the nav element.
This way the image ignores whatever is inside the nav element.
body{
margin:0px;
}
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position:relative;
}
.nav li {
vertical-align: top;
margin: 5px 10px;
display: inline;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="assets/image/twitter-icon.png" alt="Twitter Icon">
</ul>
</nav>
You can use display:inline-block to get it.
.nav img {
display: inline-block; /*Add this*/
vertical-align: middle; /*Add this*/
height: 21px;
width: 24px;
}
.nav li {
display:inline-block; /*Add this*/
vertical-align: middle; /*Add this*/
margin: 5px 10px;
}
.nav {
text-align:center; /*Add this*/
}
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
text-align:center;
}
.nav li {
display:inline-block;
vertical-align: middle;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: inline-block;
vertical-align: middle;
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://lorempixel.com/200/200/" alt="Twitter Icon">
</ul>
</nav>
1) All Elements be Center
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
float: left;<------Remove
display: inline-block;<-----------Add
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;<---------Change to margin-left: 0px;------
}
.nav img {
display: block;<----------Change to display: inline-block;---
margin: auto;<---------Remove
height: 21px;
width: 24px;
}
.clearfix{<-----------Add this Selector
text-align: center;
width: 100%;
padding-left: 0;
}
Full Code:
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
display: inline-block;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 0px;
}
.nav img {
display: inline-block;
height: 21px;
width: 24px;
}
.clearfix{
text-align: center;
width: 100%;
padding-left: 0;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" alt="Twitter Icon">
</ul>
</nav>
2) Just image be Center
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position: relative;<---------Add
}
.nav li {
float: left;<---------remove
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: block;<-------Change To display: inline-block;---
margin: auto;<----------remove---------
right: 0;<--------------Add
position: absolute;<-------------Add
height: 21px;
width: 24px;
}
.clearfix { <----------------Add
width: 50%;
padding-left: 0;
position: relative;
}
Full Code:
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position: relative;
}
.nav li {
display: inline-block;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: inline-block;
height: 21px;
width: 24px;
right: 0;
position: absolute;
}
.clearfix {
width: 50%;
padding-left: 0;
position: relative;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" alt="Twitter Icon">
</ul>
</nav>
Put your img element into li and do some changes in your css like below snippet:
.nav ul {
width: 800px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
padding: 0;
list-style-type: none;
text-align: center;
}
.nav li {
display: inline-block;
vertical-align: middle;
margin: 5px 10px;
}
.nav img {
display: block;
margin: auto;
}
.nav ul:before,
.nav ul:after {
content: "";
display: table;
}
.nav ul:after {
clear: both;
}
<!--html-->
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<li><img src="//login.create.net/images/icons/user/twitter_30x30.png" alt="Twitter Icon"></li>
</ul>
</nav>
I am trying to create my own little Code Player. Similar to jsfiddle site. Right now I am having trouble with CSS.
I would like to center my menubar ( the buttons HTML, CSS, Javascript, result) in the topbar.
I just started learning HTML, CSS and Javascript. Do you have an idea how I can solve this problem?
#header {
width: 99%;
height: 50px;
background-color: steelblue;
margin-top: -10px;
margin-left: -10px;
}
#appname {
padding: 20px 0px 10px 20px;
float: left;
color: white;
font-size: 20;
font-style: italic;
}
#run {
float: right;
margin: 20px 20px 10px 0px;
}
#menu {
width: 500px;
margin: 0 auto;
padding-top: -1px;
}
#menu ul {
height: 30px;
}
#menu li {
list-style: none;
float: left;
height: 20px;
padding: 5px 10px;
border: 1px solid grey;
background-color: white;
}
#menu li:hover {
background-color: darkgrey;
}
.break {
clear: both;
}
<div id="header">
<div id="appname">
<b>Code Player</b>
</div>
<div id="run">
<button>RUN</button>
</div>
<div id="menu">
<ul>
<li id="buttonHTML">HTML</li>
<li id="buttonCSS">CSS</li>
<li id="buttonJS">Javascript</li>
<li id="buttonResult">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
Use this styles for your menu:
#menu {
width: 500px;
margin: 0 auto;
padding-top: -1px;
display: flex;
justify-content: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
No need for the width and margin on #menu. Then you can use display: flex; justify-content: center; padding: 0; on #menu ul to center it's contents. I also removed the floats from #menu li because they're no longer necessary.
#header {
width: 99%;
height: 50px;
background-color: steelblue;
margin-top: -10px;
margin-left: -10px;
}
#appname {
padding: 20px 0px 10px 20px;
float: left;
color: white;
font-size: 20;
font-style: italic;
}
#run {
float: right;
margin: 20px 20px 10px 0px;
}
#menu {
padding-top: -1px;
}
#menu ul {
display: flex;
justify-content: center;
padding: 0;
}
#menu li {
list-style: none;
height: 20px;
padding: 5px 10px;
border: 1px solid grey;
background-color: white;
}
#menu li:hover {
background-color: darkgrey;
}
.break {
clear: both;
}
<div id="header">
<div id="appname">
<b>Code Player</b>
</div>
<div id="run">
<button>RUN</button>
</div>
<div id="menu">
<ul>
<li id="buttonHTML">HTML</li>
<li id="buttonCSS">CSS</li>
<li id="buttonJS">Javascript</li>
<li id="buttonResult">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
If you apply text-align: center to your header and change the div containing the list to display:inline-block it should do the trick. I also removed the padding, margin, and width:
#header {
width: 99%;
height: 50px;
background-color: steelblue;
margin-top: -10px;
margin-left: -10px;
text-align:center;
}
#appname {
padding: 20px 0px 10px 20px;
float: left;
color: white;
font-size: 20;
font-style: italic;
}
#run {
float: right;
margin: 20px 20px 10px 0px;
}
#menu {
margin: 0 auto;
padding-top: -1px;
display:inline-block;
}
#menu ul {
height: 30px;
padding:0;
margin:0;
}
#menu li {
list-style: none;
float: left;
height: 20px;
padding: 5px 10px;
border: 1px solid grey;
background-color: white;
}
#menu li:hover {
background-color: darkgrey;
}
.break {
clear: both;
}
<div id="header">
<div id="appname">
<b>Code Player</b>
</div>
<div id="run">
<button>RUN</button>
</div>
<div id="menu">
<ul>
<li id="buttonHTML">HTML</li>
<li id="buttonCSS">CSS</li>
<li id="buttonJS">Javascript</li>
<li id="buttonResult">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
I'm trying to get the headerLinks div to wrap around both headerLink divs so that I can move the links and edit the margins of the links as a whole. Is this the best way to do it? And if so, how would I fix my code? Thank you in advance.
This is my code:
#header {
background-color: #EDEDED;
position: fixed;
width: 100%;
top: 0px;
box-shadow: rgb(0, 0, 0) 0px 0px 10px;
}
#headerItems {
list-style-type: none;
overflow: hidden;
margin: 10px;
padding: 0px;
}
#headerName {
float: left;
display: inline-block;
color: #3D3D3B;
font-size: 28px;
}
.headerLinks {
display: inline-block;
float: right;
}
.headerLink {
text-align: center;
margin: 5px;
float: right;
}
.headerLink a {
color: black;
padding: 5px;
background-color: #E1E1E1;
text-decoration: none;
font-size: 20px;
}
<div id="header">
<ul id="headerItems">
<li id="headerName">My name</li>
<div id="headerLinks">
<li class="headerLink">Link 1
</li>
<li class="headerLink">Link 2
</li>
</div>
</ul>
</div>
Only the links on the right should be in a ul.
And I'm pretty sure you don't want the links reversing the order,
So you will need to add float:right on the parent (headerLinks), and float left on the lis
* {box-sizing: border-box;}
body {margin: 0;}
#header {
background-color: #EDEDED;
position: fixed;
width: 100%;
top: 0px;
box-shadow: rgb(0, 0, 0) 0px 0px 10px;
padding: 10px;
}
#headerName {
float: left;
display: inline-block;
color: #3D3D3B;
font-size: 28px;
}
#headerLinks {
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0;
float: right;
}
.headerLink {
text-align: center;
margin: 5px;
float: left;
}
.headerLink a {
color: black;
padding: 5px;
background-color: #E1E1E1;
text-decoration: none;
font-size: 20px;
}
<div id="header">
<span id="headerName">My name</span>
<ul id="headerLinks">
<li class="headerLink">Link 1</li>
<li class="headerLink">Link 2</li>
</ul>
</div>
If you want to make a dropdown menu, you will nest another ul inside the li
When hovering over the links in drop2 div, the entire drop2 div moves upward a few pixels. Same problem with drop3.
Any ideas why the div is shifting up when I hover over it? Thank you, any advice much appreciated.
#nav {
background-color: #373737;
float: left;
height: 30px;
padding: 0px 0px 0px 0px;
width: 970px;
}
.nav a {
display: block;
}
.nav ul li a {
position: relative;
}
a {
text-decoration: none;
}
a.item {
color: white;
}
.item {
position: relative;
}
a.item:hover {
background-color: #dcd0c0;
height: 30px;
color: #373737;
font-weight: bold;
}
.menu {
list-style-type: none;
margin: auto;
width: 970px;
text-align: center;
}
.nav .items {
display: inline;
float: left;
margin: 0px 100px 0px 100px;
padding: 0;
text-align: center;
width: 82px;
}
.drop2 {
display: none;
text-align: left;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
.items:hover .drop2 {
display: block;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #f4f4f4;
position: relative;
z-index: 99;
}
.drop3 {
display: none;
text-align: left;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
width: 150px;
}
.items:hover .drop3 {
display: block;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #f4f4f4;
position: relative;
z-index: 99;
}
.drop2 > a {
color: #373737;
}
.drop3 > a {
color: #373737;
}
.drop2 > a:hover {
font-weight: bold;
}
.drop3 > a:hover {
font-weight: bold;
}
<div id="nav">
<div class="nav">
<ul class="menu">
<li class="items">
Photos
</li>
<li class="items">
Locations
<div class="drop2">
Bays
Lakes
Pacific Ocean
</div>
</li>
<li class="items">
Catches
<div class="drop3">
Bass
Other
</div>
</li>
</ul>
</div>
</div>
Add line-height: 30px; to your #nav tag in css.
jsfiddle