Basically I'm making some buttons but even through I put the width as auto and set padding, the list still extends 100% of the page. I don't want to set the width in pixels, I just want to set the padding either side.
Can anyone please explain where I have gone wrong:
http://jsfiddle.net/spadez/KYdnJ/5/
#nav li {
color: #333;
line-height: 28px;
background-color: #F8F8F8;
border: 1px solid #D3D3D3;
padding: 0px 9px 0px 9px;
font-family: arial, sans-serif;
font-size: 11px;
width: auto;
}
List items are similar to block-level elements in that their initial width value is equal to auto so by default they will span the width of their containing block if they aren't given a fixed size. You can either float or change the display value to inline-block; so that their width "shrinks to fit" its content, or you can just give the list-items a fixed width.
http://jsfiddle.net/KYdnJ/8/
You are missing display: inline-block on the list elements. By default they are rendered as block elements, which means they take up 100% of the width of their container.
If I got you right, this is what you want - display: table; on your #nav li css block.
http://jsfiddle.net/KYdnJ/13/
my 2 cents from my earlier comment about margin instead of padding:
http://jsfiddle.net/GCyrillus/KYdnJ/9/
* {
list-style: none;
}
#nav li {
color: #333;
line-height: 28px;
background-color: #F8F8F8;
border: 1px solid #D3D3D3;
margin: 0px 9px 0px 9px;
font-family: arial, sans-serif;
font-size: 11px;
width: auto;
}
#label {
}
#strong {
font-weight: bold;
}
Related
I'm trying to add some styling in <p-calendar> tag of primeng 6.1.1. I want a blue circle on the month item on hover.
I'm expecting this:
But instead, I'm getting this:
Why it is oval and not perfectly round. I'm using border-radius: 50% !important.
Here is my datepicker.scss
.ui-monthpicker-month {
border-radius: 50% !important;
text-decoration: none;
margin-top: 10px;
color: #73767b;
font-family: 'Muli', sans-serif;
padding: 0px 20px 0 20px;
}
.ui-monthpicker-month:hover {
background-color: #1474A4;
color: white;
}
Please correct me.
That is because the element is not square. Check with chrome debugger what is the width and height and make sure that both match.
My guess is that if you change padding: 0px 20px 0 20px; to padding: 20px 20px 20px 20px; it will be square.
Try to specify in ui.monthpicker-month equal height and width then change border-radius: 100%
padding: 0px 20px 0 20px;
Try by removing padding, or if you want that padding then keep same padding for all 4 sides
Please try this one
width: 50px;
height: 50px;
I'm terrible at styling but after making these changes in css:
.ui-monthpicker-month {
border-radius: 100% !important;
text-decoration: none;
margin-top: 10px;
color: #73767b;
font-family: 'Muli', sans-serif;
height: 50px !important;
width: 50px !important;
padding: 20px 20px 20px 20px;
}
I'm getting this:
but the month name is still somewhat pushed towards top, how to make this in exact mid position?
Try to remove margin-top: 10px; to margin-top: 0;
I have this CSS class:
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
I want to keep the same border width even when the number changes, from 10 to 9.
Right now, the border expands when the number changes.
Here's a JFiddle of what I mean.
I've already tried changing the padding attribute but I can't make it work.
Try this. Add display:inline-block and then line-height to vertically align the numbers. By setting this the box will expand. adjust the height & width as per your need. If so, do not forget to adjust the line-height relative to height of the box.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
line-height:36px; /*vertcally center the numbers*/
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
display:inline-block; /* Added */
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>
You can just explicitly set the width. I suggest a unit of mesure that's relative to the font size (namely ems)
Edit: it seems all you were missing was display:inline-block. You can't set the width of an inline element. Adding it will probably get you most of the way there.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
/*width: 36px;
height: 36px;*/
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
display: inline-block;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>
Check out these properties:
line-height:20px; /*this will center your numbers inside the border*/
width: 20px; /*set the same as line-height and height in order to give a square shaped border*/
height: 20px; /*set the same as line-height and width in order to give a square shaped border*/
display: inline-block;
line-height, width and height will shape your box. While the new display property will help to align the elements in a "one after the other" fashion. :)
I am just getting back into coding and I would like to know what is the best method for adding heigh to my btn.
Here is the code -
Padding method
.nav-main li a {
display: block;
padding: 70px 10px 70px 10px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
Line-height method
.nav-main li a {
display: block;
padding: 0 10px 0 10px;
line-height: 150px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
I like to use line-height because it positions the baseline correctly to make the text appear in the middle of the element (whereas with padding it may be off-centre one way or the other based on the font)
Of course, this relies on you using a pixel value for line-height (as you are doing in your question) - using a numeric value like 1.5 may produce different results depending on the font.
I personally use padding as it gives me more control across browsers, as line height can vary on which font you are using, along with what fonts are installed/not installed on the clients' browser.
.link {
text-decoration: none;
color: aqua;
border: 2px solid aqua;
margin: 30px auto;
display: block;
width: 160px;
height: 40px;
line-height: 35px;
text-align: center;
position: relative;
overflow: hidden;
}
.link::before {
content: attr(data-text);
position: absolute;
width: 100%;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 0.5s;
}
You will show the difference between the padding and line height
when you use pseudo element (before and aftere) =>
with line height the pseudo element take the same height of his parent
with padding the pseudo element do not take the height of his parent
I have a menu with nested ULs. Is there a CSS-only way to have the vertical border stay the height of the tallest set of menu items? Keep in mind, this menu is dynamic so both the width and height can change.
http://jsfiddle.net/simply_simpy/Kmyjr/
You could remove the float:left rule and add in a display:table-cell rule.
jsFiddle example.
CSS:
#menu-secondary_menu > li {
border-left: 1px solid #7d7d7d;
display: table-cell;
font-size: 9px;
line-height: 16px;
text-transform: uppercase;
color: #7d7d7d;
padding: 0 10px 0;
margin: 0 10px 0;
}
I have a container that I am calling #profile-grid and I want it to be 330px wide. It contains an image that is 330px wide and an inline list below the image that is 330px wide with a 1px border all around. I want the list and image to be exactly the same width. In IE it lines up perfect, but in Chrome it is 2px too short. What am I doing wrong? http://jsfiddle.net/ZPQUP/13/
The problem is, as your title suggested, the box model.
Your best bet is to just explicitly set the box model, and then use a polyfill to make it work for older browsers. Paul Irish describes the problem and solution here: http://paulirish.com/2012/box-sizing-border-box-ftw/
I've shown what this looks like in an updated fiddle here: http://jsfiddle.net/mstauffer/ZPQUP/14/
Essentially, the different box models differ on whether borders and paddings are included in or added externally to the width.
Your div#listed is 330px wide plus 1 pixel either side for the border. That's how the 'standard' box model works. Reduce the width by that 1 pixel each side (i.e. 298px) and everything will line up...
... in the good browsers. In older versions of IE, you'll see a problem. Use a valid DOCTYPE and that will be resolved.
DEMO:
HTML:
<div id="profile-grid">
<img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/428132_268919676513976_100001878373747_678116_241912084_n.jpg"/>
<ul id="listed">
<li class="item"> Profile </li>
<li class="item"> About </li>
<li class="item"> Photos </li>
<li class="item"> Albumlist </li>
</ul>
</div>
CSS:
#profile-grid {
height: 302px;
width: 330px;
}
#profile-grid img {
display: block;
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#listed {
height: 50px;
border: 1px solid #ddd;
overflow: hidden;
}
li.item {
margin: 0px;
display: inline;
float: left;
height: 50px;
border-left: 1px solid #ddd;
display: inline;
}
#listed li a {
display: block;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px;
color: #123454;
line-height: 50px;
padding: 0px 15px 0;
text-align: center;
text-decoration: none;
vertical-align: baseline;
}
#listed li a:hover{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px;
color: white;
background-color: #123454;
text-align: center;
text-decoration: none;
}
NOTES:
<ul> is a block element. whatever the width of the parent, it grows with it. sort of an automatic 100%. give the parent 330px, it also goes 330px.
as long as block elements don't have a specified width, the 100% width of it will include it's borders. so if you have a parent of 330px, the block element (in this case the <ul>) will be 298px wide + 1px left border + 1px right border.
on the other hand, specifying width for it will exclude borders in the count, thus the overflow.
giving an image display:block and width:100% also does the same thing PLUS it preserves the image ratio (and not squishing it in any way)
To avoid this issue, it is ideal to not mix width and padding or border on the same element.
In your case, if you simply remove the width: 330px from .listed and add it to .listed ul instead, you should be fine:
#listed {
display: block;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 50px;
overflow: hidden;
border: 1px solid #ddd;
}
#listed ul {
margin: 0px 0px 0px -1px;
padding: 0px 0px 0px 0px;
overflow: hidden;
width: 330px;
}