i have the following css to put padding around a div:
.orangeAllDay, .orangeAllDay a {
background: #fab384 !important;
color: white;
padding: 5px;
}
it works great until the content (which happens to be inside a cell in an html table takes up two lines. When i look at this in firefox, it looks like its trying to add the padding to each line of the content (even though its all inside one div) so i get some weird overlap of space above the second line that covers part of the first line.
Is there a workaround for this issue or another solution that doesn't break on multiline.
It is adding this padding because you have included both the .orangeAllday and .orangeAll Day a together, so both the link & the elemenent .orangeAllday will get padding of 5px.
You would need to separate them like so:
.orangeAllDay {
background: #fab384 !important;
color: white;
padding: 5px;
}
.orangeAllDay a {
background: #fab384 !important;
color: white;
}
this is done with the assumption that you want padding on the .orangeAllDay element only, but wish to retain background / color for link a.
You've got the padding around the div (.orangeAllDay) and the link. What you are seeing is the padding of the link. There are several ways around this, depending on how exactly the HTML looks like.
If it only contains the link, I'd suggest to actually drop the div and just have the link display as a block:
...
a.orangeAllDay {
background: #fab384 !important;
color: white;
padding: 5px;
display: block;
}
Related
I have a context specific class that I want to certain headings on the site and I'm using the following code to apply a 2px full width line under a heading:-
.headingCustom2 {
color:black;
text-align: center;
padding-top: 50px;
border-bottom: 2px solid #000;
padding-bottom: 3px;
}
I want to add 20px padding beneath the underline so there's space between it and the div below. It needs to be independent of padding:bottom. My searching has only returned results on padding-bottom which alters the distance between the heading and the underline. Wanted to keep it to a distinct class as there's a lot of headings across the site it will need to be applied to. The heading font, Heading 5 is also used in other non-underlined contexts. Anyway, I hope this question isn't too tiresome.
You can try to use ::after
.headingCustom2::after {
content: '';
display: block;
height: 20px;
}
I am a newbie and designing a Wordpress website (www.dimjaa.org). I am sticking to a minor css problem for last two days but failed to find out the solution. I want to take help from you to solve it and also eager to know root of the cause.
I am using evolve themme. I added header widgets.
Content of the header widget area are Login and Logout links. I want to display these at the top-right of the widget area.Image of the header-block showing unnecessary padding on both sides
Two problems that I am facing now are : 1. Background-color of the header-block which holds the widget area can not be changed. Or the header-block can not be covered by the widget area completely (it takes margin in left and right). The header-block can not be targeted properly. Any one of the above may be considered as solution of the issue.
2. Moreover the Login and Logout links can not be placed on the top-right of the area. Even can not be vertically centered. Interestingly when I remove the float: right; then it can be vertically centered. My html and css as below:
.header-block{
background-color: red;
}
.header-widgets{
background-color: #CDAE02;
}
.user-log a{
float: right;
text-decoration: none;
background-color:#581845;
color: #ddd;
border-radius: 15px;
font-size: 14px;
margin-right: 1em;
}
.user-log a:first-child{
padding: 4px 13px;
}
.user-log a:last-child{
padding: 4px 8px;
}
.user-log a:hover {
background-color:#B12307;
font-size: 15px;
}
<ul class="user-log">
Login
Logout
</ul>
I expect a solution from the experts and also hope to gather knowledge for understanding the issue better.
container is a class used by Bootstrap, so you can force that class to have width 100% by using !important in your rule, or you can define a new class called container-full and replace it with the container class:
.container-full{
margin: 0 auto;
width: 100%;
}
Also, changing the color of header-block won't affect, since it has other children that have other colors and has no space to show the color in the background. You may change the header-widgets' color. And it seems like you have padding and margin rules already defined in .widget-content & .header-widgets classes. You either have to change these rules in style.css, or write new rules that contain !important command in the end of the rules, so you can force them to affect the rules.
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}
In order to make all my links looks like buttons, I've done that in my CSS:
a {
color: #06A;
text-decoration: underline;
margin: 10px 20px;
padding: 10px 20px;
/*background-color: #EEE;*/
border: #BBB solid 1px;
}
They look fine, however, they seem to mix-up, that is they are being positioned as if they had no padding or margins.
Take a look here, if you still don't see my point: http://picasaweb.google.com/lh/photo/1yjC0oyQUbBlo_2D4RqjLZsCgnyUSAKTKup5o2EMfkM?feat=directlink
<a> is by nature and definition an inline element, meaning that it can't be given widths, height, paddings or margins (along with a few other styles).
To change that, simply add display: block; which will turn it into a block level element enabling paddings, margins etc.
If you want something that will stay in the flow but be able to accept these styles, use display: inline-block;. This also applies to other inline elements like <span>.
The easiest solution is to set the line-height correctly (without changing display).
Use "display: block" to make padding and margin have a effect.
Try styling your links with display: inline-block;.
You may want to consider using the float style:
<a style='float:left' href='#' />
...which will let you do all the fun stuff and "help" position your anchors as a bonus.
(If you want things to stop floating, put clear:both )
#snowflake's question-level comment got me thinking.
It might help you to know that there are those who believe that using a list for this sort of content is better than marking up plain anchor tags (after all, this is a list of genres, is it not?).
The code for this would look a bit like this:
HTML:
<ul class="genrelist">
<li>Fantasy</li>
<li>Children's Literature</li>
<li>Speculative Fiction</li>
<li>Absurdist Fiction</li>
<li>Fiction</li>
<li>Word I can't read</li>
</ul>
CSS:
.genrelist {
list-style-type: none;
overflow: hidden;
}
.genrelist li {
/*background-color: #EEE;*/
border: #BBB solid 1px;
display: inline;
float: left;
margin: 10px 20px;
padding: 10px 20px;
}
.genrelist li a {
color: #06A;
text-decoration: underline;
}
The code above would display like this (full-size image):
I've got the following in my .css file creating a little image next to each link on my site:
div.post .text a[href^="http:"]
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
How do I modify this snippet (or add something new) to exclude the link icon next to images that are links themselves?
If you set the background color and have a negative right margin on the image, the image will cover the external link image.
Example:
a[href^="http:"] {
background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;
padding-right: 14px;
white-space: nowrap;
}
a[href^="http:"] img {
margin-right: -14px;
border: medium none;
background-color: red;
}
Google
<br/>
<a href="http://www.google.ca">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" />
</a>
edit: If you've got a patterned background this isn't going to look great for images that have transparency. Also, your href^= selector won't work on IE7 but you probably knew that already
It might be worth it to add a class to those <a> tags and then add another declaration to remove the background:
div.post .text a.noimage{
background:none;
}
You need a class name on either the a elements you want to include or exclude. If you don't want to do this in your server side code or documents, you could add the classes with javascript as the page is loaded. With the selection logic wrapped up elsewhere, your rule could just be:
a.external_link
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
It would be possible with XPath to create a pattern like yours that would also exclude a elements that had img children, however this facility has been repeatedly (2002, 2006, 2007) proposed and rejected for CSS, largely on the grounds it goes against the incremental layout principles.
So, while it is possible to do neat conditional content additions as you have with a contextual selector and a prefix match on the href attribute, CSS is considerably weaker than a general purpose programming language. To do more complex things you need to move the logic up a level and write out simpler instructions for the style engine to handle.
If you have the content of the links as a span, you could do this, otherwise I think you would need to give one scenario a class to differentiate it.
a > span {
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
a > img {
/* any specific styling for images wrapped in a link (e.g. polaroid like) */
border: 1px solid #cccccc;
padding: 4px 4px 25px 4px;
}