I've been having trouble centereing a navigation bar on blogger. I seems like a very easy thing to do normally but this time its troublesome.
Take a look at the website: Center Navigation
I've tried text-align, margin:0 auto; etc etc. Nothings seems to work!
If someone could help me out that would be great, cheers
Current code:
.nav{
position: relative;
margin: auto;
list-style-type: none;
text-transform: uppercase;
text-align: center;
border-top: 1px solid #aaaaaa;
list-style:none;
text-align:center;
}
li {
display:inline-block;
}
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
Both text-align:center and margin:0 auto can logically only work if the element to be centered has a non-default width, since that is otherwise auto, which for a block element is 100%. An element that fills up its entire parent cannot be centered.
Give ul.nav a fixed width and it will center.
To use text-align:center you will need to restrict the ul as well, for example by also making it display:inline-block. See this sample.
Remove float: left; to .tabs .widget li, .tabs .widget li
Try This:
.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
}
Instead of:
.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
float: left;
}
add text-align:center; to the parent div
Related
I'm having weird problems centering a div within another div. I was trying to make a nav bar, here is the html:
<body>
<div class="nav">
<div class="navbar">
<ul>
<li>Home</li>
<li>Our Story</li>
<li>Gallery</li>
<li>Our Future</li>
<li>Join us</li>
<li>Contact</li>
</ul>
</div>
</div>
And the corresponding css:
.nav{
width:100%;
}
.navbar {
width:75%;
height:50px;
margin: 0 auto;
background-color:#E64888;
position:fixed;
}
so this didn't work in any of my browsers-chrome,firefox,ie...The bar is just sitting on the very left side. I have also tried the "margin-left:auto;margin-right:auto" method, but still didn't work. This is really annoying, cuz I cant figure what went wrong. Thanks in advance.
If you want the primary nav ul to be centered, you need to set it's parent (in this case html and body) to have width. Otherwise, you have to handle the dimensions and the layout (display) type on the lis and the list-style-type on the ul li elements (so you don't see the dots).
There's also a padding on the ul (which is what spaces the lis to the right when it's a normal list) that you have to deal with, or it will appear to far to the right (and "uncentered").
body, html {
width: 100%;
margin: 0;
padding: 0;
}
.nav {
width: 100%;
}
.navbar ul {
width: 75%;
height: 50px;
margin: 0 auto;
padding: 0;
background-color: #E64888;
list-style-type: none;
text-align: center;
}
.navbar ul li {
display: inline;
padding: 0;
margin: 0;
}
http://jsfiddle.net/97B52/
Try: (As far as I understood your question):
.nav li {list-style: none; display: inline-block; }
Working Fiddle
So my html is this:
<div id="background">
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
and my CSS is this:
#background {
min-widh: 960px;
}
#navigation {
min-width: 960px;
}
#navigation ul {
min-width: 960px;
}
#navigation ul li {
display: inline;
width: 100px;
height: 50px;
background-color: red;
}
Now, this does create an inline bar except no matter how much I change the width and height of
#navigation ul li
the background color (red) just stays strictly around the letters and nothing else. It seems as if the width and heights of the actual li's are not changing no matter what number I change it to. Any idea why it is doing this?
Use display:inline-block instead or display:inline.
#navigation ul li {
display: inline-block;
}
jsFiddle here
Alternatively, you can also float the elements for a similar effect:
#navigation ul li {
float:left;
}
jsFiddle here
Aside from both of the above solutions, if you wanted to use display:inline, you could just add padding as opposed to trying to set a height/width.
#navigation ul li {
display:inline;
padding:20px;
}
jsFiddle here
Trying to put menu text right in the middle. No luck so far, and people here proved to be very helpful. :) text align center usually helps with most of the questions that came up here. Didn't help me though. What am i doing wrong?
<header>
<div id="navmenu">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
</div>
</header>
#navmenu {
margin-left:auto;
margin-right:auto;
height:60px;
width:836px;
}
#navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#navmenu li {
display: inline-block;
margin-left:1px;
background-color:#3D3D3D;
width:49%;
height:40px;
color:#FFF
font-size: 15px;
font-weight: bold;
text-align: center;
vertical-align: middle;
text-decoration: none;
}
If the text will always be on a single line, you can vertically align the text by making the line-height the same height as the container.
Add line-height: 40px to your li:
#navmenu li {
...
line-height: 40px;
}
Did you try by giving table-cell (instead of inline-block) for display property for #navmenu li ?
I believe that will work.
I quickly grabbed this snippet out of one of my css files.
This was used to create a top right corner nav bar.
ul {
position: absolute;
top: 20px;
right: 35px;
}
ul li {
display: inline;
text-transform: lowercase;
text-align: right;
padding-left: 10px;
}
Hope that helps
If you want to center the whole menu container, use position:relative, and than apply the margin:auto property. If you need to center the individual links, i hope giving width and text-align center will surely work, as it is a block. If not, you can always use padding-left and padding-right to achieve that. But the width of the menu items will be scaled according to it's content. One more thing, try giving pixels instead of percentage and check. Hope this helps you.
I know this is pretty simple, but I've been fussing with this for hours now.. In my header, I want my logo and my nav to be on the same line... basically, I have this HTML:
<div class="menu">
<div class="ct-header-line"></div>
<img class="logo" src="images/clinictechlogo.png">
<ul class="nav">
<!--common features, coded? or static?-->
<li class="active">Home</li>
<li>Appointments</li>
<li>Prescriptions</li>
<li>Patient Records</li>
<li>Bills</li>
<!--special features, coded.....-->
<li>Charts</li>
<li>something</li>
</ul>
</div>
And here's the some of the CSS for the header part:
.logo {
padding: 20px 10px 10px 10px;
display: inline;
}
.menu {
background: #4F97BD url(images/headerbg.jpg) repeat;
}
.nav {
list-style:none;
margin:0;
}
.nav li {
display: inline;
}
The result is that the logo appears on one line, and the ul nav appears on the next...
You need to give the <ul> display: inline-block. If the logo's height is fixed, you might also want to give the <ul> a suitable line-height so that the options appear vertically aligned with regards to the logo.
Try adding to the logo:
.logo {
float: left;
width: 20%; //Or whatever the width is
}
This should make the wrap up next to it. If it doesnt you may need to add somethign similar to the
.nav {
float: left;
width: 70%;
}
Check this one: Inline Logo and Nav
just float both the .logo and .nav to left and have clear fix at the bottom.
.logo {
padding: 20px 10px 10px 10px;
display: inline;
float:left;
}
.menu {
background: #4F97BD url(images/headerbg.jpg) repeat;
}
.nav {
padding: 20px 10px 10px 10px;
list-style:none;
margin:0;
float:left;
}
.nav li {
display: inline;
}
.clear{
clear:both;
}
To make them align correctly(vertically) apply the padding to nav same to what you were using on the image..
hope this helps
Merx..
Try this...
.logo {
margin:0;
padding:0;
display:inline;
}
Take a look http://jsfiddle.net/vZZDJ/
Good Luck...)
I'm trying to center this bottom nav on a test site:
http://heroicdreams.com/kktest/
The ul li uses float:left; which is what I think is making it stay stuck to the left. I'm trying to figure out how to get it to be centered.
To get the links displayed horizontally I needed to float them left, but now I can't get the whole nav to be centered. Is there a way?
often using:
.divStyle {
text-align: center;
}
ul.styleName {
margin: 0 auto;
text-align: left;
}
will do the trick.
Applying an "auto" margin to the left and right of the ul like this will cause it to center itself in the div whenever the div has centered text. This is how many websites center the div that serves as the main content of their page.
Here is how I solved it, and is for dynamically generated menus also.
Assume this is the dynamically generated menu:
<div id="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
and this is the CSS:
.menu {
width:300px;
text-align: center; /*Set a width and text-align on the main div*/
}
.menu ul{
margin:0;
padding:0;
display:inline-block;
list-style: none; /*Set display to inline-block to the ul*/
}
.menu ul li {
float: left;
margin-right: 1.3em; /*this is the usual*/
padding: 0;
}
Now, for the list to be centered you need to add an empty paragraph to clear the float. You can do it manually if the menu is static or using jQuery like this:
$(document).ready(function() {
$("<p class='clear'></p>").insertAfter('.menu-header ul li:last-child');
})
and the CSS of the .clear paragraph will be:
p.clear{
clear:both;
margin:0;
padding:0;
height: 0;
width: 0;
}
and that's it!
Add style="text-align: center;" to the parent div of the ul.
Add style=" display:inline-table;" to the ul.
Either CSS:
margin: 0px auto;
or
/*on the nav's parent*/
text-align: center;
/*on the nav*/
text-align: left;
In order for margin:0 auto to work, you need to set a width on your ul and remove the display:inline:
#footerLinks ul {
list-style:none;
margin:0 auto;
padding:0;
width:400px;
}
Hmm, I think the KISS rule applies here:
ul { text-align: center; }
ul li { display: inline-block; }