So I've center aligned the text "Jonathon Smith Photography". Directly below it in a different DIV, I've center aligned an inline list (my navbar) containing "Portfolio Contact Bio". However they appear to be centered at different points? The "Jon smith photography" text has no other properties to it. The list items in the navbar (not the navbar div itself) have a background color as well as padding above/below/left/right of it. However, when I disable the color/padding properties, the texts still appear to be centered at different points. Now I'm guessing the list's centerpoint that is off since it's a little more complex than the plain text. How do I get them to align properly?
HTML:
<div id="title">Johnathon Smith Photography</div>
<div id="navbar">
<ul>
<li>Portfolio</li>
<li>Contact</li>
<li>Bio</li>
</ul>
</div>
CSS:
#title {
text-align: center;
}
#navbar ul li {
background-color: #00225A;
display: inline;
list-style-type: none;
color: #fff;
padding-top: 0.2em;
padding-right: 1em;
padding-bottom: 0.2em;
padding-left: 1em;
}
#navbar {
text-align: center;
}
Add this:
#navbar ul {
padding-left: 0;
}
The ul has a padding in the left by default.
Related
I'm trying to start with a simple website and I want to know how I can align my navigation bar. My navigation bar is in the form of a list. I'm not sure why the list's position seems a bit out of place when implementing it. So far, I've double-checked for closed tags and any modifications in styling my list. I expected the output of the page to have an even gap at its borders, but the list is instead crooked by a few pixels.
#mainnav {
margin: 0 auto;
padding: 0;
text-align: center;
}
#mainnav ul {
display: inline-block;
list-style: none;
}
#mainnav ul li {
float: left;
margin: 0px 20px 0px 0px;
/* spacing in-between the boxes */
padding: 10px 20px 10px 20px;
/* spacing inside the boxes */
}
<nav>
<div id="mainnav">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>VPNHOLE</li>
<li>PROJECTS</li>
<li>MISC.</li>
</ul>
</div>
</nav>
Edit: Attached is a short video showing the change in the bar's position with and without setting padding to zero (from marked answer). It is somewhat difficult for me to visually represent the position of the navigation bar (the gray background probably gets pushed off the screen when aligning). https://youtu.be/J5XwdJn1pDA
If I correctly understood the task - it should help
ul{
padding: 0;
}
I have a list that displays numbers with decimals. I want them all aligned in the center but they have different decimal lengths so it's kinda causing some UI issues.
Example its current displaying something like
14.88
18.123
20.452
10.22
3.1
Its current HTML & CSS is simply
.my-list {
text-align: center
}
<ul class="my-list">
<li>14.88</li>
</ul>
Can anyone show me how to update my CSS so it displays something like this
14.88
18.123
20.452
etc
In short I want the list to be aligned on the center, but I want the list items to be aligned on the left.
Assuming you want the list itself centered with the items left aligned:
Option 1: Using the list as a block but a fixed width
ul {
padding: 10px;
list-style-type: none;
background-color:#ccc;
width: 25%;
/*Centers the list*/
margin: 0 auto;
}
/*Not required in my example, but you may need it*/
li
{
text-align:left;
}
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
Option 2: Wrap the list in a div and set the list to inline-block
div {
/*Centers this list*/
text-align: center
}
ul {
padding: 10px;
list-style-type: none;
background-color: #ccc;
display: inline-block;
/*Left align contents of list*/
text-align: left;
}
<div>
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</div>
See this article for more centering options: https://css-tricks.com/centering-css-complete-guide/
You are using text-align:center.
Try the same with:
.my-list {
text-align: left
}
This should do it.
You can try list-style css property for the same, to remove the bullets
.myList{
text-align:left;
list-style:none;
}
.mylist{
list-style:none;
width:100px;
}
.mylist li{
text-align:center;
}
<!DOCTYPE html>
<html>
<body>
<ul class="mylist">
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</body>
</html>
I'm trying to have a vertical navigation list on a site but my text isn't centered within the div. Multiple posts on here have suggested to make the list display:table and the items display:table-cell
this solves the problem but I have to change the display from block, which forces each list item to be a new line ( what I want ).
How can I solve this while keeping everything nice, centered, and on a new line?
should note: It may be firefox but I'm even using a css reset. The issue acts the same with or without the reset. puu .sh /kcrhs/bb728e4711 .png
#nav {
background-color: #801918;
font-family: arial, sans-serif;
Font-weight: bold;
font-size: 25px;
color: white;
display: block;
margin: 0 auto;
}
#nav ul li {
transition: .5s;
padding-bottom: 45px;
margin: auto;
text-align: center;
}
#nav ul li:hover {
color: yellow;
}
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Resume</li>
</ul>
</div>
All I had to do was adjust my padding so that it was even between padding-top and padding-bottom.
Simple horizontal nav bar for artist portfolio website. I am in the process of changing it from a jpg based site to actually coded, and need to match the nav bar on the following page:
http://cynthia-shaffer.com/animal.html
Notice "Natural Elements", "Animal Photos", and "Henna Tattoos" the text is stacked (2 lines as opposed to 1). I want to replicate this in my ul, but can't seem to figure it out.
my code
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Natural Elements</li>
<li>Animal Photos</li>
<li>Henna Tattoos</li>
<li>Murals</li>
<li>Supplementary</li>
<li>Non-Profit</li>
</ul>
</div>
CSS:
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#nav ul li { display: inline; }
#nav ul li a
{
text-decoration: none;
font-family:"Lithos";
font-size:12px;
color:c0944d;
padding: .3em 1em;
}
So the question is how to get the word "elements" to appear below "natural", without breaking the integrity of the list.
thanks in advance!!
Apply display:inline-block for the <a> tags and set the maximum desired width of a menu item using the max-width property, this will cause the text to automatically wrap when it exceeds the specified max-length
#nav ul li a {
text-decoration: none;
font-family:"Lithos";
font-size:12px;
color:c0944d;
padding: .3em 1em;
display:inline-block;
max-width:50px;
}
side note: it's better to apply display:inline-block while changing display from block, for aligning items horizontally - if you apply display:inline like you've applied to the <li> , the element will not accept width and height properties...
JSFiddle
I'm trying to create a navigation menu for my website, with the links aligned horizontally near the top of the page, and I want each link to have a short description underneath. When a user clicks on either the main link text or the description underneath, it should take them to the right page. Additionally, each menu item should have a triangle-shaped icon as the bullet. This is a picture of what I'm trying to achieve.
I can make a list align horizontally when it's just one line. But it breaks down when I try to add more.
<nav id = "header-navigation">
<ul>
<li>
<a href="/">
Home
<span class = "subnavigation">Foo!</span>
</a>
</li>
<li>
<a href="/contact">
Contact
<span class = "subnavigation">Bar</span>
</li>
</ul>
</nav><!-- header-navigation -->
And in the CSS:
nav#header-navigation {
margin-top: 160px;
display: block;
}
nav#header-navigation ul li:before {
content: url("../images/main-navigation-bullet.png");
vertical-align: top;
}
nav#header-navigation ul li {
display: inline;
text-transform: uppercase;
min-height: 22px;
}
nav#header-navigation ul li span.subnavigation {
display: block;
color: #999;
font-size: 90%;
margin-top: -10px;
margin-left: 15px;
}
This is what I get.
I've also tried putting a float: left on nav#header-navigation ul li, but that causes the list items to float all over the place, like to the top of the screen, outside of the containing div where they belong.
Another problem I've found is that Chrome doesn't display the vertical-align: top; attribute correctly, so the subnavigation text displays in the wrong place on that browser.
Is there a way to get this to work across browsers, or is this still the sort of thing that's best done using images?
It appears the only changes you need are:
nav#header-navigation ul li{
display: inline-block;
}
nav#header-navigation ul li a{
display: inline-block;
vertical-align: top;
}
And get rid of
nav#header-navigation ul li span.subnavigation {
margin-top: -10px;
margin-left: 15px;
}
After making these changes, it appears correctly in Firefox and Chromium on Linux Mint 15.