I'm trying to get a signature and date aligned on a certificate I've created in HTML (but will be printed out).
As it currently stands, the fields all collapse onto multiple lines, and I want them all on the same line, like this:
And here's the code:
.sign {font-weight:bold;}
.sign span {width:7cm;border-bottom:0.1em solid #000;display:block;}
<div class="sign">
Signature:<span></span>Date:<span></span>(dd mon yyyy)
</div>
I know the solution is simple I just can't think straight at the moment!
You need to use display:inline-block instead of block. inline-block makes it easy to keep on the same line.
.sign {font-weight:bold;}
.sign span {width:3cm;border-bottom:0.1em solid #000;display:inline-block;}
<div class="sign">
Signature:<span></span>Date:<span></span>(dd mon yyyy)
</div>
(note that i shrunk it to 3cm for this example so that it fits in the snippet)
You need to use inline-block for the display property instead of block.
You just have to display them inline-block I have added the margin to create the desired result
.sign {
font-weight: bold;
}
.sign span {
width: 4cm;
border-bottom: 0.1em solid #000;
display: inline-block;
margin-right: 18px;
}
<div class="sign">
Signature:<span></span>Date:<span></span>(dd mon yyyy)
</div>
Html
<div class="sign">
Signature: <span></span> Date: <span></span>
</div>
Css
.sign {
font-wight: bold;
}
.sign span {
width: 150px;
display: inline-block;
border-bottom: 1px solid #999999;
font-weight: normal;
}
Fiddle Demo
Related
Here is my code:
<p class="section1comments">
<span class="jan">January 20 2011 by David LaHuta in A Closer Look </span>
<span class="comments">
(1) Comments<sup><img src="slice/comment-icon.jpg" alt="" /></sup></span>
</p>
css:
.section1comments, .section2comments {
font-weight: bold;
color: #747476;
border-bottom: 1px solid #D4D4D4;
padding-bottom: 5px;
clear: both !important;
}
.section1comments
{
width:100%;
}
.jan
{
width:79%;
}
.comments
{
width: 18%;
margin-left:15px;
}
these two span alignment is not working properly when resize the window.
Can anyone help me to fix this issue?
Thanks in advance,
Give following css to get your expected result.
span {
display: inline-block;
}
It will take full width of parent. And comments span will show on right side when you resize the window.
Fiddle
Edit:
Another option is use display:table-cell to span element and display:table to it's parent.
span {
display: table-cell;
}
Updated Fiddle
I have values in using ng repeat in span.I got word like in new line like
Actual output:
I used CSS like
border: 1px solid #ECE9E6;
border-radius: 3px;
text-align: center;
font-size: 12px;
padding: 5px 15px;
position: relative;
line-height: 33px;
margin-right: 3px;
word-wrap: break-word;
I want output like:
Instead of using word-wrapover span. I'll suggest you to use display:inline-block in the parent div.
This will make sure your complete inner div will move to next line.
Just make your HTML as below
<div id='mainDiv'>
<span class='tag'>abc</span>
<span class='tag'>lmn</span>
<span class='tag'>xyz</span>
<span class='tag'>etc</span>
<span class='tag'>etc</span>
</div>
Add css as below.
#mainDiv{
width: 200px; // any pixel you want to set;
}
.tag{
display:inline-block;
}
this is my html
<div class="logoArea">
<img src="images/oifcoman-logo.jpg"/>
<div class="titleClass">Call Center Dashboard</div>
</div>
this is my css
.logoArea {
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
}
.titleClass {
color: #343434;
font-weight: normal;
font-family: 'Ultra', sans-serif;
font-size: 36px;
line-height: 42px;
text-transform: uppercase;
text-shadow: 0 2px white, 0 3px #777;
margin:auto;
background-color:red;
width:40%;
top:10px;
}
This is what the result:
I want it to be this:
Set the image float:left; and the text display:inline-block; and the .logoArea text-align:center;.
Working fiddle
There are few ways to solve this. Here is one with minimal changes to your existing styling.
.logoArea img {
float: left;
}
Usually it requires additional changes in the code for actual centering in the parent window, but it seems to go well with the other styles you already have.
EDIT
Looking again at the result, I'm having second thoughts. My solution is good only for non-dynamic elements (elements that won't change dynamically but remain the same). Since it appears to be a header and therefore a relatively static element, my solution may still be valid, only with adding a required amount of padding-top to the center div. I don't know how much because in your example you used a very large font-size and I have no idea of the size of the image.
You can use CSS vertical-align:middle if the element is td (not div) or try this trick: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Try using:
<div class="logoArea" style="display:table-cell; vertical-align:middle">
<img src="images/oifcoman-logo.jpg"/>
<div class="titleClass">Call Center Dashboard</div>
</div>
Try this:
HTML:
<div class="logoArea">
<img src="http://i.stack.imgur.com/O3d6S.jpg?s=128&g=1"/>
<div class="titleClass">Call Center Dashboard</div>
<div style='clear:both;'></div> </div>
CSS:
.logoArea {
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
}
.logoArea img {display:block;width:100px;height:100px;float:left;}
.logoArea .titleClass {float:left;}
JavaScript (must include jQuery first)
$(document).ready(function(){
var h=$('.logoArea').height();var ch=$('.logoArea .titleClass').height();
var pTop=((h-ch)/2)+'px';
$('.logoArea .titleClass').css('paddingTop',pTop);
});
Demo: http://jsfiddle.net/zcAjq/
I want to remove the extra space between these two elements. I tried but couldn't do it.
Is this a problem of margin collapsing?
How can this be solved? How can I remove that extra space?
Here is my HTML and CSS:
body {
width: 250px;
height: 100px;
background: #F2F2F2;
}
#output {
font-family: roboto light;
color: #A4C639;
font-size: 30px;
}
#grade {
font-size: 25px;
color: black;
}
#max {
color: black;
}
#percentage {
background: #A4C639;
color: #FFFFFF;
padding: 15px;
border-radius: 15px;
}
<div id="output">
<i>
<span id="grade">Your grade :</span>
<span id="total">524</span>
<span id="max">/725</span>
<center><h1><span id="percentage">72.28%</span></h1></center>
</i>
</div>
Whitespace characters between HTML elements create a new text block, which is displayed as a space between the elements.
Remove all the whitespacing between the elements to get rid of it:
<span id="total"></span><span id="max"></span>
Alternatively, you can fill the whitespaces with a comment block:
<span id="total"></span><!--
--><span id="max"></span>
Put the <span> tags on the same line without any space between them.
It looks as if you have the wrong title - your h1 is what is causing the space between the text and the percentage box. To remove try this:
#output h1 {margin-top:0; padding-top:0;}
If it actually the spans you are talking about then you need to remove any white space that is between them - See the other answers for this
I know this has been answered, but I would have done this differently - the original HTML is combining display and semantic elements together ( with the italic, H1 and center tags).
I would do the HTML like this:
<div id="output">
<span class="grade">
Your grade :
<span class="total">123</span>/<span class="max">777</span>
<div class="percentage">23.45%</div>
</span>
</div>
And the CSS like so:
#output {
font-style:italic;
text-align: center;
font-family : roboto light;
color : #A4C639;
font-size : 30px;
width: 250px;
}
.grade {
font-size : 25px;
color: black;
}
.total {
color : #A4C639;
}
.max {
margin-left:0;
}
.percentage {
text-align: center;
font-size: 200%;
background : #A4C639;
color : #FFFFFF;
padding : 15px;
border-radius : 15px;
}
This gives you what you were after but the style and layout was done totally in the CSS markup.
If you want to see it in action try this jsfiddle: http://jsfiddle.net/justin_thomas/P6wmJ/19/
It is usually much better to separate your style from your content and semantics. It will make things easier if you ever need to change the layout and so on.
That's some weird behavior of span elements in HTML.
If the first span has style text-decoration: underline; then one extra space will be underlined also.
I solved it by changing span to div and applying display: inline-block to divs.
try i{font-size:0}#output span{font-size:30px;} in your css
I've got a span which goes over a number of lines and has a background colour. I need each of the lines to have a 10px padding at the end. The text will be dynamic so i need a css or js solution rather than just hacking it with nbsp tags (which is how I got the example pictured below)
The picture show the difference between what I have and what i want:
<h3><span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br/>
<span class="subhead">IT'S RIGHT HERE</span></h3>
h3 {
margin:0;
font-size: 42px;}
h3 .heading {
background-color: #000;
color: #00a3d0;}
h3 .subhead {
background-color: #00a3d0;
color: #000;}
I can't think of any way to do this with css, I was considering using javascript to find the beginning and end of each line and adding a non-breaking space.
Does anyone have any ideas of how to achieve this?
Cheers
I've tested this in IE8 (doesn't look too bad in IE7) and recent versions of Chrome, Firefox, Opera, Safari.
Live Demo
Screenshot from Chrome:
It got a bit silly and, to be honest, probably more complicated than it's worth - a JS based solution would definitely be easier to understand.
There are so many gotchas with this technique.
CSS:
#titleContainer {
width: 520px
}
h3 {
margin:0;
font-size: 42px;
font-weight: bold;
font-family: sans-serif
}
h3 .heading {
background-color: #000;
color: #00a3d0;
}
h3 .subhead {
background-color: #00a3d0;
color: #000;
}
div {
line-height: 1.1;
padding: 1px 0;
border-left: 30px solid #000;
display: inline-block;
}
h3 {
background-color: #000;
color: #fff;
display: inline;
margin: 0;
padding: 0
}
h3 .indent {
position: relative;
left: -15px;
}
h3 .subhead {
padding: 0 15px;
float: left;
margin: 3px 0 0 -29px;
outline: 1px solid #00a3d0;
line-height: 1.15
}
HTML:
<div id="titleContainer">
<h3><span class="indent">
<span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br /><span class="subhead">IT'S RIGHT HERE</span>
</span></h3>
</div>
<!--[if IE]><style>
h3 .subhead {
margin-left: -14px
}
</style><![endif]-->
box-shadow makes it easy!
box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
-moz-box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
-webkit-box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
Here’s a solution that requires each word being wrapped in an additional SPAN element:
<h3><span class="heading"><span>THE</span> <span>NEXT</span> <span>GENERATION</span <span>OF</span> <span>CREATIVE</span> <span>TALENT</span></span><br/>
<span class="subhead"><span>IT'S</span> <span>RIGHT</span> <span>HERE</span></span></h3>
Then you can style the words individually like this:
h3 span {
display: inline-block;
}
h3 > span > span {
padding: 0 0.25em;
margin: 0 -0.25em 0 0;
}
h3 .heading span {
background-color: #000;
color: #00a3d0;
}
h3 .subhead span {
background-color: #00a3d0;
color: #000;
}
You could do something like this. Wrap it inside a <p> and set a border-left = to the padding left you'd like to set to the span. About right padding, I don't think there will be a solution without using JS. Btw, I'm still looking for other kinds of tricks
http://www.jsfiddle.net/steweb/cYZPK/
EDIT updated starting from your markup/css http://www.jsfiddle.net/steweb/cYZPK/1/
EDIT2 (using JS..mootools) http://www.jsfiddle.net/steweb/Nn9Px/ (just tested on firefox...need to be tested on the other browsers.. explanation asap :) )
why not just add padding-right:10px; to the container?
Even if is not 100% following your design concept, I think this is the only solution if you want to stick with CSS.
h3 span {
/* cross browser inline-block */
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
padding:0 10px;
}
The inline-block property will make your element expand based on it's content size, so it behaves like an inline element but also have the block property which lets you apply the padding.
Hope that helps
Here's a way to do it without the extra mark up - though it does require an image. http://codepen.io/DeptofJeffAyer/pen/FiyIb
I would highly recommend using Split Lines JS: https://github.com/jeremyharris/split_lines
The issue with tags is that it wraps "inline" meaning from start to finish. So if you have a fixed width and your span automatically goes onto a second line, that line of text will be wrapped with the first line and share the span. To get around this you need to span each line of text separately. For example:
<span>line one</span>
<span>line two</span>
This isn't an easy option if the text you wish to span separately is automatically generated from Wordpress or similar... To get around this use the JQuery script above.
~
Another way to get round it (although may not be ideal) is to simply add display:block; to you spans css class:
span { display: block; background-color: #333; color: #fff; }
This will span the entire block similar to a button.
Hope this helps.