I want to have my Bootstrap tabs flush with my page header (mock shown below), but having the header taller than the other tabs causes everything to break. How can I do this?
<ul class="nav nav-tabs" role="tablist">
<li><h1>Header</h1></li>
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li class="pull-right"><button id="new-thing" class="btn btn-primary">New</button></li>
</ul>
Here is the font size and margin spacing I want. Now I just need the tabs flush with the bottom border.
http://jsfiddle.net/bK4a4/4/
Delete margin
li h1 { margin: 0}
After Edit Options
add margin-top to other elements. fiddle
add line-height to h1 fiddle
Try adding this to your CSS:
.nav-tabs h1 {
font-size: 20px !important;
margin-top: 10px !important;
margin-right: 5px !important;
}
You can change the font size, weight and margins to fit your needs.
in your html , make a class for the header
<li><h1 class="header">Header</h1><li>
and in your csss
html, body {
padding: 1em;
}
.header {
margin:0;
padding:0;
padding-right:10px;
}
Here is the jsfiddle to check it out : jsFiddle Sample
How about something like that:
<ul class="nav nav-tabs" role="tablist">
<li><div style=" font-size:25px">Header  </div></li>
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li class="pull-right"><button id="new-thing" class="btn btn-primary">New</button></li></ul>
where you use inline css to specify the font size and margin
Related
I have tried and researched many ways but I couldn't find out how to align unordered list in center. it seems like the bullets are not connected to the text and stay still.
here is the html code:
<ul id="facts">
<li>fact 1</li>
<li>fact 2</li>
<li>fact 3</li>
</ul>
and this is the css code:
#facts {
text-align: center;
}
the result will be like
You can use list-style-position: inside; to set the bullets in front of the text like this:
#facts {
text-align: center;
list-style-position: inside;
}
<ul id="facts">
<li>fact 1</li>
<li>fact 2</li>
<li>fact 3</li>
</ul>
You can put your Unordered List in an element with the class of .container and define .container like this:
.container{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
}
<div class="container">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Set</li>
</ul>
</div>
I have a strong tag in ul tag, like,
<ul>
<strong>Whats included in strong tag</strong>
<li>li tag 1</li>
<li>li tag 2</li>
</ul>
The result shows in a website page, like
Whats included in strong tag li tag
1 li tag 2
I want to make the text of the strong tag(Whats included in strong tag) left-aligned to the position of li tag.
Except setting up margin value in strong tag, is there any other way to do it?
li.strong{
list-style-type: none;
}
.li1{
margin-left:30px;
}
.li2{
text-indent: 30px;
list-style-type:none;
}
.li2::before{
content:"• ";
}
.li3{
position:relative;
left: 30px;
}
.strong4{
position:absolute;
left:0px;
}
.li4{
position:relative;
top:16px;
}
.li5{
text-align:center;
list-style-type:none;
}
.li5::before{
content:"• ";
}
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li1">li tag 1</li>
<li class="li1">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li2">li tag 1</li>
<li class="li2">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li3">li tag 1</li>
<li class="li3">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong class="strong4">Whats included in strong tag</strong></li>
<li class="li4">li tag 1</li>
<li class="li4">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li5">li tag 1</li>
<li class="li5">li tag 2</li>
</ul>
Use margin left on the <li> elements instead of <strong> tag.
Use text indent
Use position relative on <li> tags or on <strong> tag.
Use position absolute on <strong> and position relative on <li>
Use text align
You can make the strong text an li with styling to remove the bullet and shift it left.
.nobullet {
list-style-type: none;
margin-left: -15px;
}
<ul>
<li class="nobullet"><strong>Strong Text!</strong></li>
<li>Other text!</li>
</ul>
It should not be set in the first li because this would assume a sibling relationship to the preceding li elements whereas the header is more important in the hierarchy. Imagine screen-readers etc
<strong>Strong Text!</strong>
<ul>
<li>Other text</li>
</ul>!
I have a web page that displays a list of item with variable length. There are two panels at the top of the page that display information about the selected item from the list. Both or just one can be hidden by the user to see more items in the list. If the panels are displayed, I need them to be fixed - even when scrolling through the list, they are always visible. If the user hides some panels, I want the list of items to move to the area where the fixed panel was.
The situation is shown in the picture. The green and yellow panels must always be seen until the user hides it. The list must move according to space above.
Is there a possibility to do this with HTML and CSS?
Yes. You can put your list inside a div and set the div to have a fixed height as well, then the items below will be scrollable.
See this example (jsfiddle):
.panel-1, .panel-2{
height: 100px;
}
.panel-1{
background: red;
}
.panel-2{
background: blue;
}
.list{
height: 200px;
overflow-y: auto;
}
.list-group{
background: rgba(0, 0, 0, 0.1);
list-style: none;
padding-left: 0;
}
.list-item{
margin: 5px 0;
padding: 5px 0;
background-color: yellow;
}
<div>
<div class="panel-1">Information</div>
<div class="panel-2">More information</div>
<div class="list">
<ul class="list-group">
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item">Item 4</li>
<li class="list-item">Item 5</li>
<li class="list-item">Item 6</li>
<li class="list-item">Item 7</li>
<li class="list-item">Item 8</li>
<li class="list-item">Item 9</li>
<li class="list-item">Item 10</li>
</ul>
</div>
</div>
I'm creating inline LIs and would like their height to be similar. The problem here is that when one of my LI has a long text, this LI will have a bigger height and the others don't adjust. (I'm using bootstrap to create my rows)
http://jsfiddle.net/q5stk2yp/ (live example)
And HTML code:
<div class="col-md-12 col-sm-12 col-xs-12 table-custom">
<ul style="border:1px solid" class="row table-row">
<li style="width:200px" class="table-cell">title 1</li>
<li style="width:20%" class="table-cell">Name with very long description to create multiple lines and show what I would like to to.</li>
<li class="table-cell">title 3</li>
<li class="table-cell">title 4</li>
</ul>
<ul style="border:1px solid" class="row table-row">
<li class="table-cell">test 1</li>
<li class="table-cell">test 2</li>
<li class="table-cell">test 3</li>
<li class="table-cell">test 4</li>
</ul>
</div>
One way to do this is with jQuery.
Here is the jsfiddle: http://jsfiddle.net/oe4g2etw/6/
And here is the JS code you'll need:
// During the first load...
// Find the max height of the elements...
var maxHeight = Math.max.apply(null, $(".table-custom li").map(function (){
return $(this).height();
}).get());
// And set all the list elements to that max height
$(".table-custom li").css('height', maxHeight);
If you want to also make it responsive you need to add a listener that checks for the window width change, then recalculates the height of the tallest element and sets it to all your list items:
// When the window is resized...
$( window ).resize(function() {
// Remove the 'height' attribute...
$(".table-custom li").css("height", "");
// Find the max height of the elements...
var maxHeight = Math.max.apply(null, $(".table-custom li").map(function (){
return $(this).height();
}).get());
// And set it to all the elements
$(".table-custom li").css('height', maxHeight);
});
Hope this helps!
PS: Don't forget to include jQuery in your <head> if you haven't already done so.
You can make elements match their tallest sibling's height by using display: table-cell.
This should work in IE8+ and all other browsers:
.table-custom {
min-width: 200px;
}
.table-row {
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
.table-custom > ul > li {
text-align: left;
padding: 0px;
padding-left: 5px;
padding-top: 8px;
padding-bottom: 7px;
display: table-cell;
border: 1px solid #f00;
margin-bottom: 0px;
}
<div class="col-md-12 col-sm-12 col-xs-12 table-custom">
<ul style="border:1px solid" class="row table-row">
<li style="width:200px" class="table-cell">title 1</li>
<li style="width:20%" class="table-cell">Name with very long description to create multiple lines and show what I would like to to.</li>
<li class="table-cell">title 3</li>
<li class="table-cell">title 4</li>
</ul>
<ul style="border:1px solid" class="row table-row">
<li class="table-cell">test 1</li>
<li class="table-cell">test 2</li>
<li class="table-cell">test 3</li>
<li class="table-cell">test 4</li>
</ul>
</div>
I am making a list with a heading and subheadings. My main list, Home1, is followed by a subheading. How can I exactly position the subheading content without affecting another list?
<div id="wrapper">
<ul id="testnav">
<li>
Home
<ul id="subnav">
<div style=" float : left; width :70%;" >
<li>Sub Heading</li>
<li>Sub Heading</li>
<li>Sub Heading</li>
</div>
<div STYLE="float : left; width :30%; height:900px;">
Sub Heading Content
</div>
</ul>
</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
</ul>
</div>
#testnav {
list-style: none;
padding: 0;
marigin: 10px 10px 10px 0;
width: 900px;
}
#subnav {
list-style: none;
padding: 0;
marigin: 10px 10px 10px 0;
width: 300px;
}
I'm having a hard time understanding the question, but looking at your markup I see that you have a DIV as a direct descendant of a UL. Only LI elements can be children of UL.
<ul id="subnav">
<div style=" float : left; width :70%;" > <!-- THIS DIV CANNOT BE HERE -->
<li>Sub Heading</li>
<li>Sub Heading</li>
<li>Sub Heading</li>
</div> <!-- THIS DIV CANNOT BE HERE -->
<div STYLE="float : left; width :30%; height:900px;"> <!-- THIS DIV CANNOT BE HERE -->
Sub Heading Content
</div> <!-- THIS DIV CANNOT BE HERE -->
</ul>
Also, ul > div is not valid HTML.
The first step to solving your problem is making sure your markup is correct as Andy Ford suggested. Secondly, making sure your spelling of the CSS in the code is correct may help.
From what I can decipher from your question, you're trying to make sure that #subnav is absolutely positioned relative to #testnav.
<ul id="testnav">
<li>
Home
<ul id="subnav">
<li>Sub Heading</li>
<li>Sub Heading</li>
<li>Sub Heading</li>
</ul>
</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
</ul>
#testnav, #subnav { list-style:none; padding:0; }
#subnav {
position: absolute;
width: 300px;
}
I am not sure if that's what you want, but generally the first step to figuring out what's going wrong with CSS is to remove every extraneous addition you can.