I have a problem with my navbar. I centered it using CSS but not completely, it is a little bit to the right.
As you can see it is not centered completely in the middle as it should be.
My CSS:
.nav {
border: none;
list-style: none;
overflow: hidden;
text-decoration: none;
padding: 0;
text-align: center;
}
.nav li {
display:inline;
}
.nav a {
display: inline-block;
padding-left: 10px;
padding-right: 10px:
color: black;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 13px;
}
I think it is because I have the word PORTFOLIO which is longer, but how can I move INDEX and ABOUT a little to the left then?
<ul> elements natively have offset margin. You can reset it with:
.nav ul {
padding: 0;
margin: 0;
}
Related
I have a CSS menu here that works fine, honestly. The only thing I want to change about it is the location of the tabs. They all start at the left of the page, while I'd rather have them centered at the middle. margin: auto; did not help me in this case. Can anyone look into this for me please?
http://codepen.io/anon/pen/RWrRVO
Your current list items float to left which is making it start from left of the menu. Reset them to none and use display: inline-block to align them in a line.
#cssmenu li {
float: none; /* Modify */
display: inline-block; /* Add */
padding: 0px;
}
Updated Codepen
Set the margin in UL to margin auto. Put the background in #cssmennu.
CSS
#cssmenu {
position:relative;
border: none;
border: 0px;
margin: 0 auto;
background: #333333;
padding: 0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-weight: bold;
width: auto;
text-align:center;
}
#cssmenu ul {
background: #333333;
height: 35px;
list-style: none;
margin: 0 auto;
padding: 0;
width:1000px;
}
Check This DEMO
A simple solution would be:
#cssmenu {text-align: center;}
#cssmenu ul {display: inline-block;}
I set font-size: 12px on my body element. But on the mobile device some elements have a font-size of more than 12px (for example, element p). Why does this happen? How can this be fixed?
body {
font: normal normal 400 12px/1.5 "Droid Sans", Helvetica, "Helvetica Neue", Arial, sans-serif;
}
.footer {
background: #1d3057;
padding: 15px 30px;
color: #dedede;
width: 100%;
box-sizing: border-box;
}
. footer span {
display: inline-block;
white-space: pre;
float: left;
font-size: 12px;
}
You can use this solution:
* { max-height: 999999px; }
I am trying to build this drop down navigation bar, I am using Sass for the styling and jQuery for the drop down effect. I am trying to make the navigation bar inline however it is not working too well for me. Can anyone point me in the right direction as to what I am doing wrong? Thanks.
Here is my HTML:
<!--Navigation Bar -->
<div class="navigation_bar">
<nav>
<ul>
<li>Home</li> |
<li>About</li> |
<!-- <div class="sub_menu">
<li>sub_link</li>
<li>sub_link</li>
<li>sub_link</li>
</div> -->
<li>Schedule</li> |
<li>Contact</li> |
<li>Gallery</li>
</ul>
</nav>
</div>
And here is the Sass:
#mixin navigation_bar {
nav {
background: #fff;
height: 100px;
width: 100%;
margin-top: 10px;
ul, li {
list-style-type: none;
display: inline;
a {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 14px;
text-decoration: none;
color: #a4a4a4;
padding: 30px;
&:hover {
color: #000;
}
}
}
}
}
.navigation_bar {
#include navigation_bar;
}
working example below
Codepen
#mixin navigation_bar {
nav {
background: #fff;
height: 100px;
width: 100%;
margin-top: 10px;
ul {
list-style-type: none;
font-size: 0;
li {
display: inline-block;
vertical-align: top;
&:first-child a {
background: #ddd;
}
}
a {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 14px;
text-decoration: none;
color: #a4a4a4;
padding: 30px;
background:#ddd url('http://i.imgur.com/tY2FYyp.png') left 50% no-repeat;
display: block;
&:hover {
color: #000;
}
}
}
}
}
.navigation_bar {
#include navigation_bar;
}
For some reason the following code won't center on the page, even when I have typed many different codes in.
Here is the code:
#charset "utf-8";
/* CSS Document */
#nav {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
margin: 0 0 3em 0;
padding: 10px 50%;
list-style: none;
margin-left:auto;
margin-right:auto;
display: inline-block;
}
#nav li {
float: left;
}
#nav li a {
padding: 8px 15px;
text-decoration: none;
color:white;
display:inline-block;
font-size:18px;
}
#nav li a:hover {
color:#00BFFF;
}
#header {
margin-top: 0;
width:100%;
height:150px;
background-color:#09F;
}
Please bear in mind that the nav bar is inside the header.
jsFiddle
You just need to remove the display property on the <ul> and give it a width. I also removed the padding that was on the list.
try it with
#nav {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
margin: 0 auto 3em;
width: XXpx
padding: 10px 50%;
list-style: none;
margin-left:auto;
margin-right:auto;
display: inline-block;
}
and define the width
Edit:
function onload() {
document.getElementById("nav").style.marginLeft = Math.round(document.getElementById("nav").offsetWidth/2)+"px";}
I am trying to use a background image and/or color behind my menu items. Using either the image or just a background color the background will only match the height of the text. The height of the background needs to be 30px and the text needs to 16px and centered - like a normal button. I've tried every combination of css I can think of but can not get the results I'm looking for.
#menu-container {
/*float: left;*/
width: 960px;
margin:50px auto 0 auto;
height:50px;
}
#menu ul {
text-align: left;
height:50px;
}
#menu ul li {
display: inline;
background-image: url(images/menubutton.png);
background-repeat: no-repeat;
}
#menu ul li a {
text-transform: uppercase;
padding-right: 13px;
padding-left: 13px;
font-size: 16px;
/*line-height: 0.2em;*/
color: #000;
font-style: normal;
letter-spacing: 1px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
}
#menu ul li a:hover {
color: #ff0000;
text-decoration: none
}
Here is the code you need:
#menu ul li {
display: inline-block;
background-color: #a0a0a0; /* I changed this for testing */
background-repeat: no-repeat;
padding-top: 7px;
padding-bottom: 7px;
}
Basically, it used to be display: inline which prevented you from being able to adjust the height. You also can't use display: block because then they will not all be on the same line. So, display: inline-block is exactly what you need.
Then I added padding-top and padding-bottom with 7px each to keep the text in the middle.
Here is a working DEMO
Hope this helped.