How to display only part of string with CSS - css

This feels like something that everyone would say to use JavaScript for, but I'm asking anyway.
Take this DOM as an example:
<p>Check out these links:</p>
foo
bar
baz
...
quux
I'm looking for a way that I could show the last part of the URL that is being pointed to, without using JavaScript, or putting it in the HTML.
I was thinking that I might be able to shorten it down to something like this:
<base href="https://example.com/" />
<p>Check out these links:</p>
<a href="foo" />
<a href="bar" />
<a href="baz" />
...
<a href="quux" />
With the following CSS:
a::after {
contents: attr("href");
}
But, I have other links on the web page that use relative links to link to scripts, styles, other pages on the domain, etc.
I was thinking that I might be able to split the last part of the string after / off and display it, but I'm not sure if strings can be manipulated or even read in CSS at all.
It would be nice if we could control the HTML href attribute using CSS, but I doubt that's possible either.
Does anyone have a better solution?

Related

How can I use in ASP.NET href and css with meta:resourceKey

QUESTION 1: I want to use a specific url if the user is visiting the page with a specific language
<div class="homepage-footer">
<img id="imgHomepageFooter" runat="server"
usemap="#videomap" alt="Video" meta:resourcekey="imgHomepageFooter" />
<map name="videomap">
<area shape="rect" id="youtubeVideo" coords="43,0,560,56" href="http://www.youtube.com/watch?v=Q2QsjVCapjs" target="_blank" alt="Youtube Video"
/>
</map>
</div>
I need to replace href with a specific url because the for spanish peoplo the video could be in youtube, but for english in www.google.com how could I redirect the page depending on my metaresources
QUESTION 2: I am using css for this page, but if I put the css separatly I don't know how to use inside the meta:resourcekey, so I put it as a part of my page and still I don't know the combination, I need to replace the background-image with a specific resources if I am using a specific language(that is the scenario)
style type="text/css">
div.countdown-image
{
background-image: url(../images/homepage/countdown-image-ENG-2015.png);
background-repeat: no-repeat;
height: 150px;
}
</style>
<!-- Countdown -->
<div id="countdown-container">
<div class="countdown-image">
<div id="countdown-timer" class="countdown-bottom">
</div>
</div>
<input id="DeadlineDateTime" value="" runat="server" type="hidden" />
</div>
One option is to handle the request server-side changing the values of the HTML controls as you need, based on the user's language. The answer of #All Blond follows this approach.
Another option is do the same but client-side, using JavaScript (jQuery recommended). You can locate the relevant HTML objects (using the jQuery selector $) and replace / update its properties based on the user's language as you need.
If you are on C#/ASP.net side then basically you should use in your main or onInit function
string userLang = HttpContext.Request.UserLanguages.ToString();
// I would prefer do switch based on userLang but it could be as simple as:
if (userLang = "en-CA")
{
// here you can do switch for your content anyway you want to.
// including changing your assign CSS or images - as a string or InnnerHTML content
// it is depend on solution you implement in your code.
}
Values "en-CA" you can look up on Google for example for each needed language.

white labelling existing asp.net web forms site

