I have been working with bootstrap for quite sometime now , i just came across a odd behavior when using inline-block instead of float , before i describe my entire problem , let me say that i don't use inline-block extensively and also the error seems to have something to do with line height.
Ok so HERE is the error , as you can see there is a gap between the nav items and the border , which ruins my design ,now that happened because i change on float:left to inline-block on the following line:
.navbar-nav {
float: none;
display: inline-block;
margin: 0;
}
So why is this gap occurring ? (i know that using float removes the element from the normal flow and using inline block the element will be back into its normal flow of the document.).
Now i found out that this is actually happening because of the line-height.
TWBS , defaults line height is 1.4 something, so now if i the following line to my code my issue is solved:
.navbar-default .navbar-collapse {
text-align: center;
line-height: 0;
}
The above code is added to the ul . Now see how i have reduced the line height to 0 , I have an intermediate understanding of line-height , all i want to ask is am i using the right solution here ? and WHY exactly is line height 'causing this error ?
P.S. This is "Why" question , not a "How do i solve this" question. please support your answers with evidence, that would be great :)
The reason is that inline-block puts a block level element on a line, just like a line of text, and it's then subject to vertical alignment along that baseline. When you set the line-height to zero, that fact is obscured because there's no distinction between the various points along a line of zero height.
You can add vertical-align: bottom; as below to change how your inline-block elements sit in relation to the baseline, and it should do the trick.
.navbar-nav {
float: none;
display: inline-block;
margin: 0;
vertical-align: bottom;
}
The effect should be indistinguishable.
You've added the inline-block to the ul element instead of li
Change to this;
.navbar-nav {
li{
float: none;
display: inline-block;
margin: 0;
}
}
Change display to inline instead of inline-block on your navbar-nav element.
navbar-nav {
float: none;
display: inline !important;
}
Fiddle
Related
As you can see on the screenshot below, in my sidebar the right border of "KULTUR" is cutting off. Its always at the last element of the row.
I have tried to change margins and paddings but it's not working unfortunately.
Here is the URL to my website: http://holmsbuopplevelser.dahlsdata-test.com
It's in the right sidebar if you scroll down a bit.
Thanks in advance!
Try this:
.widget_categories li{
display: inline-block; //rather display:inline
}
I had checked your code and it is the only way you can manage tags with dynamic width and fix it!
find class ".widget_categories li" in your css and change display from "inline" to "inline-block".
.widget_categories li{
display: inline-block;
}
some of your li and buttons have this problem , add display:block to the buttons , and add display:inline-block to li , this will fix your issue, i checked your site
span.vc_gitem-post-category-name {
display:block;
}
.widget_categories li{
display: inline-block;
}
I am using Twitter bootstrap and CSS to style a dropdown. I have a child element that floats on the left and then text that flows to the right of it. Unfortunately the text does not flow within the containing box and spills over.
I' not sure if this is a Twitter bootstrap issue or just a CSS issue (ultimately a CSS isseu I know but worth tagging this as Twitter Bootstrap too since I'm using that framework).
I've tried several combinations, and obviously not the right combination to achieve the behavior I'm after. Does anyone know how to fix this? A working example of the problem is here:
http://ec2-54-215-108-9.us-west-1.compute.amazonaws.com/
(click on the International Gymnast link on the right)
Here is a screenshot demonstrating the issue as well.
Thanks,
Karl..
Its because links in dropdowns in TWBS have white-space: nowrap;.
The easiest solution i could think of is creating a custom CSS class:
.dropdown-menu > li > a.btn-wrap {
white-space: normal;
}
And then adding class="btn-wrap" to your <a> element
.dropdown-menu > li > a ,
.btn.btn-default.btn-large.btn-left > span {
white-space: normal;
}
I would also reduce the line-height on the a tag.
Reduce the height on [.live-mon]
Remove the height on the a tag.
Increase the padding top and bottom on the a tag.
.intl-link li a {
overflow: hidden;
}
.intl-link li a {
line-height: 19px;
}
.dropdown-menu.intl-link > li > a {
padding: 7px 20px;
}
.live-mon {
display: block;
height: 62px;
width: 92px;
}
You would get something like this:
So I have a <ul> that I need to style. I'm using +'s to style it. It looks like this:
+ abc
+ 123
+ hello
The problem I'm having is that I'm not able to center the +'s with the actual li's. As in, So the pluses are ever so slightly off, when I need them to vertically align with the li text. Anyone know what I'm doing wrong?
Here's a link to the fiddle.
CSS
ul {
list-style: none;
display: table-cell;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -1em;
}
li:before {
content: "+";
padding-right: 5px;
vertical-align: middle;
display: inline;
padding-top: 0;
margin-bottom: .5em;
}
Edit
Okay, I didn't mean align the #content with the other ul. I meant vertically center the + with the abc.
vertical-align: text-bottom;
http://jsfiddle.net/2FZx6/4/
You don't want to have the + in the middle of your li, but on the same height as a lower-case letter. That's why you have to use text-bottom instead of middle. If you were to use letters with descenders (such as g or y) you would notice that the actual dots also aren't in the middle of the element/text, but on text-bottom or baseline.
(Actually, the default value baseline works pretty well.)
Resources
MDN: vertical-align
Without using a reset stylesheet such as Eric Meyers or Normalize.css your browser automatically adds default styles. In my case, chrome added 40px to your ULs.
I explicitly set the padding to 20px and it looks good, but I'd implement a reset stylesheet if you can to save headaches down the road.
JsFiddle
ul {
padding-left:20px;
margin:0;
}
You may have better luck just using a background image on your li instead of using the "+" - This way you can position the "+" (as a background image) however you'd like.
http://css.maxdesign.com.au/listutorial/master.htm
This method gives you a bit more fine tuning.
http://jsfiddle.net/2FZx6/9/
li:before { // add these bits
position: relative;
top: -.2em ; // fine tune this however you want
}
Might not work for everyone but for my situation I adjust accordingly by adding lineheight to the li (text) and the li:before (font awesome icon):
li {
/* li css */
line-height: 16px;
li:before {
/* li before css */
line-height: 12px;
}
Hope that helps someone else too!
Hey there, can someone help diagnose this CSS issue, as I have no idea what the beep is going on;
Here's my CSS:
#navigation {
display: inline;
}
.download {
width: 10px;
height: 40px;
}
.steps {
width: 90px;
height: 40px;
}
And here's my HTML:
<div id="navigation">
<div class="download"></div>
<div class="steps"></div>
</div>
For some reason, even though display:inline; is being used, the classes still drop below one another.
And before someone comments on why I'm not using a unordered list to create my navigation, this is meant to be quickie job with a pretty low pay, so the best form isn't what I'm going for. That said, I've been trying to diagnose this issue for over half an hour, and I'm stumped. I've clearly made an obvious mistake, I just can't pick up on it.
Any help would be greatly appreciated :).
The parent div is inline, not the children. You haven't done anything with the children, they're still block. Your problem will likely be solved if you make the children inline-block though, with:
.download, .steps {
display: inline-block;
}
Or you can float them:
.download, .steps {
float: left;
}
#navigation {
overflow: hidden;
zoom: 1; /* if you care for the anti-browser */
}
All this is if you do care for them to keep the width and height you specified, while keeping them next to each other.
You could just float all of your divs left and achieve the same result.
I don't believe divs inherit their parents display property by default, and divs are block. So you would have to set both .download and .steps to also be display:inline
You could also create a selector like:
#navigation div { display:inline; }
More than likely, you want #navigation to be block anyways, since you will probably want the navigation container to be block.
Try adding a style on the div's in the #navigation div...
#navigation, #navigation > div {
display: inline;
}
I have already found following question with almost similar content: How to indent list items using CSS when you have floating blocks?
And here is my situation: if a list item gets too long, so that it automatically makes a line break, the text flow continues without the indentation.
Here is what I am expecting:
I can handle this using outside position property, modifying the margin or padding of an li element, if the text height is smaller than the image height. But if the text continues, especially on the bottom border of the image - it looks totally destroyed.
A good code to play with can be found here: http://csscreator.com/node/30984 on the second post.
Any help will be deeply appreciated
The most obvious, and simple solution, is to clear the list so that it's forced down under the floated elements, instead of sharing the same space as floated image, for instance, in this jsfiddle.
img {
float: left;
}
ol {
clear: both;
}
Of course, there will be other problems depending on the situation you're using this in, but otherwise it should solve your problem.
There are two ways to do this, either of which work with the code sample you linked to.
ul, ol {
display: table;
list-style-position: inside;
padding-left: 22px;
}
or
ul, ol {
overflow: hidden;
list-style-position: inside;
padding-left: 22px;
}
There are subtle differences, such as overflow: hidden not allowing you to have something like tooltips pop up without being cut off, but no biggie here.
Not sure if this was all even available in 2010, but it is where I live (the future).