I'm redesigning my website and wish to have certain paragraphs styled like in the below image.
I thought this would be fine but now it's suddenly just hit me... there's no way to set the thickness of an underline! Or at least I don't think there is?
Of course there is the border property, but then I would only have a border at the bottom of the whole paragraph and not under each line.
Can anyone think of a workaround for this?
You can turn your paragraph into an inline display: DEMO
This way you can even set a border-style to your underline'like:
p {
display:inline;
border-bottom:3px double;
}
Single <p>aragraphs in between title
An example of this would be:
h4 {border-bottom: 10px solid #000;}
I found this from another stack exchange question found here:
Edit line thickness of CSS 'underline' attibute
Related
I am aware of the line-height property and all the fun we can have with it, but is it possible to adjust line spacing some other way?
In Adobe InDesign, for example, line height and line spacing are two separate properties that can be adjusted independently.
I'm working on a design right now using a very nice Garamond, but setting the line-height to a nice legible level also makes things like links and underlines look very ugly. Plain underlines with text-decoration look fine, but ideally I would like to be able to make the underlines more visually stunning and interactive, like on HuffPost's website. They are using a box-shadow. Box shadow, bottom border, anything like that will snap to the bottom of the line's height.
Can we have both with CSS?
EXAMPLE:
Normal underline using text-decoration: underline;
Border "underline" using border-bottom: 1px solid $special-blue;
Seems way too far below the text, in my opinion. Even with a moderately conservative line-height of 1.4rem
I found this solution, where you can set the line-height to 1 for that particular element. This resets line-height for that element, but doesn't affect anything else in that line.
by doing like this,
p.new a{
text-decoration: none;
display:inline-block;
border-bottom:1px solid green;
line-height:1;
}
JS Fiddle
I believe there are no two different properties for line height and spacing.
Consider the following:
I am writing a debug class to show the position of elements on a page. I want to show the margin edge above (outside dashed line), but realise I can not use the border as this is the inside margin edge. How can I do this?
You’re probably best off setting an outline in combination with an outline-offset. outline is like border, but doesn’t take up any space in the layout and has a slightly different set of rules. Given a div with a 1px border and 10px margin, you’d add an outline like this:
div {
border: 1px solid black;
margin: 10px;
outline: 1px solid red;
outline-offset: 10px;
}
More info on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset
Unfortunately outline-offset isn’t supported in IE. If you need to support that then you’ll have to go down the psuedoelement route as per the other answers.
The box model prevents this.
As you in your original post the margin of a box is not included in it's content size. Without changing your margin to padding this could only be done with pseudo elements.
http://jsfiddle.net/Fcwkw/1/
Since you mentioned it's a class you can simply get a div's margin with some Javascript and set the pseudo padding to the margin.
That's not how border's work, and your image is a perfect example of that. You could create a border with a second element or with the use of :after for example...
You can use :before/:after with position:absolute, border-left/right and height:100%
I'm needing to remove the border above the scrolling images here: http://briansmall.com/inovar/capabilities-test.html
Trouble is, my style.css (line 367) seems to trump my screen.css, and I can't remove the border without removing it from the #left-nav a (on the same page), which I don't want to do.
Can anyone help me remove the border-top from the img on this particular page? I hope I'm making sense.
Thank you.
I appears you have border: 0 none;, not sure what you're trying to do here (you should pick one: Should I use 'border: none' or 'border: 0'?) , but if you set your css to:
img { border: 0 !important; }
in your stylesheet, that should override your inline style and remove the border on all sides.
you should try this img{border: 0}
Edited
Look into these:
try to remove border from parent of your <img>. In this case from your <a> tag
set your border in #left-nav a to none
OR
if you can't edit it, you can add new element rule for your <a> in slide show and set
border: none !important;
I have a global rule for anchor tags in my document:
a,a:hover {border-bottom: 1px solid #ccc;}
But the border doesn't look good on images. I was curious if there's a way to remove the border of an anchor tag that contains an image only using pure css?
I found this: http://konstruktors.com/blog/web-development/1122-remove-border-from-image-links/
It basically is a very simple hack that looks like this:
a img { border:none; vertical-align:top; }
It works like a charm and has no browser-conflicts: See article for more details.
EDIT: The border:none doesn't actually do anything useful in most circumstances. The border is on the anchor, not the img tag, so if you've already zeroed out the border on anchored images with a global CSS reset, you'll only need vertical-align:top to push the a's border up and behind the image so it's no longer visible (as long as your image is opaque).
No, there is currently no selector in CSS that would select elements on the basis of their descendants. You would need to use JavaScript or classes in CSS.
Most robustly, you would use a class attribute on all links that do not contain an image and use a corresponding class selector in your CSS rule.
If most of your links do not contain an image, you could use negative approach and set a class on those links that contain an image, say class=imagelink, and use a :not(.imagelink) selector in CSS. Support to :not(...) is widespread but not universal. A yet another approach, not counting on such support, is to set a bottom border on all links as in your question and then switch it off for image links:
a.imagelink {border-bottom: none;}
Not possible, unfortunately! I guess I've only done this using jquery.
http://www.w3schools.com/cssref/css_selectors.asp
Complex CSS selector for parent of active child
Is there a CSS parent selector?
It's not possible using cssbut you can do it using css if you add cssParentSelector.js script which uses jQuery. Here is an example
a! > img { border: none; }
above css rule removes the border from the a tag if it's the parent of an img tag, but still now it's not pure css, has dependendencies.
The vertical-align trick only works [well] with non-transparent images, and doesn't work at all if the a line-height is greater than the image height (think small social networking icons).
I wish I could use the accepted solution here, but it throws off alignment of inline images within text blocks, along with the issues above.
I've settled for doing a solid white box-shadow on the bottom of a > img, maybe a backup filter shadow for IE8 and older, and calling it a day. Doesn't mess with the layout:
a { text-underline: none;
border-bottom: 1px solid blue; }
a img { box-shadow: 0 .333em 0 0 white; /* white, or your background color */
filter: progid:DXImageTransform.Microsoft.Shadow... etc }
As said by other answers to your question, it's not possible do it with CSS by now. But if you use jQuery, this work great:
$(document).ready(function(){
$('a img').parent().css('border','none');
});
It basically after the page is loaded search the links containing an image and state the css rule border:none; for the parent element of the image, ie. the link.
I want to set the border of a table to be "1px solid black" except on the bottom, where I want to use an image which provides a pointer into the link - as a visual aid.
Is it possible to set an image as the bottom border when the other borders are regular css.
Try putting the table inside <div class="myTableContainer"></div> and then:
.myTableContainer{
padding-bottom: 1px;
background: url(myBorderImage.png) bottom left;
}
This should work well across all browsers.
CSS3 has added support for border-image. You can find more information at http://www.w3.org/TR/css3-background/#border-images. At this point (early 2012), it's probably not safe to use due to lack of support in all versions of IE. To track when it is safe to use you can visit http://caniuse.com/#search=border-image. One way to simulate the border-image style is to use a positioned background-image. For example, to simulate a top border:
div
{
background-image: url('topBorder.gif');
background-position: top;
background-repeat: repeat-x;
}
I don't think so. You're probably better off adding a <DIV> below the table, give it a black border, a fixed background, and some fixed padding or whatnot (to give it some size).
One solution is to style your element with a background image in css and then specify an offset for the background in CSS. The background can poke out from beyond the edge of the element (a div or li element for example). This can be used for many different effects, one being the appearance of a drop shadow using pure css.
Some specifics here:
http://www.alistapart.com/articles/cssdropshadows/
Now there is CSS3 and a border-image property for that, but still it does not work for all browsers.
OK, let's there be a W3Schools link on this topic.
No. Why don't you try another table row for that purpose?
Try putting a below your table then set his style like
.bottomborder {
height:1px;
background-image:url("yourImage.png");
}
Should work good.
Edit : and of course border-top, left, right for your table a "solid 1px black"
You can set the borders like that except the bottom border :
border-top:1px solid black;
border-right:1px solid black;
border-left:1px solid black;
For the bottom border, you can set your image as background of a row maybe.