I've spent an absurd amount of time on google and still cannot figure out how to center the buttons on my nav bar (I'm still new to css).
Here is what I have for the navbar (not included are my various failed attempts).
CSS:
#navigation
{
list-style-type: none;
background: #222222;
overflow: hidden;
width: 1150px;
margin: 0;
padding: 0;
display:inline-block;
margin-left: 0 auto;
margin-right: 0 auto;
}
#navigation li
{
border-right: solid 1px #ca0002;
height: 35px;
display: inline-block;
margin: 0 auto;
}
#navigation li a:link, #navigation li a:visited
{
text-decoration: none;
display: block;
height: 35px;
color: #fff;
line-height: 35px;
padding: 0 20px 0 20px;
border-right: solid 1px #990000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#navigation li a:hover
{
background: #990000;
color: #fff;
}
#navigation li.first
{
border-left: solid 1px #ca0002;
}
Without any html I took the liberty of creating the html and using your IDs.
Here is a working fiddle:
WORKING FIDDLE
In your navigation div I added
height: auto;
text-align:center;
Some unnecessary CSS was deleted as well.
This will make the navigation tabs center in the div.
Hope this helps!
Related
What do I do wrong? As I've understood, this code should make a black background behind the sideMenu-id, but it does not. Why?
CSS:
/* The side menu */
.bg_ #sidemenu {
background-color: black;
height: 20%;
}
.sideMenu li {
list-style-type: none;
float: left;
margin: 0 0 0 20px;
width: 20%;
font-size: 100%;
border: 1px solid black;
text-align: center;
letter-spacing: 5px;
border-radius: 5px;
color: black;
}
/* Menu buttons */
.btn_ a {
color: black;
margin: 5px 5px 5px 5px;
text-decoration: none;
display: block;
}
.hover_btn {
background-color: #CC4545;
}
This is my code: http://jsfiddle.net/RBTT8/183/
Two problems:
Your selector is .bg_ #sidemenu but it should be .bg_ .sideMenu (you use a period for a class, the # is for an ID. And it's case-sensitive.)
Since the list items are floated, the ul element collapses, so to expand it, add overflow:auto;
jsFiddle example
I am a bit stumped as to how I can center the text on the navigation bar as at the moment it is only going to the left. I have already tried center align but it still continues to stick to the side. If anyone could tell me what error I am making this would be greatly appreciated.
HTML:
<body>
<div id="wrap">
</div>
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
<div id="content">
</div>
</body>
CSS:
body {
margin: 0;
padding: 0;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
background-color:#425eb4;
}
*{
margin: 0 auto 0 auto;
}
#wrap {
height:150px;
background:url(images/header1.png) no-repeat center;
text-align:center;
background-color:#FFF;
}
#nav {
width: 100%;
float: left;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left;
text-align:center; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
text-align:center;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
text-align:center;
background-color: #fff;}
/* End navigation bar styling. */
#content {
padding: 0 50px 50px;
width:1000px;
height:800px;
background-color:#FFF;
}
You need to take the float:left off of both your #nav and li elements.
Then add display:inline-block; to both. Next add your text-align:center to the #nav.
#nav {
width: 100%;
display: inline-block;
text-align: center;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
margin-left: 0px; // looks like bootstrap is putting a left margin on your #nav you may want it off.
}
#nav li {
display: inline-block;
text-align:center;
}
Use this CSS:
Take the floats off, use display:inline-block to put the lis beside each other, and use text-align:center on the #nav. Is this what you're looking for?
body {
margin: 0;
padding: 0;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #425eb4;
}
* {
margin: 0 auto;
}
#wrap {
height: 150px;
background: url(images/header1.png) no-repeat center;
text-align: center;
background-color: #FFF;
}
#nav {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
display: inline-block;
text-align: center;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: 700;
text-align: center;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
text-align: center;
background-color: #fff;
}
/* End navigation bar styling. */
#content {
padding: 0 50px 50px;
width: 1000px;
height: 800px;
background-color: #FFF;
}
IMO adjust your CSS to be something generally like (I am omitting values specific to your code and just including generally necessary ones for your general goal):
#wrap {
width:100%;
}
#nav {
width:300px; //however wide your nav container needs
margin:auto; //this is what will center an elem, relative to its parent (in
//this case a 100% wide wrap; the 100% is relevant because it
//keeps things centered as window is resized.
}
All good input, I think this will help someone too,,,
I use something like this usually,
It's balanced / centered / and block so all is clickable
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
a {
display: inline-block;
width: 80px;
background-color: #dddddd;
text-align: center;
}
li {
width: 100px;
margin: auto;
display: inline;
}
p {
clear: both;
margin: 10px 5px;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<p>Notice we are all centered</p>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
I have a z-index issue on top-navigation with a menu and its sub-menu, i want menu to overlap sub-menu, i have set z-index of menu higher than sub-menu, but it is not working sub-menu is overlapping menu as default.
Please see and suggest any possible way to do it.
jsFiddle
HTML
<div id="login">
<ul>
<li id="overlap">Log In | Join
<ul class="tsm">
<li>Log In</li>
<li>Join</li>
</ul>
</li>
</ul>
</div>
CSS
#login {
margin: 0px auto;
width: 1000px;
height: 38px;
background: #343438;
}
#login ul {
float: right;
margin: 0px;
padding: 0px;
width: auto;
height: 38px;
}
#login ul li {
float: left;
width: auto;
height: 34px;
display: inline;
list-style-type: none;
}
#login ul a {
color: #FFF;
display: block;
width: auto;
height: 34px;
font: bold 16px/34px "Arial Narrow", Arial, sans-serif;
text-decoration: none;
text-align: center;
padding: 0px 15px;
text-shadow: 0px -1px #000;
}
#login .tsm {
padding: 20px;
background-color: #F2F2F4;
width: 230px;
height: auto;
text-align: left;
border: 4px solid #777;
position: absolute;
visibility: hidden;
top: 32px;
right: 0px;
z-index: 100;
}
#login .tsm li a {
width: 230px;
height: 30px;
margin-bottom: 1px;
text-align: left;
padding: 0px;
text-decoration: none;
color: #000;
text-shadow: 0px 1px #fff;
font: 15px/30px Arial, sans-serif;
border-bottom: 1px solid #DDDDDF;
}
#login ul #overlap {
position: relative;
border: 2px solid #900;
z-index: 1000;
}
#login ul li:hover .tsm {
visibility: visible;
}
#login ul ul li {
border: none;
}
The problem stems from the fact that you're trying to position the parent above its child, which causes problems - if the parent moves up a level, so do its children. Instead of z-indexing the parent list, you need to z-index the login link (a tag):
http://jsfiddle.net/SaNJA/
The code is rough, but it should get you started.
Make sure you add a background colour to the link, otherwise you'll still be able to see through it.
My website is on the local server right now however this will be a simple fix for those of you who know whats it's called.
I'm trying to get these lists (bordered in white) to float the the far left in the available space of the footer(bordered by black).
This is my CSS
#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px;/*border: 1px solid #0C0;*/}
#footer a { text-decoration: underline; color: #c7bd89; }
#footer a:hover { text-decoration: none; color: #fff; }
#footer h6 { background: url(img/FOOTER-HR-BG.jpg) left center repeat-x; text-align: left;}
#footer h6 span { background: #8e2023; display: inline-block; padding-right: 5px; }
.footer-widgets { width: 960px; height: 503px; margin: 0px auto; padding: 0px; border: 1px solid #000;}
.footer-widgets li { width:280px; height: auto; list-style-image: none; list-style-position: outside; list-style-type: none; float: left; color: #fff; padding: 13px; margin-right: 10px; /*border: 1px solid #fff;*/ }
.footer-widgets li ul {color: red;}
.footer-widgets li ul li {color: #fff; margin-left: -50px; margin-top: -15px;}
.footer-widgets li p { font-size: 1em; line-height: 18px; text-align: left; /*border: 1px solid red;*/ }
.footer-widgets li h2 { font-size: 1.4em; font-weight: normal; letter-spacing: 1px; line-height: 30px; text-align: left;}
.footer-archives { position: relative; top: -210px;}
.footer-widgets li.last { position: relative; top: -210px;}
h6 { font-family:Verdana, Geneva, sans-serif; font-size: 1.2em; font-weight: normal; letter-spacing: 1px; margin-top: 15px; margin-bottom: 10px; color: #fff;}
.footer-copyright { position: absolute; width: 900px; left: 50%; margin-left: -450px; top: 400px; height: 100px; font-family: Tahoma, Geneva, sans-serif; line-height: 22px; font-size: 1em; color: #fff; text-align: center; text-transform: uppercase; }
.footer-copyright a { color: #fff !important; text-decoration: none !important; }
.footer-copyright a:hover { color: #c7bd89; text-decoration: underline !important; }
.copyright { margin-top: 27px; text-transform: uppercase; display: block; color: #cc9798;}
.copyright a { color: #cc9798 !important; text-decoration: underline; }
.footer-one, .footer-two, .footer-three, .footer-four { border: 1px solid #fff; float: left;}
I have the containing footer and within the 900px x 503px container I wish that all lists float left (and under each other if it's small enough). So "Archives" would flow under "Follow Us" and if I were to put a search bar under "Testimonials" it would fit.
What can I do with my CSS to have this happen?
Why no just create a column for each side (left, center, right) and simulate it that way, well atleast I think this is what you are trying to achieve
Fiddle http://jsfiddle.net/eEwdk/
Theres another workaround that would consist in making each li element absolute positioned and calculating it's position (yeah I know it's sound redundant)
As I understand it, you want each of the li elements underneath one another. To do that you want to float the ul element to the left, not each individual li element.
Here you can see the code: http://jsfiddle.net/LQSK3/1/
I can't get display: inline; working there for every li element.
Also got the problem width the line.png image, as it's height is the same as the font height, I want it to has 35px height with margin left and right set to 5px.
Where is the problem?
You need to update your style sheet. Please add this new style:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li { display: inline;float:left; }
#menu ul {
position: absolute;
font-family: Century Gothic, sans-serif;
font-size: 14px;
list-style-type: none;
padding: 0;
margin: 9px 0 0 123px;
width: 649px;
height: 39px;
color: #FFF;
float:left;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url('http://i.imgur.com/rzNj0.png') top right no-repeat;
width: 65px;
height: 18px;
float: left;
margin: 0px 5px;
}
You need to add float: left; to menu div,ul,li and a . Also should set width and height and margin of the a tag.
Here is a working sample : http://jsfiddle.net/YjeBs/
Hope this helps :)
EDIT:
If you want your line to extend from top to bottom of the menu div you can change your styles to:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li {
float: left;
height: 35px;
display:inline;
}
#menu ul {
color: #FFFFFF;
float: left;
font-family: Century Gothic,sans-serif;
font-size: 14px;
height: 35px;
list-style-type: none;
margin: 0 0 0 123px;
padding: 0;
position: absolute;
width: 649px;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url("http://i.imgur.com/rzNj0.png") no-repeat scroll right top transparent;
float: left;
height: 29px;
margin: 0 5px;
padding-top: 8px;
width: 65px;
}
Hope this is you want :)
just change li { diplay: inline; } with li { display: inline; } it works.