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
Related
markup 1: -
below I've created "about section" block. in this block have some mini blocks like:- stats and features.
` <section class="about">
<div class="about__container">
<div class="about__header">
<h2 class="about__title">about title</h2>
<p class="about__sub-title">about sub title </p>
</div>
<div class="about-stats">
<div class="about-stats__item">
<div class="about-stats__title">stats title</div>
<div class="about-stats__sub-title">stats sub title</div>
</div>
</div>
<div class="about-features">
<div class="about-features__item">
<div class="about-features__icon">features icon </div>
<div class="about-features__title">features title </div>
</div>
</div>
</div>
</section>`
Question from about code:-
Should i need to create new css file to each block like about.css, about-stats.css and about-features.css or create one file for this block about.css ?
markup: 2
`<section class="about">
<div class="about__container">
<div class="about__header">
<h2 class="about__title">about title</h2>
<p class="about__sub-title">about sub title </p>
</div>
<div class="about__stats about-stats">
<div class="about-stats__item">
<div class="about-stats__title">stats title</div>
<div class="about-stats__sub-title">stats sub title</div>
</div>
</div>
<div class="about__features about-features">
<div class="about-features__item">
<div class="about-features__icon">features icon </div>
<div class="about-features__title">features title </div>
</div>
</div>
</div>
</section>`
question from above code:-
should we mix child blocks with parent block or markup 1 is good ?
I have a nested list and each list item works like a table row (using flex). The nested items i.e. rows are indented from the left so the width is different at different levels. It currently has tree levels but this may change at some point.
I want to:
Align all "columns" other than first one, on a single verticle line, and
Apply % widths on the columns excepts first one.
So far, I have only been able to achieve the alignment part using fixed pixel widths. But I really need to set the column .second and .third width based on % of top-most ul, otherwise the columns would not align perfectly. Fixed pixel widths aren't good for responsiveness.
I have two options in my mind:
Removing the left margin on list items and adding left-margin on .first. But this would mean manually adding borders on each "cell" and also some other code duplication.
Maybe there is a way to use CSS calc() somehow. With recursively rendered list, this seems quite complicated though. I am using this markup in a React.js component and I need to pass the level as prop and then use calc() in inline style. Doesn't look clean.
ul {
list-style-type: none;
padding: 0;
margin-left: 2rem;
}
.row {
display: flex;
border: 1px solid gray;
}
.first {
flex-grow: 1;
}
.second,
.third {
width: 200px;
}
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
I found a simple workaround. For my use case, simply setting the width of the columns to percentage of viewport does the job. i.e. width: 25vw
Now looks nice on both narrow and wider screens. Also quite happy with the browser support: https://caniuse.com/viewport-units
Please compare with above snippet on "Full page" view to see column widths are responsive on this one and are not responsive in the question snippet.
ul {
list-style-type: none;
padding: 0;
margin-left: 2rem;
}
.row {
display: flex;
border: 1px solid gray;
}
.first {
flex-grow: 1;
}
.second,
.third {
width: 25vw;
}
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
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 wrote a website for a travel based start up. It is a static website, not a responsive website. The code is here.
Code:
<div id="mainDiv" class="container">
<div id="header">
<div class="plc">
<h1></h1>
<nav>
<div id="navPos">
<div style="position: relative;right: 113px;">Register</div>
<div style="position: absolute;right: 255px;top: 37px;">Login</div>
<div style="position: absolute;top: 38px;right: 123px;">Market</div>
</div>
</nav>
</div>
</div>
<div id="body" class="container-fluid">
<div id="container">
<div id="overlay"></div>
<div id="menu"></div>
<div id="info">Fill your information here</div>
<div id="formPos"></div>
<div id="or">OR</div>
<div id="fbReg">
<img src="images/fbOne.png" id="fbIcon">
<div id="fbPos">Register with Facebook</div>
</div>
<div id="gReg">
<img src="images/gPlus.jpg" id="gIcon">
<div id="gPos">Register with Google</div>
</div>
<div id="cliPos">
<img src="images/Bistip-in-media.png" id="imgCli">
</div>
</div>
</div>
<div id="footer">
<div id="aboutUs">
About Us
</div>
<div id="aboutList">
<ul>
<li>About us</li>
<li>Media reviews</li>
<li>Bistip guide</li>
</ul>
</div>
<div id="accountInformation">
Account Information
</div>
<div id="accountList">
<ul>
<li>How to login</li>
<li>Create an account</li>
<li>Logout</li>
<li>Join us</li>
</ul>
</div>
<div id="marketInformation">
Market Information
</div>
<div id="marketList">
<ul>
<li>Shop</li>
<li>Shipping</li>
<li>My connection</li>
</ul>
</div>
</div>
</div>
Website in full screen browser appears like this:
Browser is resized like this:
You can see that elements are mixed up. How can I fix this?
This is because you are using position absolute in some elements.
You could try to use bootstrap.css and take off all the positions that you are using.
I wonder how to reorganize the following html structure into HTML5 structure Semantically ? I'm thinking to place in section, figure and dl but no idea how to organize it correctly. Hope someone experience with HTML 5 semantic structure can show me the correct way. Thanks.
<div class="product-list">
<h1>Product Category A</h1>
<div class="item odd">
<div class="inner">
<div class="image"><img src="img/product.jpg"></div>
<div class="title">Product 1
<span>Sub title 1</span>
</div>
<div class="desc">
<div class="col-left">Lorem ipsum</div>
<div class="col-right">Price: 50</div>
</div>
</div>
</div>
<div class="item even">
<div class="inner">
<div class="image"><img src="img/product.jpg"></div>
<div class="title">Product 2
<span>Sub title 2</span>
</div>
<div class="desc">
<div class="col-left">Lorem ipsum</div>
<div class="col-right">Price: 70</div>
</div>
</div>
</div>
<div class="item even">
<div class="inner">
<div class="image"><img src="img/product.jpg"></div>
<div class="title">Product 3
<span>Sub title 3</span>
</div>
<div class="desc">
<div class="col-left">Lorem ipsum</div>
<div class="col-right">Price: 20</div>
</div>
</div>
</div>
</div>
HTML5 is simply a specification. It introduces a new set of elements. So, in advising you in "converting an HTML structure" into HTML5, I'd suggest you take a look at the new tags and use them.
I see a lot of div tags in your current markup. An HTML5 compliant site wouldn't look like this. Check out this.
To give you a starting point, this sample uses many of the new tags and would be considered HTML5 compliant:
<!DOCTYPE html>
<head></head>
<body>
<nav>
<li></li>
<li></li>
</nav>
<main>
<section></section>
<article></article>
</main>
</body>
</html>