I am currently coding a website for a school project, and I have boxes that grow on a mouse hover that are in a div. An example of one grow div:
<div class="grow">
<div class="title3">Experience</div>
<div class="mainbox">
<p class="text">Sample text.</p>
</div>
</div>
In here, I need a <li> to list my industry certifications, but then it won't validate. So I was trying this:
<div class="grow">
<div class="title3">Experience</div>
<div class="mainbox">
<p class="text"><li>
<ul>Sample</ul>
<ul>Sample</ul></li></p>
</div>
</div>
But then this doesn't validate. What should I do instead, or is there another good alternative to a list that looks good?
You are including an UL inside of a LI, you need revert. First you need add UL and inside of this tag, add the LI you need.
<div class="grow">
<div class="title3">Experience</div>
<div class="mainbox">
<ul>
<li>Sample 1</li>
<li>Sample 2</li>
<li>Sample 3</li>
</ul>
</div>
</div>
UL wraps LIs.
<ul><li>....</li></ul>
Related
In a card-tabs element from materialize css framework I'm trying to setup an ag-grid table.
Here is the code.
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab">Test 4</li>
<li class="tab">Test 5</li>
</ul>
</div>
<div class="card-content grey lighten-5">
<div id="test4" style="height: 200px;">
<div ag-grid="$ctrl.gridOptions" class="ag-theme-material" style="height: 100%;"></div>
</div>
<div id="test5">Test 5 content</div>
</div>
</div>
The problem is that I cannot auto resize the height of the element with id='test4' in order to gird be viewable. If I remove the style="height:200px;" from it, the grid doesn't show up. If I added it's being shown but I don't want to keep it statically on 200px since the grid's height could be varied.
Is there any way to make the div with the id='test4' automatically resize itself according to the size of the ag-grid?
I tried to put height:auto; both in card-content and test4 divs but without any success.
Div will not be shown if there is not content in it. Why don't you just put blank   value inside html.
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab">Test 4</li>
<li class="tab">Test 5</li>
</ul>
</div>
<div class="card-content grey lighten-5">
<div id="test4"
<div ag-grid="$ctrl.gridOptions" class="ag-theme-material" style="height: 100%;"></div>
</div>
<div id="test5">Test 5 content</div>
</div>
</div>
Fiddle here: https://jsfiddle.net/mv5ut6sw/
I have a list of links at the top of my webpage contained in a <div>. I would like a horizontal <hr> line above and below this <div> to visually separate the links from the rest of the page. Simplified example:
<hr>
<div style="float:left; width:100%">
<div style="float:left; margin-right:20px">
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
<div style="float:left; margin-right:20px">
<ul>
<li>Link3</li>
<li>Link4</li>
</ul>
</div>
</div>
<hr>
I am using bootstrap to pretty the page up. Without bootstrap, the <hr>s behave as expected, appearing above and below the link section. When I use bootstrap, however, the two horizontal lines both appear above the link section.
I am at a loss. I don't want to edit bootstrap code. Is there inline css I can include to fix this weird placement?
Its because floats take the elements out of the flow...either you can clear the float value clear:both or by applying overflow:hidden in the parent div...
Well If you are using bootstrap4 then why use floats...just Use d-flex class on the parent div
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<body>
<h3 style="background-color: lightgray; height: 40px; padding: 2px">
Ye old title
</h3>
<hr>
<div class="d-flex">
<ul>
<li>Race Entry</li>
<li>Start</li>
<li>Position Transfer</li>
<li>Contracts</li>
</ul>
<ul>
<li>Statements</li>
<li>Race Position</li>
<li>Advertising Firm</li>
</ul>
<ul>
<li>Report1</li>
<li>Report2</li>
</ul>
<ul>
<li>Settle it!</li>
<li>Upload</li>
<li>Search</li>
</ul>
</div>
<hr>
</body>
"Is there inline css I can include to fix this weird placement?"
It's because of the floats. Just clear the last <hr>..
<hr style="clear:both;">
https://jsfiddle.net/s9L0Lf9b/
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<body>
<h3 style="background-color: lightgray; height: 40px; padding: 2px">
Ye old title
</h3>
<hr>
<div style="float:left; width:100%;">
<div style="float:left; margin-right:20px">
<ul>
<li>Race Entry</li>
<li>Start</li>
<li>Position Transfer</li>
<li>Contracts</li>
</ul>
</div>
<div style="float:left; margin-right:20px">
<ul>
<li>Statements</li>
<li>Race Position</li>
<li>Advertising Firm</li>
</ul>
</div>
<div style="float:left; margin-right:20px">
<ul>
<li>Report1</li>
<li>Report2</li>
</ul>
</div>
<div style="float:left; margin-right:20px">
<ul>
<li>Settle it!</li>
<li>Upload</li>
<li>Search</li>
</ul>
</div>
</div>
<hr style="clear:both;">
</body>
"The float CSS property specifies that an element should be taken from
the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it." __ from MDN posted on a related question
P.S. - There's no need to use floats with Bootstrap 4.
I have this sample:
link
CODE HTML:
<header>
<div class="row">
<div class="col-md-push-8 col-md-4 menu-top">
<ul>
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
</ul>
</div>
<div class="col-md-4"> //this structure need to be below (not inline)
11231231
</div>
<div class="col-md-4">
11231231
</div>
<div class="col-md-4">
11231231
</div>
</div>
</header>
I put an image to understand better what I want to do
http://i64.tinypic.com/3342ofa.png
How to build HTML structure so as to be like in the picture above?
Thanks in advance!
Use thumbnail for image which is a class of Bootstrap.
Example :
<div class="col-md-4">
<a href="example.jpg" class="thumbnail">
<p>Stack Overflow</p>
<img src="stack.jpg" alt="Stack Overflow" style="width:150px;height:150px">
</a>
</div>
I am using bootstrap to build my site and in one location I have two divs stacked on top of each other to the right of an image. The two divs should each be half the height of the image as long as the browser is over 767px and be responsive as well.
Here is a jsfiddle: http://jsfiddle.net/dC7z5/
<div class='row subhead'>
<div class='col-sm-9'>
<img src="http://placekitten.com/900/554" class="img-responsive" />
</div>
<div class='col-sm-3'>
<div class='row'>
<div class='col-sm-12 services'>
<p>Services</p>
<ul>
<li>first service</li>
<li>another service</li>
</ul>
</div>
</div>
<div class='row'>
<div class='col-sm-12 specs'>
<p>Tech Specs</p>
<ul>
<li>one spec</li>
<li>second spec</li>
</ul>
</div> <!-- end specs -->
</div>
</div>
</div>
Here's an image of what I'm trying to do: http://laurenpittenger.com/here/wp-content/uploads/2014/01/Screen-Shot-2014-01-05-at-4.46.31-PM.png
Create a div container that contains both the Service box, and the Tech Specs Box. Then, in the css, make the container the same height as the image. Do this to the Service and Tech Specs Box:
height:50%;
Code for multiple tabs on my page (displaying these tabs and content dynamically):
jQuery('.tab-block li a').click(function() {
var theitem = jQuery(this);
theitem.parent().parent().find("li").removeClass("active");
theitem.parent().addClass("active");
theitem.parent().parent().parent().parent().find(".tab-content > ul > li").removeClass("active");
theitem.parent().parent().parent().parent().find(".tab-content > ul > li").eq(theitem.parent().index()).addClass("active");
return false;
});
Code in my HTML to display tabs:
<div class="tab-block">
<div class="tabs">
<ul>
<li class="active">TAB 1</li>
<li>TAB 2</li>
</ul>
<div class="clear-float"></div>
</div>
<div class="tab-content">
<ul>
<li class="active">
<p><h3>Goole.com</h3></a>
<p>Content</p>
</li>
<li>
<p><h3>Goole.com</h3></a>
<p>Content</p>
</li>
</ul>
</div>
</div>
Now all tabs work great but no links will open (the H3 link within the tabs themselves). Any ideas what I'm doing wrong?
Thank you.
I don't know what your specific problem is, you may want to provide a link to a jsfiddle, to make yourself clear, but if you need tabs, try EZ tabs jQuery plugin.
HTML:
<div class="tab-block">
<div class="tabs">
<ul class='nav'>
<li>TAB 1</li>
<li>TAB 2</li>
</ul>
<div class="clear-float"></div>
</div>
<div class="tab-content">
<div class='box'>
<p>
<h3>Goole.com</h3>
</a>
<p>Content</p>
</div>
<div class='box'>
<p>
<h3>Goole.com</h3>
</a>
<p>Content</p>
</div>
</div>
</div>
jQuery, on document ready:
$('.tab-block').eztabs({
tabsList : 'ul.nav',
animation: 'slideLeftRight',
boxContainer: '.tab-content',
animationTime: 200
});
jsfiddle