I have thousands of articles with inline images like this:
<img src='...' align='left'/>
and
<img src='...' align='right'/>
I would like to add padding using CSS as follows, but it doesn't work:
img[align=left] {padding-right:10px}
img[align=right] {padding-left:10px}
This seems not supported?
This works for me (with or without quoting the value) on Win7/Chrome/8 and Win7/FF/3.6: http://jsfiddle.net/gLe3U/
You'll need to provide more details on the OS/browser/version giving you trouble, and perhaps provide a full test case (e.g. through http://jsfiddle.net)
Related
I'm having an issue where an unordered list created by data-sly-list is adding whitespace that isn't represented in the DOM or by any class. If I manually code the list rather than letting data-sly-list handle it, the whitespace isn't added.
<div class="bullets">
<ul class="columns unordered-list" id="stateList">
<div data-sly-unwrap data-sly-list.slidesNode="${resource.listChildren}">
<div data-sly-unwrap data-sly-list.states="${slidesNode.listChildren}">
<li data-sly-test="${states.valueMap.flag}">
<sly data-sly-use.htmlpaths="${'htmlpaths.js' # thePath=states.valueMap.path}" data-sly-unwrap>
${states.valueMap.name}
</sly>
</li>
</div>
</div>
</ul>
</div>
If I hardcode the list like the following, there's no whitespace
<div class="bullets">
<ul class="columns unordered-list" id="stateList">
<li>Accessibility
</li>
<li>Accessibility
</li>
<li>Accessibility
</li>
<li>Accessibility
</li>
</ul>
</div>
There's also a htmlpaths.js involved:
"use strict";
use(function() {
var path = this.thePath;
var httpRegex = /http/;
var hashRegex = /#/;
if (path !== undefined && (httpRegex.test(path) === false && hashRegex.test(path) === false)){
path = path + '.html';
}
return {
href: path
}
});
The only difference I see is that its run through Sightly iterating. Is there any fix to this? In addition to listing I'm trying to break them into columns with the following CSS
li {
width:25%;
float:left;
display:inline;
}
This works perfectly fine on the hardcoded list, but on the Sightly iterated one it creates all kind of weird spacing issues that change based on screen width
This whitespace isn't accounted for at all in the DOM. I'm not sure what to do.
More weirdness:
If the margin top is set to -9 or higher, it looks like the above screenshot. But if its set to -10 or lower, it looks like this
It's like its a breakpoint, it goes from one extreme to the other on that one pixel change. No change otherwise. It's bizarre.
It's a little weird behavior in sightly, when you have some extra spaces in your HTML code, it will display with extra spaces in the HTML.
Try to remove all the spaces in the HTML as shown below and try it.
<div class="bullets"><ul class="columns unordered-list" id="stateList"><sly data-sly-list.slidesNode="${resource.listChildren}"><sly data-sly-list.states="${slidesNode.listChildren}"><li>${states.valueMap.name}</li></sly></sly></ul></div>
You can use HTML formatter in your IDE or online tools like below to format the HTML for a readable format
https://www.freeformatter.com/html-formatter.html.
<div class="bullets">
<ul class="columns unordered-list" id="stateList">
<sly data-sly-list.slidesNode="${resource.listChildren}">
<sly data-sly-list.states="${slidesNode.listChildren}">
<li>${states.valueMap.name}</li>
</sly>
</sly>
</ul>
</div>
This should get rid of the extra spaces in your HTML.
Also, it is best to use sightly tags wherever we need some conditions to check or embed them directly in the actual div tag or html tags instead of using data-sly-unwrap.
You can also use sling models to get the required data and check all the conditions(including appending html) in the backend and send the data just to display and avoid all the conditions in sightly.
Using data-sly-unwrap or a sly tag still adds an empty line in the generated HTML. Even though most browsers ignore those spaces, they might cause issues in some cases. If you want the HTL output to look similar to your hardcoded HTML, try placing the use statement and anchor tag in a single line as shown below.
<div class="bullets">
<ul class="columns unordered-list" id="stateList" data-sly-list.slidesNode="${resource.listChildren}">
<li data-sly-repeat.states="${slidesNode.listChildren}" data-sly-test="${states.valueMap.flag}"><sly data-sly-use.htmlpaths="${'htmlpaths.js' # thePath=states.valueMap.path}">${states.valueMap.name} </sly></li>
</ul>
</div>
Also, a few tips
The sly tag doesn't need a data-sly-unwrap. It is automatically
removed in the generated HTML.
data-sly-list can be added to the parent ul tag itself instead of introducing an extra div tag and then unwrapping it.
Use data-sly-repeat instead of data-sly-list wherever possible. I was able to bring down the generated HTML of one of our complex pages from 20k lines to 12k lines, as data-sly-repeat doesn't introduce additional white spaces.
Solution
The issue is on line 7 of your HTL template:
${states.valueMap.name}
You have a space at the end of the inner HTML of your tag ;)
Unrelated
Regarding your htmlpaths.js script, are you aware of Transformers in AEM? You can use them to implement a global Link Rewriter which will fix links when a page is rendered, much like your script does. You can see an example here: https://helpx.adobe.com/experience-manager/using/aem63_link_rewriter.html
If you decide to keep htmlpaths.js, you may want to review it because I'm afraid there might be some problems with it. Of course, I don't know your requirement so it's just a suggestion :)
Instead of
<p>Hello <img src="helloworld.jpg"> World</p>
I would like to have:
<p>Hello</p><img src="helloworld.jpg"><p>World</p>
<p> has a padding of 40px and I would like the images to use all space available.
You can turn off paragraphs for all content (link), but as far as I know you can't turn it off for certain elements only.
What you can do is modify the HTML after retrieving it from the database but before outputting it. You haven't specified your server-side language, for C# I've found that CsQuery is great.
I am unsure what the best combination of CSS rules and HTML elemtents is to achieve this layout:
example layout
(Apologies for the image, it was the best way I could think of to express what I had in mind)
It is essentially a table with 2 rows and 4 columns, but I don't want to use tables.
I'm fairly confident I could hack something together that would do this but it wouldn't be elegant or optimal and I want to know the cleanest way of doing it.
Let me know if this is not clear. Thanks
Do you mean something like this?
http://jsfiddle.net/semencov/P8B4R/
Depending on what's your target audicence, consider using 1200px.com.
In case you already have your template, I made you this jsFiddle. You can start from there :)
http://jsfiddle.net/aLXby/6/
For simple layout, float all the containers ("columns") left and make sure to clearfix the parent container of those columns:
<section class="clearfix">
<figure>
<img src="img1.jpg">
<figcaption>Text here</figcaption>
</figure>
<figure>
<img src="img2.jpg">
<figcaption>Text here</figcaption>
</figure>
<figure>
<img src="img3.jpg">
<figcaption>Text here</figcaption>
</figure>
<figure>
<img src="img4.jpg">
<figcaption>Text here</figcaption>
</figure>
</section>
Your CSS might be:
(clearfix as described on linked page)
figure {
float: left;
}
For more control and structure, try a grid system, like 960.gs.
This example is assuming that your images have captions, and the HTML5 figure tag and figcaption tags are well-suited for this purpose.
The most important thing is to keep your HTML semantic. So there's no "HTML best suited for this layout" but rather HTML best suited for that content. In this case it's what Matt suggests (figure and figcaption). I would probably use a list (ul with li) rather than section though.
Regarding the styling, there are numerous ways to achieve that layout. Depending on your specific needs (are the images equal height? equal width? what about the captions? one line? several lines? etc) you might get by using floats, you could also use display: inline-block and if you really want to replicate a table you can use display: table/table-row/table-cell.
Edit: I'd argue that using a grid system for this is like using an MVC framework to display an animated gif. All grid systems I've seen require the user to add quite a load of divs and classes that ruin your markup.
margin-left: 100 + 20%;
I want to do something the same as above. But CSS does not have any format. How can I successfully use these together ?
Without javascript? Only by wrapping that content into another element (usually <div>) and splitting that margin to two elements.
Something like:
<div style="margin-left:20%">
<div style="margin-left:100px">
<!-- content -->
</div>
</div>
Hi there and welcome to StackOverflow. Unfortunately CSS doesn't have this (good) behaviour, but LESS will. For a JavaScript implementation, look here. If you want a PHP implementation, look here. You may be confused as to why I'm talking about JS and PHP, but what LESS will do is take your .less file and turn it into a vanilla CSS file, either on the client (JS), or on your server (PHP).
I'm working with client's CMS and it's adding images like this and i can't change this.
I tried IE7.js but it's not working
<img src="~/imagefolder/CF88B05B445A4D008806C8B3E2830679.png?w=400&h=300&as=1" />
Unless whatever code runs behind imagefolder dislikes additional, unknown arguments, you might be able to trick the IE hack into thinking it's a .png:
<img src="~/imagefolder/CF88B05B445A4D008806C8B3E2830679.png?w=400&h=300&as=1&dummy=.png" />