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>
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
I want the user to see that the text is clickable. As of now I have changed cursor to a pointer, and added an underline to the text on the <span> element, I have also tried different borders and highlights on text (basically changed colors), but I was unable to make that look good.
I am using panel panel-primary from bootstrap, and I know they have have a Tabs component also, but I can not use that due to other reasons.
Simple plunker
<div class="panel panel-primary" >
<div class="panel-heading"> SomeHeading <span style="text-decoration: underline; cursor: pointer" >Tab1</span> <span style="font-size: 8px;" class="badge">1</span> / <span style="text-decoration: underline; cursor: pointer">Tab2</span> <span style="font-size: 8px;" class="badge">3</span>
</div>
<div class="panel-body">
Some content here
</div>
What more can I do to make the user understand that these are actually tabs?
I want the user to see that the text is clickable. As of now I have
changed cursor to a pointer, and added an underline to the text on the
element.
These are both pretty standard conventions. Other visual cues (usually activated on :hover) might include:
bolding the text with font-weight:bold
changing the color of the text
changing the background-color of the text
changing the border of the text
You might even:
give the text a text-shadow
give the text's containing element a box-shadow
In addition to what Rounin said, you could also add a border:
border-style: groove; border-color: #3377ff;
See the new plunk.
EDIT: I realized he also mentioned borders.
I have one div tag as below:
<div id="summaryDiv">
<span>
<p style="font-size: 10px;color: red">this is test comment </p>
<ul style="font-size: 8px;color: pink">>this is list of contents
<li class="liSummary">lost1</li>
<li class="liSummary">>list2</li>
</ul>
</span>
</div>
Now summaryDiv contains innerhtml summary which is not plain text but in form of formatted text.
And all formatted text may have different style applied inline or class.
What I need to create summary div css style globally which will overwrite to innerhtml formatted text.
So whole innerhtml will have same style at the end instead of individual inline style.
How to achieve this?
Any help will be most appreciated.
Check this out
#summaryDiv * {
color: #ccc !important;
}
You'll need to use the * wildcard to select all children elements of #summaryDiv and then mark the overriding style as !important.
HTML have bothered me since HTML1 emerged.
One thing is about line breaks.
http://jsfiddle.net/LhDFs/2/
<p>1</p>
<p>2</p>
<p>br1</p>
<br/>
<p>br2</p>
<p>p1</p>
foo
<p>p2</p>
<p>pp1</p>
<p>foo</p>
<p>pp2</p>
p tag has 1 line between the element.
Is it impossible to have 2 blank lines between <p>?
It appears <br/> or space symbol doesn't work for that.
Well, of course, it's possible to use <br/> instead of <p>, but now I tweak Markdown, especially gfm, so I need to preserve paragraph structure.
I short, it's way too strange that we never be able to have 2 blank lines as long as we stick on <p>.
What I consider is
foo
bar
2 blank lines:instead of
foo
bar
3 blank lines with p tag structure.
EDIT:
Well, what I intended is to have consistent structure of P tag, but thanks to everyone, I've got a hint that I can prepare multiple classed p tag with CSS hack.
This is truly hacky on first thought, but I think I can manage it. Appreciated to all comments.
EDIT2:
I thought we have solution for this, but it seems not;
I post another:
It seems impossible to have 2 blank lines between p tags Without modification of the original elements
White space in your mark up (new lines, spaces) will not show up on the front end of a website.
This:
<p>example</p>
<p>example</p>
Is the same as:
<p>
example
</p>
<p>
example
</p>
On a website, both those examples will appear exactly the same.
To control spacing, padding, margin and position on the front end of a website we use css:
HTML
<p>
example
</p>
CSS
p {
padding-left: 20px;
}
Here is a demo showing different paragraph margins controlled by css:
HTML
<p class="noMargin">No margin</p>
<p class="noMargin">No margin</p>
<p class="noMargin">No margin</p>
<p>Default margin</p>
<p>Default margin</p>
<p>Default margin</p>
<p class="doubleMargin">Double margin</p>
<p class="doubleMargin">Double margin</p>
<p class="doubleMargin">Double margin</p>
CSS
p.noMargin {
margin: 0;
}
p.doubleMargin {
margin: 2em 0;
}
Demo
If I understand you correctly it seems to be working for me.
But one thing is the correct syntax for line break is:
<br>
<br />
Or style it like one of these
<p style="margin-bottom: 10px;">text</p>
<p style="line-height: 200%;">text</p>
A line height in percent of the current font size
Try this:
<br />
<br />
nbsp means "non-breaking space".
I have a DIV to which I want to apply a style currently prescribed for a certain tag (not class).
I want to use that as a base style for my container element, which will be used by its child elements that will use relative offsets for position and percentage for size.
Say, <h2> has font-size:x-large; font-weight:bold; by default. I could do:
<h2>
<div style="font-size: 50%;">something</div>
<div style="font-size: 80%;">something else</div>
</h2>
But this is invalid HTML, because div cannot be inside h2.
So I need a way to say:
<div style="whatever is currently applied to h2">
...
</div>
Is this possible without JavaScript (like sniffing out style properties using .css())?
Couldn't you use span's?
<h2>
<span style="font-size: 50%;">something</span>
<span style="font-size: 80%;">something else</span>
</h2>
And if you need them to be display: block:
h2 span {
display: block;
}
http://jsfiddle.net/HfQWz/
Although I would say you probably want to more specifically select the span's with a class on the h2, wrapping div.className, or something.