I have an H2 element that I'd like underlined and with a graphic of an arrow "below" the bottom border line.
Currently, the arrow appears above and if I change the background coordinates to lower the arrow, it starts to disappear.
my code:
h2 {
background: url("images/arrow-title.png") no-repeat scroll 10px 27px transparent;
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
}
image of what it's currently doing:
image of what I'd like to do:
and finally, a website link to a theme which does this properly. I have viewed the "inspect element" on Firefox and can't seem to adjust the CSS to make it work. :(
Website link to theme that looks correct: http://www.joomlart.com/demo/#ja_travel
What they are doing is putting a <span /> inside the <h2 /> tag and giving the span the border-bottom instead of the <h2 />
This way the <h2 /> has the arrow as a background image and since the <span /> adds a 3px padding on the bottom it is aligned perfectly.
<h2>
<span>
This is my header
</span>
</h2>
and then something like this
h2{
background: url("../images/arrow-title.png") no-repeat left center;
}
span{
border-bottom: 2px solid black;
padding-bottom: 3px;
}
Add a span inside your H2. Apply the border to that span and use padding-bottom on the H2 to adjust the arrow position.
If you prefer not to use a background image, you can try using a pseudo-element:
h2 {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
}
h2:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 5em;
color: #00a7a8;
}
See fiddle reference: http://jsfiddle.net/audetwebdesign/kFSvL/
The major advantage is the simplicity of the markup:
<h2>The Header Is Here</h2>
No extra tags required!
Make the underline part of the background image. It clearly should be from a visual perspective, so it might as well be from a technical perspective.
Related
So i wish to put an icon above an h3 solely using css. Reason being that i don't wish to edit the html in a wordpress plugin.
So i decided to use pseudo element ::before which displays the icon correctly but places it before the h3 rather than above.
Adding display:block solved this issue until i decided to put a border around the icon, which then puts a border around the entire block, which is not what i want.
So i'm looking for better options if anyone can advise.
h3.icon:before {
font: normal normal normal 16px/1 FontAwesome;
content: "\f0c1";
display: block;
margin-bottom: 25px;
padding: 20px;
border: 1px solid #000;
}
<h3 class="icon" style="color: #000000;">Los Angeles</h3>
h3.icon:before {
font: normal normal normal 16px/1 FontAwesome;
content: "\f0c1";
display: block;
margin-bottom: 25px;
padding: 20px;
border: 1px solid #000;
text-align:center;
width:50px;
margin:auto;
}
<h3 class="icon" style="color: #000000;">Los Angeles</h3>
Not exactly sure what you want to achieve, do you want a border around the icon but not with all the extra padding in the block?
If that is the case try giving it a width and margin either side.
I have a styled sentence with dynamic text. Sometimes the text is too long, and pushes the anchor at the end outside its box. I want the text to wrap after the span.price-difference, but the anchor button to be positioned against the right side of the p.
I added an :after pseudo element to .price-difference. I've got it set content: '' and display: block. Works in FF, Chrome, IE (including IE8, which I have to support), but not Safari.
There is an easy answer, wrapping the text following .price-difference with another span, and set it to block, but changing the HTML is a hassle, requiring a backend developer to make changes to a JSP file, and I'm hoping to avoid that. Looking for a CSS only solution, if it exists.
<p class="upsell"> Upgrade To
<span class="stateroom-upgrade"> Concierge Class </span>
for an additional
<span class="price-difference">$7.14 USD </span>
per person per day
<span>View Upgrades</span>
</p>
The CSS
.upsell {
background: none repeat scroll 0px 0px #FAFAFA;
border-top: 2px dashed #E8E8E8;
color: #666;
display: block;
font-size: 11.5px;
font-weight: 600;
margin: auto 19px 5px;
padding: 8px 0px 8px 8px;
position: relative;
text-transform: none;
white-space: nowrap;
width: 560px;
}
.upsell .price-difference {
color: #0C82C4;
font-size: 15px;
font-weight: 700;
margin-left: 5px;
display: inline-block;
}
.stateroom .upsell .price-difference::after {
content: "";
display: block;
}
.upsell .ccButtonNew {
position: absolute;
right: 10px;
top: 17px;
}
The p element has white-space: nowrap set on it, but when I turn it off, the problem doesn't go away.
I think it's related to the following link, but my situation isn't the same. In that question, the asker put a block level element div inside a p, which only takes inline elements. I have an inline element, span, inside the p. This should work.
:after pseudo-element working in FF, but not Safari or Chrome
.stateroom .upsell .price-difference:after {
content: "";
display: block;
position: absolute;
width: 30px;
border-top: 1px solid #000; /* placeholder border */
}
try adding a position to the after's css rules. i had a similar situation in which the after pseudo wouldn't display in old versions of safari but worked properly in all other browsers. I fixed adding a position rule to the css.
Hope this hepls.
<style type="text/css">
.button2 {
font-family: "Georgia Pro", Georgia;
background: #000;
color: #fff;
text-decoration: none;
padding: 5px 15px;
border: 3px solid #000;
font-size: 14px;
}
.button2:hover {
border: 3px solid #000;
background: #fff;
color:#000;
}
</style>
<span>ADD TO SHOPPING BAG</span>
This is my code. I want to make it so that when the user moves over the link, the hover box moves from the bottom or top and comes in? I am very new to CSS3 transitions and don't understand the whole s and width thing or height? The only thing is I want it more or less maybe fluid and better to handle responsive design.. think em and auto height??
jsFiddle: http://jsfiddle.net/Ysr7W/2/
Sample hover:
Although i think CSS isn't the right language for this effect, i did try to create something for you. The code isn't perfect, but it does what you requested: http://jsfiddle.net/Ysr7W/9/
The HTML structure i used:
<a href="#" class="button">
<span class="white">ADD TO SHOPPING BAG</span>
<span class="black">ADD TO SHOPPING BAG</span>
</a>
I have the following code:
<h1><span>Test Heading</span></h1>
and CSS:
h1 { font-size: 1.3em; font-family: calibri, arial;border-bottom: 1px solid #999; padding-bottom: 10px;margin-bottom: 5px; background-color: pink;}
h1 span { color: #fff; background-color: #446688;padding: 1px 5px 3px 5px;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
Right now it displays something like this:
XXXXXXXXXXXXXXXX
x Test Heading X
XXXXXXXXXXXXXXXX
----------------------------------------------------------------------------------------
What I need to be able to do is have text appear to the right of the heading like this:
XXXXXXXXXXXXXXXX Some text aaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
x Test Heading X more text aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
XXXXXXXXXXXXXXXX aaaaaaaaaaaaaaaaaaaaaaaaaaa
----------------------------------------------------------------------------------------
I think this is not so easy to do. Can anyone suggest how I could do this? I guess I need some kind of outer enclosing DIV for my heading but when I tried that the text always appears below the heading instead of to the right.
Here is an example of what I have now
demo
Wrap it all in a <div>, move the pink background color and bottom border to the <div>, and float the <h1> to the left.
For example:
<div class="bb">
<h1><span>Test Heading</span></h1>
This is text that I want to make appear to the right of the heading and above the blue base line. This is text that I want to make appear to the right of the heading and above the blue base line.
</div>
CSS:
.bb {
border-bottom: 1px solid #999;
padding-bottom: 10px;
background-color: pink;
overflow: hidden;
}
h1 {
font-size: 1.3em;
font-family: calibri, arial;
margin-bottom: 5px;
float: left;
}
h1 span {
color: #fff;
background-color: #446688;
padding: 1px 5px 3px 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Fiddle: http://jsfiddle.net/ambiguous/FNLBD/
You'll probably want to pretty up the paddings and margins a bit though.
Put the H1 text and the other text in separate DIV's. Then make them float next to one another using CSS
Float the heading.
try
display:inline;
http://jsfiddle.net/gKqQc/
Add this to the H1 CSS:
float: left;
margin-right: 10px;
This will float your heading left so that the text can wrap around it on the right, Check this JS Fiddle, The Margin-right will add a 10px margin to the right of the heading for presentation.
float-ing the h1 to the left is the best option in this case and your markup could do with a little tweaking to accomplish this in the best possible way.
<div class="box">
<h1>Test Heading</h1>
<p>This is text that I want to make appear to the right
of the heading and above the blue base line. This is
text that I want to make appear to the right of the
heading and above the blue base line.</p>
</div>
Demo: jsfiddle.net/Marcel/ryGFq/10
You'll see there's a second option in the demo too showing the best way to have the content left justified, however an absolute value is required for the margin-left.
Try with
display: table-cell;
For both the H1 and the Text. They will appear next to each other.
I want to have a standard method of formatting "Show More" links in my HTML pages.
In HTML I use:
<span class="showMore">Show more details</span>
Then in the css, I have:
.showMore {
color: #0E4B82;
padding-left: 18px;
background: url("images/icons/add.png") no-repeat 0px 0px;
}
.showMore:hover {
color: #F5891D;
cursor: pointer;
}
where add.png is a 16x16 famfamfam silk icon. I use JavaScript to expand some content section using an onclick event.
This works nicely in Firefox 3.0.5 but in IE 7 the last few pixels of the icon are chopped off. I'm looking for a workaround. Using height doesn't work on inline elements like <span/>. Adding a transparent border fixes the issue in IE7:
.showMore {
border: 1px solid transparent;
color: #0E4B82;
padding-left: 18px;
background: url("images/icons/add.png") no-repeat 0px 0px;
}
But IE6 doesn't handle the transparency. Making the text bigger fixes the problem but I don't want big text. line-height doesn't work. Anyone know anything that may help?
I've solved the problem. I've no idea why but using no-repeat center left instead of no-repeat top left ensures IE doesn't chop off the bottom 2px of the icon. Why using center instead of top should result in the image being higher is strange but that's IE for you??
.showMore {
color: #0E4B82;
padding-left: 18px;
background: url("images/icons/add.png") no-repeat center left;
}
.showMore:hover {
color: #F5891D;
cursor: pointer;
}
Does
display: block;
height: 16px;
Help fix the height of the span?