I'm trying to create a label that has a right arrow. It looks like this:
The code I'm using is the following (LESS):
#font-size: 14px;
#padding-top: 4px;
#arrow-bheight: #font-size;
.label {
position: relative;
font-size: #font-size;
font-weight: normal;
font-style: italic;
text-transform: uppercase;
padding: #padding-top 8px;
line-height: 1;
color: #fff;
background: #000;
&:after {
content: "";
width: 0;
height: 0;
border-top: #arrow-bheight solid transparent;
border-bottom: #arrow-bheight solid transparent;
border-left: #arrow-bheight solid #000;
position: absolute;
right: -#arrow-bheight;
top:0;
}
}
My problem is that depending on the font we use, the arrow doesn't fit perfectly into the text font.
I've been trying to set a specific value for the line-height, e.g. line-height: #font-size, but it's not working.
Here's a CodePen of the problem.
How can I make the right arrow have the proper height regardless of the font used?
There's no need to define #padding-top variable separately. Instead you could use em unit which is relative to the element's font-size.
Also you should change the display type of the labels to inline-block:
Updated Example
.label {
display: inline-block;
font-size: #font-size; /* This has been set to 14px */
padding: 0.5em 8px; /* The computed value of 0.5em would be 14px/2 = 7px */
line-height: 1;
/* other declarations... omitted due to brevity */
}
Two things that may help...
The background-position edge offsets and the CSS calc unit.
I'm not familiar with the first though CSS calc will let you do things such as...
height: calc(100% - 24px);
Related
I'm trying to create bootstrap button with icon floated on the left and it has right border fills the full height of the button.
I have tried the following CSS:
a.btn.btn-xlg i {
float: left;
border-right: groove;
height: 100%;
display: inline-block;
padding: 0 4%;
}
And the HTML is:
...
<i class="fox-job"></i>Jobs
...
The following is a screen shot for what I have gotten:
Update
[class^="fox-"]:before, [class*=" fox-"]:before {
font-family: "fox";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
font-size: 140%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 0px 1px 5px rgba(255, 207, 118, 0.9);
}
Is there any way that allows the border to cover the full height of the button as shown in the screen shot?
By the way if there is, but it is not essential, any solution direction less would be better. i.e in the rtl documents it does not need modification to float the icon to the right instead of left.
Update 2:
According to Ghassen Louhaichi answer, I have got that screen shot:
And I used the following CSS :
a.btn.btn-xlg i {
float: left;
border-right: groove;
/* height: 100%; */
display: inline-block;
/* padding: 20px 16px; */
height: 72px;
padding: 20px 5px 0 0;
margin-top: -20px;
margin-bottom: -26px;
}
There is a padding in the button that you either need to remove and place the contents of the button in the vertical center manually, or add the following CSS rules to your class to counter the effect of the padding using negative margin (you may have to play around with the value a bit until it looks right) :
a.btn.btn-xlg i {
/* the other attributes... */
/* set the icon height to the button height */
height: 34px;
/* pad the icon to be at the center instead of the top */
padding: 9px 4%;
/* adjust the negative margins to counter the padding effect */
margin-top: -8px;
margin-bottom: -6px;
}
I’m trying to draw a circle around the first letter of each first paragraph in an article using border-radius and padding, but because of the different widths of the characters, it will be displayed as an ellipse rather than as a circle.
Is there any possibility to set width and height of a letter to the same amount with CSS or to set the padding so that it matches together with the width the height of any character?
My current code looks like this:
p:first-of-type:first-letter{
font-size: 58px;
line-height: 1;
float: left;
margin-bottom: -4px;
background-color: rgb(44, 44, 44);
border-radius: 40px;
padding: 0 14px;
color: #fff;
}
Per #web-tiki - The ::first-letter pseudo element doesn't allow the width property. The only solution would be to use a monospace font or to use a container for the first letter. It would allow specifying a with for it an keep the circle round.
Building on web-tiki's excellent answer, you could size everything in em so it reacts to font-size changes as well.
span {
font-size: 58px;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
display: inline-block;
vertical-align: middle;
background-color: rgb(44, 44, 44);
border-radius: 50%;
color: #fff;
text-align: center;
margin-right: .1em
}
p:nth-of-type(even) span {
font-size: 24px;
}
<p><span>A</span>pple</p>
<p><span>Q</span>uestionable</p>
For those who may not want to add an extra element around each first letter, another solution would be using a svg as a background-image:
p:first-of-type:first-letter{
background-image:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSI1OCIgd2lkdGg9IjU4Ij4KICA8Y2lyY2xlIGN4ID0iMjkiIGN5ID0iMjkiIHIgPSIyOSIgc3R5bGU9ImZpbGw6IzQ0NDQ0NDtzdHJva2U6bm9uZTsiIC8+Cjwvc3ZnPgo=");
padding:0px 15px;
background-repeat:no-repeat;
background-position:center center;
}
I have an infoBubble with some text and images. The right aligned image (arrow) is pushed down in Firefox (Mac) but not Safari or Opera dependent on the length of the text to the left and above. See the marker over Australia: http://www.hostelbars.com/map_test_v3_3.html
Here's the css:
.infowindow {
background-color: #000;
color: #FFF;
font-size: 18px;
font-family: Helvetica Neue, Helvetica, Arial;
text-shadow: 0 -1px 0 #000;
font-weight: bold;
position: relative;
overflow: hidden;
}
.infowindow .iwPhoto {
background-color: #F00;
position: relative;
padding-bottom: 1px;
padding-top: 2px;
padding-left: 5px;
}
.infowindow .iwName {
background-color: #0F3;
line-height: 33px;
white-space: nowrap;
position: relative;
margin-left: 115px;
margin-top: -70px;
padding-right: 5px;
padding-top: 2px;
}
.infowindow .iwCity {
background-color: #C03;
line-height: 32px;
margin-left: 115px;
padding-bottom: 1px;
}
.infowindow .iwCity .iwArrow {
background-color: #0CF;
padding-right: 5px;
padding-left: 5px;
margin-top: 3px;
float: right;
}
Aside from the images I don't want the div's to have a fixed width. Would appreciate some help.
Brendon
Seems to only happen the first time, and for items with city values longer than name values. This suggests you didn't set width and height values for your img element (arrow.png), so the first time it has no idea what size it's going to be, and subsequent times it does.
What you should probably do is change it to a background image, as it's merely an iconified decorative image meaning 'next' or 'more', and thus should be in CSS's realm of style, not HTML's realm of meaning (where 'img' lives). See this list of image replacement techniques.
Otherwise, you could just apply img[src$="arrow.png"] { width: 29px; height: 29px; }, or add width and height attributes to the img element.
On this page I'm trying to position quote images around the block quote but they won't sit right.
This is the CSS:
blockquote {
padding-left:10px;
color:#444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
blockquote p {
padding: 0 100px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
I want to keep the images the same size ideally. I just want to make the text stop overlapping the images. I tried specifying the width of the .blockquote as 500px but it didn't seem to make any difference.
Any ideas would be welcomed. Thanks - Tara
Two things:
In order to see the images behind
the text you should not specify a
background color for the inner paragraph; make
it transparent instead.
The specified padding is not applied due to another property (.entry p) which is more specific. You could set this blockquote padding to !important but that's generally not recommended, another option is to make this one more specific than the other (.entry p) by adding the .entry class. Be aware that only blockquotes with a parent .entry class will be selected this way. (more info about specificity)
The css:
blockquote {
padding-left: 10px;
color: #444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
.entry blockquote p {
padding: 0 100px;
background: transparent url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
Try adding this property:
.entry p {
margin: 5px 5px 5px 15px;
padding: 0px 40px 0px 0px;
line-height: 20px;
font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
font-size: 13px;
}
I managed to get the following:
Hope that helped (:
Depending on the browser support that you need, you can try it without images, using CSS:
blockquote {
padding: 0;
margin: 0;
border: 1px solid blueviolet;
}
blockquote:after,
blockquote:before {
color: #ccc;
font-size: 4em;
line-height: 0;
height: 0;
vertical-align: -0.5em;
display: inline-block;
}
blockquote:after {
content: "”";
margin-left: 0.05em;
}
blockquote:before {
content: "“";
margin-right: 0.05em;
margin-bottom: -0.5em;
}
Live example here
(Tested on Firefox and Chrome only)
I'm using the following CSS:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
}
h2 span {
position: absolute;
top: 7px;
padding-right: 6px;
background-color: #F9F9EE;
}
When used like:
<h2><span>abc</span></h2>
Gives the following effect:
abc ------------------
The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.
I do remember seeing the same effect being used on a few blogs but the url slips my mind.
Thank you. :)
As Rory mentioned, using position relative on the H2 tag solves the problem without the use of an image.
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
position:relative;
}
h2 span {
position: absolute;
top: -0.8em;
padding-right: 6px;
background-color: #F9F9EE;
}
This works in the three browsers I use for testing (IE, Firefox, and Chrome).
I'm not entirely sure what you're trying to do and what the problem is exactly, but adding position: relative; to the h2 style will create a positioning container in which the span position: absolute; will calculate its values from.
I don't see the effect that you described in Firefox, only in IE6.
One way you could achieve this effect is to use a single pixel background image, tiled horizontally at 50% of the height of the div. It's not as nice, since you do have to use an image, but it should look how you want without affecting the HTML.
I'd suggest something like:
h2 {
font-weight: normal;
font-size: 1.6em;
font-style: italic;
background: url(pixel.png) repeat-x 0% 50%;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}
I've checked it in IE6 and Firefox, using it multiple times on the same page. :)
My favorite way to do this is:
<fieldset class="blah">
<legend>Heading</legend>
content...
</fieldset>
and then add
fieldset.blah {border-top: 1px solid #999;}
in your CSS. Hope that helps.
Try this:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
height: 0.75em;
margin-bottom: 1.85em;
overflow: visible;
font-style: italic;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}