How to set width and text-align for button with CSS - html

Question

There are my problems:
The width's buttons are not the same as (1 & 2) in my image below.
Shorten the distance between Yearly, Monthly and Weekly as (3)
Please tell me how to correct this.
Demo
HTML:
<!-- Make a menu with Yearly, Monthly and Weekly -->
<ul id="out_per_chart">
<li>
<div class="yearly">
<div class="title">2014</div>
<div class="container1">
<ul class="sub-menu1">
<li class="year"><a class="_link" href="/Lists/ChartIndex.aspx?week=1&month=1&year=2014">Yearly</a>
</li>
<li>
<div class="monthly">
<div class="title">Monthly</div>
<div class="container2">
<ul class="sub-menu2"></ul>
</div>
</div>
</li>
<li>
<div class="weekly">
<div class="title">Weekly</div>
<div class="container3">
<ul class="sub-menu3"></ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
CSS:
#out_per_chart li {
list-style-type: none;
}
#out_per_chart .title {
border: 2px solid #2676ac;
padding: 10px 30px;
width: 40px;
color: #2676ac !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 10px;
/* added */
}
#out_per_chart .title:hover {
border: 2px solid #259add;
cursor: default !important;
background: #259add;
color: #FFF !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none !important;
}
.container1 {
position: absolute;
padding-left: -10px;
padding-top: -5px;
display: none;
}
.container2 {
position: absolute;
margin-top: -15px;
margin-left: 50px;
}
.container3 {
position: absolute;
margin-top: -15px;
margin-left: 50px;
}
._link {
text-decoration: none;
border: 2px solid #2676ac;
padding: 7px 20px 7px 20px;
width: 30px;
color: #2676ac !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
._link:hover {
text-decoration: underline;
cursor: pointer;
border: 2px solid #259add;
background: #259add;
color: #FFF !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#out_per_chart li {
width: 300px;
height: 30px;
margin-bottom: 25px;
}
#out_per_chart li.week_num, #out_per_chart li.month_num {
margin-left: 60px;
margin-top: -25px;
margin-bottom: 25px;
}
#out_per_chart li.year {
margin: 0 0 5px 0;
}

Answer 1

Your HTML markup is inconsistent, which won't make things easier. The menu for the first list item goes:
<li> > <a> then the child list elements have:
<li> > <div> > <div> > <ul>
The simplest way to achieve a consistent nested list/menu is something like this:
<ul id="main-list">
<li>Top level list item 1</a>
<ul>
<li>Second level list
<ul>
<li>Third level list item</li>
</ul>
</li>
</ul>
</li>
<li>Top level list item 2</a>
<li>Top level list item 3</a>
</ul>
Each menu is a child of the parent list item. Here's a Fiddle example of it in action.
It also addresses the width problem you're having.
By setting the <a> tags in the Fiddle example as block level, you can manipulate the width. By default, <a> tags are an inline element, and do not respond to width and height properties unless display:block is assigned.
If you absolutely must have an anchor link in some list items and not in others, then you'd need to set the widths on the parent element, in this case, the <li>

Answer 2

Structure Your HTML
http://jsfiddle.net/ug8rU/
Add your JS
http://jsfiddle.net/AywLf/
Add your CSS
http://jsfiddle.net/9v7tC/
here is the full code:
HTML
<ul class="record">
<li class="main-year">
2014
<ul class="main-menu">
<li class="cat-menu yearly">
Yearly
</li>
<li class="cat-menu monthly">
Monthly
<ul class="menu month-menu">
<li class="">Month 1</li>
<li class="">Month 2</li>
<li class="">Month 3</li>
</ul>
</li>
<li class="cat-menu weekly">
Weekly
<ul class="menu week-menu">
<li class="">Week 1</li>
<li class="">Week 2</li>
<li class="">Week 3</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.record{
width:300px;
}
.main-year{
width:300px;
}
.menu{
position:relative;
left:60px;
top:0px;
}
.menu{
top:-25px;
z-index:100;
}
.record li{
list-style:none;
height:25px;
margin:1px 3px;
}
.record a{
text-decoration:none;
border:2px solid #2676ac;
color: #2676ac !important;
width:90px;
padding:2px;
display:block;
text-align:center;
border-radius:5px;
}
JS
$(document).ready(function () {
$('.main-menu').hide();
$('.menu').hide();
$(".main-year").hover(function () {
$(this).children('.main-menu').show();
},
function () {
$(this).children('.main-menu').hide();
});
$(".monthly").hover(function () {
$(this).children('.month-menu').show();
},
function () {
$(this).children('.month-menu').hide();
});
$(".weekly").hover(function () {
$(this).children('.week-menu').show();
},
function () {
$(this).children('.week-menu').hide();
});
});

Answer 3

// ok test you this css code
#out_per_chart li {
list-style-type: none;
}
#out_per_chart .title {
border: 2px solid #2676AC;
border-radius: 5px;
color: #2676AC !important;
height: 40px;
line-height: 40px;
text-align: center;
width: 100px;
}
#out_per_chart .title:hover,
#out_per_chart li a:hover {
border: 2px solid #259add;
cursor: default !important;
background: #259add;
color: #FFF !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none !important;
}
.sub-menu1{
padding:0;
margin:0;
}
.sub-menu1 li > a{
border: 2px solid #2676AC;
border-radius: 5px;
color: #2676AC !important;
height: 40px;
line-height: 40px;
text-align: center;
width: 100px;
display:block;
}
.container1 {
position: absolute;
padding-left: -10px;
padding-top: -5px;
display: none;
top:60px;
}
.container2 {
left: 45px;
position: absolute;
top: 43px;
}
.container3 {
position: absolute;
}
._link {
text-decoration: none;
border: 2px solid #2676ac;
color: #2676ac !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
._link:hover {
text-decoration: underline;
cursor: pointer;
border: 2px solid #259add;
background: #259add;
color: #FFF !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#out_per_chart li.week_num, #out_per_chart li.month_num {
margin-left: 60px;
}

Answer 4

Give a class for each box and have .class{width:"70px";margin-top:"3px";} in your css.
you can give a percent instead of giving it in px

Answer 5

.title
{
width: 80px;
text-align: center;
}
and the problem solved. If text doesn't align center between top and bottom you can
padding-top: 10px;
padding-bottom: 10px;
now you can see your text in center.
Sorry for bad english.