I have a requirement to white label (specifically changing header logo/menu/font colors) our existing asp.net web forms site per each customer. Customer will be able to pick the colors they want for the site.
The site is a portal and consists of multiple web sites. I don't want to use themes or different master pages because we don't have the bandwidth for restructuring the app heavily. As far as I can see I have a few options. I want to know if there is more or someone knows any other better/best way to do this. The first two options may be similar but one could be better performance.
Have a dummy css class for all the "color changing" sections - say customColor.
Examples
<div class="menu customColor" />
<div class="header customColor" />
menu and header css classes contain all styles but the color.
Programmatically add color to this css class when the master page loads. Pseudo code : Page.Header.Controls.Add(New LiteralControl("<style type=""text/css""> .customColor { color: blue }");
Have a asp.net ashx handler return whiteLabel.css that contains customColor { color:blue }; and add this css to the page dynamically.
It is not that many elements in every page that needs to change. You can have a function in each page that sets the appropriate colors from the database.
I assume my options pretty much are dynamically changing css or programmatically setting colors to individual elements.
Also I would think it may be better to do option#1 than #2 because does css get cached on #2? This will make it difficult for companies to change colors.
Does all your pages use a common MasterPage?
If so, then I have once used setting a class for body or may be a div wrapper like:
<div class='<%= GetCustomClass() %>'>
<div class="menu customColor" />
<div class="header customColor" />
</div>
GetCustomClass is a static method that will return say class1 or class2 based on customer's selection.The css will look something like:
class1.customColor{color:blue;}
class2.customColor{color:red;}
Hope that helps.
Let's rule out option 3 also, it may fail to reskin the page if a javascript error occurs during the page load.
That leaves option 1, although you might want something a bit more readable:
<style>
.menu.customColor { color: <%= menuColor %>; }
.header.customColor { color: <%= headerColor %>; }
</style>

what is the correct way to code incoming links for SEO?

our site is giving out 'badges' to our authors. they can post these on their personal blogs and they will serve as incoming links to our site.
We want to give out the best possible code for SEO without doing anything that would get us flagged.
i would like to know what you're thoughts are on the following snippet of code and if anyone has any DEFINITE advice on dos and donts with it. Also, let me know if any of it is redundant or not worth it for SEO purposes.
i've kept the css inline since some of the writers would not have access to add link to external css
i've changed the real values, but title, alt etc would be descriptive keywords similar to our page titles etc (no overloading keywords or any of that)
<div id="writer" style="width:100px;height:50px;>
<h1><strong style="float:left;text-indent:-9999px;overflow:hidden;margin:0;padding:0;">articles on x,y,z</strong>
<a href="http://www.site.com/link-to-author" title="site description">
<img style="border:none" src="http://www.site.com/images/badge.png" alt="description of articles" title="View my published work on site.com"/>
</a>
</h1></div>
thanks
Using H1 to enclose your "badge" is a really bad idea—not in so much as it'll negatively affect SEO for your site, but it will very likely ruin the accessibility (and thus SEO) of the author site. H1-H6 are used to provide document structure by semantically delimiting document headings. Random use of heading tags can confuse screen readers and webcrawlers. There's not much you can do in terms of legitimate SEO aside from making correct use of semantic HTML markup.
Edit:
Something like this would be the safest bet:
<div id="writer-badge" style="width: 100px; height: 50px;">
<strong>
Articles on x,y,z
</strong>
<br />
<a href="..." title="site description" rel="profile">
<img style="border: none" src="..." alt="..."
longdesc="http://site.com/badges-explained"
/>
</a>
</div>
I put a line-break between the text and image to treat the text as sort of a badge title. If it's not meant to be displayed that way, then I would omit the <strong> tags altogether (there's no semantic value in encapsulating the text that way, and any styling could be done using the DIV or a weight-neutral SPAN element).
IMO there's really no reason for a achievement badge to have a heading of its own (it's really not even part of the document, just a flourish in the layout), but if you absolutely must, then H6 would be more appropriate and safer to use than H1.
As far as keyword proximity, that is sorta venturing into the grey-hat area of SEO (similar to keyword stuffing), and I wouldn't know anything about that. I've yet to come across any reliable info on how Google or other search engines treat keyword placement. I think if you properly use tag attributes like alt, title, longdesc, rel, rev, etc. in images and links, you'll be alright.
I don't think there is any issue with this code except your <h1> tag. I would probably change it to <h2> simply because pages are supposed to have only 1 <h1> tag per page.
You could also use an iFrame instead if you wanted. That is what SO does but I know you will not get as much linky goodness.

Creating Valid XHTML Clickable Block Region

I'm trying to make a "clickable" region.
<a
style="display: block"
href="http://stackoverflow.com">
StackOverflow
</a>
A is an inline element but the CSS made it a block.
If the above is valid, then the following should be valid too:
<a
style="display: block"
href="http://stackoverflow.com">
<div>Some DIV that links to StackOverflow</div>
</a>
But validator.w3.org shouldn't be flagging it as invalid (which it is right now).
If it is invalid, what would be the most proper way to make a block element "clickable" and redirects to an arbitrary page. I'm aware I can use JS onclick to achieve this behaviour, but how will Google see this?
The validator is correct - you can't put <div> inside <a>, no matter what you do afterwards with CSS.
The proper thing to do is what you did in your first code block - <a style="display: block;">
If you want something inside that you can do <a style="display: block;"><span style="display: block;">
Don't confuse valid HTML with valid CSS. It is valid to use the display css property to make inline elements block. It is not valid to put block HTML elements within inline ones.
It doesn't follow that the one being valid implies the other has to be. There are nesting rules for HTML, and div-within-anchor doesn't fit them, which is why validator.w3.org is giving you a hard time.
If you truly must have a div, rather than text, images or <span style="display: block">s, that's clickable, then yes, you will have to use an onclick event. Google will not understand or acknowledge the existence of the link. (You may be able to cope with this by having an anchor on something that anchors can apply to, in addition to the onclick div.)
Something I've done in the past with this sort of problem is invoke the click on the parent element (My example uses jQuery):
<div class="link">
Visit Google
</div>
$(".link").click(function(){
document.location = $(this).find("a:first").attr("href");
});
With styles you could make the entire area appear to be the link by setting the cursor, a roll-over state, etc.
First you need to know whether you want to use strict or transitional XHTML (frameset is not useful here). Then you look into the DTD (link) and you'll see that A cannot have a DIV inside.
Why don't you use an area tag for this? It is supposed to define the clickable area in an imagemap.
Google bots now follow simple javascript links, so using JS on the onClick event of your div is an option. Other search engine bots don't do that, but sooner or later they will.
More info in this article.

