I can't seem to figure out how to get my list of links to be fully centered. It seems shifted to the right to me. Sorry for the very simple question, I'm new to this.
http://jsfiddle.net/mzm7szqn/
ul{
text-align:center;
width:450px;
margin:0 auto;
font-family:arial;
list-style-type:none;
}
li{
font-family:osr;
display:inline;
padding: 5px;
}
<ul>
<li>Web Page</li>
<li>After Effects</li>
<li>Premiere</li>
<li>Ableton Live</li>
<li>Blender</li>
<li>Auto CAD</li>
</ul>
your <ul> has a padding of 20px; that it inherited. Try adding this
ul{padding: 0 !important;}
add padding: 0; to the ul style. so it would be:
ul{
text-align:center;
width:450px;
margin:0 auto;
font-family:arial;
padding: 0;
list-style-type:none;
}
Related
I was attempting to vertical align some text in a li element, but the only way I could do it was applying display:table-cell; and vertical-align:middle; to the li element.
When I do this, it causes the entire navbar to lose its horizontal center. I have done very much Googling and have not found a solution.
HTML:
<div class="h_logo"><img src="http://dummyimage.com/800x200/000/fff.jpg"></div>
<div class="h_nav">
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Web Hosting</li>
<li>Web Design</li>
<li>Consulting</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS:
/** All code is written in chronological form as with the HTML code.
* h. = header.element
* b. = body.element
* sl./sr. = sidebarleft or right.element
**/
.h_logo{
background-repeat:no-repeat;
width:800px;
height:200px;
margin:auto;
position:static;
}
.h_nav{
position:inherit;
margin-top:10px;
}
.h_nav li{
list-style-type:none;
display:table-cell;
vertical-align:middle;
width:150px;
height:35px;
background-color:black;
}
.h_nav a{
text-decoration:none;
color:#FFFFFF;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
}
JSFiddle
You could add this to your CSS:
nav ul {
display: table;
margin: 0 auto;
padding: 0;
}
doing this for the first time so please be gentle. :) I am aiming for navigation menu in the centre, horizontal, with image in the middle list item. Image will be much bigger as the bottom half is name of the my company and top of the picture might be touching the top. My first problem is that the li elements are only as big as the text, whitch doesnt serve the center-thing purpouse and the second one related that it stretches the whole menu when hoovered on. Please I'm looking for solution where the text is in the middle of li and img sits down on bottom. Thanks so much for help!
<div id="menu">
<ul>
<li><span>Link 1</span></li>
<li><span>Link 2</span></li>
<span><li style="text-algin:bottom;"><img src="Linbach_tuzka.png" height="175px" alt="Domu"></li></span>
<li><span>Link 4</span></li>
<li><span>Link 5</span></li>
</ul>
</div>
body {
width: auto;
background-image: url(blue4.jpg);
background-size: cover;
margin: 2px 0 0 0;
}
#menu {
height:210px;
line-height:36px;
margin:0 auto;
text-align:center;
width:800px;
padding:0;
}
#menu ul {
display: inline;
-webkit-padding-start: 0px;
-webkit-margin-before: 2x;
-webkit-margin-after: 0px;
margin:0;
font-size: 0;
}
#menu ul li {
text-algin:center;
display:inline;
font-family:Arial,sans-serif;
font-size:40px;
padding:0;
margin:0;
text-decoration:none;
background-image:url(../Pics/Buttons/Menu/Menu.gif);
min-width:100px !important;
}
#menu a {
text-decoration:none;
color:#000000;
margin:10px 0;
padding:0;
}
#menu a:hover {
font-weight:bolder;
}
span {
width:100%;
font-size:30px;
}
the only option is left is width to <a> tag : DEMO
I have removed the direct <span> from UL and have added class 'widthAuto' so that it will not affect your logo.
#menu a {
text-decoration:none;
color:#000000;
margin:10px 0;
padding:0;
min-width:100px !important; display:inline-block;
}
Note : Menu will stretch on hover if text exceed min-width.
I am trying to build a simple CSS only navigation bar for my site. This is it working fine in modern browsers:
And this is my CSS:
#nav{
width:496px;
height:45px;
float:right;
background-color:#bee199;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin-top:5px;
border:1px solid #a09f9f;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#nav ul{
list-style:none;
text-align:center;
}
#nav ul .last{
padding-right:0px;
border-right:none;
}
#nav ul li.navsep{
width:1px;
height:44px;
background-color:#a09f9f;
padding:0;
margin-right:10px;
}
#nav ul li{
width:auto;
height:44px;
display: -moz-inline-stack;
display:inline-block;
padding-right:10px;
margin-bottom:-16px;
}
#nav ul li a{
font-family:Helvetica, Arial, sans-serif;
font-size:20px;
font-weight:400;
text-decoration:none;
color:#434342;
}
HTML:
<div id="nav">
<ul>
<li>Principles</li>
<li class="navsep"><span></span></li>
<li>Our services</li>
<li class="navsep"><span></span></li>
<li>Recent work</li>
<li class="navsep"><span></span></li>
<li class="last">Contact</li>
</ul>
</div>
One of my problems is using negative margins, I really don't want to be using them. But every time I try to use conventional methods the text will not center vertically and it looks like this:
This also happens on older browsers.
Thanks for your time! If you need more information just ask! :)
Omit the <li class="navsep"> and use borders instead.
use lineheight on the li elements.
Instead of using negative margin use line-height, in your case #nav ul li {height: 44px; line-height: 44px;} this will vertical center your text
I can't seem to figure out how to get 6 list items (with spacing) to horizontally align evenly across the site. The width of the page is 1000px, this is what I have...
<ul id='mp_locations'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<style>
#mp_locations {
clear:both;
list-style:none;
padding:0;
margin:0;
width: 1000px;
}
#mp_locations li {
float:left;
width:180px;
list-style:none;
height:100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
padding:0;
margin:0;
margin-left:10px;
width:15%;
}
#mp_locations li:first-child {
margin-left:0;
}
</style>
The issue with this is that 15% is too small but 16% is too big. Since you can't do decimals (to the best of my knowledge) I can't set it to a set amount. So basically, how can I get 6 boxes to line up evenly across the page?
Hey now define with of your id #mp_locations li 15.83%
#mp_locations li {
width:15.83%;
}
live demo http://tinkerbin.com/kzx7nX9s
you can do decimals :) http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html
there are two width rules in #mp_locations li
you could change it to
#mp_locations li {
float:left;
width:156px;
list-style:none;
....
margin:0;
margin-left:10px;
And I advice you to change the margin too:
margin: 0px 5px;
dont repeat same style attribute un necessarily. you can get the desired output just by changing margin-left see below:
css
#mp_locations {
clear:left;
list-style-type:none;
padding:0;
margin:0;
width: 1000px;
background-color:red;
overflow:hidden;
}
#mp_locations li {
float:left;
height:100px;
border-radius:5px;
background-color: #F5F5F5;
margin-left:8px;
width:16%;
display:inline;
}
#mp_locations li:first-child {
margin-left:0;
}
html
<ul id='mp_locations'>
<li>d</li>
<li>f</li>
<li>d</li>
<li>ff</li>
<li>fff</li>
<li>ddfdfdfd</li>
</ul>
Working DEMO
Hey,
Is there a way to get browsers to ignore line breaks in the source?
<div id="navbar">
<div id="navbar-container">
<ul>
<li>HOME</li>
<li>TUTORIALS</li>
<li>BLOG</li>
<li>FORUMS</li>
<li>LINKS</li>
<li> </li>
</ul>
</div>
</div>
#navbar {
background:#FFF;
width:940px;
margin:auto;
border-radius: 10px 10px;
-webkit-box-shadow: 5px 5px 10px #888;
}
#navbar-container {
margin:auto;
}
#navbar-container ul {
list-style:none;
text-align:center;
display:block;
width:auto;
padding:0;
margin:0;
}
#navbar-container li{
list-style:none;
border-left:3px solid black;
display:inline-block;
font-family:"Arial", sans-serif;
font-size:2em;
padding:0 7px 0 10px;
margin:0;
white-space:nowrap;
}
#navbar-container li:hover{
color:#FFF;
background:#000;
border-left:3px solid black;
display:inline-block;
font-family:"Arial", sans-serif;
font-size:2em;
margin:0;
padding:0 7px 0 10px;
}
It's placing a small space between each LI, I've set it up so then line up horizontally,
i could just remove the line breaks in the source, but id prefer not to.
You can float them (either left or right), or you can comment-out the spaces:
<ul>
<li>...</li><!--
--><li>...</li>
</ul>
Or simply leave the tags open 'til the next line.
<ul>
<li>...</li
><li>...</li
><li>...</li>
</ul>
IE seems to do that as a hold-over from the days when list items did not have closing tags. A common way around that is to put the closing > on the next line, i.e.
<ul>
<li>HOME</li
><li>TUTORIALS</li
><li>BLOG</li
>etc...
All browsers should totally ignore whitespace. Is there a particular browser giving you trouble?
Try:
li { margin: 0; padding: 0 }
I was wondering the same thing and what worked for me was:
li { display: table-cell; }
All breaks are ignored and now my menu buttons are right next to each other.
You can see a live example here on my music site: http://www.yanike.tk
I used a CSS Sprite on my UL LI for my navigation menu (home, media,...).