I have issue with margin on dompdf using plain html. I have added margin-top to div but adds some extra space at the the end of element.
It works perfectly if no margin-top is added. As shown in following screenshot
As I add margin-top to div it adds extra spacing at the end of that div as shown in following screenshots. HTML is perfect but issue in generated pdf only.
HTML 1:
PDF 1:
HTML 2:
PDF 2:
I searched a lot for the issue but cannot find any solution regarding this why it adds space after the element when I use margin-top:15px; I tried margin: 15px 0 0 0; but no luck with that too.
I am using latest version of dompdf
HTML Code snippest:
*{margin:0; padding:0}
body { padding: 50px 0; margin: 0px; font-family: Georgia; }
ul{padding-left:40px; }
.resume-container {width: 90%;margin:0 auto;background-color: #fff;}
.reasume-header{width: 100%; border-bottom: 1px solid #DADADA}
.reasume-header .head{font-weight: bold;font-size: 28px;}
.small-font {font-size: 12px;}
.header{margin-top:15px; margin-bottom:0;}
h1{font-size: 20px; font-weight: bold; margin: 0px;}
.content{margin-top: 15px}
#template1 .header .title-header h1{background: #769AC2; color: #FFF; padding: 5px 0; text-align:center}
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"><title>Resume</title><style type="text/css">
</style>
</head>
<body>
<div class="resume-container" id="template1">
<div class="header w100 temp6-hidden" border="0" id="expertise_part" style="clear:both;">
<div class="w100 align-top title-header">
<h1>EXPERTISE</h1>
</div>
<div class="inner-content" style="clear:both;">
<div class="content details" style="background: #F0F0F0">
<ul>
<li>Wide range of design experience building mobile sites to E-Commerce front end sites.</li>
<li>Expert in Joomla and WordPress Customization.</li>
<li>Highly proficient in Photoshop, Illustrator, HTML5 and XSLT.</li>
<li>Experienced with social media marketing and search engine optimization.</li>
<li>Highly skilled in layout designs for print in InDesign and custom logotypes.</li>
</ul>
</div>
<div class="content details">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac massa a felis molestie blandit sed a ex. Nullam rutrum mi et ultricies pellentesque. Proin ullamcorper, nunc eget mattis pellentesque, sem urna sagittis lacus, vitae scelerisque metus mauris eu magna. Integer commodo, ipsum ac ullamcorper aliquet, mauris massa imperdiet lorem, eget consectetur turpis quam sed neque. Nulla condimentum sem tortor, non imperdiet nunc fermentum nec. Donec lacus risus, dictum nec sem at, dapibus sagittis lectus. Duis tincidunt elit eu dui placerat pretium. Aliquam elementum urna ex, vel facilisis nunc dictum sit amet.Duis volutpat tincidunt laoreet. Nullam congue, metus vitae dapibus varius, ipsum turpis sollicitudin sapien, ut faucibus tellus erat id magna. Nunc consectetur dolor vel molestie lobortis. Proin volutpat commodo metus, non luctus turpis pulvinar et. Aliquam erat volutpat. Etiam consequat imperdiet ligula. Quisque finibus, nibh sit amet posuere maximus, diam dolor volutpat lacus, ut luctus enim dolor sed urna. Donec nec enim ut risus cursus tincidunt ut et libero.
</div>
</div>
</div>
<div class="header w100 temp6-hidden" border="0" id="education_part">
<div class="w100 align-top title-header">
<h1>EDUCATION</h1>
</div>
<div class="inner-content">
<div class="w100 content " style="background: #F0F0F0">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="lft" style="width:60%">
<strong class="dt_area">ABC University</strong>
</td>
<td align="right" style="width:40%;"><strong class="dt_area">INDIA, Kerala</strong></td>
</tr>
<tr>
<td class="lft" style="width:60%"><strong class="dt_area">MCA</strong></td>
<td align="right" style="width:40%;"><strong class="dt_area"><strong class="dt_area">2/2001 - 3/2004</strong></strong></td>
</tr>
</table>
</div>
<div class="content details" style="width:100%;clear:both;font-size: 14px; font-family:Arial;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac massa a felis molestie blandit sed a ex. Nullam rutrum mi et ultricies pellentesque.<br />
Proin ullamcorper, nunc eget mattis pellentesque, sem urna sagittis lacus, vitae scelerisque metus mauris eu magna. Integer commodo, ipsum ac ullamcorper aliquet, mauris massa imperdiet lorem, eget consectetur turpis quam sed neque.<br />
Nulla condimentum sem tortor, non imperdiet nunc fermentum nec. Donec lacus risus, dictum nec sem at, dapibus sagittis lectus. Duis tincidunt elit eu dui placerat pretium. Aliquam elementum urna ex, vel facilisis nunc dictum sit amet.
</div>
</div>
</div>
</div>
</body>
</html>
Related
I cannot figure out the jscript part to show active the tab and its content based on a variable.
Code will be in asp.net core MVC. The view will receive a variable to show which tab should be shown and active.
Here is a simplified version of the code I would like to use: (ie: second tab would be shown in the jscript section).
#{
var selectedtab="tab2";
}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<section class="content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h1>To Dos & Done</h1>
</div>
<div class="col-sm-6 d-none d-sm-block">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">To Dos & Done</li>
</ol>
</div>
</div>
</div>
</section>
<section class="content ">
<div class="container-fluid ">
<div class="row">
<div class="col-12 col-sm-6">
<div class="card card-primary card-tabs">
<div class="card-header p-0 pt-1">
<ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="custom-tabs-two-home-tab" data-toggle="pill" href="#custom-tabs-two-home" role="tab" aria-controls="custom-tabs-two-home" aria-selected="false">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-two-profile-tab" data-toggle="pill" href="#custom-tabs-two-profile" role="tab" aria-controls="custom-tabs-two-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-two-messages-tab" data-toggle="pill" href="#custom-tabs-two-messages" role="tab" aria-controls="custom-tabs-two-messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-two-settings-tab" data-toggle="pill" href="#custom-tabs-two-settings" role="tab" aria-controls="custom-tabs-two-settings" aria-selected="false">Settings</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="custom-tabs-two-tabContent">
<div class="tab-pane fade show active" id="custom-tabs-two-home" role="tabpanel" aria-labelledby="custom-tabs-two-home-tab">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
</div>
<div class="tab-pane fade" id="custom-tabs-two-profile" role="tabpanel" aria-labelledby="custom-tabs-two-profile-tab">
Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
</div>
<div class="tab-pane fade" id="custom-tabs-two-messages" role="tabpanel" aria-labelledby="custom-tabs-two-messages-tab">
Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
</div>
<div class="tab-pane fade" id="custom-tabs-two-settings" role="tabpanel" aria-labelledby="custom-tabs-two-settings-tab">
Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
</div>
</div>
</div>
<!-- /.card -->
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
#section Scripts{
<script>
</script>
}
I try to test the issue on my side with the Asp.Net Core project and I could notice that the line $('#custom-tabs-two-tab a[href="#' + tab + '"]').tab('show'); is not activating the tab.
In further testing, I note that fade is also causing the issue. While using fade it is not showing the content of the tab page while using the workaround below.
If you could remove fade from your code then the below code example can help you workaround the original issue.
Modified JS code:
<script>
$(document).ready(function(){
var url = window.location.href;
var activeTab = "#custom-tabs-two-profile-tab"; // Specify tab ID here...
$(".nav-tabs li a").click(function(){
$(".nav-tabs li a").removeClass("active");
$(this).addClass("active");
$(".tab-pane").removeClass("show active");
});
$(activeTab).trigger('click');
$('#custom-tabs-two-profile').addClass("show active"); // Specify content ID here...
});
</script>
Below is your modified test code.
#{
ViewBag.Title = "FUT Player Cards";
}
<div class="content-wrapper">
<section class="content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h1>To Dos & Done</h1>
</div>
<div class="col-sm-6 d-none d-sm-block">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">To Dos & Done</li>
</ol>
</div>
</div>
</div>
</section>
<section class="content ">
<div class="container-fluid ">
<div class="row">
<div class="col-12 col-sm-6">
<div class="card card-primary card-tabs">
<div class="card-header p-0 pt-1">
<ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="custom-tabs-two-home-tab" data-toggle="pill" href="#custom-tabs-two-home" role="tab" aria-controls="custom-tabs-two-home" aria-selected="false">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-two-profile-tab" data-toggle="pill" href="#custom-tabs-two-profile" role="tab" aria-controls="custom-tabs-two-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-two-messages-tab" data-toggle="pill" href="#custom-tabs-two-messages" role="tab" aria-controls="custom-tabs-two-messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-two-settings-tab" data-toggle="pill" href="#custom-tabs-two-settings" role="tab" aria-controls="custom-tabs-two-settings" aria-selected="false">Settings</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="custom-tabs-two-tabContent">
<div class="tab-pane show active" id="custom-tabs-two-home" role="tabpanel" aria-labelledby="custom-tabs-two-home-tab">
<b>Tab-1</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
</div>
<div class="tab-pane " id="custom-tabs-two-profile" role="tabpanel" aria-labelledby="custom-tabs-two-profile-tab">
<b>Tab-2</b> Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
</div>
<div class="tab-pane " id="custom-tabs-two-messages" role="tabpanel" aria-labelledby="custom-tabs-two-messages-tab">
<b>Tab-3</b> Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
</div>
<div class="tab-pane " id="custom-tabs-two-settings" role="tabpanel" aria-labelledby="custom-tabs-two-settings-tab">
<b>Tab-4</b> Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
</div>
</div>
</div>
<!-- /.card -->
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
#section Scripts{
<script>
$(document).ready(function(){
var url = window.location.href;
var activeTab = "#custom-tabs-two-profile-tab"; // Specify tab ID here...
$(".nav-tabs li a").click(function(){
$(".nav-tabs li a").removeClass("active");
$(this).addClass("active");
$(".tab-pane").removeClass("show active");
});
$(activeTab).trigger('click');
$('#custom-tabs-two-profile').addClass("show active"); // Specify content ID here...
});
</script>
}
Output:
Note: You could notice that I have activated the second tab page.
You could modify the code as per your own requirements.
I was able to fix it using:
$(function () {
var t = '#selectedtab';
if (t.length > 0) {
$('#myTabs a[href="#' + t + '"]').tab('show');
}
});
I am working on a page with a lot of text on it, and I want to include an image. The problem is that the img is taller than the paragraph. Does anyone know how I can make the img 100% of its container?
.container {
width: 40%;
margin: 0 auto;
background: #000000;
color: #ffffff;
padding: 5px;
}
img {
float: right;
}
<body>
<p class="container">
<img src="http://via.placeholder.com/200x250"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper interdum risus eget ultrices. Morbi placerat ante nec accumsan tempus. Donec aliquam ex lectus, quis dignissim lacus tempor sit
amet. Proin varius dui sit amet enim semper, sit amet pharetra metus convallis. Cras at velit mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi dignissim elit turpis, vel pretium leo rhoncus ac. Nunc
egestas arcu non nisi volutpat sagittis. Phasellus porttitor sollicitudin tellus, vel egestas nibh ultrices nec.
</p>
</body>
The problem is that float takes the image otu of the standard flow, so you need to implement Clearfix:
1. Create the clearfix class in CSS:
Add the following CSS (Note: this it works for IE8 and higher. If you need to support older browsers, check the link above).
.clearfix:after {
content: "";
display: table;
clear: both;
}
2. Apply the clearfix to your HTML:
Add the clearfix class to the div that holds your image i.e. <p class="container clearfix">
Working Demo:
Note: I have your container width to 100% so that you can see the effect - otherwise in the small CodeSnippet window, the text was not short enough to cause the issue you describe.
.container {
width: 100%;
margin: 0 auto;
background: #000000;
color: #ffffff;
padding: 5px;
}
img {
float: right;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<body>
<p class="container clearfix">
<img src="http://via.placeholder.com/200x250"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper interdum risus eget ultrices. Morbi placerat ante nec accumsan tempus. Donec aliquam ex lectus, quis dignissim lacus tempor sit
amet. Proin varius dui sit amet enim semper, sit amet pharetra metus convallis. Cras at velit mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi dignissim elit turpis, vel pretium leo rhoncus ac. Nunc
egestas arcu non nisi volutpat sagittis. Phasellus porttitor sollicitudin tellus, vel egestas nibh ultrices nec.
</p>
</body>
I am trying to get an image to pull-right and display block when in mobile, but my image keeps cutting into my text. Can anybody help me figure out how to make the image appear on top, then the text?
Here is the link: http://o-pd.com/AP
<div class="clearfix">
<img src="http://o-pd.com/AP/img/John-Abraham.jpg" alt="John Abraham" class="pull-right img-responsive gap-left" width="200" height="200">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia pharetra lacus, id pulvinar ligula molestie et. Duis in ultricies ipsum. Etiam tellus diam, eleifend in rutrum ac, facilisis quis dolor. Nulla ex elit, malesuada vel commodo ac, volutpat nec odio. Duis ac turpis dignissim, placerat lectus quis, venenatis dui.</p>
<br/><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia pharetra lacus, id pulvinar ligula molestie et. Duis in ultricies ipsum. Etiam tellus diam, eleifend in rutrum ac, facilisis quis dolor. Nulla ex elit, malesuada vel commodo ac, volutpat nec odio. Duis ac turpis dignissim, placerat lectus quis, venenatis dui.</p>
</div>
/*we will use media query to change the direction of img*/
#media (max-width:500px){
.pull-right{
float:left !important;
}
p{
clear:both;
}
}
What's wrong with my font face here? i cant figure it out and apparently this isn't long enough
#media not print{}
body {color: #635959; font-family: news_cycle; }
header { background-color: #242323;
color: #EFEFEF;
font-family: contail_one;
}
article h3, h4 {color: #8C1018; }
article a {color: #314052;}
}
header h1 {font-size: 4em;}
figure > figcaption {font-size: 0.75em; font-style: italic;}
main figure > figcaption ::before { content: pictured above; font-weight: bold; }
article > time {float: right; font-size: 0.75em; font-weight: lighter; }
#media not print {
main > h3 {
font-size: 2em;
}
}
header {padding: 20px 50px;}
main padding: {5px 10px;}
#font-face { font-family: news_cycle; src: url('../css/news_cycle.ttf') format('truetype')}
#font-face {font-family: contail_one; src: url('../css/contail_one.ttf') format('truetype')}
article {margin: 5px 0px; padding: 5px 5px; box-shadow: 1px 1px 6px #888888}
media print {
header {padding: 0px;}
article {box-shadow: none;}
header h1 {font-size: 2em;}
header h2 {display: none;}
}
<!doctype html>
<html lang="en-us">
<head>
<title> Contoso News </title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
<header>
<h1> Contoso news </h1>
<h2> on time, on topic </h2>
</header>
<main>
<h3> Latest Articles </h3>
<article>
<time datetime="16-01-2016">`Friday, Jan 16 </time>
<h4>International Story</h4>
<p>Curabitur pharetra luctus augue, non posuere orci tristique vel. Sed posuere nisi nec lacus ullamcorper, ac vulputate nisl consequat. Nullam sollicitudin nulla vel felis faucibus aliquam. Nunc sit amet velit orci. Proin sed orci fringilla, elementum felis condimentum, convallis augue. Aliquam erat volutpat. Mauris tempus nunc sit amet aliquet bibendum. Praesent vestibulum cursus ex, quis laoreet eros consectetur ac. Ut congue libero quis mauris egestas feugiat. Sed pharetra lorem et magna fringilla, a volutpat nibh sollicitudin. Nullam sagittis sollicitudin urna, sed sollicitudin mauris ornare id. read more... </p>
</article>
<article>
<time datetime="14-01-2016">`wednesday, Jan 14 </time>
<h4>Finance Story</h4>
<p>Nullam tempor mi at libero elementum varius. Sed lobortis lacus feugiat est tristique, nec imperdiet turpis scelerisque. Ut sed urna malesuada, scelerisque dui sit amet, tempus mauris. Integer bibendum egestas urna, a bibendum sem gravida quis. Cras accumsan rhoncus vestibulum. Nam eu blandit leo. Integer at consectetur nunc, et tempus urna. Integer sit amet sollicitudin elit. Donec nec posuere erat. Sed vestibulum nisl neque, vitae tincidunt ex molestie quis. Nulla fringilla viverra turpis in volutpat. Cras vel orci quis velit efficitur ullamcorper sed eu ex. Nullam vel ex nec lectus imperdiet luctus vitae vel nibh.
</p>
<figure>
<img src="../images/img.jpg" alt="debit card">
<figcaption> New Debit Cards with Chip-Based Security. </figcaption>
</figure>
<p> Donec eleifend velit eros, eu efficitur justo molestie id. In egestas gravida lectus. Ut ipsum odio, suscipit sit amet molestie non, scelerisque sed mi. Aenean sed augue eu arcu faucibus molestie. Sed eget ante gravida, rhoncus velit eu, tempus quam. Sed fermentum at odio sed commodo. Fusce lobortis cursus purus, quis consequat est faucibus at. Etiam massa felis, sodales at sodales sed, iaculis quis arcu. <a href+"#" target="_blank"> read more... </a></p>
</article>
<article>
<time datetime="14-01-2016">`wednesday, Jan 14 </time>
<h4>Technology Story</h4>
<p>Morbi eget justo ut velit dapibus malesuada. Nunc elementum, neque quis convallis tempus, lacus ante tristique est, id porta tortor leo eget orci. Suspendisse hendrerit interdum lacus et condimentum. Mauris at ex dignissim, bibendum libero at, fermentum lectus. Maecenas porttitor purus quis augue interdum, eget malesuada neque placerat. Ut hendrerit risus in nibh elementum, quis vestibulum ipsum vulputate. Nulla facilisi. In consectetur et lacus vel tincidunt. Quisque feugiat ipsum et erat rhoncus efficitur. In in augue at enim tempor sollicitudin.<a href+"#" target="_blank"> read more... </a></p>
</article>
</main>
<h4> sign up for our emails </h4>
<summary>
<form>
<label> e-mail address: </label>
<input type="text" id="label1" name="email" required>
<label for="label2"> Delivery Preference: </label>
<select>
<option value="daily"> daily </option>
<option value="weekly"> weekly </option>
<option value="monthy"> monthly </option>
</select>
<input type="submit" value="sign-up">
</summary>
</body>
</html>
A general starting-question about Jeet, just for learning the system:
How can I get blocks lined up equally in nested blocks in Jeet Framework?
How can something like this be made, with floating width on max-width: 1450px? And within Jeet philosophy with as little id and classes as possible? On my actual site I had to use at least some classes to get there.
<html>
<head>
<style>
#container { width: 950px; margin:0 auto; padding:30px; }
#leftblock { float:left; width:610px; }
.fullwidthleft { clear:both; }
.fullwidthleft-inner { padding:30px; background:#999; }
.left { float:left; padding:30px; width:245px; background:#aaa; }
.right { float:right; padding:30px; width:245px; background:#bbb; }
#sidebar { float:right; width: 280px; padding:30px; background:#ccc; }
.fullwidth { clear:both; padding:30px; background:#ddd; }
</style>
</head>
<body>
<div id="container">
<div id="leftblock">
<div class="fullwidthleft">
<div class="left">
Leftside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
<div class="right">
Rightside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
<div class="fullwidthleft">
<div class="fullwidthleft-inner">
Fullwidth leftblock
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
</div>
<div id="sidebar">
Sidebar 1
<p>
lis purus auctor posuere. Praesent auctor dolor quis risus tempor sit amet fermentum turpis cursus.
</p>
<p>
Nullam sem dolor, porta nec ultricies eget, eleifend ut lacus? Nullam fermentum placerat erat vitae dapibus. Aliquam adipiscing hendrerit congue. Sed id scelerisque elit. Nunc scelerisque est sed odio accumsan in vehicula turpis tincidunt. Nulla facilisi. Nulla cursus lacinia elit, a lobortis tortor lobortis vel. Vestibulum sed lorem nunc. Curabitur a luctus ligula. In sit amet ullamcorper sapien? Vestibulum id ligula turpis, at sollicitudin justo. Sed ornare ligula malesuada erat molestie ut tempus ipsum molestie. Duis blandit tellus in quam ullamcorper sed fermentum ipsum varius. Nam sit amet eros eget dui condimentum congue eget nec est. In porttitor lacus nec risus molestie commodo. Praesent vitae justo nec odio dapibus sodales sit amet ultrices sem.
</p>
<p>
Nullam sem dolor, porta nec ultricies eget, eleifend ut lacus? Nullam fermentum placerat erat vitae dapibus. Aliquam adipiscing hendrerit congue. Sed id scelerisque elit. Nunc scelerisque est sed odio accumsan in vehicula turpis tincidunt. Nulla facilisi. Nulla cursus lacinia elit, a lobortis tortor lobortis vel. Vestibulum sed lorem nunc. Curabitur a luctus ligula. In sit amet ullamcorper sapien?
</p>
</div>
<div id="leftblock">
<div class="fullwidthleft">
<div class="left">
Leftside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
<div class="right">
Rightside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
<div class="fullwidthleft">
<div class="fullwidthleft-inner">
Fullwidth leftblock
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
</div>
<div class="fullwidth">
Fullwidth
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
</body>
</html>
See http://botanisk-hage-tromso.net/jeet-test.html
Jeet author here. I'm not against classes, but I don't think they need to be used for everything.
I recreated your example in about 2 minutes with a much smaller HTML/CSS footprint. Let me know if it helps or you have any further questions about it, but hopefully it gives you a better understanding of Jeet.
If you learn nth-child, you'll have a much nicer time: http://css-tricks.com/how-nth-child-works/
HTML: http://pastie.org/7949308
Stylus:
div
center()
.left_side
span(2,3)
aside
span(1,3)
padding 15px 30px
background rgba(0,0,0,.25)
article
span(1,2)
padding 15px 30px
background rgba(0,0,0,.1)
&:nth-child(3n+2)
background rgba(0,0,0,.2)
&:nth-child(3n+3)
span(1,1)
background rgba(0,0,0,.15)
.full_width
span(1,1)
padding 15px 30px
background rgba(0,0,0,.3)
h1
margin 0 0 10px
Result: http://jeetframework.com/examples/1/