Say I have a
<a class="myclass" href="foo.htm">Click Here</a>
and in css something like this:
.myclass
{
border: 2px solid #000;
padding: 1em;
}
so the <a> looks like a button but it only operates when clicked on the text, not in the whole box. How can I make so that the box also "catches" onClick?
Block will not work well unless you float the element and give it a fixed width. I think "inline-block" would work better.
.myclass{
display: inline-block;
border: 2px solid #000;
padding: 1em;
}
You can see it in action here: http://jsfiddle.net/2tmzL/
Browser support for inline-block is pretty good: http://caniuse.com/inline-block
Wrap the anchor tag around another container element
<a class=".." href=".."><div>Click here</div><a>
< a > is an inline , you have to transform it to a block, try this
.myclass:
{
display:block;
border: 2px solid #000;
padding: 1em;
}
You need to set the css property display: block or inline-block (depending the case...) for your a element.
I seem to be able to click the entire link. Make sure you remove : after .myclass. Also if it's still not working you may like to try adding display:block;
Alternatively in html5 you can wrap the a tag around a block element. This will work in older html though it's not correct.
.myclass
{
border: 2px solid #000;
padding: 1em;
display:block;
}
The issue is that a's are inline elements, and padding doesn't work the way we expect with inline elements. Change the a's to a block level element, and everything should work as you expect (note the removal of the ":" in the CSS declaration, that shouldn't be there):
.myclass {
display: block;
border: 2px solid #000;
padding: 1em;
}
Related
I have a style like:
a {border-bottom: 1px solid gray; text-decoration: none}
Now if I put an <img> inside a <a>, the <img> gets the border too. Is there a way to prevent this?
a img {border:0} doesn't work because a has the border, not img. Fiddle: http://jsfiddle.net/wp480vdv/1/
Adding classes to either have a border or not is difficult for large sites.
You can use JQuery to do this
Solution 1: http://jsfiddle.net/wp480vdv/8/
$('a').has('img').css('border-bottom', 'none');
Solution 2 http://jsfiddle.net/wp480vdv/9/
$("a:not(:has(>img))").css('border-bottom', '1px solid gray');
A selection based on the content is not supported in CSS; and i doubt it will always be.
The nearer thing you can do, without Javascript is the attribute selector:
a {border-bottom: 1px solid gray; text-decoration: none}
a[href="/foo"] {border:0px}
http://jsfiddle.net/wp480vdv/10/
Might it be something in the attribute of the <a> that contains image different from the <a> containing only text?
If you only want to give underline for text not for image, then you don't need to give border-bottom for <a> tag.
You can modify your html like that.
html
<div>
<a>
<span>hello</span>
<img src="a.jpg">
</a>
</div>
Here by default in <a> tag, there is underline.
So if use a{text-decoration:none;} so why you want to give border-bottom.
Anyway if want to give border-bottom for text then you can do like that.
css
a {
/*border-bottom: 1px solid gray;*/
text-decoration: none
}
span {
border-bottom: 1px solid gray;
}
img {
border: none;
}
I'm aware that the :empty pseudo-class will select all elements with no children, but I want to only select elements with text-nodes as children.
I have a bottom-border on my hyperlinks that're a different color than the text, but this is a problem because the hyperlinked images are also getting this underline.
I've tried a *:not(*){ border-bottom-width: 0; } in an attempt to fix this, but it didn't work. Is there a way to select a tags with only text-nodes for children?
If I understand your problem correctly, you are trying to keep your hyperlinked images from being underlined. If so, why not do something like: a img { text-decoration:none }?
Edit: If its the links on img tags you don't want underlined, apply a class to those links with text-decoration:none
NEW ANSWER:
If you want a border under the image, but not the text do this:
a img { border-bottom: 1px solid #000; }
a:emtpy { border: none; }
If you want the opposite (border under the text but not the image) do this:
a:empty { border-bottom: 1px solid #000; }
a img { border: none; }
OLD ANSWER:
If it's just a problem with images that are wrapped in a tags, try:
a img { border-bottom: none; }
Instead of a crazy selector, why not hide the border with a negative margin:
a img {
margin-bottom: -6px;
}
Demo
When the ONLY CHILD of <a> is not an img ...
a:only-child:not(img)
{
border-bottom-width: 1;
}
This cannot be accomplished because of the way border property is applied and rendered outside the top-most box of your anchor - effectively the only way to achieve such an effect with a border would be to negate the property. Sometimes it coult be visually acceptable to use a bottom border in a background colour to overlay over that of of your anchor's - an unreliable practice to be frowned upon. Maybe the effect could be simulated with filters, but I wouldn't count on it being sufficiently well-supported cross-browser.
What I propose is going back to the text-decoration property *while still maintaining a different, independent underline colour` - a neat approach overall, but not without the overhead of an additional element:
<style>
.fancy-underline { color:blue; text-decoration:underline; }
.fancy-underline a { color:black; text-decoration:none; }
</style>
<span class="fancy-underline"><a href="#">I am a fancy link
<img src="//placekitten.com/30/30/" /> with an image in the middle of it
</a></span>
http://jsfiddle.net/ovfiddle/TwmmF/3/
I ended up just using jQuery. I don't believe it's possible with just CSS right now.
jQuery('document').ready(function(){
jQuery("a").each(function(){
if(this.children.length !== 0)
this.style.borderBottomWidth='0';
});
});
I am having an issue with a particular aspect of a web dev that I am doing at the moment with regards the css styling.
What I have is the following HTML:
<div id = "spaninsidea">
<ul id="spantest">
<li><a id="nav-button-one" href="javascript:return false;"><span>Link 1</span></a></li>
<li><a id="nav-button-two" href="javascript:return false;"><span>Link 2</span></a></li>
</div>
Styled with the following CSS:
#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; }
#spaninsidea li { display: inline;}
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px;
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green;
float: left; }
#spaninsidea li a span {background-color:orange; margin-top:50px}
What I am trying to get is the spaned text inside the link to sit in the middle of the a tag. When I try to apply the margin setting on the span it simply sits still, however if I change the font color etc it plays cricket. I cant figure why it styles but wont budge.
I will confess the front end stuff is new to me so if there are any glaring issues that you can see in general please do point them out.
Cheers
Usually you shouldn't have a span within an a. That would be the first part... I would suggest try to apply a text-align:center; to the span as well.
Update: See a working version here: http://jsfiddle.net/2eLer/ You just have to set the line-height of the span equal to or greater than the height of the a.
It's important to remember that spans are inline elements not block elements and as such, do not respond to margin and padding like you would think they do.
There is a css display property called "inline-block" that allows elements to float like spans and other inline elements do, but also makes them behave like divs with regards to margin and padding.
You shouldn't use <span> at all, but change the padding property of the link itself.
I have two elements in a container:
<div class="container">
<span>This is a div</span>
<button>This is a button</button>
</div>
Styled as follows:
span, button {
display: block;
padding: 4px;
border: 1px solid black;
margin: 5px;
background: #c0c0c0;
font: inherit;
}
.container {
border: 1px solid black;
}
You can see a live demo here.
Why does the button not appear the same width as the span? How can I make the button behave like a standard block-level element?
I need to use a <button> here because its purpose is to submit the form.
This should do the trick. Live example: http://jsfiddle.net/925qz/18/
.container {
border: 1px solid black;
padding: 5px;
}
span, button {
display: block;
padding: 4px;
border: 1px solid black;
background: #c0c0c0;
font: inherit;
}
button{
width:100%;
margin-top: 5px;
text-align: left;
}
I'm expecting there to be some ruleset that makes them both
behave like <div>s
There isn't. The reason is that button is a "replaced element".
The clearest source I could find on this was: http://reference.sitepoint.com/css/replacedelements
A replaced element is any element whose appearance and dimensions are
defined by an external resource. Examples include images (<img> tags),
plugins (<object> tags), and form elements (<button>, <textarea>,
<input>, and <select> tags). All other elements types can be referred
to as non-replaced elements.
Replaced elements can also have visual formatting requirements imposed
by the element, outside of the control of CSS; for example, the user
interface controls rendered for form elements.
Separate the span and button selectors, then add width to the button selector.
Browsers often ship with divergent default styles for many elements. Header elements such as h1 and h2, ul, strong and em all are styled with default CSS. A general tactic is to use something like the Yahoo! reset css stylesheet to remove these styles for better cross-browser appearance.
This would not immediately help with your button problem, but partly explains it. Internally, complex elements within browsers such as the button are defined by HTML that you don't have access to as a user. This internal HTML is also styled via CSS. In the case of a button you'll have to use explicit CSS to style it in ways other than the browser has been instructed to. Give it a width and understand that internal padding rules may give it divergent appearance from a div or span with similar rules.
Form elements use a different box-model in pretty much every browser. That’s why they never actually have the same size as the other elements, even if all have the same dimensions set. I also found a bug report from Firefox for this problem: https://bugzilla.mozilla.org/show_bug.cgi?id=562153
I always put the following code in my reset stylesheet to have a more even working ground:
select, input, textarea, button {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The code works from IE8 and up and all other major browsers, according to PPK: http://www.quirksmode.org/css/contents.html
When you apply a width of 100% (like block elements usually have) to the button it will ignore the padding! I had this problem a few days ago:
<button> padding / width problem
If u want to fill out all of the width and apply padding, this should do the job:
button {
width: 100%;
/* prefixes for box-sizing here */
box-sizing: content-box;
}
Of course the total width will be 100% + the padding, so it'll be more than you want. You may have to take a fix width, because of that.
http://jsfiddle.net/925qz/30/
How I corrected it:
The padding for left and right is set but the all around its managed by the container
The width is 100% for the button.
Lastly the button's separation is managed by top 5px margin.
span, button {
display: block;
padding-top:4px;
padding-bottom:4px;
border: 1px solid black;
background: #c0c0c0;
font: inherit;
}
button{
margin-top:5px;
width:100%;
}
.container {
border: 1px solid black;
padding:5px;
}
I've setup a demo of my problem at the following url: http://jsfiddle.net/YHHg7/4/
I'm trying to do the following:
legend {
display: block;
border-bottom: 1px solid red;
margin-bottom: 50px;
}
However it seems all browsers ignore the display: block on a legend tag. Is this the correct behaviour for this tag or am I doing something wrong?
<legend> is a block-level element by default, so whether you include display: block there's no difference. However, it's treated specially together with <fieldset> by browsers as a label for a fieldset.
To "detach" it from the <fieldset> you can give it a non-static position, or float it, or even just play a little more with its margins. Results can be a little unpredictable, though, again due to the special treatment of both elements.
IMO the best thing you can do to control legend is just leave it as a semantic fixture only.
CSS:
legend {
display: block;
margin: 0;
border: 0;
padding: 0;
width: 100%;
}
And then use a span inside it to control all of your desired styling:
HTML:
<legend><span>Span to the rescue!</span></legend>
CSS:
legend span {
display: block;
padding: 0 20px;
border-bottom: 1px solid red;
}
Clean, semantic, and generally easily manipulated across different browsers
A legend is a block-level element by default. If I add the width back in using Chrome (Dev channel), the width of the legend is changed appropriately.
If you're instead wondering about the margin style, a legend can only have its left or right margins set, and that would place it relative to the fieldset its's contained in. If you want to add spacing to the other elements, then you would probably want to add padding to the fieldset itself.
Uncomment the width attribute if you want the red line to go all the way across.
legend {
display: block;
border-bottom: 1px solid red;
width:100%;
margin-bottom: 50px;
}