I'm using the bootstrap bar to show the progress of a song. When I add it to a list stylize it to float, it disappears.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
<ul>
<li>
<div class="text-muted" id="currentTime"></div>
</li>
<li>
<div class="progress" style="width: 10%;">
<div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li>
<div class="text-muted" id="totalTime"></div>
</li>
</ul>
Applying the float property causes the elements to lose their dimensions (especially the width).
ّfloat explained in MDN Web Docs:
When an element is floated, it is taken out of the normal flow of the
document (though still remaining part of it). It is shifted to the
left, or right, until it touches the edge of its containing box, or
another floated element.
You can cover this problem by applying the parent width at the same time.
li {
float: left;
width: 100%;
}
Do not forget to use Bootstrap classes. (e.g. w-100, float-left, m-0, p-0, overflow-hidden, ... )
Related
My problem is that when I am resizing the browser window, the first text breaks up. It should never break up the words, just show the entire sentence no matter how small the window gets. I've tried with queries, but can't figure out how to do it correctly. See the image to understand the issue.
<div class="row">
<div class="col-sm-7">
<ul class="list-inline">
<h2>
<li class="list-inline-item">LYD</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">LYS</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">LED</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">AV</li>
</h2>
</ul>
</div>
<br>
<div class="col-sm-5">
<div class="middle">
<h2>
<span class="glyphicon glyphicon-earphone"></span> 57 67 18 14
</h2>
</div>
</div>
</div>
CSS:
ul li { display: inline; }
ul.list-inline{
text-align: center;
padding-right: 15px;
}
.middle{
margin-bottom: 60px;
padding-right: 15px;
}
The main issue here is that the content, namely the list and list items all inherit their width from the containing col-7.
If you know the exact width of the text you can just put an exact width property on it-
ul {
width: 302px;
}
In a more dynamic way, though, you can use either white-space or max-content
/* white-space */
ul {
white-space: nowrap
}
/* max-content*/
ul.list-inline {
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
I have an extremely nested, hierarchical, list (it contains biological data on ordering of species). See the example, where I selected only three of the possible 10 levels of nesting.
I'd like to display this list horizontally, as an organizational chart that has been rotated 90 degrees.
I can get the exact right lay-out when I apply a width to each and every child-ul. Fortunately, the tree is generated by JavaScript and applying inline styles is easy. (As such:)
<ul class="wrapper" style="width: 120px;">
However, I realy would like to get rid of these inline styles, because the whole management of the tree would become so much easier without them. (Consider the possibility of showing/hiding child levels or even removing complete levels of organisation)
As you can see in the fiddles, removing the inline styled width, doesn't work. Which is strange, because I've set a width for the label. How can I make the parent divs accommodate to width of the child elements, however deep they have been nested?
Here on stack overflow, several similar question have been asked. These suggest setting float: left and position:relative. But, too bad, it doens't work...
http://jsfiddle.net/ideogram/27kNA/5/ (without inline styles)
http://jsfiddle.net/ideogram/zFMyZ/2/ (with inline styles)
Basically, my question boils down to: in the following css/html, how do I get rid of the inline width while maintaining the desired lay-out?
<head>
<style type="text/css">
.label{
width: 120px;
text-align: center;
}
.wrapper{
display: inline-block;
vertical-align: middle;
padding-left: 0;
}
.label, .wrapper{
display: inline-block;
vertical-align: middle;
width: 110px;
}
.taxon{
display: inline-block;
overflow: hiden;
outline: 1px dotted #ddd;
margin: 5px 0;
text-align: left;
}
</style>
<ul class="wrapper" style="width: 360px;">
<li class="taxon ">
<div class="label">Balaenopteridae</div>
<ul class="wrapper" style="width: 240px;">
<li class="taxon ">
<div class="label">Balaenoptera</div>
<ul class="wrapper" style="width: 120px;">
<li class="taxon">
<div class="label">Balaenoptera acutorostrata</div>
</li>
<li class="taxon">
<div class="label">Balaenoptera borealis</div>
</li>
<li class="taxon">
<div class="label">Balaenoptera edeni</div>
</li>
</ul>
</li>
<li class="taxon">
<div class="label">Megaptera</div>
<ul class="wrapper" style="width: 120px;">
<li class="taxon">
<div class="label">Megaptera novaeangliae</div>
</li>
<li class="taxon">
<div class="label">Megaptera whatever</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Update your selectors as follows and remove any defined widths. The key point is display: table-cell et al of the same family.
Fiddle sample: http://jsfiddle.net/pLUns/
.label{
border-radius: $taxon-margin;
text-align: center;
}
.wrapper{
vertical-align: middle;
}
.label, .wrapper{
display: table-cell;
vertical-align: middle;
}
.taxon{
display: table-row;
overflow: hidden;
outline: 1px dotted #ddd;
text-align: left;
border-spacing: 5px;
}
The problem is that in HTML few things size to their contents. Most elements calculate their size based on the size of their parents.
The ones's that do size to their contents include (off the top of my head): tables, floated elements, absolutely/fixedly positioned elements. Perhaps there's something else too, but I don't remember it right now.
In your case I'd suggest using a javascript-generated table instead of a list. I know, I know - not semantic and all that. But the visual requirements are such that anything short of table or specific widths will fail.
That's because an element needs not only consider their own content size, but also the size of their siblings. After all, if there are 3 elements in your 2nd level, you'd want them all to be the same width, right?
If you have severe allergy against tables, you might be able to slip through with display: table-cell, though I don't know how you'd do the rowspans that you need.
I'm creating a navigation bar, in which there are five different links. Using div elements, I created the nav bar and then separated each link into its own container. By default, they all crush over to the left side, not centered in the nav bar. To get along without a totally misaligned nav bar, I added approximate widths to equally space out each link from one another; however, it's not perfectly aligned and I need a more professional way about centering them.
You can visually see what I'm talking about here: http://jsfiddle.net/W2Pez/2
You can see that they're not all equally spaced out from one another. I plan on removing the width attributes from each link, so how do I make it so that each link is the same number of pixels away from one another WITHOUT using widths? Please note each link's container cannot be the same width, since, for example, the amount of empty space left over from "Home" would be a lot more than "Rates & Packages".
CSS:
#nav {
background-color: #C08374;
height: 50px;
line-height: 50px;
width: 1000px;
margin: auto;
vertical-align: middle;
border: 1px solid #A76358;
}
.nav_button {
float: left;
text-align: center;
line-height: 50px;
}
HTML:
<div id="nav">
<div class="nav_button" style="width: 25px"></div>
<div class="nav_button" style="width: 175px">
Home
</div>
<div class="nav_button" style="width: 250px">
Rates & Packages
</div>
<div class="nav_button" style="width: 175px">
About Us
</div>
<div class="nav_button" style="width: 150px">
Menu
</div>
<div class="nav_button" style="width: 250px">
Nearby Attractions
</div>
<div class="nav_button" style="width: 25px">
</div>
The trick is to set the container to have text-align: center and then have the list (it should be a <ul> set to display: inline-block. That will center the whole list and you can then float the list elements and control how far apart they are from each other using margins.
Here's a stripped down version of your code:
HTML
<div id="nav">
<ul>
<li class="nav_button">
Home
</li>
<li class="nav_button">
Rates & Packages
</li>
<li class="nav_button">
About Us
</li>
<li class="nav_button">
Menu
</li>
<li class="nav_button">
Nearby Attractions
</li>
</ul>
</div>
CSS
#nav {
background-color: #C08374;
border: 1px solid #A76358;
text-align: center;
}
ul {
list-style: none;
display: inline-block;
}
ul li {
float: left;
margin: 0 20px;
}
ul li a {
color: white;
}
Here's a fiddle.
Hi I have a container div for a page (called innercontent) and within that I have a div called tabs2. Tabs2 contains a tabbed navigation that allows content inside a div (within tab2) change. The content inside the div varies, so the height should expand itself if there is a lot of content in that div. The problem is that when changing the tabs in the content area, the div does not resize automatically, so the content cannot be seen. Here is the code:
CSS:
.innercontent {
overflow: hidden;
background-color:#FFF;
padding:24px 30px;
border-radius:5px;
}
#tabs2 {
width: 100%;
height:100%;
}
.div2 {
position: absolute;
visibility: hidden;
width: 100%;
left: 0;
}
HTML:
<div id="tabs2">
<ul>
<li id="One">One
<div class="div2">
<p>Insert content here</p>
</div>
</li>
<li id="Two">Two
<div class="div2">
<p>Insert content here</p>
</div>
</li>
<li id="Three">Three
<div class="div2">
<p>Insert content here</p>
</div>
</li>
</ul>
</div>
Are you sure they have to be absolute? As I don't think they need to be.You could look at using something such as jqueryui http://jqueryui.com/tabs/
Alternatively, amend your html and it should be easier.Essentially move the content divs outside of the but have a data-attribute that links them to a specific link. I'm assuming you use some js at the moment to manipulate showing and hiding as you currently have visibility:hidden. I've changed this to display:none in my example (as visibility still occupies space in the document. When a user clicks a link, hide all the divs by default, then show the one with the correct matching data-attribute.
I've created a fiddle at http://jsfiddle.net/9bH7s/ that shows this and the code is below.
html
<div class="innercontent">
<div id="tabs2">
<ul>
<li id="One">One
</li>
<li id="Two">Two
</li>
<li id="Three">Three
</li>
</ul>
<div class="div2" data-id="first">
<p>Insert content here</p>
</div>
<div class="div2" data-id="sec">
<p>Insert content here</p>
</div>
<div class="div2" data-id="third">
<p>Insert content here this has a lot more <br /><br />and some more content</p>
</div>
</div>
</div>
css
.innercontent {
overflow: hidden;
background-color:#efefef;
padding:24px 30px;
border-radius:5px;
}
#tabs2 {
width: 100%;
height:100%;
}
#tabs2 ul li{
float:left;
list-style:none;
margin-left:10px;
}
.div2 {
display:none;
width: 100%;
clear:both;
}
js
$('#tabs2').delegate('a','click',function(){
$('.div2').hide();
$('.div2[data-id=' + this.id +']').show();
});
1st change::dont indicate any height for .tab2..it will take an automatic height corresponding to the item that it contains
2nd change: you have made position:absolute; and expecting it to be dynamic.how that can be possible.remove it..either make it position:relative; or better choice is not to mention position property at al ...you can use margin-left:100px; to position your div
When i have a div with position: absolute, and in it is another div with position: absolute the inner div will position in the frame given through the outer (wrapper) div.
Now i want to create a class (css) called error_message that positions itself exactly in the center middle of the site, indifferent from where the it is called, so i need it to break out of every div wrapped around the error_message div.. how do i do this?
i had a similar problem with positioning a hoover-text centered below a floated image button list.
for me the solution was using the "fixed" value for the "position" property
position: fixed
then you can position your error message from top left of the body again.
i use another wrapper div to position all hoover texts center center.
found the solution here:
CSS nested Div with position absolute?
the code is not the code from the picture you see, the picture is just for illustration.
stylesheet in less format (see http://lesscss.org/)
<style>
.button
{
float: left;
position: relative;
a
{
&:hover, &:focus
{
.titlePos
{
.title
{
display: block;
}
}
}
.titlePos
{
position: fixed;
top:50%;
left:50%;
width: 400px;
margin-left: -200px;
.title
{
position:relative;
display: none;
top: 130px;
text-align: center;
}
}
}
</style>
html:
<div id="wrapper">
<div id="content">
<ul>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text1</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text2</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text3</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text4</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
You should try using css's position:fixed property, instead of position:absolute, for the error div. position:fixed will position an element based on the browser window, with no regard for where it falls in the DOM. If you want it to be centered in the window, regardless of window size, you could make the fixed-position div cover the entire screen (left: 0, right: 0, etc). and then text-align the error message inside of it.
I'm not sure why would you want that div to break out of parent div. Maybe try working on a fresh html structure for those?
http://haslayout.net/css-tuts/Horizontal-Centering and http://haslayout.net/css-tuts/Vertical-Centering
These should help you out!
I think the only way to have a div break out of all parent divs is to have an absolute positioning on all of them, which will obviously create its own set of problems.
Why not simply have a pre-defined, hidden div as a direct child of the body, instead of wrapping it in the markup. You can then easily position it as you want, and insert the error messages in it with the help of jQuery. An obvious advantage to this method is that you would only have to write this div once, and dynamically insert the error message into it. I would even suggest having a look at jQuery UI which allows you to easily create dialogs, both normal and modal, besides tons of other features.
UPDATE
Since JS is not allowed, an easy way to do this would indeed be displaying the div only if there was an error. So the PHP code would be ...
if (isset($error)) {
echo '<div class="show_error">' . $error . '</div>';
}
... and the CSS class for it would be ...
.show_error {
width: 400px; // error element's width
height: 200px; // error element's height
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; // minus half the height
margin-left: -200px; // minus half the width
}
Of course, you can further style the error div as you wish, but these are needed to position it dead-center.
Hope this helps !
I have found a solid CSS solution here:
https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent/
Let’s add another parent and move the position:relative one level up
(or, in your context, you could maybe simply use an existing upper
parent).
HTML
<div class="grand-parent">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.grand-parent {
position: relative;
}
.parent {
/*position: relative;*/
overflow: hidden;
}
.child {
position: absolute;
top: -10px;
left: -5px;
}
Result: