I know this can be done, but I don't seem to be getting it.
Here's the HTML I have:
<div class="row">
<div class="large-9 small-9 columns">
<div class="section-container auto" data-section="" style="">
<section class="active" style="padding-top: 50px;">
<p class="title" data-section-title="" style="left: 182px;">
<a href="#panel2">
Accounts
</a>
</p>
<div class="content" data-section-content="">
<div id="accountSearchResults" style="">
<div class="row">
<div class="large-5 small-5 columns"><p>A long name</p></div>
<div class="large-1 small-1 columns"><p>Data</p></div>
<div class="large-1 small-1 columns"><p>Data</p></div>
I would expect this to output something like this:
________
|Accounts|
--------------------------------------------------
|A long name |Data |Data |
--------------------------------------------------
But instead, I'm getting:
________
|Accounts|
--------------------------------------------------
|A long name |Data |Data |
--------------------------------------------------
It seems like my div row is not properly nested in my div section-container.
How can I correct this?
large-1 just wasn't large enough for my data, and that was throwing it all off. large-2 worked.
Related
I have downloaded the template : http://keenthemes.com/preview/megakit/
On the index page there is a parallax :
<div class="js__parallax-window" style="background: url(img/1920x1080/04.jpg) 50% 0 no-repeat fixed;">
<div class="container g-text-center--xs g-padding-y-80--xs g-padding-y-125--sm">
<p class="text-uppercase g-font-size-14--xs g-font-weight--700 g-color--white-opacity g-letter-spacing--2 g-margin-b-50--xs">Testimonials</p>
<div class="s-swiper js__swiper-testimonials">
<!-- Swiper Wrapper -->
<div class="swiper-wrapper g-margin-b-50--xs">
<div class="swiper-slide g-padding-x-130--sm g-padding-x-150--lg">
<div class="g-padding-x-20--xs g-padding-x-50--lg">
<div class="g-margin-b-40--xs">
<p class="g-font-size-22--xs g-font-size-28--sm g-color--white"><i>" I have purchased many great templates over the years but this product and this company have taken it to the next level. Exceptional customizability. "</i></p>
</div>
<div class="center-block g-hor-divider__solid--white-opacity-lightest g-width-100--xs g-margin-b-30--xs"></div>
<h4 class="g-font-size-15--xs g-font-size-18--sm g-color--white-opacity-light g-margin-b-5--xs">Jake Richardson / Google</h4>
</div>
</div>
<div class="swiper-slide g-padding-x-130--sm g-padding-x-150--lg">
<div class="g-padding-x-20--xs g-padding-x-50--lg">
<div class="g-margin-b-40--xs">
<p class="g-font-size-22--xs g-font-size-28--sm g-color--white"><i>" I have purchased many great templates over the years but this product and this company have taken it to the next level. Exceptional customizability. "</i></p>
</div>
<div class="center-block g-hor-divider__solid--white-opacity-lightest g-width-100--xs g-margin-b-30--xs"></div>
<h4 class="g-font-size-15--xs g-font-size-18--sm g-color--white-opacity-light g-margin-b-5--xs">Jake Richardson / Google</h4>
</div>
</div>
<div class="swiper-slide g-padding-x-130--sm g-padding-x-150--lg">
<div class="g-padding-x-20--xs g-padding-x-50--lg">
<div class="g-margin-b-40--xs">
<p class="g-font-size-22--xs g-font-size-28--sm g-color--white"><i>" I have purchased many great templates over the years but this product and this company have taken it to the next level. Exceptional customizability. "</i></p>
</div>
<div class="center-block g-hor-divider__solid--white-opacity-lightest g-width-100--xs g-margin-b-30--xs"></div>
<h4 class="g-font-size-15--xs g-font-size-18--sm g-color--white-opacity-light g-margin-b-5--xs">Jake Richardson / Google</h4>
</div>
</div>
</div>
<!-- End Swipper Wrapper -->
<!-- Arrows -->
<div class="g-font-size-22--xs g-color--white-opacity js__swiper-fraction"></div>
<!-- End Arrows -->
</div>
</div>
</div>
The Parallax image is basically defined with properties in the line :
<div class="js__parallax-window" style="background: url(img/1920x1080/04.jpg) 50% 0 no-repeat fixed;">
Now to use the same in django I changed the url of the image to following:
<div class="js__parallax-window" style="background: url({% static 'img_events/1920x1080/04.jpg' %}) 50% 0 no-repeat fixed;" >
The only problem the parallax is not working properly in this case, the parallax image size should only be 50% but it causes a mismatch in the height and placement of the testimonials and the background image whereas the same code works in the template
The only problem here was that <!DOCTYPE html> was not included at the beginning of the page.
I know there are many questions on this topic, but most are fairly trivial and
I'm unable to find a solution for my case.
I have a set of HTML files with many, many "media" items like the following,
each of which is a "paragraph", separated by "\n\n". Here is a link to a sample file of the type I'm working on.
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="4_17-HE-assoc.png" width="250" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Figure 4.17</h4>
Association plot for the hair-color eye-color data. Left: marginal table, collapsed over
gender; right: full table.
</div>
</li>
For each <img ...> tag, I need to find the src="file" value, and replace the href="#" on the previous line
by href="file" class="fancybox. i.e., so that item will then look like
<li class="media">
<div class="media-left">
<a href="4_17-HE-assoc.png" class="fancybox">
<img class="media-object" src="4_17-HE-assoc.png" width="250" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Figure 4.17</h4>
Association plot for the hair-color eye-color data. Left: marginal table, collapsed over
gender; right: full table.
</div>
</li>
I tried the following as a one-liner, but it has no effect, i.e., it doesn't make the changes.
perl -pi~ -e '$/ = "";s|<a href="#">\n(\s*<img class="media object") src=(".*png")|<a class="fancybox" href="\2">\n\1 src=\2|ms' ch03.html
Can someone help with this? I'd be happy with a simple script that I could
use for this and modify for other similar modifications of a collection of web files.
edit: I'm aware of the advantages of using perl modules such as HTML::TreeBuilder to avoid having to parse HTML directly. If someone
could give me a start, I could probably take it from there.
use XML::LibXML qw( );
my $qfn = 'ch03.html';
my $in_qfn = $qfn . "~";
my $out_qfn = $qfn;
rename($qfn, $in_qfn)
or die("Can't rename \"qfn\": $!\n");
my $parser = XML::LibXML->new();
my $doc = $parser->parse_html_file($in_qfn);
for my $a_node ($doc->findnodes('//a[#href="#"]')) {
my ($src_node) = $a_node->findnodes('img[1]/#src')
or next;
$a_node->setAttribute('href', $src_node->value());
$a_node->setAttribute('class', 'fancybox');
}
my $html = $doc->toStringHTML();
open(my $fh, '>', $out_qfn)
or die("Can't create \"$out_qfn\": $!\n");
print($fh $html);
Tested:
$ diff -u ch03.html{~,}
--- ch03.html~ 2016-01-20 12:41:30.809203040 -0800
+++ ch03.html 2016-01-20 12:41:31.009201042 -0800
## -1,7 +1,7 ##
-<div class="contents">
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body><div class="contents">
<h1 class="tocpage">Chapter 3: Fitting and Graphing Discrete Distributions</h1>
<hr class="tocpage">
-
<div class="row">
<div class="col-md-6">
<!-- prelude-inserted -->
## -18,7 +18,7 ##
<div class="col-md-6">
<h3>Contents</h3>
<dl class="chaptoc">
- <dd>3.1. Introduction to discrete distributions</dd>
+<dd>3.1. Introduction to discrete distributions</dd>
<dd>3.2. Characteristics of discrete distributions</dd>
<dd>3.3. Fitting discrete distributions</dd>
<dd>3.4. Diagnosing discrete distributions: Ord plots</dd>
## -27,8 +27,7 ##
<dd>3.7. Chapter summary</dd>
<dd>3.8. Lab exercises</dd>
</dl>
-
- </div>
+</div>
</div>
<!-- more-content -->
## -38,11 +37,10 ##
<h3>Selected figures</h3>
<a class="btn btn-primary" href="../../Rcode/ch03.R" role="button">view R code</a>
<ul class="media-list">
- <li class="media">
+<li class="media">
<div class="media-left">
- <a href="#">
- <img class="media-object" src="saxony-barplot.png" width="250" alt="males in Saxony families">
- </a>
+ <a href="saxony-barplot.png" class="fancybox">
+ <img class="media-object" src="saxony-barplot.png" width="250" alt="males in Saxony families"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Figure 3.2</h4>
## -52,9 +50,8 ##
<li class="media">
<div class="media-left">
- <a href="#">
- <img class="media-object" src="dbinom2-plot2-1.png" width="250" alt="Binomial distributions">
- </a>
+ <a href="dbinom2-plot2-1.png" class="fancybox">
+ <img class="media-object" src="dbinom2-plot2-1.png" width="250" alt="Binomial distributions"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Figure 3.9</h4>
## -64,9 +61,8 ##
<li class="media">
<div class="media-left">
- <a href="#">
- <img class="media-object" src="dpois-xyplot2-1.png" width="250" alt="Poisson distributions">
- </a>
+ <a href="dpois-xyplot2-1.png" class="fancybox">
+ <img class="media-object" src="dpois-xyplot2-1.png" width="250" alt="Poisson distributions"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Figure 3.11</h4>
## -76,9 +72,8 ##
<li class="media">
<div class="media-left">
- <a href="#">
- <img class="media-object" src="Fed0-plots2-1.png" width="250" alt="Hanging rootogram">
- </a>
+ <a href="Fed0-plots2-1.png" class="fancybox">
+ <img class="media-object" src="Fed0-plots2-1.png" width="250" alt="Hanging rootogram"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Figure 3.15</h4>
## -89,9 +84,8 ##
<li class="media">
<div class="media-left">
- <a href="#">
- <img class="media-object" src="ordplot1-1.png" width="250" alt="Ord plot for the Butterfly data">
- </a>
+ <a href="ordplot1-1.png" class="fancybox">
+ <img class="media-object" src="ordplot1-1.png" width="250" alt="Ord plot for the Butterfly data"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Figure 3.18</h4>
## -100,9 +94,10 ##
</div>
</li>
- </ul> <!-- media-list -->
- </div> <!-- col-md-12 -->
+ </ul>
+<!-- media-list -->
+</div> <!-- col-md-12 -->
<!-- footer -->
</div> <!-- row -->
-</div>
+</div></body></html>
I couldn't resist but write this one-off, super unstable, sends-me-to-parse-html-with-regex-hell sed command:
sed -i.bak '/<a href="#"/ {
N
/\n.*<img class=/ {
s/^\( *<a href="\).*\(\n.*src="\)\([^"]*\)\(.*\)/\1\3" class="fancybox">\2\3\4/
}
}' ch03.html
This looks for a line with href="#", appends the next line and then substitutes the filename and fancybox into the a tag.
Diffing the result and the input file:
43c43
< <a href="#">
---
> <a href="saxony-barplot.png" class="fancybox">
55c55
< <a href="#">
---
> <a href="dbinom2-plot2-1.png" class="fancybox">
67c67
< <a href="#">
---
> <a href="dpois-xyplot2-1.png" class="fancybox">
79c79
< <a href="#">
---
> <a href="Fed0-plots2-1.png" class="fancybox">
I have a saved HTML page which I've opened in notepad++. I would like to extract all the attach points out of the html file. Example from the HTML below:
<div class="contentBar">
<div class="banner" style="">
<span class="bannerRepeat"></span>
<span class="bannerDecal"></span>
</div>
<div>
<div class="logo" data-dojo-attach-point="pageLogoPt">
ABC
</div>
<div class="title" data-dojo-attach-point="pageTitlePt">
ABC
</div>
<div class="userPane">
<div>
<span class="LoginCell LoginText"><span data-dojo-attach-point="welcomeBlockPt">Welcome</span>, <b data-dojo-attach-point="usernameBlockPt">User Name</b></span>
<span widgetid="acme_Button_0" id="acme_Button_0" class="LoginCell Button" data-dojo-type="acme.Button" data-dojo-props="size: 'small'" data-dojo-attach-point="logOutButtonPt"><span widgetid="dijit_form_Button_0" class="dijit dijitReset dijitInline dijitButton ButtonSmall" role="presentation"><span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:__onClick" role="presentation"><span style="-moz-user-select: none;" aria-disabled="false" id="dijit_form_Button_0" tabindex="0" class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_0_label"><span class="dijitReset dijitInline dijitIcon dijitNoIcon" data-dojo-attach-point="iconNode"></span><span class="dijitReset dijitToggleButtonIconChar">●</span><span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_0_label" data-dojo-attach-point="containerNode">Logout</span></span></span><input value="" class="dijitOffScreen" data-dojo-attach-event="onclick:_onClick" tabindex="-1" role="presentation" aria-hidden="true" data-dojo-attach-point="valueNode" type="button"></span></span>
</div>
<div>
<span id="printLink" style="display:none;">Print</span>
<span id="zoomPercentageDisplay"><span data-dojo-attach-point="zoomBlockPt">Zoom</span>: 100%</span>
<span id="smallFontSizeLink" style="font-size: .8em;">A</span>
<span id="defaultFontSizeLink" style="font-size: 1em;">AA</span>
<span id="largeFontSizeLink" style="font-size: 1.2em;">AAA</span>
</div>
</div>
</div>
</div>
I would like to get:
pageLogoPt
pageTitlePt
welcomeBlockPt
usernameBlockPt
etc ...
Is this possible? Thanks
You can do the following:
Replace (data-dojo-attach-point="[^"]+)(?=") with \n\1\n. This will put what you're looking for on separate lines.
Mark All based on the regex data-dojo-attach-point="[^"]+. Tick "Bookmark line" checkbox.
Search -> Bookmark -> Remove Unmarked Lines
Replace data-dojo-attach-point=" with blank.
This will give you your list with each item in its own line.
Tested on Notepad++ 6.8.8.
Inspired by https://superuser.com/questions/477628/export-all-regular-expression-matches-in-textpad-or-notepad-as-a-list.
I'm working with Foundation 5, none of my own custom styles. I'm linking, in order, app.css, modernizr.js, jQuery, Fastclick, and foundation.min.js.
I have followed instructions in my tutorial ("Lynda: Up and Running With Foundation") and on the Zurb website for creating a nested row, but there's a problem: the last cell in the row always jumps itself over by a small amount, throwing off not just the text flow but the entire page layout. On mobile devices, this small nudge means that the page can be swiped side to side.
Here's a screenshot of what I'm talking about.
My HTML is
<div class="row">
<div class="large-6 columns panel callout">
<h2>Our Mission</h2>
...text...
</div>
<div class="large-3 columns">
<h3>We're Awesome.</h3>
text
</div>
<div class="large-3 columns">
<h3>Buy From Us!</h3>
text
</div>
<div class="row">
<div class="large-3 columns">
<h3>Good Products?</h3>
text
</div>
<div class="large-3 columns">
<h3>"Licensed"</h3>
text
</div>
</div>
</div>
What have I done wrong? I can't see any information on Google or StackOverflow about this, I've gone over the code carefully, I've torn it down and rewritten it from scratch following code samples... I just don't get what I've missed.
So, although using large-3 columns approximates the correct output you need a little bit different structure. There are many ways to do things, but the thing to remember, is that if you are using a grid or a nested grid, all the columns must add up to 12 columns total. In your case you have a nested grid that adds up to 6. This will give you inconsistant output unless you intent for part of the column to be empty. In that case you can use the .end presentational class to force it to float left.
Here is a set of nested grids that approximates what I think you are going for.
<div class="row">
<div class="large-6 columns panel callout">
<h2>Our Mission</h2>
text
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-6 columns">
<h3>We're Awesome.</h3>
text
</div>
<div class="large-6 columns">
<h3>Buy From Us!</h3>
text
</div>
</div>
<div class="row">
<div class="large-6 columns">
<h3>Good Products?</h3>
text
</div>
<div class="large-6 columns">
<h3>"Licensed"</h3>
text
</div>
</div>
</div>
</div>
I'm using the CSS Framework Foundation and when I write the following code:
<div class="row">
<div class="two mobile-one columns"><label for="invoiceterm-summary" class="right inline">Become late <span class="required">*</span></label></div>
<div class="ten mobile-three columns"><input class="one" id="invoiceterm-late" name="invoiceterm[late]" type="text" value=""> days after invoice sent</div>
</div>
I get this :
But I want to display the text "days after invoice sent" like this:
You should place all of these elements into a single:
<div class="row">
<div class="twelve mobile-four columns"></div>
</div>
Otherwise it is behaving correctly, stacking the columns as the screen size is reduced.
I had to remove the display: block property from the css definition of the input[type="text"] on the foundation.css file