I don't know why, but for some or odd reason the specific style for a p tag inside does not style when using a custom style sheet css, but works perfectly fine when doing inline.
Obviously I'm trying to avoid using inline, because it's not the best practice.Using Bootstrap
<h1 class="page-header">Properties</h1>
<div class="col-lg-4 main_content">
<img class="img-responsive" src="images/home_image2.jpg" />
<p>CHATHAM<br />
London, Uk
</p>
</div>
The html.
The CSS:
.main_content p {
font-size:24px;
background:#262626;}
Both the font size as well as the background color doesn't seem to work
I have tried targeting it as a ID, but to no avail.
use this
.main_content p {
font-size:24px !important;
background:#262626 !important;}
Try using
.main_content p {
font-size:24px !important;
background:#262626 !important;
}
Working fiddle
http://jsfiddle.net/52VtD/9080/
But it works without !important, i dont think !important is not godd to use, please check you other css maybe you are overriding some more classes, if you can please make a working fiddle or send us a link
Or write with upper class.
.page-header .col-lg-4.main_content p {
font-size:24px;
background:#262626;
}
Okay.
The solution I came up with was to change the name of the class affecting the div.
Even though did a search to check if I might have been using it somewhere else, and nothing came up, this solution worked out perfectly fine.
This is the name change I used.
.main_content_home p {
font-size:20px;
background:#262626;
color:#FFF;
padding: 12px;
}
Related
On my website, I added the following code which I had only intended to apply to my posts, like this.
#media screen and (min-width: 767px) {
p {
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
}
Obviously, it was applied to all the pages on the website. It's fine on some pages, but the homepage/frontpage is messed up on computers. If you scroll down, the excerpts (descriptions) below the posts have these margins applied to them.
How can I make the change above only apply to posts and not to the frontpage/homepage? To be clear, I want to remove these paddings from the homepage/frontpage. I want to keep them on my posts.
This is one of the suggestions people gave me that didn't work. If I decreased the number from 20%, nothing happened. The margins got bigger if I increased the padding, as if the minimum is set to 20%.
.home .posts-loop .entry-summary{
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
Welcome Ahmed.
The suggestion that people gave you that didn't work, is related to class names (note the point before the names: .home | .ports-loop | .entry-summary . This indicates that are classes).
In your first sample you only use p . This affect to all p html elements.
So, your solution is to add a class to the paragraphs where you want to aply the css rules:
<p id="xxxx" name="xxxx" class="SomeClass">
And then, in your css code, use .SomeClass {...} to set the rules to apply.
This rules should be applied only in the elements set as class="SomeClass", and not to other elements.
For home page/front page just give another custom class name and just give padding to 0 or else you want and write " !important ".For e.g .cstm_home { padding: 0 !important; } . I hope it will solve your issue.
An easy way I see around this is to create a different stylesheet for the homepage. I'm not sure if you're using a global stylesheet, if you are, you should remove the line that links the CSS to this page.
A more prudent approach would be to use another type of selector instead of your paragraph tag, put an id in all the paragraphs you would like to style the aforementioned way and use this id or any other selector in your CSS.
Cheers!
I hope this helps....
What I would suggest is to add a class to the p tag on home page. The HTML should be like
<p class="homepagepara">blah blah blah.....</p>
And the css will be like.
p.homepagepara {
margin: 0;
padding:0;
}
After you have created the class you can style those pages any way you want. And it will target the home page paragraphs only. Hope this helps. Let me know if you have more questions
I wish you had shared your HTML as well. But a general answer is that you are selecting all the p elements in the html document to have the mentioned paddings. So of course it's applied everywhere on the page.
Solution 1: If they're separate html pages you can link separate stylesheets and include the paddings only in the desired pages.
Solution 2: Be more specific with the css selector. For example if the wrapper div for the posts has the class of .posts, write your css as following:
.posts p {
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
I've been instructed to make links on a website have a different colour underline than the font colour. It all seemed quite easy, using border-bottom as below, except that linked images are now also underlined.
Is there a way, without using JS, to stop happening?
a{
color: #6A737B;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #C60B46;
text-decoration: none;
}
An example - hovering over the below image now adds the border-bottom CSS style to it, which I don't want -
<a title="Dyne Drewett" href="http://test.dynedrewett.com">
<img class="attachment-full" width="202" height="78" alt="Dyne Drewett Solicitors" src="http://test.example.com/Website-Header.png">
</a>
The only static way to do this would be to use a class on image links like:
<a href='http://whatever.url.here/' class='imglink'>
<img src='img/image.png' alt='Alt text'>
</a>
Then apply a CSS style to this class:
a.imglink:hover {
border-bottom: 0px solid;
}
You'd have to declare this AFTER the other a:hover CSS class.
Technically, you cannot set a style on an element based on what elements it contains. You cannot make the border of an a element depend on the presence of an img element inside (and this is what you are dealing with). Using classes would help, but from the comments, it seems that this is out of the question.
There’s a workaround: place each image at the bottom of the containing element (not on the baseline as per defaults), and shift it down one pixel, or whatever the border width might be. This way, the image will cover the bottom border, provided that the image has no transparency. CSS code:
a img {
vertical-align: bottom;
position: relative;
top: 1px;
}
This slightly changes the position of all images, so it might affect the overall layout unless you take precautions.
I'd suggest adding a class to the link, so you can do
a.imglink:hover{
border:0;
}
Alternatively, if you can't control that class, you can try adding a negative margin to your image to ensure the border doesn't show:
a img{
margin:0 0 -1px 0;
}
That -1px might need adjusting based on your other rules
Here's a fiddle to show the negative margin solution: http://jsfiddle.net/QRXGe/
Your solution will require you adding an additional class name to links that wrap images (or anything where the border should be removed). There's no way to sort of "reverse select" unless you want to employ a JavaScript technique.
A jQuery technique would be something like this:
$('a > img').parent().css('border-bottom', 'none');
That will remove a "border-bottom" style from all anchor tags that have image as a direct descendant. But you'll need it on every page, and every page is getting parsed by this script, so it's a little added overhead on each page.
Otherwise, if you have access to the HTML, creating a CSS class to target these specific links such as:
a.img-link{ border-bottom:none; }
And apply it to any link that's around an image such as:
<img src="#" alt="" />
I hope that helps!
Another way to achieve this is to simply make the images in links relative and then offset the bottom to cover the border. 5px seems to do it http://jsfiddle.net/ECuwD/
a{
color: #6A737B;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #C60B46;
text-decoration: none;
}
a img {
position:relative;
bottom: -5px;
}
a:hover img {
border-bottom:none;
}
or perhaps...
a:hover img.attachment-full {
border-bottom:none;
}
Apparently, what you want is a different behavior for the same markup (<a>) based on its content.
Sadly, there is no real way to do this with pure CSS, as this language is not programming language and therefore lacks the condition structures, such as if.
That does not mean that there is no solution! Here is a couple of things you can do:
Declare (say) in your HTML that the element (<a>) should be handled differently (with classes, in your case either <a class="text"> or <a class='image'>.
Use JavaScript to change your style dynamically, which means based on conditions, such as content for instance. In your case it would probably be something like:
function onLoad() {
for (var element in document.body) {
// look for links
// if this is a link:
// look for image inside link
// if there is one:
// remove the border
}
}
I'm trying to port code over from using inline css to using a stylesheet and as I'm pretty much a total css noob I'm having trouble.
Most of the things I've moved over to external have worked fine, but I can't seem to get TD elements to use styles defined in the stylesheet. Here's an example:
<td class="text_right">...</td>
.text_right {
text-align: right;
}
Why doesn't that work?
That should work, however bear in mind that your <td> element should have some dimensions, otherwise it will be as wide as the content.
Check this for a demo
<td class="text_right"><a>...</a></td>
.text_right {
text-align: right;
width: 300px;
}
that should work , put you text in <a> tags
Try using !important . Like this ;
.text_right {
text-align: right !important;
}
if you still see it not aligned please check css for that element overridden rules (with chrome or opera) by right click and investigate
My first post here and unfortunately it won't be that exciting and I need an answer that includes IE6.
To get space between paragraphs, I'm styling my <p> tags like this:
div.content_cms p {
margin-top: 0px;
margin-bottom: 15px;
padding: 0px 15px 0px 0px;
}
The margin bottom to space the paragraphs. This of course works fine. But then I also need to style a link with html is this:
<p>Text </p>
When there is a link as in the example above, I don't want the margin-bottom to be applied. I tried to fix it with this:
div.content_cms p a {
margin-bottom: 0px !important;
}
Which of course doesn't work.
I'm adding a class to the <a> tags with jQuery so I can automatically add an icon to links. I tried adding
margin-bottom: 0px !important;
to the class I'm adding with jQuery but that didn't work either.
What's the best way to style spacing between <p>paragraphs</p> with text but not paragraphs with links?
Thank you.
You can easily do this with jQuery:
$('p').has('a').css('margin-bottom', 0);
Live demo: http://jsfiddle.net/NyjvT/
If you need to set multiple styles, then consider this:
$('p').has('a').addClass('whatever');
CSS:
p.whatever { margin-botttom:0; font-size:20px; ... }
I don't think you can.
Your best bet is to add a class to those particular <p> elements, and override the margin on those:
div.content_cms p.nomargin {
margin-bottom: 0px;
}
<p class="nomargin">Text</p>
If this is not possible on the server side, you could do some jQuery hackery to take care of it.
Maybe there's some CSS3 magic that could be used, but I'm not sure of that; and since you want IE6 support, it's out of the question anyway.
This is not possible using only CSS.
CSS (Cascading Style Sheets) works only down the document tree.
The reason for this is performance.
For more info read this:
http://snook.ca/archives/html_and_css/css-parent-selectors
http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3940
You need to use javascript for that to work.
I have a CSS rule like this:
a:hover { background-color: #fff; }
But this results in a bad-looking gap at the bottom on image links, and what's even worse, if I have transparent images, the link's background color can be seen through the image.
I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:
a.imagelink:hover { background-color: transparent; }
Today I was looking for a more elegant solution to this problem when I stumbled upon this.
Basically what it suggests is using display: block, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.
Is there a nice way to solve this problem, or do I have to use the dirty approach again?
Thanks,
I tried to find some selector that would get only <a> elements that don't have <img> descendants, but couldn't find any...
About images with that bottom gap, you could do the following:
a img{vertical-align:text-bottom;}
This should get rid of the background showing up behind the image, but may throw off the layout (by not much, though), so be careful.
For the transparent images, you should use a class.
I really hope that's solved in CSS3, by implementing a parent selector.
I'm confused at what you are terming "image links"... is that an 'img' tag inside of an anchor? Or are you setting the image in CSS?
If you're setting the image in CSS, then there is no problem here (since you're already able to target it)... so I must assume you mean:
<a ...><img src="..." /></a>
To which, I would suggest that you specify a background color on the image... So, assuming the container it's in should be white...
a:hover { background: SomeColor }
a:hover img { background-color: #fff; }
I usually do something like this to remove the gap under images:
img {
display: block;
float: left;
}
Of course this is not always the ideal solution but it's fine in most situations.
This way works way better.
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
text-decoration: none;
border: 0 none;
background-color: transparent;
}
No cumbersome classes that have to be applied to each image. Detailed description here:
http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/
Untested idea:
a:hover {background-color: #fff;}
img:hover { background-color: transparent;}
The following should work (untested):
First you
a:hover { background-color: #fff; }
Then you
a:imagelink:hover { background-color: inherit; }
The second rule will override the first for <a class="imagelink" etc.> and preserve the background color of the parent.
I tried to do this without the class="", but I can't find a CSS selector that is the opposite of foo > bar, which styles a bar when it is the child of a foo. You would want to style the foo when it has a child of class bar. You can do that and even fancier things with jQuery, but that may not be desirable as a general technique.
you could use display: inline-block but that's not completely crossbrowser. IE6 and lower will have a problem with it.
I assume you have whitespaces between <a> and <img>? try removing that like this:
<a><img /></a>
I had this problem today, and used another solution than display: block thanks to the link by asker. This means I am able to retain the link ONLY on the image and not expand it to its container.
Images are inline, so they have space below them for lower part of letters like "y, j, g". This positions the images at baseline, but you can alter it if you have no <a>TEXT HERE</a> like with a logo. However you still need to mask the text line space and its easy if you use a plain color as background (eg in body or div#wrapper).
body {
background-color: #112233;
}
a:hover {
background-color: red;
}
a img {
border-style: none; /* not need for this solution, but removes borders around images which have a link */
vertical-align: bottom; /* here */
}
a:hover img {
background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */
}
I had the same problem. In my case I am using the image as background. I did the following and it resolved my problem:
background-image: url(file:"use the same background image or color");