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.
Related
I'm working on an html document, and want to make only one word in my <p> tag a different color. Is this possible without making a completely different <p> tag?
<!-- Example -->
<p>I want to make only THIS word blue.</p>
<!-- My only solution -->
<p style="display:inline;">I want to make only </p><p style="display:inline; color:blue;">THIS</p><p style="display:inline"> word blue</p>
There must be a better way of doing it.
Use a span tag for this, it's inline by default:
<h3>A much simpler solution:</h3>
<p> I only want to make only <span style="color:blue;">THIS</span>word blue </p>
But actually, you would do it like this normally, defining a class and applying that to the span:
.blue_text {
color: blue;
}
<p> I only want to make only <span class="blue_text">THIS</span>word blue</p>
Put it in a <span> and apply your style to that.
Try this:
/*example:*/ <p> I only want to make only THIS word blue </p>
/*My only solution:*/ <p style="display:inline;"> I only want to make only </p> <span style="display:inline; color:blue;">THIS</span> word blue
<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 have a contenteditable text structure like so:
<div class="content" contenteditable="true">
<span contenteditable="false">
<span class="chunk" contenteditable="true">This sentence contains </span>
</span>
<span contenteditable="false">
<span class="chunk bold" contenteditable="true">some bold</span>
</span>
<span contenteditable="false">
<span class="chunk" contenteditable="true">text!</span>
</span>
</div>
This enables selecting text across all 3 "chunk" spans. However, removing the "outline" from it using css disables selecting text:
.chunk {
outline: 0px solid transparent;
}
Can anybody explain why? JSBIN example
EDIT
It's definitely the EXISTENCE of the outline that's causing the issue. Giving it a 1px solid transparent outline still allows text selection. As soon as you specify 0px, it prevents selection.
I have a part of a web page (incorporating Bootstrap CSS) that contains a <div> with the id "drop-zone" that I pick up later in javascript to implement drag-and-drop functionality:
<div id="drop_zone">
<p style="color: darkgray">Drop</p>
<p style="color: black">test.txt</p>
<p style="color: darkgray"> here</p>
</div>
I have the <p>s in there because I want to vary the styling across this single line, but if I use the code above, or if I swap the <p>s for <div>s, the code renders on multiple lines like so:
Drop
test.txt
here
when I really want it to look like:
Drop test.txt here
I'm sure this is an easy fix, but any thoughts here?
Use <span> instead of <p>.
<p> and <div> are both block elements which will be display their contents on a separate line by default. You'd be better off using a <span> which will display its contents inline.
<div id="drop_zone"><span style="color: darkgray">Drop</span><span style="color: black">test.txt</span><span style="color: darkgray"> here</span></div>
You should really consider moving all the styles into a stylesheet, too, instead of having them defined in style attributes like you have as this will make changing the styles easier as your page gets more complex.
try the below in your divs or p tags or better yet create a class that has this property :
display : inline;
or
display : inline-block;
<div id="drop_zone" style='display:inline;'><p style="color: darkgray; display:inline;"> Drop </p><p style="color: black; display:inline;"> test.txt </p><p style="color: darkgray; display:inline;'"> here</p></div>
This is the jsdfiddle
This is because <p> is a block-level element, so by default it will cause a line-break .. you can replace it with an inline element (<span>) or set the <p> display to either inline or inline-block
I think you can use <span> instead of <p>
<div id="drop_zone"><span style="color: darkgray">Drop </span><span style="color: black">test.txt</span><span style="color: darkgray"> here</span></div>
In my jQuery themebuilder built theme I have 5 different ui-icons_* files.
Two of them are in an orange shade corresponding to the highlight color.
I want to use an orange icon as a bullet.
My first attempt gives the icon on it's own row.
<div class="heading">
<span class="ui-icon ui-icon-triangle-1-e" ></span>
Meeting
</div>
My second attempt gives the icon but not aligned properly.
<div class="heading">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
Meeting
</div>
Adding the following style makes the text align with the icon:
.heading { vertical-align: top; }
http://jsfiddle.net/rypyP/1/
The color i want is in the ui-state-active set, so if I add that state to the containing unit it gets the correct color, but with the whole enchilada (border, background color, text color) and I just want the bullet point orange.
<div class="heading ui-state-active">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
Meeting
</div>
http://jsfiddle.net/MEXQV/1/
Can I get just the icon from a particular ui-state in a jQuery theme without rewriting the css?
If that is not possible, what way would you suggest and why?
SOLUTION
Stylesheet:
.heading
{
vertical-align: top;
}
Html:
<div class="heading">
<span class="ui-state-active" style="border: 0px">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block; border: 0px">
</span>
</span>
Meeting
</div>
http://jsfiddle.net/rypyP/4/
If you just want to get the icon of a particular ui-state, you can do this:
<div class="heading">
<span class="ui-state-active ui-icon ui-icon-triangle-1-e " style="display:inline-block"></span>
Meeting</div>
What it does is it will look the specified icon on jQuery's default theme icon set (it has four icon sets by default -- active, default, highlight, and error). If you want to remove the borders etc, you'll have to override the ui-state class in your own css, e.g: adding .ui-state-active { border: 0px; }
Thanks.