I'm working on a website where I have a ul menu with list items. I want the items to be centred on the screen. But it seems like my lists items have an annoying offset. See image:
My (HAML) is built up like this:
.menu
%ul
%li
#- content
My (SASS) css looks like this:
.menu {
text-align: center;
margin-top: 2em;
margin-bottom: 2em;
ul {
height: 30px;
background-color: black;
li {
background-color: white;
padding-top: 2em;
.active_menu {
border-top: 1px $red solid;
a {
color: $link-hover-color;
margin-bottom: 10px;
}
}
}
}
a {
font-family: "ff-meta-web-pro",sans-serif;
font-weight: normal;
font-size: 22px;
&:hover {
border-top: 1px $red solid;
}
}
}
ul li {
list-style: none;
display: inline;
margin: 0 1em 0 1em;
text-align: center;
a {
font-family: "ff-meta-web-pro",sans-serif;
font-weight: normal;
font-size: 22px;
}
}
Any ideas how I can get the menu/list items to center align?
You need to reset the horizontal margin and padding on the containing ul and list items to margin:0px; and padding:0px then define the individual padding or margins you need underneath them.
Also using margin:0px auto; in the right place should center the elements you specify.
Related
I'm trying to go through the basics of web development on MDN, and for some reason, the bullet points in my unordered list are getting moved all the way to the left of the body. I tried adding a padding of 0 to unordered lists, but that didn't help.
Here it is on a desktop:
https://imgur.com/a/mYFEmx4
Here it is on mobile:
https://imgur.com/a/Qx6DC8n
Html:
<ul>
<li>Movies</li>
<li>Television</li>
<li>Music</li>
<li>Books</li>
</ul>
CSS:
body {
font-family: 'Shadows Into Light', cursive;
text-align: center;
text-transform: uppercase;
background-color: gainsboro; /* silver/gainsboro/lightgray ? */
width: 800px;
margin: 0 auto;
padding: 0 20px 20px 20px;
border: 5px groove black;
}
h1 {
font-size: 60px;
color: #5A4568; /* dark purple from google */
margin: 0;
padding: 20px 0;
text-shadow: 0 0 10px black;
}
h2 {
color: darkred;
text-shadow: 0 0 15px black;
}
p, ul {
line-height: 2;
letter-spacing: 1px;
color: #B70404; /* dark red from google */
}
a {
line-height: 2;
letter-spacing: 1px;
color: #5A4568;
}
.coming-soon-subscript {
font-size: 10px;
color: #2D7F32;
font-weight: normal; /* these elements will be appearing in headers, which are automatically bolded. this is to remove the bold-ness. */
}
.clearfix {
clear: both;
}
hr {
margin: 0 -20px 20px -20px;
}
button {
text-transform: none;
}
ul {
padding: 0;
}
First, set display: inline-block to <ul>, then set text-align: left to <li>
You can set display: inline-block to ul in the css - but it will only bring the bullets closer to the list with all bullets left aligned while the text is centered. https://codepen.io/anon/pen/xQxVNJ
A workaround for this is to remove the default bullets of the ul using list-style: none in css and use unicode ● in the HTML as the bullets. Like in this fiddle http://jsfiddle.net/tm794sq2/1/
h1{
text-align:center;
font-family: 'Nosifer', cursive;
font-size:35px;
}
nav {
border-top: 5px solid black;
padding:5px 5px;
text-align:center;
}
nav a:link,a:visited {
border-radius: 0 0 15px 15px;
padding:0px 15px;
}
nav a {
float: left;
font-weight: bold;
color: #000;
margin: 0 5px;
background-color: #131313;
font-family: 'Nosifer', cursive;
text-decoration: none;
font-size: 20px;
color:red;
}
nav a:hover {
background-color: #D10000;
color: black;
padding-top: 12px;
padding-bottom: 10px;
}
.active{
background-color: #D10000;
color: black;
padding-top: 12px;
padding-bottom: 10px;
}
body{
background-color: #ffe6e6;
}
<nav>
HOME
COMPUTER PARTS
BUILD A COMPUTER
MEDIA
GO TO MAIN
</nav>
Can anyone please help me. I tried to use align="center", text-align:center;
and I tried many other things but for some reason, it's not centering my nav bar in the center of my web page. Also when I tried to display an image at the bottom of the nav bar and center it, it does not center.
Without seeing your markup, it's hard to say. But probably because of float: left on nav a. Remove that from nav a, and add display: inline-block;.
You're not even positioning anything...
Use the properties top: value, left: value, right: value, and bottom: value to position your navigation bar. You can use these properties in combination with transform: translate(X, Y).
text-align will only align text within an element, if there is indeed text. If there isn't any text, it won't do anything.
You need remove 'float: left' from 'nav a' selector and re-write code following way:
nav a {
display: inline-block;
font-weight: bold;
color: #000;
margin: 0 5px;
background-color: #131313;
font-family: 'Nosifer', cursive;
text-decoration: none;
font-size: 20px;
color:red;
}
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>
This is my first ever HTML project and I'm trying to clone the Google Nigeria homepage. I'm about 90% completed, but I have issues that I've tried fixing, to no avail.
The 'app logo' and "Sign in" on the navigation is further up than the other items. I tried using margin-top on those nth items, but it affects the entire nav items.
Here: jsfiddle.net/mux9xbam/
Thanks.
remove float:left; from .first li a{}
write
.first li a {
text-decoration: none;
color: #000;
font-size: .8em;
margin-right: 15px;
margin-top: 13px;
padding: 1px;
}
instead of
.first li a {
text-decoration: none;
color: #000;
font-size: .8em;
margin-right: 15px;
margin-top: 13px;
padding: 1px;
float:left;
}
and adjust margin padding of <ul>
use
img
{
vertical-align: middle;
}
to align image middle.
jsfiddle
I need some help. I am trying to make a horizontal navigation using only CSS and HTML. I don't want to have the menu labels as images, in case they change in the future. I have most of it working, but the issue is when I try to include an icon (image) for one of the LI. I want the icon to swap out as well. Here's my code so far:
CSS:
body {
padding: 50px;
margin: 0;
}
ul {
padding: 5px;
margin: 10px 0;
list-style: none;
background-color: #fff;
float: left;
clear: left;
}
ul li {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 9px;
}
ul li a {
text-decoration: none;
float:left;
color: #111;
cursor: pointer;
font: 14px/22px "Segoe UI", Arial, Helvetica, sans-serif;
}
ul li a span {
margin: 0px 10px 0px -10px;
padding: 1px 4px 1px 14px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}
ul.green li a:hover {
color: #fff;
background: url(images/green.png) no-repeat top right;
}
ul.green li a:hover span {
background: url(images/green.png) no-repeat top left;
}
ul.green li.home {
color: #111;
background: url(images/home-idle.png) no-repeat;
background-position: -1px;
padding-left: 18px;
}
ul.green li.home a:hover {
background: url(images/home-over.png) no-repeat -10px;
}
HTML:
<ul class="green">
<li class="home"><span class="home">Home</span></li>
<li><span>Archives</span></li>
<li><span>Rooms & Resources</span></li>
<li><span>Productivity</span></li>
<li><span>Get Training</span></li>
<li><span>FAQs</span></li>
</ul>
Like I said, here's what I am attempting do have happen:
Use CSS for the navigation (aside from the icon & background)
Change the background to a green, rounded corner rectangle (I used a
.png image for the background)
Change the Home icon from blue to white
Please let me know if anyone can help.