How does CSS formatting in a Google Maps bubble work?

I'm using KML and the GGeoXml object to overlay some shapes on an embedded Google map. The placemarks in the KML file have some custom descriptive information that shows up in the balloons.
<Placemark>
<name />
<description>
<![CDATA[
<div class="MapPopup">
<h6>Concession</h6>
<h4>~Name~</h4>
<p>Description goes here</p>
<a class="Button GoRight FloatRight" href="#"><span></span>View details</a>
</div>
]]>
</description>
<styleUrl>#masterPolyStyle</styleUrl>
...Placemarks go here ...
</Placemark>
So far so good - the popups show up and have the correct text in them. Here's the weird thing: I'm trying to use CSS to format what goes in the popups, and it halfway works.
Specifically:
The <h6> and <h4> elements are rendered using the colors and background images I've specified in my stylesheet.
Everything shows up in Arial, not in the font I've specified in my CSS.
The class names seem to be ignored (e.g. none of the a.Button formatting is applied; if I define a style like the one below, it's ignored.)
div.MapPopup { background:pink; }
Any ideas? I wouldn't have been surprised for the CSS not to work at all, but it's weird that it only partly works.
Update
Here's a screenshot to better illustrate this. I've reproduced the <div class="MapPopup"> markup further down on the page (in yellow), to show how it should be rendered according to my CSS.
As suggested I've gone in with Firebug to see what's going on. It looks like Google is doing two obnoxious things:
It's stripping out all class attributes from my HTML.
It's throwing all kinds of hard-coded styles around.
Here's my HTML along with the first couple of wrappers inserted by Google:
<div style="font-family: Arial,sans-serif; font-size: small;">
<div id="iw_kml">
<div>
<h6>Concession</h6>
<h4>BOIS KASSA 1108000 (Mobola-Mbondo)</h4>
<p>
Description goes here</p>
<a target="_blank"><span />View details </a>
</div>
</div>
</div>
As you can see, my classes (e.g. MapPopup in my first div, Button etc. in the <a> tag) have all been stripped out.
Knowing this I'll be able to work around Google's interference, using !important and targeting the container div for the whole map - still, this is annoying, and unexpectedly clumsy coming from Google.
More related obnoxiousness related to the HTML in a KML <description> block: Any links are given the attribute target="_blank", whether you like it or not. I'm currently exploring ways to undo that, using jQuery, but what a drag. I really don't understand why Google feels the need to tamper with this HTML.
See also this thread on the official Google Group.
I've had similar issues. I don't know how you are implementing your Marker, or if you are using InfoWindow, or .addListener, but they way I have had to get css styling to work inside of the "pop up bubble" (over the Marker) is to use what is called "inline styling." So I have a variable that I pass into InfoWindow. Assuming you have initialized a variable "marker" with some options, and have the "map" instance created, some example code would look like this:
/*start of myHtml2 variable*/
var myHtml2 = "<div style=\"background-color:lightgray\"><div style=\"padding:5px\"><div
style=\"font-size:1.25em\">Some text</div><div>Some more text<br/>
Yet more text<br/></div><table style=\"padding:5px\"><tr><td><img src=\"A lake.jpg\"
width=\"75px\" height=\"50px\"></td><td>More text<br/>Again, more text<br/><div
style=\"font-size:.7em\">Last text</div></td></tr></table></div></div>"
/*end of variable*/
var infowindow2 = new google.maps.InfoWindow({content: myHtml2});
/*mouseover could be 'click', etc.*/
google.maps.event.addListener(marker, 'mouseover', function(){
infowindow2.open(map, marker);
});
I know the css styling code is cumbersome, but I haven't found a way to use complicated css styling inside "the bubble pop up" using css in the head, or from a style sheet There are always conflicts, and some features don't render properly.
My first guess is that you're running into an issue with CSS specificity. There is a good article on it at http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/, so if you can include a container element ID, that may help.
Let me know if this doesn't turn out to be the problem and I'll come up with more ideas.

Resources