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
Related
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
I have this list block (SEE DEMO) and need to vertically centre the text with the icon so whenever I have more than 1 line of text everything stays in the middle of the LI. I know that other people asked similar questions here but none worked for me :(
DEMO
you can make use of the display:table properties by changing the following styles:
ul.quote-list li {
font-size: 14px;
color: #2a80b9;
border-top: 1px dashed #dbdbdb;
line-height: 1.2;
display:table;
width:100%;
}
ul.quote-list li > a { /*please note the extra > here */
color: #2a80b9;
text-decoration:none;
display:table-cell;
vertical-align:middle;
padding:18px 0 18px 20px;
}
.right {
display:table-cell;
vertical-align:middle;
width:30px;
text-align:center;
}
Example
You can postion the text and the icon using display: inline-block; with a vertical-align: middle;. You also need to remove the float: right; from the icon.
Here is a quick example. I've added a width and padding-right to the text just to make it look better.
Or use the solution from #ilmk in the comments :)
I have the following month selector:
It has a left and a right button with the text of the current month inbetween.
As you can see it doesn't look ok.
HTML:
<div id="seletor">
<a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-w" href="#" id="subtrair">subtrair</a>
<div id="mescorrente"></div>
<a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-e" href="#" id="somar">somar</a>
</div>
CSS:
#subtrair, #mescorrente, #somar {
display:inline-block;
vertical-align:top;
}
#subtrair, #somar {
margin-top:2px;
}
#mescorrente {
font-size:20px;
text-transform:uppercase;
padding:0 6px; /* optional padding.. */
margin-bottom:10px;
white-space: nowrap;
}
I tried all sorts of options in the display settings, like display:table and display:inline but it did not work.
In Chrome Dev Tools, if I uncheck and check again display:inline-block; it works!
What is wrong with this code?
Change the CSS for #mescorrente.
#mescorrente {
min-width: 200px;
text-align: center;
}
You can use this:
<a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-e" href="#" id="somar" style="float:right;">somar</a>
or
#somar {
margin-top:2px;
float:right;
}
but as long as you use px in your parameters, if the above ways does not help, you can set the distance form the left side like this:
#somar {
margin-top:2px;
left: 150px;
}
Just a slightly different approach - floating the three components left inside the div, then positioning the div - FIDDLE.
Did you want to do anything more with it?
CSS
#seletor {
width: 300px;
margin: 30px auto;
}
#subtrair, #mescorrente, #somar {
float: left;
vertical-align: top;
margin-left: 10px;
}
#subtrair, #somar {
margin-top:2px;
}
#mescorrente {
font-size: 20px;
text-transform: uppercase;
padding:0 6px; /* optional padding.. */
margin-bottom: 10px;
white-space: nowrap;
}
You have two options that I see here. Either you can create multiple div elements and display them inline, or you could use
<span>
element, as it is intended to display elements inline natively.
http://www.w3schools.com/tags/tag_span.asp
I would recommend using the span element, as I've had good success using this method, so long as you want them truly inline and not staggered/relatively aligned via script.
Following simple list, where in every h4, there is a span at the end.
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus <span class="goto">o</span>
</h4>
</li>
<li>
<h4>Digital Signage <span class="goto">o</span></h4>
…
</ul>
Screenshot of the page's source:
The CSS for the span looks like this …
.items .goto {
font-family: 'QuaySans-Icons';
font-size: 1.6em;
position: relative;
float: right;
}
The final thing looks like this:
The problem I have with this is that when decreasing the width of the browser window (I'm working on a responsive webdesign) the span-icon is breaking into the next line.
Do you have any creative solution or idea on how to prevent this from happening?
Kind regards and thank you in advance,
Matt
If you want the icon to keep inline with the last word in your text line, you can simply do:
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus<span class="goto">o</span></h4>
</li>
<li>
<h4>Digital Signage<span class="goto">o</span></h4>
</li>
</ul>
and the CSS might be:
.items {
list-style: none;
margin: 0;
padding: 0;
}
.items li {
border-bottom: 1px solid gray;
margin: 0;
padding: 0;
}
.items h4 {
margin: 0;
}
.items .goto {
background-color: gray;
font-size: 1.6em;
margin-left: 10px; /* optional */
}
If there is no white space between your work and the span, the motif will simply follow the word if the li element is forced to flow into a second line.
You can use margin-left to create visual spacing or insert a   entity before the span, quite a few ways to do. The details depend a bit on what effect you want.
Fiddle: http://jsfiddle.net/audetwebdesign/VsBet/ (two examples of how to do it)
Keeping Icon Right Justified
Here is one approach to pinning the icon to the right of the h4 element:
.ex2.items h4 {
position: relative;
line-height: 1.5;
outline: 1px dotted blue;
padding-right: 2.00em;
}
.ex2.items .goto {
background-color: wheat;
line-height: 1.00;
font-size: 1.6em;
position: absolute;
right: 0;
bottom: 0.0em;
height: 1.00em;
width: 1.00em;
outline: 1px dotted red;
}
Use absolute positioning of the span to keep it to the right and bottom of h4. If h4 forms to line, the icon will follow the second line. You may need to adjust the positioning depending on the icon size. If you allow the icon to grow in size, you may get other issue in extreme cases. I might fix the icon to a px height or width (or a max value). Finally, set some padding-right in h4 to prevent the icon from overlapping the text as the window gets smaller.
Note I explicitly specified line-height values to accentuate the issue around not knowing the height of the icon. You may need to adjust these to vertically position the icon.
Decrease your font-size when you have less space. I guess you have the problem in media with max-width:480px. I found decreasing the font-size a good alternative to keep the design consistent in responsive sites
I've mocked it up on the demo, however it is a bit raw.
.items {
padding:0;
margin:0;
/*width:180px;*/
}
.items li {
border: 1px solid red;
list-style-type: none;
position: relative;
}
.items h4 {
margin:0; padding:0; font-size:16px; padding-right:10px;
}
.items .goto {
margin-top: -10px;
position: absolute;
right: 0;
top: 50%;
}
DEMO
Check the following link and decrease the width of browser.
RESULT
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.