this is a html/css nav bar how can i center it in the center of my page i tryed putting center tags in the html and float:center; under the ul but it wont work ill post my html then my css
HTML
<body>
<ul>
<li> </li>
</ul>
</body>
CSS
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
padding-left:200px;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
demo here
Add text-align: center to ul and replace float: left with display: inline-block
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
text-align:center; <<add this
}
li
{
display:inline-block; << add this instead of float
}
The other parts of your css remains unchanged!
So if You add more li to your website they'll all be in the center next to each other.
<li> </li>
<li> </li>
To remove the whitespace:
<li> </li><li> </li>
Don't push enter between each line. :)
...or there's another solution is to add: margin-left:-4px:
li
{
display:inline-block;
margin-left: -4px;
}
You'll need to add:
margin: 0 auto;
to the css for the ul and a elements, and remove the float: left; from the li.
See this jsfiddle here
Since you give your a a width: 120px then why cannot give your ul the same property and using margin:
width: 120px;
margin: 0 auto;
Demo: http://jsfiddle.net/NYE3y/
Put the <ul> inside a <div> and center it using align="center"
like this:
<div align="center">
<ul>
<li>hhhh</li>
<li>hhhhh</li>
</ul>
</div>
Use an wrapper for UL and apply an width to wrapper
<div class="menu-wrap">
<ul>
<li>Menu A</li>
</ul>
</div>
CSS:
.menu-wrap {
margin:0 auto;
width:500px;
}
you can still use float for your li.
Remember to clear floats always.
Related
I am trying to center my nav bar. I checked my sites but nothing works
and I'm completely stumped as to why it won't center, here is my navigation bar HTML that I want to center:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='#'>PORTFOLIO</a>
<ul>
<li><a href='http://effectsforshare.blogspot.com/p/trailer.html'>TRAILER</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/motion-graphics.html'>MOTION GRAPHICS</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/trapcode-particular.html'>TRAPCODE PARTICULAR</a></li>
</ul>
</li>
<li><a href='http://effectsforshare.blogspot.com/'>TEMPLATES</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/my-blog.html'>MY BLOG</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/contact-me.html'>CONTACT ME</a></li>
</ul>
</div>
and here is the CSS
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
I would give you a link to the page but it's being done in Dreamweaver and is not up yet. The logobar.jpg is the logo for the webpage. I love how it looks, but it needs to be centered and not be cut off or taken to the next line when I shrink my screensize.
I tried each of float: right, float: left, and float: none on almost all of the classes; text-align: center on each class on the html side; I have tried align=center on each class; display: inline, inline-block on ul and li classes.
Thank you for your help!
On your .menu class, you do have text-align:center set. We can certainly use that to center the child nodes.
So within your .menu li css property, add display:inline-block and remove the floats. This will center your list items.
See the fiddle: http://jsfiddle.net/RGREA/
<style>
div.nav{margin: 3px auto;}
</style>
So I've been desperately trying out every method I can find online for centering my nav bar links.
However whatever I do, they seem to either line horizontally (like I want) but to the left of the page (not what I want), or they line vertically (not what I want) but to the center of the page (what I want).
It seems no matter what margin, float, display settings I use in the CSS it never renders the navbar links in a horizontal line, in the center of the page.
My code is:
HTML:
<body>
<div class="maincontent">
<div class="navbar">
<div>
<h1>Tom Love</h1>
<ul>
<li> Home </li>
<li> About </li>
<li> Portfolio </li>
<li> Contact </li>
</ul>
</div>
</div>
</div>
</body>
CSS:
h1 {font-family:'Roboto Slab',sans-serif;
font-size:250%;
font-weight:300;
color:black;
text-align:center;
line-height:32px;
}
h1 span {font-size:60%;
font-family:'Roboto Slab',sans-serif;
}
.navbar {
clear:both;
margin:0 auto;
overflow:hidden;
padding:0;
text-align:center;
width:100%;
}
.navbar div {
float:center;
position:relative;
}
.navbar ul {
list-style-type: none;
text-align:center;
padding:10px;
margin:auto;
}
.navbar ul li {
padding:10px;
float:center;
}
.navbar ul li a {
text-decoration:none;
color:black;
margin:10px;
display:inline;
width:80px;
height:30px;
}
.navbar ul li a:hover {
text-decoration:none;
color:white;
background:black;
}
Apologies for any glaring mistakes in the code, it's my first attempt at building something outside of codeacademy and YouTube tuts.
Thanks in advance :)
Just add
display: inline;
to your .navbar ul li
Remove float:center (it does not exist)
Add display: inline or display: inline-block to .navbar ul li
If you want everything centered then place margin: 0 auto; on .maincontent and give it a width.
The differences between display values are listed here on the MDN.
It could be worth considering a CSS Reset or Normalise. (Do some research on the two options)
Have an example!
CSS
.maincontent {
margin: 0 auto;
width: 800px;
}
h1 {font-family:'Roboto Slab',sans-serif;
font-size:250%;
font-weight:300;
color:black;
text-align:center;
line-height:32px;
}
.navbar ul {
list-style-type: none;
text-align:center;
padding:10px;
}
.navbar ul li {
padding:10px;
display: inline;
}
.navbar ul li a {
text-decoration:none;
color:black;
margin:10px;
}
.navbar ul li a:hover {
text-decoration:none;
color:white;
background:black;
}
Does anyone know how to vertical center a-href elements in list-items while keeping them responsive and the whole list element clickable?
I've tried various things: vertical-align, display:table/table-cell etcetera, googled a lot and searched stack overflow, but none of the solutions seem to work (or I'm just implementing them wrong) or cover all the issues (center, clickable, responsive). The list item's height is reacting to the height of the browser, because of the display div (which is going to display a photo and I don't want to lose details because of the two menu items that cover it).
JSFiddle: http://jsfiddle.net/K6V58/1/
HTML:
<div id="wrapper">
<nav id="menu">
<ul>
<li>test 1</li>
<li>test 2</li>
</ul>
</nav>
<article id="display">boe</article>
<nav id="gallery">
<ul>
<li><img src="images/gallery/klein/square.jpg" class="imageList"></li>
<li><img src="images/gallery/klein/square.jpg" class="imageList"></li>
</ul>
</nav>
</div>
CSS:
/*---------------------------- MAIN MENU ----------------------------*/
#wrapper{
height:100%;
width:100%;
margin:0;
padding:0;
}
nav#menu, nav#menu ul, nav#menu ul li{
margin:0;
padding:0;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:10pt;
color:grey;
background-color:#000000;
}
nav#menu{
position:absolute;
top:0;
width:100%;
height:5%;
text-align:right;
}
nav#menu ul{
padding: 0 10px;
height:100%;
}
nav#menu ul li{
height:100%;
display: inline-block;
margin: 0 10px;
list-style: none;
}
nav#menu ul li a{
text-decoration:none;
color:grey;
height:100%;
display: block;
}
/*---------------------------- IMAGE MENU ----------------------------*/
nav#gallery, nav#gallery ul, nav#gallery ul li, img.imageList{
margin:0;
padding:0;
background-color:#000000;
}
nav#gallery{
position:absolute;
bottom:0;
width:100%;
height:5%;
}
nav#gallery ul li{
display: inline-block;
list-style: none;
height:100%;
float:left;
}
.imageList{
height:100%;
vertical-align:top;
}
/*---------------------------- DISPLAY PHOTO ----------------------------*/
article#display{
position:absolute;
top:5%;
width:100%;
height:90%;
background-image:url(../images/gallery/groot/2.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:center;
margin:0;
padding:0;
}
You can try this
I have added span inside a
HTML
<li><span>test 1</span></li>
<li><span>test 2</span></li>
And updated this CSS
nav#menu ul li a{
text-decoration:none;
color:grey;
height:100%;
display: table;
}
nav#menu ul li a span {
display: table-cell;
vertical-align: middle
}
I'm having a very hard time trying to figure out how to align my bottom border for my text to the bottom border of my header. Can anybody tell me how to do this? It'd be greatly appreciated. I've tried numerous things.
http://jsfiddle.net/Zevoxa/YeJc6/
HTML
<div id="header">
<img id="logo" src="/img/logo.png"/>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS
/*-- HEADER --*/
#header {
top:0px;
width:100%;
padding-top:20px;
padding-bottom:0px;
background-color:#2C2E31;
border-bottom:#242426 solid 2px;
text-align:center;
}
img#logo {
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
}
#nav ul li {
list-style-type:none;
display:inline;
margin-bottom:0px;
padding-bottom:0px;
padding-right:20px;
font-size:20px;
}
#nav ul li a {
color:#FAFAFA;
text-decoration:none;
border-bottom:#FAFAFA solid 2px;
}
/*-- CONTENT --*/
body {
margin:0px;
padding:0px;
background-color:#2A2B2D;
}
You can set the margin-bottom to 0px for the ul
#header ul {
margin-bottom:0px;
}
http://jsfiddle.net/YeJc6/6/
maybe set #nav to the bottom of #header simply with:
#nav
{
position:absolute;
bottom:0px;
height:20px; //whatever height/size of text is needed
}
This tells it to align #nav, which is in #header, to go to the bottom of #header.
In your case you just need to remove the bottom margin on your ul.
#nav ul {
margin-bottom: 0;
}
how do i make the center like the links are all off to the left i want them to be center top of the web page... any help?? i have done this before but i dont rember how
CSS:
body {
background: #B0FFF5
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left; /*supposed to be there */
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#3B5998;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#ffffff;
color:#3B5998;
}
HTML:
<body>
<ul>
<li>Home</li>
<li>Fb Fame</li>
<li>Donate</li>
<li>Facebook</li>
</ul>
</body>
If you want the buttons to line up, no matter what the window size is, set a fixed width and margin: 0 auto:
ul
{
width: 512px;
margin:0 auto;
}
Here is a demo.
Alternatively remove the whitespace between the list items (or use another technique), set their display to inline-block and give the container a text-align: center:
ul
{
margin:0;
text-align: center;
}
li
{
display: inline-block;
}
Here is a demo.
ul
{
list-style-type:none;
margin:0;
padding:0;
width: 400px;
margin: 0 auto;
}
Hope this helps.
ul
{
width:600px;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:0;
}
i remberd how to do it sorry folks