For jquerymobile list view, I tried ui-grid-b for 3 columns. but CSS issues...jsfiddle.net/9ZBAS/1 I tried and i could see columns overlapping if i use href and working fine if not using href but without href i couldnt get the next icon button.
You can clip the overflowing text by using the following styles:
div {
white-space: normal;
overflow: hidden;
}
The right-arrow is added by JQM as part of its internal/auto styling of <a> links in <li>.
If you are not using <a>, you will have to manually add the arrow by doing something like this http://jsfiddle.net/nirmaljpatel/9ZBAS/2/
Related
I have added styling to my anchor tag and have made the text-decoration to none to the entire website. But I want the blog section of my website to underline the links.
I'm using the code snippet plugin in wordpress as I don't have direct access to the files.
And this is the code that I'm using.
add_action( 'wp_head', function () { ?>
<style>
a:link {
text-decoration: underline;
}
</style>
<?php } );
The problem is that this PHP code gets applied to my entire website which is not what I want. I only want this to be applied to the body section of the blog content.
I would love to have someone assist me with this problem.
Thank you.
This is a job for CSS (inside a <style> tag) with specific selectors. Your CSS selector, a:link is very non-specific. That is, the browser uses it whenever it sees an anchor <a> tag.
You need the browser to use it only on some anchor tags. So, you use a more specific selector.
Try using this CSS to style the links within articles in your posts and pages.
div.site-content main article a:link {
text-decoration: underline;
}
It affects anchor tags only in html nested inside a hierarchy of HTML elements. Most themes use these elements.
If you want to style just posts (not pages), put article.post in the selector instead.
div.site-content main article.post a:link {
text-decoration: underline;
}
You can add CSS to your site without the Code Snippets plugin, and without php code. Go to Appearance -> Customize. At the bottom of the left column choose Additional CSS. Then put in the CSS you need.
If you want to be able to figure this out for yourself, right-click in the browser element you want to style and choose Inspect. You'll see the HTML for that element along with the elements it's nested inside.
Additional CSS is a good setup because it survives plugin updates, and because you don't neet to hack any php to get it to work.
I have a div and that div contains text.
<div style='visibility:hidden;' id='emailid'>$email</div>
The visibility attribute does the job of hiding the text contained. The problem is it takes up space (as blank white space) in the webpage where the div contents are supposed to be displayed if it was not hidden;
How can I prevent this from happening? How can I make the div not to show any blank space as the code above does.
use display:none;
<div style='display:none;' id='emailid'>$email</div>
See the The display Property
Try setting display: none; to hide and set display: block; to show.
If you are trying to hide the links using visibility: hidden; it means the tag would not be visible, but space will be allocated for it on the page.
Please post your code for more details if this doesn't help.
You are supposed to use display:none; in your CSS code for hiding a div completly from your displayed page.
Your CSS line of code will change to,
<div style='display:none;' id='emailid'>$email</div>
Using the visibility:hidden; will only prevent the div from being displayed on the page. It will still leave the space where the div would have been existed.
You can learn more about CSS display property here
.myclass {
display: none;
}
display:none will not be available in the page and does not occupy any space.
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
visibility:hidden preserve the space, whereas display:none doesn't preserve the space
<div style='display:none;' id='emailid'>$email</div>
#emailid{
display:none;
}
display:none means it will not take space
use display:none css properties;
Alright, so I have an HTML form and I want to be able to use that form to upload links to my database and then have the links displayed on an updated page. Everything works fine, but my issue is that whenever the link is retrieved and displayed from the database, I am unable to make changes to the CSS. For example:
This is a Great Site
is what I would enter into the form, this would be saved to the database, and the output would be:
This is a Great Site
my issue is, I am unable to change any of the link styles outside of color and other inline CSS options. I am unable to change things like what color it appears after the link has been clicked on, or what kind of action it does when hovered over.
What would be the easiest way to go about this? Is there a simple CSS workaround that I'm missing or am I going have to do something a little bit more complex?
Thanks in advance.
Assuming you show these links in a fixed place, add a class to the element that contains these links. This will safe you the trouble of adding a class to every link you add.
<div class="container">
This is a Great Site
</div>
Then you can change the CSS of these specific links with:
.container a {
color: green;
}
.container a:hover {
background: yellow;
}
I don't get your question.
Your link is 'www.stackoverflow.com'.
You output your link as
This is a Great Site
What prevents you from outputing a class or style attribute?
This is a Great Site
This is a Great Site
<a class="myOtherLinkClass" href="www.stackoverflow.com">This is a Great Site</a>
<style>
a.myOtherLinkClass,
a.myOtherLinkClass:hover,
a.myOtherLinkClass:active,
a.myOtherLinkClass:focus{
color: #d5d5d5; //Alternative add !important to the value
}
</style>
Try it like this. Be sure to put this into your .css-File without the <style> tags and put it after your "a"-Definition.
All of my CSS styling is done with an external stylesheet, but I have a php-generated gallery of user photos that requires a background-image for a div that is the user's picture (as the variable $userpic below). There is no problem with this using inline css:
echo "<div style=\"width:100px;height:110px;z-index:1;background-
image:URL('$userpic');background-size:100px 110px;background-repeat:no-repeat;\">
</div>";
but is there a way move the styling elements of the echoed div (class "NoPicDiv") below into the external stylesheet, perhaps something like the following?
echo "<div class=\"NoPicDiv\"></div>"//modified php echo statement
/*The following would be in my external css file*/
.NoPicDiv {
width:100px;
height:110px;
z-index:1;
background-image:URL('$userpic');
background-size:100px 110px;
background-repeat:no-repeat;
}
Worst case scenario I move all the styling elements to the stylesheet except the background-image element and just keep this inline. Thanks for any help!
Option…
A) generate a second, smaller CSS file via PHP, which only contains the background-image properties;
B) write the image URLs either inline to the tag or at the end of the body
The question here is, why do you need background images at all and not just output <img> tags. Background images won't get indexed by search engines and you can't store a title to them. If you are handling photos, you should definitely use IMG tags.
I am working on a slideshow using the jquery cycle plugin for transitions.
Now all works fine till I add a hyperlink to the image.I am trying to add a hyperlink if a user wishes to add so i have a set button for each image in my console.If a user selects a hyperlink and clicks set,it should be set.Now the hyperlink is set correctly,but,then the transitions are applied to the anchor tags instead of the img tags.
When I set the link the img tag is wrapped inside the anchor tag like this.
<a href="www.google.com" id="link" class="link">
<img id="imgBoxRot_1_1" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0;" src="http://localhost/images/layout/slideShow/gallImg1.jpg">
</a>
I create this anchor tag dynamically like this,and append it to the image.
var newA = document.createElement("a");
newA.setAttribute("id","lnkImgRotImg_"+iCount+"_"+idT);
newA.setAttribute("href",document.getElementById(lnk).value);
newA.setAttribute("class","aTransLink");
newA.setAttribute("target","_blank");
Before setting the anchor tag the plugin works fine and transitions are applied,but after adding a anchor to image,the transitions are applied to the anchor tag instead of the image.How can I fix this?
Thanks for the time.
After studying the plugin documentation I learned that,the plugin is default applied to the first tag that is inside the div to which it is applied.
That is,if we have
<div class="">
<img></img>
<img></img>
</div>
Now,if I wrap an anchor around the image like this,
<div class="">
<a href="">
<img></img>
</a>
<img></img>
</div>
The plugin gets confused between an image tag and an anchor tag and applies the transitions to the anchor instead of the image tag(as it is the first after the div to which the cycle plugin is applied). Therefore,I wrapped all the images initially inside an anchor tag each(Earlier I added anchors dynamically) and applied the plugin on the anchors itself instead of image tag.