My other question about layout the text correctly on the webpage. I would like to write RSS code and then use XSL to format the RSS into HTML
My question:
Why the text of the ITEM DESCRIPTION run out of the margin of the webpage? HOw to force that piece of text maintain inside the margin?
Run out of margin http://i40.photobucket.com/albums/e236/ngquochung86/somemargin.jpg
My XML CODE:
<channel>
.......
<description>
CHANNEL DESCRIPTION: Website of New York Times
</description>
<item>
<title>
ITEM TITLE:YouTube and Universal to Create a Hub for Music
</title>
<link>
<a href="http://www.nytimes.com/2009/04/10/technology/internet/10google.html?ref=technology"/>
</link>
<description>
CHANNEL DESCRIPTION: The agreement is an effort by YouTube, which is owned by Google, to put more professionally produced content in front of its huge audience, and in turn, earn more money from advertising.
</description>
</item>
My XSL code:
<span class="channelDescription"> <xsl:value-of select="channel/description"/></span>
<xsl:for-each select="channel/item">
<span class="itemTitle"><xsl:value-of select="title"/></span>
<span class="itemLink"><xsl:value-of select="link"/></span>
<span class="itemDescription"><xsl:value-of select="description"/></span>
</xsl:for-each>
Would you please help me? Thank you
Like AnthonyWJones said, this seems like a CSS/HTML question. Once you use XSLT to transform the RSS feed into HTML, it is simply treated (and thus rendered) as a standard HTML document.
My best guess at this point is that you need to put a container (a block level element such as <DIV>) around the description (or the whole document) and specify a width for it that is within the dimensions of the display using CSS.
So something like this should work:
<style type="text/css">
#container {
width: 90%;
}
</style>
<div id="container">
// Your XSL code
</div>
Related
Here is a list of the research that I have done. First I looked how to do it on the internet and I found this site.
Then I asked a friend and he suggested that I do this with the code, and as an example, gave this:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
so in HTML
<h1 class"best-header-ever"> Header </h1>
then in CSS
.best-header-ever {
color: blue;}
I don't know if he was doing it in the right order so the above, is the most information I have of an alternative strategy
Now I am working on this, again in the WordPress editor:
.best-header-ever{color: blue;}
<header> header
link rel="stylesheet" type=text/css href=styles.css
[header/]
(this text to the left was part of the website-->)This is a contact page with some basic contact information and a contact form.
[contact-form]<span id="mce_SELREST_start" style="overflow:hidden;line-
height:0;"></span>[contact-field label="Name" type="name" required="1"/]
[contact-field label="<span id="mce_SELREST_start"
style="overflow:hidden;line-height:0;"></span> Email" type="email"
required="1"/][contact-field label="Website" type="url"/][contact-field
label="Comment" type="textarea" required="1"/][/contact-form]
body/
I don't know what I'm doing wrong and I would like to add background colour to the font and text. Oh, I have also been working on freecodecamp.org as research.
I am trying to learn how to do this work without the security net of freecodecamp to improve my skills.
Also, I don't know if I can even add HTML5 to HTML (everything from contact form to /contact form was being registered by the computer, but when I added any other characters, no background colours or colours would display).
This is what the page looks like:
myedit_pic
I don't know if this makes a difference, but the WordPress editor has buttons:
wordpress-editor-interface
I suggest you use background-color: instead of color:. Color will just change the text color, or the color of the words inside that header. Using background-color will change the background color.
First to answer your initial question:
When you assign a class in HTML, make sure to put an equals sign between 'class' and the name of the class in quotes:
This:
<h1 class"best-header-ever"> Header </h1>
Becomes:
<h1 class="best-header-ever"> Header </h1>
Also, to address your issue about how to learn and test your code, I suggest using something like jsfiddle.net. You can test HTML, CSS, and Javascript (when you are ready for that) and see the results live.
Hi I am trying to vailidate a page. i am getting the error:
Line 1, Column 7058: Stray end tag head.
…er:'2045-wpf-id',});});</script></head><body class="custom-background customiz…
My webpage source looks like this:
<?php wp_head(); ?>
</head>
Obviously i need this tag but do i need to remove the tag?
thankyou for any help
http://validator.w3.org/check?uri=http%3A%2F%2Flifeworksphotography.com.au%2Flifeworks%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&No200=1&verbose=1&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices
As i checked this page, Your <head> tag is not opening.
You have to first open the <head> tag and then close it before starting the <body> tag.
There are two errors in your code. First, there's this part in your head section:
<div id="2045-wpf">
<a title="Lifeworks Photography Videos" href="http://lifeworksphotography.com.au/lifeworks/video/">
<img class=" wp-image-730 alignleft" alt="lifeworks photography video" src="http://lifeworksphotography.com.au/lifeworks/wp-content/uploads/2014/03/video22.png" width="20" height="62"/>
</a>
</div>
It isn't allowed to be there and might be the reason why your head breaks and your code won't validate. You should find out which plugin or part of your template is responsible for it and if possible put it where it belongs (I don't know what function it has).
Secondly, there are "Read more" links with this markup:
Read more
It's supposed to be "font-weight: normal;". I guess it won't break your template, but it should get fixed too.
Hope this helps :)
I am using rich snippets on my site, I have all of the code for them in the footer so that they are centrally located and easy to access. I do not want the text around these snippets rendered on the page because that info is elsewhere on the site. Is it ok to hide this text by using style="display:none" or will Google ignore the rich snippet entirely because the fields are hidden?
<!-- start rich snippet code -->
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="name" style="display:none">My Business Name</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress" style="display:none">123 Example Street, Suite 456</span>
<span itemprop="addressLocality" style="display:none">Major City</span>
<span itemprop="addressRegion" style="display:none">NY</span>
<span itemprop="postalCode" style="display:none">12345</span>
<span itemprop="addressCountry" style="display:none">US</span>
</div>
<span itemprop="telephone" style="display:none">(123) 456-7890</span>
<a itemprop="URL" style="display:none">http://www.mycompanysite.com/</a>
</div>
<!-- end rich snippet code -->
Any info would be much appreciated! Thanks in advance!
As #Diodeus said, ideally you'd have these rich snippets on the actual info that is shown to the user elsewhere on the site. Duplicating it is usually unnecessary.
Yes, Google may well ignore this content based on the display:nones. Can I ask why you're setting it on each element rather than just once on the highest level div?
A way around the display:none potential SEO issue would be to hide it in a different way. For example give the parent div a class of .visuallyhidden and add this to your stylesheet:
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
I would like to mention that Google tries heavily (using combination of algorithmic and manual things) to find websites which illegitimately use hidden text.
The typical penalty for that would be a removal from index for 30 days. However, you should not be concerned if you use hidden fields legitimate ways.
There is a very nice article Eric Enge Interviews Google's Matt Cutts regarding Google attitude toward illegitimately use of hidden text.
Have a look at this: https://sites.google.com/site/webmasterhelpforum/en/faq-rich-snippets and search for the word 'tempting'.
' It can be tempting to add all the content relevant for a rich snippet
in one place on the page, mark it up, and then hide the entire block
of text using CSS or other techniques. Don't do this! Mark up the
content where it already exists. Except in special circumstances ... '
It might seem like a clever idea to hide elements in a more complex way than by just display:none but, and i guess the same can be applied for hidden honeypot form fields, you are not the only one who can think of that.
Note: It is as easy to determine if a field is hidden by display:none as it is by margin:0; padding:0; width:1px; height:1px; overflow:hidden or by position:absolute; top:-[a value bigger than the page height]px or by something similar.
People would rich-snippet everything as an Apple product page if it would be ok to hide the snippet and provide any other kind of information on the porn - i mean page.
You got all that information already hanging out on the site, so just add the correct microdata tags to the corresponding text passages and google (other search engines, too by the way) will be happy.
So, for example, if your main page title already exists, put the itemprop="description" tag in the <div> tag thats is wrapping the title and you should be fine.
:)
I am trying to use the anchor button in a RTF field of a Component, and getting unexpected behavior. Using the Chrome Browser from the design view, I highlight/select the heading (i.e. <h2>My Heading</h2>) I want to use as an anchor, and press the anchor button and enter the anchor name (i.e. my_place).
This results in the following code being displayed in my source tab:
<a name="my_place" id="myplace"/><h2>My Heading</h2>
This causes render problems when displaying the HTML in a browser due to the self closing <a/> tag.
I would have expected one of the following three HTML fragments being inserted into the HTML source:
<a name="my_place" id="myplace"><h2>My Heading</h2></a>
or
<h2><a name="my_place" id="myplace">My Heading</a></h2>
or
<a name="my_place" id="myplace"><a><h2>My Heading</h2>
Has anyone else experienced this? or know of a way to achieve what I had expected (without manually editing the HTML). Or is this a bug in the current version of the product.
Attached is my sample XSLT template:
<template match="a[(#name) and (count(node()) = 0)]">
<copy>
<apply-templates select="#*"/>
<xhtml:span xmlns:xhtml="http://www.w3.org/1999/xhtml" class="hidden"> </xhtml:span>
</copy>
</template>
This adds a bit more than strictly needed, but handles some other issues we have due to XML manipulation on the Content Delivery side.
Essentially it matches all empty a tags with a name attribute, and add something between them in order to stop them self closing. In our case we post process all of the XML with XSLT, so we have challenges with empty tags getting closed all the time. So as a dirty hack, we are now inserting a hidden span tag between empty tags to prevent the issue.
Thanks Chris, I've edited your solution to fit my requirements so wanted to share for anyone with this issue in the future.
Note: This moves the text inside the anchor and deletes the text outside. Fixes anchors that were intended to contain text only, not html. i.e
My solution fixes this tag:
<p><a name="anchor1" id="anchor1"></a>Anchor text</p>
To
<p><a name="anchor1" id="anchor1">Anchor text</a></p>
But not this:
<p><a name="anchor1" id="anchor1"></a><h1>Anchor text</h1></p>
Here's my xsl. Hopefully it will help give you a base, I'm sure you could easily update it to look for a following tag (I don't require this for my solution).
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output omit-xml-declaration="yes" method="html" cdata-section-elements="script"/>
<xsl:template match="/ | node() | #*">
<xsl:copy>
<xsl:apply-templates select="node() | #*"/>
</xsl:copy>
</xsl:template>
<!-- fixes Tridion bug when using interface button to insert anchor in rich text field -->
<!-- gets all empty anchor tags with an id and takes any following text and copies it inside anchor -->
<xsl:template match="a[(#id) and (count(node()) = 0)]">
<xsl:copy>
<xsl:for-each select="#*">
<xsl:attribute name="{name(.)}">
<xsl:value-of select="."/>
</xsl:attribute>
</xsl:for-each>
<xsl:value-of select="normalize-space(following-sibling::text())"/>
</xsl:copy>
</xsl:template>
<!-- delete any text after an empty anchor (template above has already copied this text inside the anchor) -->
<xsl:template match="text()[preceding-sibling::a[(#id) and (count(node()) = 0)]]" ></xsl:template>
</xsl:stylesheet>
Here's my test XML
<?xml version ="1.0"?>
<?xml-stylesheet type="text/xsl" href="tridionhtmlfield.xsl"?>
<html>
<head></head>
<body>
<p><a id="anchorlink" name="anchorlink" title="Anchor link" href="#Anchor">Anchor link</a>Some text after</p>
<p><a name="broken-with-html-name" id="broken-with-html-id"></a><h1>Anchor - broken with html</h1></p>
<p><a name="broken-text-only-name" id="broken-text-only-id"></a>Anchor - broken text only</p>
<p><a name="broken-notext-name" id="broken-notext-id"></a></p>
<p><a name="correct-name" id="correct-id">Anchor - correctly rendered</a> Some text after</p>
</body>
</html>
After transform:
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<body>
<p><a id="anchorlink" name="anchorlink" title="Anchor link" href="#Anchor">Anchor link</a>Some text after</p>
<p><a name="broken-with-html-name" id="broken-with-html-id"></a><h1>Anchor - broken with html</h1></p>
<p><a name="broken-text-only-name" id="broken-text-only-id">Anchor - broken text only</a></p>
<p><a name="broken-notext-name" id="broken-notext-id"></a></p>
<p><a name="correct-name" id="correct-id">Anchor - correctly rendered</a> Some text after</p>
</body>
</html>
Hope this helps
It looks like a bug to me Chris. I've just confirmed it on Chrome, Firefox and IE. It's completely counter-intuitive that the current text selection should be ignored. (On the plus side, once you fix it manually in the source tab, everything appears to behave perfectly.)
I suggest that you report this to Tridion, and perhaps work around it by altering your templating or filter XSLT.
It is a bug in Tridion. One work-around that I suggest (and have implemented in our particular installation) is to do the following:
Edit the FormatAreaStyles.css file (found in the Tridion CMS program files) — as well as your CSS file used by the website — to include a class like this:
.hiddenanchor {
width:1px;
height: 1px;
display: block;
text-indent:-50000px;
}
Publish out your CSS file (with the new class) so that it'll format your anchors properly.
And then in the component where you are building out the anchors, you will have to:
a. type a word or series of words in your component (where you want the target to be),
b. select that text, and apply the anchor tag to it,
c. then apply the new class you've created (.hiddenanchor) to the anchor.
In the end, your "invisible" anchor would look like this:
<a name="anchorname" id="anchorname" class="hiddenanchor">Anchor Name</a>
It's a crude work-around — fully acknowledged. But it works. You don't end up with the hyperlink/underline styling until the close of the next DOM object.
As an explanation to the CSS, the anchor technically has to be visible in the DOM for it to work and to be accessible by the anchor link. So "display: none" won't work. Alternatively to taking the text-indent approach, you could absolute or fixed position the text off the screen as well.
this question can create a misunderstanding: I know I have to use CSS to validate successfully my document as XHTML 1.0 Transitional. The fact is that I have to embed in my webpage a picture composed by zeros and ones created with text image, and the problem is that the code uses deprecated tag font and looks like this
<!-- IMAGE BEGINS HERE -->
<pre>
<font size="-3">
<font color="#000000">0001100000101101100011</font>
<font color="#010000">00</font>
<font color="#020101">0</font>
<font color="#040101">0</font>
<font color="#461919">1</font>
<font color="#b54f4f">1</font>
...etc.etc...
</font>
</pre>
<!-- IMAGE ENDS HERE -->
(In this code example I inserted a newline after each couple of tags to make it more readable, but the original code is all in one line because of the <pre> tag).
The font's color changes at least thousands times so I never considered to create a field in the CSS for each combination.Hope someone knows at least where to find a solution, I searched everywhere :)
Thanks
You could replace
<font color="#000000">0001100000101101100011</font>
with
<span style="color:#000000">0001100000101101100011</span>
etc...
*Edit: I know this is CSS, but it doesn't involve a separate stylesheet like the question states, which may be ok.
Thanks a lot! :D I used this code
<!-- IMAGE BEGINS HERE -->
<div style="font-size:x-small;font-family:monospace">
<span style="color:#000000">0001100000101101100011</span>
<span style="color:#010000">00</span>
...etc.etc...
</div>
<!-- IMAGE ENDS HERE -->
It works correctly! :D
What about javascript ?
Send the color data as a JSON array, the '0' and '1' as another array and dynamically generate the DOM elements.
<script>
values = [1, 0, 0, 1, ... ]
colors = ["010000", "020101", ...]
for (i = 0; i < values.length; i++) {
span = createElement("span"); // use a portable function for creating elements
span.setAttribute("style", "color:#"+colors[i]);
txtNode = document.createTextNode(values[i]);
span.appendChild(txtNode);
document.appendChild(span);
}
</script>
Or something like this...
Why does it need to validate?
The solution you've already got is absolutely fine for what you're doing. It works. This is not a meaningful document that should be marked up with semantic tags for improved accessibility; it's a work of art, so feel free to ignore the rules if it helps you express your intentions more clearly.
If validation is part of the artistic statement you're trying to make, then use <span style="color:#ff00ff;">00</span> as suggested by other posters - but that'll increase your file size considerably.
Another approach is just to change the doctype so you're not targetting XHTML Transitional - use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> or some earlier HTML revision instead.