I have below line which is causing next line after text 100% and 99.8%
can anyone pls help me how can i display all this in one line side by side.
<span style="font-size:12px;font-weight:bold;padding-left:800px;">99%>=<span style="color:#69BB1D;">GREEN</span><=100%, <span style="padding-left: 950px;">41%><span style="color:#FFD700;">YELLOW</span><99.8%,</span> <span style="color:#EE543D;padding-left:1100px;">RED</span><99.6%</span><br />
I believe the issue is "padding-left" in each span, it causes them to go to next line because they can't fit to the screen.
If you remove the padding -or at least decrease the value- they will be showing in one line side by side.
Example Here:
https://jsfiddle.net/zjbot272/
<span style="font-size:12px;font-weight:bold;">99%>=
<span style="color:#69BB1D;">GREEN</span><=100%,
<span style="">41%>
<span style="color:#FFD700;">YELLOW</span><99.8%,</span>
<span style="color:#EE543D;">RED</span><99.6%</span>
Try adding white-space: nowrap;. Anyway what you are doing is weird.
<span style="font-size: 12px; font-weight: bold; padding-left: 800px; white-space: nowrap;">99%>=<span style="color:#69BB1D;">GREEN</span><=100%, <span style="padding-left: 950px;">41%><span style="color:#FFD700;">YELLOW</span><99.8%,</span> <span style="color:#EE543D;padding-left:1100px;">RED</span><99.6%</span>
Related
I have build some "tags" that are above the title of my html construct in a line. The problem is they are not necessarily all filled with text. If one of these elements is empty it leaves the border "concentrated" on a "point". I tried it with the empty rule but its not working . I applied it to every element class in my code but not just "tags".
.tags:empty{
display:none;
height: 0px;
border: none;
}
<div class="tags"> <span class="icons2"> <p class="jobAreaDescription">{{jobArea}}</p> </span><span class="icons2"> <p class="leitung">{{leitung}}</p> </span><span class="icons2"> <p class="tag3">{{tag3}}</p> </span> <span class="icons3"> <p class="neu">{{neu}}</p> </span></div>
If you need more code just ask but I think this is sufficient.
Thank you.
<span style="float:left; padding-right: 5px;">
<span style="display:block;">Harvard</span>
<span>John Smith</span>
</span>
<span style="float:left; padding-right: 5px;">
<span style="display:block;">Chicago</span>
<span>Tucker Max</span>
</span>
<span style="float:left; padding-right: 5px;">
<span style="display:block;"></span>
<span>Rihanna</span>
</span>
<span style="float:left; padding-right: 5px;">
<span style="display:block;">NYU</span>
<span>Peter Simpson</span>
</span>
//... and many more
The first span contains the university, the second span contains the name of the person. Now my problem is that whenever a I have a person who did not go to uni, I want to simply leave it blank.
But when I do that the name of the person moves up and is not aligned with the other names anymore. So in my example, Rihanna moves up:
I could write something like - or no uni, but I would much prefer to have a blank field there, as its just more tidy. I would also much prefer to have a CSS based solution.
Edit: If people downvote this, let me know why at least.
<span style="float:left; padding-right: 5px;">
<span style="visibility:hidden;"> </span><!-- Change is in this line -->
<span>Rihanna</span>
</span>
You can use "visibility:hidden" style. That way the height/width from the span will still be used while hiding the element.
I am having an issue with :hover on a glyphicon within a span.
I am not sure if the glyphicon is not filling the whole span, or if there are some hidden paddings/margins I am not seeing. I have tried to manual set all sorts of weird styles to get a nice glow border around my glyphicon but nothing is working.
Image (hovering over the gold color in this image)
Example
JSFiddle Demo
CSS
.glyphicon-stop:hover {
-webkit-box-shadow: 0 0 10px yellow;
}
View
<div>
<p id="hoverColor" style="font-size: 12px; width: 110px; background: black; display: inline-block; text-align: center; color:white; margin:0px; padding:0px">Color Code</p>
</div>
<div id="colorCode" style="margin:0px; padding:0px">
<span class="glyphicon glyphicon-stop" id="_Group Event" style="color: red; font-size: 20px"></span>
<span class="glyphicon glyphicon-stop" id="_Misc. Event" style="color:orangered; font-size: 20px"></span>
<span class="glyphicon glyphicon-stop" id="_Online Event" style="color:purple; font-size: 20px"></span>
<span class="glyphicon glyphicon-stop" id="_Group Party" style="color:blue; font-size: 20px"></span>
<span class="glyphicon glyphicon-stop" id="_Tournament" style="color:darkorange; font-size: 20px"></span>
</div>
JQuery
$('[id^=_]').hover(function () {
//alert($(this).attr('id'));
document.getElementById("hoverColor").innerHTML = $(this).attr('id').replace('_', '');
}, function () {
document.getElementById("hoverColor").innerHTML = "Color Code";
}
);
Any help on getting the border to be around JUST the glyphicon and not be offset would be appreciated!
This is not a solution, more an explanation about what there is going on. The behaviour is caused by the fact, that the bootstrap glyphicons not is filling out the entire area. They have all some built in "margin" or "padding". In your case you are using the following glyph :
.glyphicon-stop:before {
content: "\e074";
}
see all the glyphs here -> http://www.bootply.com/61521
here is a demonstration how much "margin" or "padding" the \e074 "video stop" glyph contains :
your fiddle forked -> http://jsfiddle.net/Ay9Mj/
That matches, surprise surprise, your bad experience in the question. So the error is the glyphs themselves, not some bad CSS or errors in the markup. I would suggest you go away from the "video stop" glyph, and use a fair square icon or simply just a rectangular <span>. Why use those glyphs anyway, when you just want to show a square?
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
A Space between Inline-Block List Items
I have a JSFiddle demo of my html code. Here is the code here:
<span style="display: inline">Hello Wo</span>
<span style="display: none;"></span>
<span style="display: inline">rld</span>
The problem I'm having is that an extra space is being inserted between the 'o' and the 'r' in Hello World!. The display style is set to none, so can someone please tell me how I can get the Hello World! phrase without the space?
The linebreaks are causing it - http://jsfiddle.net/RhvjF/1/
Can't find the particular post, but smart people suggested 3 ways of fixing it:
Put everything in one line (remove all line breaks)
Comment out the line breaks, like
<span style="display: inline">Hello Wo</span><!--
--><span style="display: none;"></span><!--
--><span style="display: inline">rld</span>
Set the container font-size to 0 and re-set it for span-s
UPDATE
There are at least 2 more ways:
Break the tags, like
<span style="display: inline">Hello Wo</span
><span style="display: none;"></span
><span style="display: inline">rld</span>
Float the elements, i.e. span { float: left }
This is caused by line breaks. You have two choices:
Remove the line breaks
Float your content.
Option 1
<span style="display: inline">Hello Wo</span><span style="display: none;"></span><span style="display:inline">rld</span>
Option 2
<style>
#spanContainer > span { float:left; }
</style>
<div id="spanContainer">
<span style="display: inline">Hello Wo</span>
<span style="display: none;"></span>
<span style="display: inline">rld</span>
</div>
See http://jsfiddle.net/RhvjF/2/
HTML:
<div id="wrapper">
<span style="display: inline">Hello Wo</span>
<span style="display: none;"></span>
<span style="display: inline">rld</span>
</div>
CSS:
#wrapper{
font-size:0;
}
#wrapper>*{
font-size:16px; /* Or whatever you want */
}
I'm making a "sort elements" web game using jQuery, HTML & CSS. While everything works fine in FF, IE8, Opera, Chrome, I'm having problem with IE7 wrapping words inside block elements.
Here's how it looks in IE7 (wrong):
Link (cannot post images as a new user)
In IE8 the box with wrapped text would just expand to fit it whole in one line without any overflows. Sorry, can't give another link as a new user
Don't mind the element order as it's random. Elements are dynamically generated by jQuery.
HTML code:
<div class="ui-sortable" id="area">
<span class="object">: </span>
<span class="object">1998- </span>
<span class="object">ISSN 1392-4087</span>
<span class="object">, </span>
<span class="object">. </span>
<span class="object">nepriklausomas savaitraštis buhalteriams, finansininkams, auditoriams</span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">Vilnius</span>
<span class="object">1998- </span>
<span class="object"><em>Apskaitos, audito ir mokesčių aktualijos</em></span>
</div>
CSS code (irrelevant info like fonts & colors removed):
#area {
min-height: 160px;
width: 760px;
}
.object {
display: block;
float: left;
text-align: center;
width: auto;
}
Any comments on why does IE7 does that? How do I make these spans expand to fit the whole text in one line in IE7 and not wrap the text or make overflows?
I tried it out myself in IE7, and when you just add 'white-space: nowrap' to the span.object, it should solve the problem. Floating the block elements works just fine, so don't change that.
See image for the test result: http://xs.to/image-B3F6_4BDE909D.jpg
You have a problem. Floats and automatic widths just don't mix. You'll also have issues when it comes to something being wider than the width.
Why not leave it inline? If you need a box, add padding:
span.object { padding: 6px; }
Edit: if you don't want them to break across lines add:
span.object { white-space: nowrap; }
Far easier than getting floats to do this particular task.