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>
Related
How can I display n - items from list into 3 columns using Thymeleaf ?
HTML Code :
<section>
<div class="sectionTitle">
<h1>Key Skills</h1>
</div>
<div class="sectionContent" th:each="skill : ${userProfile.getUserSkills()}">
<li th:text="${skill.getSkillName()}">[Skill Name]</li>
</div>
<div class="clear"></div>
</section>
found a solution (may not be perfect or optimal but it works!)
<section>
<div class="sectionTitle">
<h1>Key Skills</h1>
</div>
<div class="sectionContent">
<span th:each="i : ${#numbers.sequence(0, 2)}">
<ul class="skills">
<div th:each="skill, index : ${userProfile.getUserSkills()}"
th:unless="${(index.index-i) % 3}">
<li th:text="${skill.getSkillName()}">[Skill Name]</li>
</div>
</ul>
</span>
</div>
<div class="clear"></div>
</section>
which produces
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>
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>
i can't find a way to make that work.
i have a sidebar which i pull to the right on desktop side.
i don't know on what row to put the pink div.
This is what i wrote but i don't think it's good.. http://jsfiddle.net/o7vmx2to/
<div class="row">
<article class="col-xs-24 col-sm-18 pull-right">
<div>Left div</div>
</article>
<aside class="col-xs-24 col-sm-6 pull-left">
<div class="row">
<div class="col-xs-24">
<ul class="list-unstyled button_list">
<li>button a</li>
<li>button b</li>
<li>button c</li>
<li>button d</li>
<li>button e</li>
<li>button f</li>
</ul>
</div>
</div>
<div class="row">
<div>This one need to be moved</div>
</div>
</aside>
You need to wrap your stuff in a <div class="container"> which automatically resizes when you change from xs to sm,md and lg
Bootstrap grid system is based on 12 columns not 24. So divide everything by 2
JSFiddle : http://jsfiddle.net/snatgu5f/
Actually it would be a lot easier if you swapped the blue and green divs in the left picture. Because then you end up with a standard bootstrap layout without the need for .pull-right class. I suspect you might actually want this. The code would need to be like this :
<div class="container"><div class="row">
<div class="col-xs-12 col-sm-3">
<nav><ul class="nav nav-stacked nav-pills">
<li class="diabled">Menu</li>
<li>Something</li>
</ul></nav>
</div>
<div class="col-xs-12 col-sm-9">
<article class="row">
Some Text
</article>
<article class="row">
Some more text
</article>
</div>
</div></div>
Yet if you really need the blocks to be positionned like in your picture, here's what you could do (the trick is ton only have one row and either to make the left-menu "pull-left" or the other blocks "pull-right"
<div class="container">
<div class="row">
<article class="col-xs-12 col-sm-9 pull-right">
Green Block </article>
<nav class="col-xs-12 col-sm-3">
<ul class="list-unstyled button_list">
<li>button a</li>
<li>button b</li>
<li>button c</li>
<li>button d</li>
<li>button e</li>
<li>button f</li>
</ul>
</nav>
<article class="col-xs-12 col-sm-9 pull-right">
Purple block</article>
</div>
I have some troubles with my footer on a website. Footer is not displaying at the bottom of the page but it starts right below the header and covers elements that are under it. For better understanding I made fiddle for it and screenshot
But its like this:
<div class="mens">
<div class="main">
<div class="wrap">
<div class="section group">
<div class="cont span_2_of_3">
<h2 class="head">PRIPOROČAMO</h2>
<div class="top-box">
and then there are some products and then there are the end divs for this:
</div>
</div>
</div>
</div>
</div>
</div>
And then follows the footer:
<footer class="footer-2 bg-midnight-blue">
<div class="container">
<nav class="pull-left">
<ul>
<li class="active">
Home
</li>
<li>
Company
</li>
<li>
Portfolio
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="social-btns pull-right">
<div class="fui-vimeo"></div><div class="fui-vimeo"></div>
<div class="fui-facebook"></div><div class="fui-facebook"></div>
<div class="fui-twitter"></div><div class="fui-twitter"></div>
</div>
<div class="additional-links">
Be sure to take a look to our Terms of Use and Privacy Policy
</div>
</div>
</footer>
And I know its a lot of code but I would really appreciate if someone could look at it. Thanks.
use this to reset ur css
.clearfix:before,.clearfix:after{content: '.';display: block;overflow: hidden;visibility: hidden;font-size: 0;line-height: 0;width: 0;height: 0;clear: both;}
.clearfix {overflow: auto;zoom: 1;}
and add clearfix class in parent div where in child u have used float like in
<div class="page-wrapper clearfix">
<div class="main clearfix">
<footer class="footer-2 bg-midnight-blue clearfix">