I have padding on images and the padding affects the image link because there is a black line
Style
a:link{background-color:black}
img{padding:20px}
Html
<img src="blank">
So in Simple terms there is a black line coming from the image and I want to get rid of it. I can't get rid of the styled link because I use it for other links
Instead of black, use transparent or none
SNIPPET
.tran {
background-color: transparent;
}
.none {
background-color: none;
}
img {
padding: 20px
}
<a href="#/" class='tran'>
<img src="http://i.imgur.com/o1RbMvI.png">
</a>
<a href="#/" class='none'>
<img src="http://i.imgur.com/o1RbMvI.png">
</a>
If you want specific style for one link, but you don't want it to affect the others or be affected by the others, I would set up a specific class for the links you want to have a background-color: black; and then a separate class for the link that you don't want affected by it. zer00ne provides a sufficient answer for this. Just add class="tran" or whatever you want to name them into your links that you want to be connected together with whatever style you use in .tran{}, as shown in his answer. Play around with grouping things into classes and using the classes to style more specific elements in your CSS. Best of luck!
in css file:
.black{background-color:black;}
img{padding:20px;}
HTML:
<p>
<img src="blank">
<img src="blank">
</p>
Related
I have a page on a project I'm creating for class where I wanted to align an image in the left side, with the text to the right aligned in the middle of the image. Instead of using html elements, I decided to try an internal CSS div elements within my external CSS. My problem is that I can't get them to align correctly vertically. I have the horizontal alignment, but the text either appears one line above or one line below the image. I tried the techniques included in this posting, but they didn't fix my problem. Align <div> elements side by side
Here is my internal CSS.
<style type="text/css">
/* left div holding the image */
#left {
width:170px;
align:left; }
/* right div to hold the text */
#right {
margin-left: 200px;
text-align:left; }
</style>
Here's the HTML
<div id="content">
<br/>
<br/>
<br/>
<blockquote>
<div id="right">Check back soon. Click here to receive an email when the site becomes available.</div><div id="left"><img src="images/construction-clipart.jpg" border="1" alt="Page under construction" /></div>
</blockquote>
</div>
Can you help me figure out how to make these align? To view how it is rendering, please visit my student project site at http://www.student.nvcc.edu/home/ligomes/TwoWiredChicks/Browse.html.
Thanks!
Finally, I hope this helps now. All you have for the right css is:
#right {
position: absolute;
margin-left: 200px
}
One of my service pages needs inner tabs.
I already use regular jQuery UI Tabs in the page and I would like to use a different styling for the inner tabs.
Many popular sites use inner tabs differently from the main tabs by using simple text for the tabs titles, a long underline beneath the titles and a down arrow to represent the selected tabs. (image attached).
Do you know how to style jQuery UI Tabs to place a down arrow when the tab is selected?
Oh you want to know how to create the triangle using css3. Well you can do this using css, however, your example above isn't completely possible only using css. You can't have a border on the triangle as it is created using borders.
You create the downward triangle like this
.arrow { width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}
I created what you are looking for in a fiddle.
http://jsfiddle.net/jessekinsman/Mn2sx/
However, if you want to create exactly what you have above, you could use custom icon font for the triangle then you could put a text-shadow on it and it could have a stroke.
However, that being said, if you want backward compatibility and the ability to add shadows and border to the triangle, an image is going to be your most compatible approach.
You could try adding some css to the class ui-tabs-active, something like what is shown on this website: http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/
Yes this is pretty easy by just styling the li element with the class="active"
Something like this
.tabs {
border-bottom: 1px solid #000;
}
.tabs li.active {
border-bottom: 1px solid #fff;
padding: 5px;
background: url(../images/arrow.png) 5px 50%;
}
The above is just sample code to give you an idea. You will have to tweak the image values to get the arrow image to line up properly.
However, I think your question might be more involved.
Are you asking how to style two separate jQuery tabs that exist on the same page with a different style?
If that is the case, I would recommend wrapping one of the styles in a element with a unique class or id. Like this:
<div class="new-tabs">
<ul class="tabs">
<li>Tab1</li>
</ul>
</div>
Then you can copy all the styling from the tabs.css (I can't remember the exact name of the css file at the present time) and add the class or id before all those rules. Like this
.tab li { something.... }
.new-tabs .tab li {something...}
Walaa, you now have a completely separate set of styles for the tabs within the container.
I would recommend working through the styles you just copied and deleting what you don't need.
Linked image shows a blue border and seperates from email body in Outlook and IE
i tried to insert this style at the top
img
{ border-style: none;
}
Still doesnt work
EDIT
img { border: 0; margin:0;}
I dont know if border="0" can be added to IMAGE tag maybe depends on your version of HTML 4.1/5 (not in the style, although you can probably leave the style as it is to style="border-style: none;"
try display:block; in your image style tag
I have the following collapsible content with jQuery Mobile. How can I stop the heading being shortened?
At the moment the text is cut off so it reads something like 'Really long heading...' Do I need to do this manually with css or is there a JQB setting I can change?
<div data-role="collapsible">
<h4>
Really long heading goes here thats wider than the page width
</h4>
<p>
Content Content Content Content Content Content
</p>
</div>
Here is the documentation
http://jquerymobile.com/test/docs/content/content-collapsible.html
It seems this CSS is causing the behavior. I could overwrite this rule if there isnt a standard JQM method for doing this.
.ui-btn-inner {
white-space: nowrap;
}
You need to remove this css:
white-space: nowrap;
from its inner span (span witch wrap's text). Or replace it with:
white-space: normal;
Or change jQM css file (.ui-btn-inner) but this will also effect every other element using this class.
Or use this line:
$('div[data-role="collapsible"] h4 a span span.ui-btn-text').css({'white-space':'normal'});
There's no other way, or at lease not buy changing some jQM UI element attribute.
I've got the following:
<div class="tile ui-widget-content">
<h3 class="ui-widget-header">Resize me</h3>
You should see a ghost outline.
</div>
and:
$('.tile').resizable({
ghost:true
});
And it resizes, but I don't see a semi-transparent part of the element.
I'm copying from the docs.
The only difference I can see is that you are accessing the element from its class name rather than id. Have you tried using and id instead?
Edit: Just want to make sure you've also added css for the hover?
.ui-resizable-ghost { border: 1px dotted gray; }