I am trying to get these list items to center in the list, but I can't seem to figure out the problem. Here's the code:
HTML
<!DOCTYPE html>
<html>
<head>
<link href="my.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="centerDiv">
<ul class="centerUL">
<li>Amazon 1</li>
<li>Amazon 2</li>
<li>Amazon 3</li>
</ul>
</div>
</body>
</html>
CSS
#centerDiv {
width: 330px;
text-align: center;
border: 1px solid red;
}
.centerUL {
width: 70%;
margin: 2px auto;
line-height: 1.4;
border: 1px solid green;
}
li {
display: inline;
text-align: center;
border: 1px solid orange;
}
If you aren't using a CSS Reset, you should. http://www.cssreset.com/
CSS Resets will normalise your elements so you know how they will act; what to expect from them.
By default, uls and ols will have a left-padding on them, for the bullets :)
http://jsfiddle.net/MXGz5/
.centerUL {
width: 70%;
margin: 2px auto;
padding: 0; /* this new line */
line-height: 1.4;
border: 1px solid green;
}
... ixes the issue.
The best solution is to use text-align:center; for the ul element and set display:inline-block; for the li elements.
ul{
text-align:center;
}
ul li{
display:inline-block;
}
DEMO
Related
I'm trying to give the hover effect to the li which appears to cover only the text part and not the whole li-box. I wonder why is it happening like this?
*{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
html, body{
margin: 0;
padding: 0;
}
.container {
display: grid;
background-color: rosybrown;
border: 1px solid black;
justify-items: center;
}
.heading{
order: 2;
}
.main-nav{
order:1;
text-align: center;
width: 100%;
border-bottom: 1px solid rebeccapurple;
padding: .5em;
}
.main-nav ul{
margin:0;
}
.main-nav li:hover{
background-color: rgba(255,255,255,0.3);
}
ul{
padding: 0;
}
.main-nav li{
display: inline;
margin: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="trialStyle.css">
</head>
<body>
<div class="container">
<h1 class="heading">The Love</h1>
<nav class="main-nav">
<ul class="ulContainer">
<li>Home</li>
<li>About</li>
<li>Store</li>
</ul>
</nav>
</div>
</body>
</html>
The hover effect only covers the text part because that is the size of the rendered li element.
If you want the effect over a block, you could use padding instead of margin CSS property:
Refer the given link of W3 Schools below
*{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
html, body{
margin: 0;
padding: 0;
}
.container {
display: grid;
background-color: rosybrown;
border: 1px solid black;
justify-items: center;
}
.heading{
order: 2;
}
.main-nav{
order:1;
text-align: center;
width: 100%;
border-bottom: 1px solid rebeccapurple;
padding: .5em;
}
.main-nav ul{
margin:0;
}
.main-nav li:hover{
background-color: rgba(255,255,255,0.3);
}
ul{
padding: 0;
}
.main-nav li{
display: inline;
/*padding: 1em;
padding-bottom: 0.5em;*/
padding: .5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="trialStyle.css">
</head>
<body>
<div class="container">
<h1 class="heading">The Love</h1>
<nav class="main-nav">
<ul class="ulContainer">
<li>Home</li>
<li>About</li>
<li>Store</li>
</ul>
</nav>
</div>
</body>
</html>
CSS Box Model
You can add padding to give space around text and display hover on it.
.main-nav li{
display: inline;
margin: 1em;
padding: 1em;
}
If I am interpreting it right you are trying to get the li element to cover the entire height of the bar. If so the problem would be that you need to set the height of the li element to 100%. So edit your css script to look something like this:
.main-nav li{
display: inline;
margin: 1em;
height:100%;
}
*Basically the text is the entire element because no dimensions are set so you have to set them like this.
I'm wanting my ul to be in the center of my div however this will work. The code keeps going to the left of the webpage even though I have tried to center it. I have tried a couple of different solutions and to no avail. Here is my code:
HTML:
<div id="nav">
<ul class="links">
<!--PHP code will return menu set in <li> and <a> tags-->
<?php include "setMenu.php";?>
</ul>
</div>
CSS:
#nav {
border: 1px black solid;
}
#nav ul{
display: block-inline;
margin: 0px auto;
}
#nav li {
float: left;
padding: 5px 5%;
margin-right: 5px;
background-image: url("../images/button_background.jpg");
color: white;
border-radius: 3px;
position: center;
border: 1px black solid;
}
#nav li:hover{
color: black;
background-image: url("../images/button_background_hover.jpg");
}
Try this:
#nav ul{
width: 40%;
margin: 0 auto;
}
or
#nav ul{
display: table;
margin: 0 auto;
}
http://jsfiddle.net/4tnwjrag/2/
Example:
#nav {
border: 1px black solid;
background:green;
}
#nav ul{
display: table;
margin: 0 auto;
margin: 0px auto;
background:blue;
margin:0 auto;
padding:0;
}
#nav li {
padding: 5px 5%;
display:table-cell;
width:120px;
margin-right: 5px;
background-image: url("../images/button_background.jpg");
color: white;
list-style:none;
border-radius: 3px;
position: center;
border: 1px black solid;
}
#nav li:hover{
color: black;
background-image: url("../images/button_background_hover.jpg");
}
<div id="nav">
<ul class="links">
<!--PHP code will return menu set in <li> and <a> tags-->
<li>zz</li>
<li>zz</li>
<li>zz</li>
</ul>
</div>
display: block-inline; should be display: inline-block;.
There's no block-inline value for display. Here is a list of available values for that CSS property.
Use text-align center on your div and set padding to 0 on the ul like this:
#nav {
border: 1px black solid;
text-align:center;
}
#nav ul{
display: block-inline;
margin: 0px auto;
padding:0;
}
Here's a link to a similar question: How to horizontally align ul to center of div?
I chose to go with solution #2 and applied it to your elements, where
#nav {
text-align: center;
}
#nav ul {
display: inline-block;
}
and here is a jsfiddle of the solution applied to your particular case: http://jsfiddle.net/7qd5bkse/
I had to make a few tweeks to make it look like yours, but I hope this helps and should be a good start.
Here's another solution
#nav {
border: 1px black solid;
text-align: center
}
#nav ul {
display: inline-block;
list-style-type: none;
}
#nav li a {
text-decoration: none;
display: block;
color: white
}
#nav li {
float: left;
padding: 5px;
margin-right: 5px;
background-color: grey;
border-radius: 3px;
border: 1px black solid;
width: 100px;
text-align: center
}
#nav li:hover {
background-color: white;
}
#nav li a:hover {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="nav">
<ul class="links">
<li>Menu One
</li>
<li>Menu Two
</li>
<li>Menu Three
</li>
</ul>
</div>
</body>
</html>
I have two problems with my menu bar. What I want to achieve is to center the links on the header (including the logo picture) and have exactly the same height for the header as the menu. When I add the links it creates a margin on top and on bottom (so the header will extend) and I have no idea why. The margin size depends on the font size and if I want to remove it I have to add a -something px margin and have to try pixel by pixel what the number should be. I'm pretty sure there's an easier solution to that... My other problem is that I can't center the whole menu bar within the header unless I specify a specific width. Obviously I don't know how wide my menu bar will be (and even if I measure it somehow, what if I change the links later?) I'm fairly new to HTML and CSS so I've probably made a bunch of mistakes, I just keep changing the codes until I get what I want but since I'm trying to learn it better I'm aiming for more understanding than random coding so feel free to correct anything. Here's the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My website</title>
<link rel="stylesheet" type="text/css" href="images/style.css" />
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="menu">
<ul>
<li><img src="images/ncs.png" /></li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li id="right">English</li>
</ul>
</div>
</div>
</body>
</html>
And the CSS:
#charset "utf-8";
body {
background-color: #efe8df;
}
#header {
width: 100%;
height: auto;
background-color: #afafaf;
position: absolute;
top:0px;
left:0px;
right:0px;
}
#menu {
margin: auto;
padding: 0px;
list-style: none;
font-family:'Belleza', sans-serif;
color: white;
font-size: 22px;
/*width: 1000px;*/
height: auto;
position: relative;
}
#menu li {
list-style: none;
width: auto;
height: auto;
text-align: center;
vertical-align: middle;
display: table-cell;
border-right: 1px solid #ebeaea;
}
#menu li a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}
#menu li a:visited {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}
#menu li a:hover {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}
#menu li a:active {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}
#menu #right {
border-right: 0px;
font-family: Georgia;
font-size: 14px;
}
Thanks in advance!
Header is extending because for ul and li all browser have there margin and padding standards.
You should use reset.css and normalize.css to remove default css property of some common elements.
so if you want just for list use
ul,li{margin:0; padding:0} or how much you want.
To center align you can give following css properties
to header
display: table
to menu
display : table-cell;
text-align:center
to ul
display:inline-block
to li
float:left
Check fiddle
http://jsfiddle.net/gJFy8/1/
try adding this in your css, change the width to whatever you want according to your need
#menu {
width: 900px;
add width to the #menu div
menu {
margin: auto;
padding: 0px;
list-style: none;
font-family: 'Belleza', sans-serif;
color: white;
font-size: 22px;
width: 1000px;
height: auto;
position: relative;
width: 960px; //or whatever
}
So I have to make a web page for school using HTML and CSS. Everything appears to be 100% fine when I view it in my code preview but once I put it on my server the navigation bar is no longer aligned with my main body
Here is my CSS
body {
background-color:#2AA890
}
nav {
margin: auto;
width: 1000px;
}
ul {
padding: 0px;
margin: 45px;
list-style: none;
}
li a:link, li a:visited, li.selected {
float: left;
width: 110px;
line-height: 3em;
background-color: #e9e9e9;
color: #000000;
font-size: 16px;
text-align: center;
text-transform:capitalize;
text-decoration: none;
border-right: 3px #ba0000 solid;
}
li:last-child a {
width: 110px;
border-right: 0px #6e2525 solid;
}
.head {
text-align: left;
padding: 10px 10px 10px 10px
}
.box {
margin-left: 185;
width: 882;
height: 450;
background-color: #acacac;
text-align: left;
padding: 30px 10px 10px 10px
}
.pic1 {
width:900px;
}
.pic1 img {
float:right;
}
.pic1 p {
text-indent: 40px;
line-height: 1.5em;
font-family: sans-serif;
font-size: 17px;
margin-right:400px;
}
.head {
padding: 25px 0px 0px 45px
}
.pic1 p {
padding: 0px 5px 10px 8px
}
.pic1 img{
padding: 30px 20px 20px 10px;
}
and here is my HTML
<! DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Supplies</li>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
</ul>
</nav>
<div class="box">
<div class="pic1">
<img src="drew_brophy.jpg" alt="Art" title="Drew Brophy" width="480" height="374">
<div class="head">
<h2>How to Paint a Surfboard</h2>
</div>
<p>The surfboard, one of the most fun toys around. There is just one problem with it. The majority of them are plane white. There is no color and adding some stickers isn't a true way to express yourself! With a little time and some common items from your garage or hardware, you can make it so much better. You don't have to be a great artist or have lots of money to truly make that board your own. This site is a simple guide with some tips and tricks for painting your surfboard. When the waves aren't breaking and your looking at that board in the corner of your room, take some time and change it up! </p>
</div>
</div>
</body>
</html>
In your CSS, please add 'px' for height, width, height for 'box' class.
For Nav UL, remove the margin.
Sample:
http://jsfiddle.net/mrUqK/
margin-left: 185px
width: 882px
height: 450px
Hi please review the margin in your ul and in the .box class set an equal margin-left.
ul {
margin:45px 0px;
}
.box {
margin-left:0px;
}
Check it here http://jsfiddle.net/
I already found some threads with the same problem that I have, but they didn't help me. When ever I zoom in on 25%, my last navigation-button breaks on the next line.
This is my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="menu">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</nav>
</div>
</body>
</html>
body
{
background-color: #000000;
margin: 0;
}
li
{
float: left;
background-color: #FFFFFF;
list-style: none;
background-color: #00514C;
font-weight: bold;
font-family: "Calibri";
width: 160.8px;
text-align: center;
display: inline;
line-height: 30px;
border-right: 2px solid #FFFFFF;
}
li a
{
color: #FFFFFF;
text-decoration: none;
display: block;
line-height:
}
li:hover
{
background-color: #C0C0C0;
}
li:last-child
{
border-right: none;
}
ul
{
position: relative;
margin-left: -40px;
}
#menu
{
position: relative;
width: 975px;
height: 30px;
margin: 0 auto;
}
Can anybody help me?
Thanks a lot!
It looks like it is a rounding/ratio problem when you zoom in and out. ( 25% )
When you zoom in or out, you will encounter issues because of
rounding and text rendering. It is a good idea to make sure the
layout can survive a bit of stretching without breaking down.
Relative positioning is affected by issues mentioned in #1, and
therefore unreliable.
Look into using something to remove the properties that the various
browsers will apply. You could use a reset to give you something
more workable or try to normalize the values to make them more even
between browsers.
By Changing lines below in your CSS file (li, ul) will solve the problem in Firefox, Chrome, etc.
Change width: 135px and Add margin: 2px
li
{
float: left;
background-color: #FFFFFF;
list-style: none;
background-color: #00514C;
font-weight: bold;
font-family: "Calibri";
width: 135px;
margin: 2px;
text-align: center;
display: inline-block;
line-height: 30px;
border-right: 2px solid #FFFFFF;
}
Smaller in Chrome (ul width set to 822px in css)
ul
{
width: 822;
margin-left: -40px;
position: relative;
}
Try using divs with display: table and display: table-cell.
<div id="menu">
<nav>
<div class="box">
<div>Link 1</div>
<div>Link 2</div>
<div>Link 3</div>
<div>Link 4</div>
<div>Link 5</div>
<div>Link 6</div>
</div>
</nav>
</div>
body
{
background-color: #000000;
margin: 0;
}
.box div
{
display: table-cell;
background-color: #FFFFFF;
background-color: #00514C;
font-weight: bold;
font-family: "Calibri";
text-align: center;
line-height: 30px;
border-right: 2px solid #FFFFFF;
}
a
{
color: #FFFFFF;
text-decoration: none;
display: block;
line-height:
}
.box div:hover
{
background-color: #C0C0C0;
}
.box div:last-child
{
border-right: none;
}
.box
{
display: table;
width: 100%;
}
#menu
{
position: relative;
width: 975px;
height: 30px;
margin: 0 auto;
}
jsfiddle