I am looking or a way to include two images left and right to a title span. The problem I am facing is, that this title will in some cases be stretched across two lines, however not always. I do not want to include two extra elements before/after or after the title but am instead looking for a way to achieve what I am trying without adding new elements to the code. I was therefreo hoping to use :before and :after. This is what I came up with:
.block-title:before { position:absolute; content:""; display:inline-block; width:28px; height:14px; margin:2px 0 0 -36px; background:url(../images/sidebar_ornament_l.png) no-repeat 0 0; }
.block-title:after { position:absolute; content:""; display:inline-block; width:28px; height:14px; margin:2px 0 0 9px; background:url(../images/sidebar_ornament_r.png) no-repeat 0 0; }
While this will work great, if the title is only one line, titles that will take up two lines, will not behave the way, I would want them to, but instead will look like this:
I have tried everything I could think of, to make the :before and :after pseudoelements behave as I want them to, changing position and display, chaing the actual text span position, etc but just couldn't achieve what I want to.
Since I want the two images to align next to the actual text span, a single background image won't work. The spacing between the text and the image would be too big in some cases, which will look odd. Is there a way to make this work, so I will end up with something like this for two line titles:
Thank you!
Well, this is a general concept, i need your full code to provide a specific answer.
Anyway, check this demo
HTML:
<span class="block-title">Some text is here</span>
<hr>
<span class="block-title">Some more text<br>is here</span>
<hr>
<span class="block-title">Even<br>more text<br>is here</span>
CSS:
.block-title {
position:relative;
display:inline-block;
text-align:center;
padding:0 34px; /* width of your ornament + 6px per each side,
adjust to your actual layout */
}
.block-title:before, .block-title:after {
content:" ";
width:28px;
height:14px;
position:absolute;
top:50%;
margin-top:-7px; /* half of ornament's height */
}
.block-title:before {
background:url(../images/sidebar_ornament_l.png) no-repeat 0 0;
left:0;
}
.block-title:after {
background:url(../images/sidebar_ornament_r.png) no-repeat 0 0;
right:0;
}
If you apply it to a span, rules ok. I made this code (i have changed de image) http://jsfiddle.net/sSEDz/
Related
I am working on a 3D effect button (it's actually a decorated-link) with HTML&CSS, and I need a way to move the object upwards and downwards without using any kind of pixels/cm/mm(absolute units) to specify the length to the top so it can have a 3D effect on hover no matter the position.
I already tried to change the padding and the box-shadow, but it just wouldn't look like what I wanted. The code below is my code to change the padding (which failed).
Button
.button{
display:inline;
text-decoration:none;
font-size:50px;
font-family:monospace;
color:blue;
padding:5px 10px;
background-color:lightgreen;
box-shadow:5px 10px grey;
border-radius:15px;
position:absolute;
transition:ease 0.5s;
}
.button:hover{
background-color:yellow;
color:darkgreen;
box-shadow:8px 15px grey;
padding:8px 15px 5px 10px;
}
The result didn't look really 3D, but if there IS a way to change the "top" and "left" attribute in CSS without using absolute units, the problem would be solved. PLEASE HELP!
What really do you want to achive ?
Do you mean that you don't want to position your button to the outer container when moving and object ? if so then you could use
.css{
position: relative;
top: -10px;
left: -10px
}
Then element will be positioning itself from the place where it belongs
I created a codepen for your case. What you can do is , for example, use transform:translateY(-10%). In this way, you will not be using px, em and rem.
I am just working at an CMS site...but just got into a problem that the slider had text been written first in horizantal one line and now it shows into vertical text per word in every line like in a continuous way...so I am really wondering that what's happening the text to be showed in vertical form instead of horizontal form..so friends any help please...anyone who can tell or findout the real issue..!
The Text Is : "Serving Over 40 Years"
Here it's HTML Code :
<div class="txt2">Serving Over 40 Years</div>
While here it's CSS code :
.slider .txt2{
width:100%;
height:30px;
z-index:11;
font-family:'NeouThin';
font-size:30px;
line-height:30px;
color:#000000;
text-shadow:1px 1px 3px rgba(0, 0, 0, 0.9);
}
Here is slider class CSS code please :
.slider {
position: absolute; left:0px; top:0px; z-index:6;
display: block;
width:975px;
height:537px;
overflow:visible!important;
}
And Here is live link to the site please : http://www.huntedhunter.com/raymain_errors/
waiting for your replies..thanks..
Thanks..
Just add white-space: nowrap; to the txt2 class and it works.
Awesome picture slider btw !
You should set your height to auto like this:
.slider .txt2{height: auto /*Rest of CSS Code*/}
The parent element of that text <div style="position:absolute; left:50%; top :-20%;"> has a width of 0 pixels, since it has not a defined width and a position: absolute. If you define the width for this element, say a width of 200px, the inner element with the text will have this width.
I am implementing a design which contains elements which are semantically headers (h3, h4, etc.), are full-width block elements, and are followed by a vertically centered horizontal line which extends the full width of the header a la:
I know I could take care of this by wrapping each header in a <div> and inserting another block-level element after it but would prefer not to pollute my HTML like that. My first inclination was to use a ::after element on the headers, like so:
.line-header::after {
content:'\00a0';
display: inline-block;
float: right;
width: 55%;
margin-top: -12px;
border-bottom: 1px solid gray;
}
However, this requires making the ::after element fixed-width, which obviously doesn't work with different-width headers: http://jsfiddle.net/nbSTf/
Any ideas on how to get a variable-width line which will fill the space to the right of the header, without inserting extra elements into the HTML?
EDIT: Tyriar's answer below (suggesting drawing the line full-width behind the header and setting the background-color to erase the line behind the text) reminded me that this is taking place in front of a repeating background image - so no background tricks are possible unfortunately.
Here's a method you could do it with, unfortunately it relies on an attribute (not necessarily title), this could easily be set programmatically with JavaScript though.
It uses :before and :after pseudo elements, :after is used to draw the line the full width and :before is used to draw white background behind the text of the size of the text. The pseudo-elements need their z-index set correctly to layer in the correct order.
jsFiddle
HTML
<h3 class="line-header" title="Longer Header Looks Good">Longer Header Looks Good</h3>
<h3 class="line-header" title="Short Doesn't">Short Doesn't</h3>
CSS
.line-header {
margin-top: 15px;
position:relative;
}
.line-header:before {
position: absolute;
display:block;
top:0;
left:0;
bottom:0;
content: attr(title);
background-color:#FFF;
color:#FFF;
z-index:-1;
padding-right:.5em;
}
.line-header::after {
position:absolute;
content:'';
display: block;
left:0;
right:0;
top:50%;
background-color:#555;
height:1px;
z-index:-2;
}
Try this for your CSS:
EDIT:
body { background: red; overflow-x: hidden }
.line-header {
margin-top: 15px;
margin-right: 5px;
display: inline;
z-index: 100;
float: left;
clear: left;
}
.line-header::after {
position:absolute;
content:'\00a0';
width: 100%;
margin-top: -12px;
margin-left: 5px;
border-bottom: 1px solid gray;
z-index: 0;
}
I only tested this in Chrome. Here's the Fiddle.
Well, how about doing it in reverse? Draw the lines (in any way you like) then use :after to insert the headers, no additional HTML, but some extra CSS.
HTML
<div id="header1"></div>
<div id="header2"></div>
To Draw the Line, simply border-top-style:solid;.
To Write the headers, :after.
CSS
div
{
position:relative;
border-top-style:solid;
margin-top:20px; /* just for spacing */
}
div:after
{
display:block;
background-color: #FFFFFF;
position:absolute;
top:-10px;
left:0px;
}
#header1:after
{
content:"Hello;"
}
#header2:after
{
content:"Hello Again";
}
You'll get something like this.
For more customization, you can enlarge the font, change the colors, add padding (for more white space), just change top the way it suits you.
I've a text as below is not aligning as vertical in the middle of icon.
How do I solve this, please?
align top http://www.kerrydeaf.com/ali.png
CSS:
#text{ color:#48c4d2; font-size:15px; font-family:opensansitalic;}
HTML:
<div class="blurb"><button class="blue_small" id="blue_small"></button> Available in video.</div>
UPDATE:
This should explain it.
align top http://www.kerrydeaf.com/ali2.png
You should be using a CSS background image and use padding-left: to move the text over, and use background-position: to adjust the position of the image. And if it's a link, use an A-tag, not a button.
Available in video.
No need to nest tags as you're doing.
Something like:
.videoBlurb {
display:block;
background-image:url(....);
background-repeat:no-repeat;
background-position:0px 0px;
padding-left:40px;
padding-top:20px;
color:#48c4d2;
font-size:15px;
font-family:opensansitalic;
}
Diodeus makes a good point and definitely has the most useful answer, but for the sake of curiosity without changing your markup - it should actually be this simple:
button {
vertical-align:middle;
}
Of course, be more specific with the selector. Demo: http://jsfiddle.net/beV7j/2
I am trying to center text that has a line going through the entire background. On either side of the text, there is some padding, where you cannot see the line at all. I am stumped as far as a good css-only way to go about this. Here is a jsfiddle that is obviously wrong, but its a start: http://jsfiddle.net/gtspk/
HTML
<span class="line">
<h2>Latest Track</h2>
</span>
CSS
.line{display:block; width:100%; border-bottom:1px solid red; margin-top:25px; text-align:center}
.line h2{font-size:15px; text-align:center; position:relative; top:10px; padding:0 15px; display:inline-block; background:white}
The problem here is that I DO NOT want to specify a width, because I will be reusing this for different headers (with different amounts of text). What is the best way to go about this via css?
UPDATE: HEre is a way to do it, but inline-block has fairly lousy browser support: http://jsfiddle.net/gtspk/3/
Here you go. Had to add a wrapping span (necessary so we can set the background to white so the line doesn't hit the text)
http://jsfiddle.net/gtspk/9/
<span class="line">
<h2><span>Latest Track</span></h2>
</span>
.line{display:block; margin:25px}
.line h2{font-size:15px; text-align:center; border-bottom:1px solid red; position:relative; }
.line h2 span { background-color: white; position: relative; top: 10px; padding: 0 10px;}
Right, sorry, misunderstood what you meant by padding. Fixed.