I want to reduce how thick the list-group-item are, whilst keeping the title text fitting.
<ul class="list-group">
Title
</ul>
.list-group-item {
height: 10px;
}
This successfully reduces the thickness, but the Title text remains too big. I suspect height is the wrong property to use?
The size is controlled by this class
.list-group-item {
position: relative;
display: block;
padding: 0px 15px; /* adjust here */
margin-bottom: -1px;
border: 1px solid #ddd;
line-height: 1em /* set to text height */
}
Codepen Demo
li tags have a default padding. You must to reset it to achieve it. The text have a line-height defined relative to his size. You must to define the line-height as equal as height.
li {
padding:0;
height: 10px;
line-height: 10px;
}
don't do that instead use padding like this..
ul a {
padding:10px; // give padding
height:auto;
}
Related
On this site: https://new.fbhsfoundation.com/give-now/ I have figured out how to add a custom style for a single nav but I want to make the background surround the text (I.e. more padding left and right of the yellow color) but I can't figure it out.
This is the code I tried and then applied the custom CSS to the menu item but it only did the background color not the padding:
.yellow li.menu-item a { padding 5px; }
Find and remove the padding property for .menu li and add a padding style for the .yellow class.
.menu li{
min-width: 36px;
margin: 0 12px;
/*padding: 0*/
}
.yellow{
background-color: #ffe400;
padding: 0 20px;
}
or better still, use the id of the list element(li) to add the padding style.
li#menu-item-46{
padding: 0 10px;
}
Use 12 pixels of padding instead of the 12px margin.
.menu li {
min-width: 36px;
margin: 0px;
padding: 0px 12px;
}
I believe it's simple, but since I'm new to this I don't have a clue of how to do it. I just want to change the background color of a li tag - just for fashioning, nothing else.
This is my HTML:
<ul id="abas">
<li>PROGRAM</li>
<li>PROC</li>
<li>DDNAME</li>
</ul>
Sorry for being a noob but, this is the css part right?
#abas li a
{
text-decoration:none;
background-color:3B31FF;
color:#FFFFFF;
float:left;
margin-right:20px;
border-top-left-radius:23px;
border-top-right-radius:0px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
}
I noticed that here>>> "background-color:3B31FF;" is where I change the
color of the background, but doing this, changes all the background colors of course
... I only need 1 "li" tab to change and any html tutorial would be nice too.
Css code:
#abas li {
background-color: ... ;
}
fill in color code where dots are, like this:
background-color:#000000; //color black
Single tag:
Css code:
li.selected {
background-color: ... ;
}
Html code:
<ul>
<li></li>
<li class="selected"></li>
<li></li>
</ul>
First any css color code needs to have # followed by a 6 digit value(or 3 if they are repeating i.e #FF33FF as #F3F) and to solve your second part do this
CSS
#abas li {
background-color: #xxxxxx ;
//your other style goes here
}
#abas li.current {
background-color: #xxxxxx ;
//your other style goes here
}
HTML
<ul id="abas">
<li class="current">PROGRAM</li>
<li>PROC</li>
<li>DDNAME</li>
</ul>
To change the background color simply style it:
<li style="background-color:blue;">Program</li>
You will likely also want to set some height and width parameters.
This will make the first item have a red background:
<li style="background: red">PROGRAM</li>
If you want to for example add green to a <li> tag you can do the following:
<li style="background: green;">PROGRAM</li>
But this isn't really best practice because normally you want to keep your HTML and CSS separated. So in CSS you would do it like this:
li { background: green; }
or use hex color codes:
li { background: #00ff00; }
If you only want to change one specific <li> tag you can add a class to it:
<li class="precious">
and then apply a css rule to this class:
.precious { background: #00ff00; }
and only this <li> tag with the .precious class is going to get styled.
Live Example: http://jsfiddle.net/pulleasy/WEdmt/
You can also make your life a whole lot easier with the border-radius element. for what you are doing it would be:
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
float: left;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
}
This will give you the same result. Also for example sake, you will need to add a height and a width to get some sort of result. so if that were the case you would need to do this:
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
float: left;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
height: 100px;
width: 100px;
}
This will give you the result that I think you were looking for. If you are looking to use pixels instead of percents for a fluid layout, the you will need to use this. (Note this is only for the width, height and positioning).
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
position: absolute;
height: 10%;
width: 10%; /*Replace these percentiles with your width and height*/
}
I will assume that you know how to make the
An alternative to using hex code is using RGB / RGBA:
background-color:rgb(255,0,0);
background-color:rgba(255,0,0,0.5);
This gives you even more control over your color by adding alpha and transparency support, but unfortunately, it's not supported by some browsers (IE, namely, although I don't know about IE 10).
I have an <h2> title into a fixed with <div> (238px). When this page is rendered, the browser manage line breaks into the title to make the text fit the width (238px).
But the width property of the h2 element is still 238px, no matters where the line breaks are.
I want to set a border-bottom only under the text, and not under the full width of the h2 element, and I don't know how to achieve this using CSS.
You can see what I mean here : http://jsfiddle.net/np3rJ/2/
Thanks
I think this is what you need:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
h2 span {
position: relative;
padding-bottom: 5px;
}
h2 span::after{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
content: ""
}
Working demo in jsFiddle
I used the technique described in this answer: Advanced CSS challenge: underline only the final line of text with CSS
I introduced a span into the H2 in order not to change the display attribute of it, but you could just as easily use the same technique with a display: inline on your H2. This method would allow the control of the actual line though rather than setting display: inline if needed
This works on Chrome.
h2 {
width: fit-content;
}
If you are willing to use display: table-cell, and pseudo-elements, you can have a pretty good solution (with some minor limitations).
The HTML does not change:
<div class="dossier_titre">
<h2>Horizon 2020, nouvelles opportunités</h2>
</div>
and you can apply the following CSS:
.zone_33 {
width: 238px;
padding: 0px;
margin: 0px;
}
.zone_33 .dossier_titre {
margin: 0px 0px 20px 0px;
}
.zone_33 h2 {
color: #616263;
font-size: 150%;
font-weight: lighter;
padding: 0px 0px 12px 0px;
background: none;
border-bottom: 1px solid grey;
display: table-cell;
text-transform: uppercase;
}
.zone_33 .dossier_titre:after {
content: "";
display: table-cell;
width: 100%;
}
For the <h2> element, set display: table-cell, and add a pseudo-element after .dossier_titre (the containing block for the header/title element). The pseudo-element is also a table-cell and has a width of 100% (this is the key).
Also, since h2 is no longer a block element, add your margins to .dossier_titre to maintain the visual spacing in our layout.
How This Works
I am creating a two-cell table with the second cell (the pseudo-element) having a width of 100%. This triggers the browser to calculate the shrink-to-fit width for the first cell (h2) that contains the title text. The first cell's width is thus the minimal needed to display the text. The bottom border is as long as the longest text line in the text block within the table-cell.
Limitations
table-cell is not supported in IE7 without a hack, but the work-around is fairly well known and can be found if needed.
If the title had many short words, you might get the line breaking in unexpected places. You would need to insert   to keep specific words together as needed.
Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/
Maybe display: inline-block; Or display: inline; is what you need?
Why not try:
text-decoration:underline
?
EDIT
Just make a span around "OPPORTUNITÉS" with the underline.
<h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
text-decoration:underline
}
Can try "text-underline-position" property instead of table-cell and border. Make it simple!
text-decoration: underline;
text-underline-position: under;
All you can do is put your h2 element text into span like this:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
and in css remove border-bottom from .zone_33 h2 {} and put it like this:
.zone_33 h2 span{ border-bottom: 1px solid grey;}
by this border-bottom will come under full text.
Try this, (I think it will help you)
.heading {
position: relative;
color: $gray-light;
font-weight: 700;
bottom: 5px;
padding-bottom: 5px;
display:inline-block;
}
.heading::after {
position: absolute;
display:inline-block;
border: 1px solid $brand-primary !important;
bottom: -1px;
content: "";
height: 2px;
left: 0;
width: 100%;
}
You could put a border-bottom and change the width of your h2 so that the border length matches your h2 length. Adjust the width to the width of your h2, taking into consideration it's font-size. Then add a padding-bottom to your h2 and set it to your liking.
<h2>Cats</h2>
h2{
border-bottom: 5px solid black;
font-size: 16px;
padding-bottom: 5px;
width: 64px;
}
I have the code:
<div>C</div><div>A</div>
div{
border: 4px solid Brown;
display: inline;
}
http://jsfiddle.net/TKQzT/
So I end up with two rectangles with letters in them.
I was wanting them to display as squares instead. So currently they're rectangles taller than they are wide.
Does anyone know how to style them so they'll come out as perfect squares?
You'll have to set the display to inline-block, so that you can specify an explicit width and height:
div {
display: inline-block;
width: 1.25em;
height: 1.25em;
line-height: 1.25em;
}
Here's the fiddle: http://jsfiddle.net/TKQzT/13/
As letters are higher than wider, you'll have to set the with/height of the box manually.
It's not going to be exact without giving them an equal width and height, but try:
div {
border: 4px solid Brown;
display: inline;
padding:2px 5px;
margin:1px
}
and if you're using inline just so you can line up the div's side by side then I recommend using float and having the div's not inline. This way you can give them a explicit width and height.
div {
border: 4px solid Brown;
padding:2px 5px;
margin:1px;
float:left
}
See demo here: http://jsbin.com/ojumay/edit#html,live
The better way i know to do it is to fix height and width, while using inline-block display to be able to do it.
Try this :
div{
display: inline-block;
height: 1em;
width: 1em;
border: 4px solid Brown;
line-height: 1em;
text-align:center
}
How would I go about adding a dynamic ".........." to a restaurant menu in CSS? Like in printed ones they have the whole
"our food is made of blah blah blah.............$24.99."
How would you do that in CSS? Or is this even possible?
The best solution is this:
<ul>
<li><p class="food">Chinese Food</p><p class="price">$5.99</p></li>
</ul>
then CSS to match (untested, but tweakable to get the effect)
li {
width: 300px;
height: 20px;
border-bottom: 1px dotted black;
background-color: white;
}
.food, .price {
height: 22px; //key: just a bit taller than the LI
background-color: white;
}
.food {
float: left;
}
.price {
float: right;
}
So it basically fixes the rectangle of the LI and draws a border on the bottom, then the price and food name cover it up dynamically with their width. YMMV with browsers, but perhaps a negative margin-bottom will get the li border-bottom obscured for sure by the P elements.
It's possible but not well supported. You want the :after psuedo-selector and the content rule. See here: http://www.quirksmode.org/css/beforeafter.html Note that IE gets a big fat F for implementation.
You can do it in javascript. Or by creative use of the border-type 'dotted'. Or maybe a repeating background, as Brooks suggests, which would work by giving your price and descriptions spans that you apply a background color to to cover the repeating background.
Update What that might look like:
<ul class="menu">
<li><span class="name">Yummy stuff</span> <span class="price">$400</span></li>
</ul>
With CSS like:
.menu { list-style-type:none;margin: 0 0 0; padding: 0 10px 0; }
.menu li {
display:block;
overflow:hidden; //contain the float
background-image: url(dots.gif);
background-repeat:repeat-x;
}
.menu .name { background-color:#ffffff; }
.menu .price { float:right; clear:none; background-color:#ffffff; }
Alex's answer has one great drawback — multiline text in the .food hides bottom line.
Also there is a good old answer: http://www.search-this.com/2007/11/26/css-a-recipe-for-success/ (demo)
Here is live demo of a little modified old solution (try to resize): http://cssdesk.com/BqR96
And modified css:
.restaurant_menu__list {
min-width: 320px; /* For mobile devices */
max-width: 500px; /* Custom max width for readbility */
}
.restaurant_menu__row {
border-bottom: 2px dotted #B5ABAB; /* Our dotted line, we can use border-image instead */
position: relative;
float: left;
line-height: 1.2em;
margin: -.9em 0 0 0;
width: 100%;
text-align: left;
}
.restaurant_menu__meal span
, .restaurant_menu__price
{
background-color: #FFF; /* For .restaurant_menu__row background rewriting */
}
.restaurant_menu__meal {
padding-right: 3em; /* Custom number for space between text and right side of .restaurant_menu__row; must be greater than .restaurant_menu__price max-width to avoid overlapping */
}
.restaurant_menu__meal span {
margin:0;
position:relative;
top: 1.6em;
padding-right:5px; /* Custom number for space between text and dotted line */
}
.restaurant_menu__price {
padding:1px 0 1px 5px;
position:relative;
top:.4em;
left:1px;/* ie6 rounding error*/
float:right;
}
And modified html:
<ul class="restaurant_menu__list">
<li class="restaurant_menu__row">
<!-- Inside div we need inline element, to handle multiline meals -->
<div class="restaurant_menu__meal"><span>Crab Cakes with corn, roasted red pepper, and ginger vinaigrette</span></div>
<span class="restaurant_menu__price">€25</span>
</li>
<li class="restaurant_menu__row">
<div class="restaurant_menu__meal"><span>French Onion Soup</span></div>
<span class="restaurant_menu__price">€32</span>
</li>
</ul>
That's really graphics, not text, even if it's normally done as ASCII-art with dots. Thus, a repeating background image might do the trick appropriately?