Like the title says I can't get the background of the a element to be one solid color. Instead my code make each line the color. I have even tried wrapping the php element in a new div and setting that background color but it does the same thing. Any advice is useful.
Site: http://www.whatsatyourcore.com, bottom widget titles
The html:
<a class="teaser-title-top" title="Social customer service and your marketing strategy" href="http://whatsatyourcore.com/?p=78"> Social customer service and your marketing strategy</a>
CSS:
.teaser-title-top { background: black;}
a.teaser-title-top {
color: #fff;}
The above "code boxes" are an example. The first one is what the background is doing on my titles. The second one is what I want it to be.
if you wrap it in a div and set that divs background-color that should work. The element you are setting the background-color for needs to be a block-level element (a div is) you can set an element to display as a block level element with display: block; else it will just color the background of the inline content.
you are styling the anchor which is only going to stlye what's in it. Try something like:
<div id="title-box">
<div class="teaser-title-top">
Social customer service and your marketing strategy
</div>
</div>
And then style the .teaser-title-top
As with the other answers, you can style a wrapper element. However if you want to style just the anchor text directly, try this...
The issue is the line-height of your text. AS you can see, it is spaced out. If you. The height of the line, compared to the size of the text, is bigger.
As an example, set #bottom a { line-height: 100%; } (which is what teh font-size is set to) and you'll see the gap go away. You'll also see the spacing go away. You can "bring back" the spacing with top/bottom padding, as well as changing the line-height.
Try this hope it works
#bottom .teaser-title-top {
color: white;
}
In your css file
Related
I'd like a generalized solution that will always limit the clickable link area to the text of my h2 text. Note that the issue is that when you hover over or click on the space to the right of the text you are still on a clickable area.
Here is an example:
markup:
<a href="#p1">
<h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
</a>
css:
h2.services {
font-size: 16px;
}
Here is a demo:
http://jsfiddle.net/j7n3k/
ps - no js or jquery please. Only css and responsive solutions only if possible. Thanks!
You should put the <a> tag inside <h2>. By default, headings have display set to block, which means they will automatically take up all the horizontal space available if the width is not set explicitly. The link contains the heading, so the browser assumes the whole area is a link. If you insert <a> into <h2>, then it wraps only the text and not the entire heading.
<h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
this will stop it from expanding:
h2.services {
font-size: 16px;
display: inline-block;
}
http://jsfiddle.net/vimes1984/j7n3k/4/
Read up on the display property and the position property.
DISPLAY
https://developer.mozilla.org/en-US/docs/Web/CSS/display
POSITION
https://developer.mozilla.org/en-US/docs/Web/CSS/position
To style:
you can use
.services{
/*this will style any element with a class of services*/
}
.services a{
/*this will style any a inside of a element with a class of services*/
}
I have a heading which is likely to span over two lines, i'd like the heading to have a background color but for it to only span the width of the text on the line, like this:
http://f.cl.ly/items/0r3N2l3A1K3c3h2F3E3l/Screen%20Shot%202013-06-30%20at%2000.18.16.png
So far all the solutions I have found only appear to work against a background with a solid colour, anyone have any ideas how I can achieve this?
What your are requesting for is an old question that come up again and again once in a while , text or inline element cannot achieve it, element formated as a box will turn out to be square or rectangle.
The only way to do it , is to set side by side inline-block elements wrapping words or groups of words.
Script server or javascript can help you, so you should not have to mind text markup while typing.
The idea looks like this : http://jsfiddle.net/rnCTL/
h1 span {
background: #fff;
line-height:44px;
padding:4px 4px 4px 10px;
margin:0;
display:inline-block;
}
.headline-black {
height:219px;
width:367px;
background:url(http://f.cl.ly/items/0r3N2l3A1K3c3h2F3E3l/Screen%20Shot%202013-06-30%20at%2000.18.16.png);
padding:40px;
box-sizing:border-box;
}
Try this.
Basically if you have a containing background element you can any element on top of it with another background.
Check out the Fiddle
h1{
width:200px;
background:white;
display:inline-block;
margin-left:60px;
}
I've done this in situations where you put a <span> within the Header tag and applying the background color to that. Bear in mind, you won't have any padding where the line breaks: check out this fiddle - http://jsfiddle.net/R5ZsG/
If you can put a   that would work to pad where it breaks but you might not have full control over it.
I'm working on a website for a small law office. In the side-menu, I'm trying to highlight the "current page". I have tried changing the background of the LI, but this doesn't quite do the trick; the list item doesn't spread to the full width of the menu, so it looks bad.
Here's a jsfiddle. I would like the yellow section to highlight like the pink section is highlighted: filling up the full vertical and horizontal space, not just highlighting the text.
Any suggestions on how to do this? I've included the style tag in the html just for example, obviously, and my real solution will be a little different when it's done. But I can't move forward until I figure out how to somehow highlight the entire line.
One little issue: you're mixing em and px units for layout. This makes it a lot harder when trying to make things line up.
I've implemented it using a .selected class that would be applied to the selected elements, and a special case for the elements which are sub-menu items:
.selected
{
display: block;
background-color: #FCFFEE;
width: 15.4em;
margin-left: -0.6em;
padding-left: 0.6em;
}
.subMenuItem.selected
{
display: block;
background-color: #FCFFEE;
width: 13.4em;
margin-left: -2.6em;
padding-left: 2.6em;
}
And a jsFiddle fork of your original with the changes: http://jsfiddle.net/CkKc7/2/.
Good luck.
Remove the padding-left from the ul. Also remove the width.
Add display: block to the <a> tags.
Add the removed padding-left back, but on the <a> tags instead.
http://jsfiddle.net/7fEYx/4/
<li class="menuItem">Contact</li>
Is that what you are trying to achieve?
You should apply your style to the LI parent of the A tag, or make the A tag element block-level. Also, consider using a class instead.
Hi,
I have the following HTML :
<div class="controlTitleContainer ">
<label for="test">Titel</label>
<div class="q"> </div>
</div>
The CSS looks like this
.controlTitleContainer .label
{
font-size: 0.94em;
color: #778899;
display:inline;
}
.controlTitleContainer .q
{
background-image: url("Images/Common/Icons/questionMark_15x14.png");
height: 14px;
width: 15px;
float:left;
}
The problem is that the div will be placed to the left of the label instead of to the right? Why?
I have tried to switch the div to a span with no success. Also If I change the div to a img intead then it will work but there is some unvanted margins that I can´t remove with the div element.
Pleas advice
Edit1: The confusions in the question should now be fixed, sorry for that.
MySolution : I created two div elements (one for text and one for icon) and then set float to left on both.
You're quite confused. You talk about IMG in question title, then you present SPAN in your code and afterwards talk about DIV in your text.
But I guess all three refer to SPAN in your code since you do set a background image to your SPAN element.
Solution
Anyway. Your span is floated left according to your CSS. If you remove the following line in your style sheet, your span will appear to the right of your label:
float: left; /* <- remove this */
Edit: I suppose your question got downvoted due to this confusion. If you want the community to help with detailed answers the least you could do is to take the time to formulate your question with the same amount of care as you expect back.
Do you not want the image to the right of the label? You have specified float: left;. You may also want to change .label to label in line one of the css code.
You could use the "CSS :after Selector"
Link : http://www.w3schools.com/cssref/sel_after.asp
Floats can be tricky... I would just make sure that the label is inline or inline-block, and that your image or image container also is inline or inline-block. They would then be aligned as text on a row. Yeay!
With the example below, I need to add padding and background-color properties to the text anchor. I then need to exclude padding and background-color from anchors that contain images.
<p>
this is a text link that needs to be styled
<img src="image/name.jpg" alt="this needs to be excluded from styling" />
</p>
If I have a red background and padding on my text links, I do not want that same red background and padding to appear on my linked images. The images will always be in their own anchors, not mixed with text within the same anchor.
The rub is that I can not add classes or IDs to the img tags - I do not have edit control of that data.
So how can I add CSS attributes to all anchors, while excluding anchors that contain images?
Using JQuery:
$(function() {
$('a:not(:has(img))').css('background','red');
});
Currently, you cannot select the parent of a matched child selector. You'll have to use javascript to accomplish this.
That being said, if your page background is solid, you could use negative margins and a background on your img tags to overlay your a background… Here's the example. I have not tested on all browsers, but it seems to work for me in Safari, Firefox, and MSIE8.
a {
display: inline;
padding:10px;
background:red;
}
a img {
border: none;
vertical-align: bottom;
margin:-10px;
padding: 0px;
background:white;
}