For some strange reason, my text-align: center; isn't working. It's weird 'cause it's the most basic stuff to do for both HTML and developer, so I'm kind of embarrassed... I must doing something terrible wrong and don't see my mistake. The text-align option isn't even showing in Firebug.
Could anyone help me out here?
HTML:
<div id="main-menu">
<ul id="main-menu-links" class="links clearfix">
<li class="menu-286 first active">
<a class="active" title="" href="/dashboard">Dashboard</a>
</li>
<li class="menu-194">
Organisation
</li>
</ul>
</div>
CSS: (I have tried to place text-align: center in each selector, but with no result...)
div#main-menu {
background-color: #c4d82d;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
div#main-menu ul {
padding: 0px;
}
div#main-menu li{
border-right: 1px solid #86a43f;
width: 186px;
}
div#main-menu li.last{
border: none;
}
div#main-menu a, div#main-menu a.active {
background: none;
text-shadow: none;
}
div#main-menu a:hover {
background: none;
font-style: italic;
}
It's working as intended, when I wrap the <ul>...</ul> elements in a <div id="main-menu">:
http://jsfiddle.net/6bBK5/
Make sure that you use the correct selectors. IDs are case-sensitive, spaces in the selector are significant.
<div>
<span>
<ul>
<li>Here is the centered Title!</li>
</ul>
</span>
</div>
CSS
ul {text-align: center;}
li {display:inline; padding:0 10px 0 0}
So, is working:
div#main-menu li{
border-right: 1px solid #86a43f;
width: 186px;
text-align:center;
}
Related
Im trying to have a layout like this, with a full width gray border but then below the active item have a different border color:
enter image description here
But its not working. Do you know why?
https://jsfiddle.net/Ldye5qg8/
<div class="container">
<div class="nav">
<a class="active" href="">Item 1</a>
Item 2
</div>
</div>
Css
a{text-decoration:none;}
.nav{
border-bottom: 3px solid gray;
}
.nav a{
padding: 15px;
}
.nav .active{
border-color:yellow;
padding:20px;
}
Try this one. Hope it will work
EDIT: I used 5px bottom color in .nav. So, the whole .nav will use 5px bottom color. Then I used 5px in .nav a.active bottom color. The .nav a.active bottom color will be shown but on different lines. Hence I used margin-bottom: -5px to overlap .nav color.
.nav {
list-style-type: none;
padding-left: 0;
margin: 0;
border-bottom: 5px solid #ccc;
}
.nav a {
display: inline-block;
padding: 0 15px 0 15px;
margin-left: -4px;
text-decoration:none;
}
.nav a.active {
border-bottom: 5px solid yellow;
margin-bottom: -5px
}
<div class="container">
<div class="nav">
<a class="active" href="">Item 1</a>
Item 2
</div>
</div>
.nav .active {
border-bottom: 3px solid yellow;
padding: 20px 20px 1px 20px;
}
is not the same element, you need to bring for him border-style also to bottom.
Just change border color to border-bottom like this
.active {
border-bottom: 3px solid yellow;
}
I'm trying to hide part of my menu. When I call display:none The entire menu disappears. I have id's to separate them so I don't get why this happens. Here's the code:
HTML:
<ul id="menu">
<li>Categories 1
<ul id="cat1">
<li>temp1</li>
<li>temp2</li>
<li>temp3</li>
</ul>
</li>
</ul>
CSS:
#menu {
background-color: #0000FF;
height: 20px;
padding: 15px 0 10px;
margin-bottom: 20px;
font: 12px 'DroidSansBold', Tahoma,sans-serif;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 3px 2px 3px #000;
border-radius: 5px;
text-align: center;
}
#menu li{
display: inline-block;
}
#menu li a {
color: #fff;
text-decoration: none;
margin: 0 120px;
}
#cat1 li{
display: block;
padding: 10px;
}
#cat1 li a{
background-color: #0000FF;
padding: 10px;
border-radius: 5px;
}
Somewhat working demo: http://jsfiddle.net/ZfN7t/
When you're dealing with ul inside ul, it's usually easier to style if you give them different classes:
<ul id="menu">
<li class="menu-item">Categories 1
<ul id="cat1">
<li class="cat1-item">temp1</li>
<li class="cat1-item">temp2</li>
<li class="cat1-item">temp3</li>
</ul>
</li>
</ul>
Hide the temp1, temp2, temp3 like this:
.menu-item #cat1{
display:none;
}
To display on hover:
.menu-item:hover #cat1{
display:block;
}
I am pasting my code bellow, Please help me ASAP ( It was suppose to change the color of selected tab to white, but somehow it does not do that) I do not know what the problem is now, please help me!!!!
CSS code:
#navigation {
margin-top: 20px;
width: 235px;
display:block;
list-style:none;
z-index:3;
}
#navigation a{
color: #444;
display: block;
background: #fff;
background: rgba(255,255,200,0.5);
line-height: 50px;
padding: 0px 20px;
text-transform: uppercase;
margin-bottom: 6px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
font-size: 18px;
}
#navigation a:hover {
background: #ddd;
}
HTML CODE:
<div id="header">
<ul id="navigation">
<li><a id="link-home" href="index.html">Home</a></li>
<li><a id="link-portfolio" href="portfolio.html">Portfolio</a></li>
<li><a id="link-contact" href="contact.html">Contact</a></li>
</ul>
</div>
Try this:
<style>
#navigation li.selected a {
background:#fff;
}
</style>
<li class="selected"><a id="link-home" href="index.html">Home</a></li>
I have a Div bar with a white background in which my breadcrumb lives.
Here you can see a screenshot:
How can i align the text vertically?
Here is my CSS:
/* Breadcrumb */
#breadcrumb {
position: relative;
background: white;
padding: 4px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
behavior: url(/scripts/PIE.htc);
font-size: .9em;
color: #526472;
}
#breadcrumb ul {
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumb li {
float: left;
padding-left: 5px;
}
#breadcrumb a {
padding-right: 10px;
background: url(../images/div_breadcrumb.gif) no-repeat right center;
color: #526472;
margin-right: 5px;
}
And my HTML:
<div id="breadcrumb" class="clearfix">
<ul>
<li style="white-space: nowrap;">
<a style="white-space: nowrap;" href="">Home</a>
</li>
<li style="white-space: nowrap;">
Visual collaboration solutions
</li>
</ul>
<div id="shareThis" class="fl_right"> Share: </div>
</div>
Due to incomplete code, it's a bit hard to tell, but I'm guessing that you're either missing some markup, or that there are other styles messing with your breadcrumbs.
The following works just fine to display items in a horizontal row (your styles, my HTML).
<html>
<head>
<style>
#breadcrumb { position: relative; background: white; padding: 4px; border-radius:2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; behavior: url(/scripts/PIE.htc); font-size: .9em; color: #526472;}
#breadcrumb ul { margin: 0; padding: 0; list-style: none; }
#breadcrumb li { float: left; padding-left: 25px;}
#breadcrumb a { padding-right: 10px; background: url(../images/div_breadcrumb.gif) no-repeat right center; color: #526472; margin-right: 5px;}
</style>
</head>
<body>
<div id="breadcrumb" class="clearfix">
<ul>
<li>Home Visual collaboration solutions</li>
<li>La</li>
<li>Ti</li>
<li>Da</li>
</ul>
</div>
</body>
</html>
If you are using ul and li tags properly, you might try using Firebug or the Chrome developer tools to detect whether or not other styles are being applied.
Try:
li{display: inline}
You could also use
li{display:inline-block}
That way your li elements wont lose their block properties
Here's the example :
http://jsfiddle.net/bFe35/1/
Try to edit your CSS file, by adding vertical-align:middle; to your #breadcrumb ID, like this:
#breadcrumb {
position: relative;
background: white;
padding: 4px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
behavior: url(/scripts/PIE.htc);
font-size: .9em;
color: #526472;
vertical-align:middle;
}
I'm trying to convert this PSD to HTML with CSS.
And this is what I've got so far (using CSS3).
But I've no idea how to put a divider between the menu items. Any ideas?
EDIT: Seems example images aren't showing. So here they are.
The PSD File
http://postimage.org/image/2qywn3nj8/
What I've got so far
http://postimage.org/image/1ylhjsv2c/
#nav
{
padding:0;
margin:0;
height: 35px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-image: -moz-linear-gradient(top, #ffffff, #eaecec);
-moz-box-shadow: 0 0 1px #888;
}
#nav ul
{
margin-top: 0px;
margin-left: 0;
Font-Family: Arial;
font-size: 10pt;
list-style: none;
padding-top: 8px;
color: #000000;
}
#nav ul li
{
display: inline;
padding-left: 30px;
}
You could try adding an empty li and style it as your separator. I think that would be ugly codewise, but something like this works:
CSS:
#nav
{
padding:0;
margin:0;
height: 35px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-image: -moz-linear-gradient(top, #ffffff, #eaecec);
-moz-box-shadow: 0 0 1px #888;
}
#nav ul
{
margin-top: 0px;
margin-left: 0;
Font-Family: Arial;
font-size: 10pt;
list-style: none;
padding-top: 8px;
color: #000000;
}
#nav ul li
{
display: inline;
padding-left: 15px;
}
#nav ul li.sep{
background-image: -moz-linear-gradient(top, #eaecec, #555555);
padding-left:1px;
margin-left: 15px;
}
HTML:
<div id="nav">
<ul>
<li>test</li>
<li class="sep"></li>
<li>test2</li>
<li class="sep"></li>
<li>test3</li>
<li class="sep"></li>
<li>test</li>
<li class="sep"></li>
<li>test2</li>
<li class="sep"></li>
<li>test3</li>
</ul>
</div>
Maybe put a 1px wide div in between each and give it some type of edged border like groove, ridge, inset, outset? Or you could use an image...but that seems silly for something so little.
You could use something like:
#nav ul li {
display: inline;
padding-left: 30px;
border-left: 1px solid #THE-WHITE-COLOR;
border-right: 1px solid #THE-GREY-COLOR;
}
and then just use border-left: none; and border-right: none; as some extra markup on the first and last #navl ul li's
Might get tricky with the space you got there at the top and bottom of the lines.. but you know.. you can do iit.
Your menus should like this :
HTML:
<div id="nav">
<ul>
<li>Rates & Plans</li>
<li>Phones</li>
<li>Rates</li>
<li>Booking</li>
<li>Coverage</li>
<li>FAQ</li>
<li>Support</li>
</ul>
</div>
CSS:
#nav{
// Background
}
#nav ul
padding:0;margin:0 0 0 30px;
}
#nav li{
background:url(separator.png) no-repeat 100% 0%;
padding: 10px 15px;
margin: 0 2px;
}
The easiest option would be to have an empty list element after each nav item and then style it accordingly, however this isn't very semantic.
You could also try using a CSS selector such as :after ( http://www.w3schools.com/cssref/sel_after.asp )