I would like to put a button inside text like this one:
some text1 [button] some text2.
However if I place form&input, line break occures before and after my button like this:
some text1
[button]
some text2
I know I can do this with tables, but I want to avoid it. Is there any CSS based solution to do this? Unfortunately, I can't modify the HTML code, so I have to "inject" that little form statement (with input type submit, and some hidden input tags too) in the generated HTML (done by other software), so it would be hard to reformat it, using tables, etc.
Is it even legal to put form/input tags within text which is enclosed between 'p' tags?
Thanks in advance.
The css solution is white-space:nowrap. Wrap it with a span tag with that rule. For example, assuming you have this rule in the your css file:
.nowrap {
white-space:nowrap
}
You can do it with this html:
<span class="nowrap">some text1 <button>test</button> some text2</span>
If I understand your question correctly, you're injecting a form that contains a button into some text and the form tag is causing the text to wrap (form is a block level element). This is a simple fix with CSS:
HTML:
some text <form><button>test</button></form> some text
CSS:
form
{
display:inline;
}
If you don't want to make a blanket change to all the form elements, simply assign the injected form a CSS class:
HTML:
some text <form class="inlineForm"><button>test</button></form> some text
CSS:
.inlineForm
{
display:inline;
}
Alternative:
You could also add display:inline directly to the form tag:
some text <form style="display:inline"><button>test</button></form> some text
Here's a working jsFiddle.
You should add style="display:inline" to the form tag
hello <form style="display:inline"><input type="hidden" value="blah"/><input type="submit" /></form>world
gives
hello [button] world
try to make all blocks among your text - inline.
like that:
<form style="display: inline">
If there are divs after your form, make them inline too
Related
I need some help with this button styling ,
see link (clikc on edit code)
enter link description here
as you can see is the add to cart text out of line ... and does the 'imput' command fill up my button.
how can i center the text back into the button?
width: 100%;
}
please advice
thanks,
There are a lot of errors and bad tag formatting in your code. Tags should also not overlap (first open, last closed), like in the following part of your code:
</div>
</button></h2>
</div></div></body></form></button>
This not valid formatting.
Each tag has a specific use, for example:
<h2> tags are used to define second HTML headings of a page.
They should not contain anything else than the title of the section they define.
The closing body tag </body> can't be followed be any by anything except </html> tag.
You should probably rewrite the whole thing.
I have been created simple web page using html, css and some scripts.
Here is my jsfiddle i tried: http://jsfiddle.net/67x8cyp9/
<p>
<img class="text-wrap" align="right" src="img/9780143332497.jpg">
<div class="caption">
<form method="get" action="9780143332497.png">
<button type="submit">Download!</button>
</form>
</div>
</p>
Is it correct to use <form> tag and <div> tag inside <p> tag?
And also, how to set download button under the image?
Can anyone help me to fix this?
Thanks in advance.
Its NOT recommended.
According to W3 specifications, <p> is only allowed to contain text or 'inline' (not 'block') tags. However a <form> counts as 'block' content not as 'inline' content(see this for Minimal Content Model in <p> tag). Alternately, you may use a <div> to enclose your <form>
You may validate your html code on w3 validator for better clarity.
Cheers!
Not it is not, p is a block element, but cannot contain other block elements, only inline ones. (at least in HTML4, but I don't think HTML5 changes this behaviour).
Hmm, according to MDN, you can put a form in a p, but actually what happens is that the end of the p is at the beginning of the form, so not very useful.
Update:
To help you in your current actual problem, you can wrap the content in a div instead of a p:
<div class="right-figure">
<img class="text-wrap" src="img/9780143332497.jpg">
<div class="caption">
<form method="get" action="9780143332497.png">
<button type="submit">Download!</button>
</form>
</div>
</div>
And in the CSS file:
.right-figure {
float: right;
}
This will do, what you need.
Another approach:
By the way, you could also just use a link instead of a form:
Download!
and format the anchor with CSS to look like a button, just like e.g. Twitter Bootstrap does.
Is it possible/permissible to refer to 2 css classes from within a text area like below:
with section 1 and section2 being classes from a css file. Hope someone can advise. Thank you.
Yes you can, both in the style sheet and in your HTML, I've used div for demonstration purposes, but the same applies to textarea
.section1 {font-weight:bold;}
.section2 {font-style:italic;}
.section1.section2 {color:#f00;} /*Will only apply if both classes present*/
<div class="section1">I'm bold</div>
<div class="section2">I'm italic</div>
<div class="section1 section2">I'm bold, italic and red!</div>
In HTML seperate multiple classes in the attribute with a space. To join multiple classes in your CSS have no speration between them
What do you mean from within a text area? Do you mean something like the following...
<textarea class="section1 section2"></textarea>
Or do you mean CSS within the textarea itself? If so that's not possible because all you're typing into it is plain text. But you could target that text, for example...
textarea.section1 { }, textarea.section2 { } or textarea.section1, textarea.section2 { }
Yes! it is possible to refer any number of classes within any html tag.
Ex:<textarea class="section1 section2 section3"></textarea>
and please provide space to separate the different classes html does not recognise if you use semicolon to separate the classes.
You can write both the classes without comma like
<textarea class="section1 section2"></textarea>
Now provide CSS code in your CSS file seperately.
I need to store some hidden HTML for each li element. What's the best way to do this?
I've tried storing it as data on each li element but the hidden HTML tags screw up the li element.
I've managed to do it by storing the data in a hidden text area for each li.
Is this the best way to do it? Or is there a better way.
I'm storing around 200 chars.
Put your hidden HTML in a div / span with a CSS class that has:
display: none;
See the display property.
You can put a hidden field at each li to put the data! I think that hidden fields will work well, and theres no limit for the amount of data.
<input type="hidden" id="myId" value="value here pls..." />
Hopes this help you!
<input type="hidden" value="your hidden stuff here" />
Is your data HTML or is it content? Do you need it for programatic reasons? If it's just a matter of hiding content, as you would for a screen reader when using image-swap, for example, use css:
#my_content {
text-indent: -9999px;
}
Beyond that you could use hidden form fields, or simply use CSS to hide the element entirely.
try this
<div style="display:none;">your html here.....</div>
One way I've recently learned to do this is to use <script> tags. You can add an ID to the script tag, and reference in javascript using that ID to fetch the content and do something with it. I use this for inline templates.
http://www.bennadel.com/blog/2411-Using-Underscore-js-Templates-To-Render-HTML-Partials.htm
<script id="foo" type="text/template">
<p>your text here</p>
</script>
now in real javascript:
<script type="text/javascript">
<!-- assume jquery for the sake of assuming something -->
$(function() {
fooTemplate = $("#foo").clone();
$("#target").append(fooTemplate);
});
</script>
I created a fiddle, but I had to use a div in the HTML area because fiddle doesn't like having an extra script node... The principle is the same -- just change to script in your html in your page.
If your <li> are children of an <ol> element and values you want to store are integers, then you can store them as
<li value="11">DISPLAY ITEM</li>
another approach:
if you want your extra HTML DATA to be present, but you don't want to render it at all (i assume this because you said that you tried to hide them inside a textarea -and thats why im posting this answer) then why not just put it inside comments?
<li> your code....
<!--
<div>my hidden html code of this li, of course i won't have nested comments in here!!!</div>
-->
</li>
Of course this is tricky, and not easy to get this data, but if you need this just for debug it will be ok.
Otherwise i'm in favor of display:none in a wrapped div.
Captain Obvious.
Here are two methods not mentioned in other answers.
The advantage of both methods is that, when you're working in your HTML programming environment, you get normal syntax coloring and error-checking.
Method 1
<template>
<div>Here's my hidden HTML.</div>
</template>
Method 2
<span hidden>
<div>Here's my hidden HTML.</div>
</span>
So i'm trying to assign a hyperlink to a single word in a {p} tag in an .aspx page in MS expressions.
My problem:
when i try to do this:
<p>Some text with a HYPERLINK then there's more text here like this</p>
it shows up in the browser as such:
some text with a
HYPERLINK
then there's more text here like this
I'm trying to get it all on one line like it should be.. any ideas??
My best guess, is that your anchor tag is styled as display : block, can you confirm this by using inspect element, or providing a link to where this bug is occurring?
Use Nobr html tag. Anything in between will not be broken in multiple lines.
<nobr>My long sentence</nobr>
<nobr> tag is deprecated.
One can use : white-space : nowrap ;
<a style = " white-space:nowrap; " href="******">HYPERLINK</a>