I am trying to make a CSS :after triangle the usual way. But it does not look as a triangle at all, please see http://jsfiddle.net/lborgman/eX3HL/:
/* triangle after */
#st:after {
position: relative;
margin-left: 10px;
content:"";
border-top:4px solid transparent;
border-bottom:4px solid transparent;
border-left:4px solid black;
}
#st {
line-height: 2em;
}
If I change "position:relative" to "position:absolute" the triangle will become a triangle. But that does not work where I want it (because it is on a float div).
What can I do?
Add display:inline-block to fix the triangle
#st:after {
position: relative;
margin-left: 10px;
content:"";
border-top:4px solid transparent;
border-bottom:4px solid transparent;
border-left:4px solid black;
display: inline-block;
}
JS Fiddle: http://jsfiddle.net/eX3HL/2/
It's a phenomenon that has to do with the native display of an object. The native display property of span is inline. Inline elements behave like plain text, while block elements behave more like images.
In your example when you do not override the default property of the span your element behaves like text and thus has also an font-size shadow-property which is set to inherit. It's an unexpected behavior since the shadow-properties are not visible to developers directly, so causing a lot of unclarities. You don't have to just believe my words, here is a proof: http://jsfiddle.net/eX3HL/5/
Related
I want to create a partial circular border around an element using pure css. I've been able to achieve the effect to a certain extent in this: http://jsfiddle.net/5MZMj/202/
However, this removes 25% or the border, How do I remove just 5% or say 20% ?
Also, how do I rotate the border (without rotating the content inside)?
Code in jsfiddle:
HTML:
<div class="one">
<div class="two">4.5</div>
</div>
CSS:
.two {
font-size: 24px;
display:inline;
padding-bottom:5px;
}
.one {
padding: 10px;
border: 1px solid green;
border-radius: 25px;
border-top-color: transparent;
width:30px;
margin-left: 10px;
}
Edit: image to give an idea of the effect I'm trying to achieve: http://imgur.com/JU78ICT
Edit2: sorry, I just realized I had linked the wrong jsfiddle, correct one is: http://jsfiddle.net/5MZMj/202/
I'm not sure if this is what you're looking for, but a simple hack is to put the upper right circle behind your main div:
#f {
z-index: -1;
}
http://jsfiddle.net/5MZMj/199/
Partially solved using psuedo elements, see: http://jsfiddle.net/5MZMj/205/
:after {
display: inline-block;
content: "";
border-left: 10px solid transparent;
border-top: 25px solid #fff;
border-right: 10px solid transparent;
border-top-color: #fff;
position: absolute;
margin-top:-42px;
margin-left: -5px;
}
Editing margin-top, margin-left and border-right changes the amount of arc to be removed.
[There ought to be a better way though, someway in which editing a single variable changes the amout of arc to be removed]
I didn't get you all, but may be this is the answer.
#f
{
right:-93px;
}
http://jsfiddle.net/7zDNK/
You can specify the radius for each corner if that what you mean:
border-radius: 5px 10px 15px 20px;
Starting with the top-left corner and going clockwise.
If you want to take less of a chunk out of the corner, you need to adjust the positioning of the circle.
http://jsfiddle.net/5MZMj/201/
#f {
right: -85px;
top: -85px;
}
Ok so i have text inside a border that's inside a bigger border. The text inside the border is in a row of 2 but the problem is the larger border doesn't go around them. Here's a picture.
The problem i'm pretty sure is either the width or the float of the inside border which makes it a row.
Here is the css:
.fifty {
width: 45%;
float: left;
}
Here is the css for the actual border:
.newspaper3 {
border-top: 3px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
padding: 5px;
margin-right: 3px;
}
Here's part of the html:
<div class="count">
<div class="fifty">
<div class="newspaper3">
text
</div>
</div>
</div>
Here's all the html and css http://jsfiddle.net/ELSaV/
Thanks for the help!
Is this what you are looking for?
http://jsfiddle.net/gespinha/ELSaV/4/
Basically your issue is caused by the float: left CSS attribute on the .fifty element. Using the float attribute removes the element from the actual document flow, so its position is ignored by other elements.
To reassign its position to the document flow, you should add an element that has a clear attribute after the one that has the float attribute. This clear should have the value which you wish to clear. In this case it should be left, but in case you need to reuse this element later in your project, you should create a class that clears both.
So, to solve your problem, and reassign .fifty to the document flow I created an empty div element with a class name .clear, and in the CSS I attributed this class a clear: both.
.clear {
clear: both;
}
In order for .fifty children to be displayed in a row, you simply need to assign them the same float attribute, which pushes them in the same direction, forcing their alignment within the parent element.
.newspaper3 {
border-top: 3px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
padding: 5px;
margin-right: 3px;
float:left; /* ADD THIS */
}
Note: as I said I just attributed the value of both to this clear element, because I am assuming you could need it later in your project, although, in this case, you only need to clear the left float. There are other ways of establishing a clear on your floats, this is just one strategy.
I have paragraphs on a page which i would like to add a border.
<p class="valid">paragraph</p>
CSS
p.valid {
padding:5px;
border: 1px solid #ccc;
}
The Problem is this displays the paragrph as 100% of the page
I have also tried adding inline-block which wraps the text as i would like, but inline is like float left.
p.valid {
padding:5px;
border: 1px solid #ccc;
display: inline-block;
}
When you float the element, also set it to clear any (left) floating elements:
p.valid {
padding:5px;
border: 1px solid #ccc;
display: inline-block;
float: left;
clear: left;
}
From the MDN documentation:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them
I would use a <span> tag instead of <p> because a paragraph is supposed to extend across the entire page, and it looks like <span> will help you more with what you're trying to accomplish.
I am currently trying to make a custom underline with border-bottom. However, currently the underline is going all the way of my block-element (whole page).
I’d prefer to have it being only 50px longer than my headline (however the text is flexible and I do not know the length).
Can I do this without adding another <span> tag within the <h2> somehow? I do not wannt to add a <span> element to each <h2> just to change my design.
Current HTML is:
<h1>My title</h1>
CSS:
h1 {
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
}
Is it possible to adjust the border-bottom length to my text length? (e.g. behave like inline element for border, but like block for newlines, padding and margin)
Using display: inline-block works, the only caveat being that the content after the <h1> tag must be the full width of the container element. The other solutions here also assume this. You can also use display: inline (supported by older browsers), but inline-block allows for setting of explicit widths, should you need it.
Here's a JSFiddle
CSS
h1
{
display: inline-block;
padding-right: 50px;
border-bottom: 1px dotted #888;
}
Inline or floating methods can be problematic if you're unable to compensate for them in other rules. One alternative is to use display:table
h1
{
display:table;
border-bottom:1px solid black;
padding-right:50px;
}
You can use
h1 {
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
float: left;
padding-right: 50px
}
Simply add one more property in css like this :
h1 {
display:inline;
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
}
This question already has answers here:
CSS hover border makes elements adjust slightly
(14 answers)
Closed 25 days ago.
I have an li styled as follows:
li{
display:inline-block;
padding:5px;
border:1px solid none;
}
li:hover{
border:1px solid #FC0;
}
When I hover over the li the border appears, but the li's shift around. Is it possible to have the border appear without causing the element to shift? Almost like having an invisible border, and then on hover make it appear?
You can use "transparent" as a colour. In some versions of IE, that comes up as black, but I've not tested it out since the IE6 days.
http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php
Many of you must be landing here to find a solution for opaque border instead of a transparent one. In that case you can use rgba, where a stands for alpha.
.your_class {
height: 100px;
width: 100px;
margin: 100px;
border: 10px solid rgba(255,255,255,.5);
}
Demo
Here, you can change the opacity of the border from 0-1
If you simply want a complete transparent border, the best thing to use is transparent, like border: 1px solid transparent;
You could remove the border and increase the padding:
li {
display: inline-block;
padding: 6px;
border-width: 0px;
}
li:hover {
border: 1px solid #FC0;
padding: 5px;
}
<ul>
<li>Hovering is great</li>
</ul>
hey this is the best solution I ever experienced.. this is CSS3
use following property to your div or anywhere you wanna put border trasparent
e.g.
div_class {
border: 10px solid #999;
background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */
}
this will work..
Yep, you can use border: 1px solid transparent
Another solution is to use outline on hover (and set the border to 0) which doesn't affect the document flow:
li{
display:inline-block;
padding:5px;
border:0;
}
li:hover{
outline:1px solid #FC0;
}
NB. You can only set the outline as a sharthand property, not for individual sides. It's only meant to be used for debugging but it works nicely.
Since you said in a comment that the more options you have, the better, here's another one.
In CSS3, there are two different so-called "box models". One adds the border and padding to the width of a block element, while the other does not. You can use the latter by specifying
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
Then, in modern browsers, the element will always have the same width. I.e., if you apply a border to it on hover, the width of the border will not add to the overall width of the element; the border will be added "inside" the element, so to speak. However, if I remember correctly, you must specify the width explicitly for this to work. Which is probably not an option for you in this particular case, but you can keep it in mind for future situations.
This blog entry has a way to emulate border-color: transparent in IE6. The below example includes the "hasLayout" fix that is brought up in the blog entry comments:
/* transparent border */
.testDiv {
width: 200px;
height: 200px;
border: solid 10px transparent;
}
/* IE6 fix */
*html .testDiv {
zoom: 1;
border-color: #FEFEFE;
filter: chroma(color=#FEFEFE);
}
Make sure that the border-color used in the IE6 fix is not used anywhere in the .testDiv element. I changed the example from pink to #FEFEFE because that seems even less likely to be used.
Use transparent property
border-color : transparent;
The easiest solution to this is to use rgba as the color: border-color: rgba(0,0,0,0); That is fully transparent border color.