I have a basic color presentation using input texts and boxes using CSS, I achieve it only using input text as you can see into this fiddle, I want to do same with same adjust but without using input text, what I need to do to show only as a <p> tag
I try to replace input with paragraph tag but it disadjust like this fiddle
Help is very appreciated. Regards
You had added paddings to your input tags which you missed out when you converted them to paragraphs.
So just add them to your paragraphs tags like this,
.input-color p {
padding-left: 25px;
}
See JSFiddle
If you still want them to have the text box like appearance you can just add background-color, border, and sufficient width, paddings and margins.
See JSFiddle
Assuming you want to keep the boxes, you can add this little snippet into your css
p.input{
width: 150px;
height:16px;
border: solid 1px #000;
}
You must have the paragraph have the class "input" and before your text for this to display correctly (of course someone else has something that would work). If you want the same color, use the hex: #111111 and it should be the same if not the exact color. Just to see this, here is my JSFiddle
Related
When I type something after label then it concat in label's text
The basic code is:
<p contenteditable="true">Hello, can I speak to <b><label>name</label></b>please?</p>
label
{
border: 1px solid black;
float: none;
padding: 0px 10px;
cursor: pointer;
}
<p contenteditable="true">Hello, can I speak to <b><label>name</label></b>please?</p>
What I need is when I type something out of the box of label then shouldn't bind with label's text it should be before please? text..there is something wrong with css.. I couldn't find out..Thanks
EDIT 2
"If user can delete space then what?"
My counter reply is:
What exactly is the purpose of this code?
Anyway, this is the final edit take it or leave it.
Wrap each segment in a <span contenteditable=true>...</span> and separate them with a . If we want no space between the <span>s then we can use (zero width no-break space) instead of Also note that the <label> and <p> tags wrap the <span>s. This preserves the HTML structure. See updated Snippet.
Seeing that OP requires HTML/CSS solution -- and never mentions JavaScript/jQuery -- this is the best solution I can think of. Anymore behavior needed would be beyond HTML/CSS capabilities and JavaScript/jQuery would be needed. Having said that, I believe this solution will work. It's now impossible for the <label> to bleed into the text outside of it's borders because the is not editable now, yet each separate <span> is editable. When parsed, the only change in appearance is the blue outline. That shouldn't be a problem given the fact that OP has bold text with a border in the middle of a sentence.
EDIT
OP requires that everything is editable within the <p>. OP's concern was the <label>'s edits bleeding into the text. A placed after the <label> seems to fix that behavior.
Add contenteditable="true" to the <label> instead of the<p>
SNIPPET
label {
border: 1px solid black;
float: none;
padding: 0px 10px;
cursor: pointer;
}
<p><span contenteditable="true">Hello, can I speak to</span> <label><span contenteditable="true"><b>name</b></span></label> <span contenteditable="true">please?</span></p>
<p><span contenteditable="true">Hello, can I speak to</span><label><span contenteditable="true"><b>name</b></span></label><span contenteditable="true">please?</span></p>
I want to:
be able to style some text on my HTML page so that a certain background color only covers the text and not beyond it.
Ideally I would like to control this from one div.
Here is my jsfiddle of the below:
#edit_this_div {
min-width: 0px;
background-color: yellow;
}
#bad_way {
background-color: yellow;
display: inline-block
}
<div id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</div>
<br>
<div id="bad_way">This is the inefficient and manual way.</div>
What I tried:
The way I thought of accomplishing this is to set the div as an inline block, which I've also shown in my jsfiddle. However, I rather not do this because I feel it would complicate things; when I did this my block started jumping around and combining with other elements. I don't plan to have any other elements with the div so I am fine with it staying as a block that takes up the whole line on the screen.
With the display of block, I also tried setting the padding and minimum widths but it doesn't have an effect laterally for removing the extra color that spills past the text.
It is generally recommended that you put text into appropriate block tags, i.e. <p>...</p>, <h1>...</h1>, <blockquote>...</blockquote>, etc.
If you did that, it would be easy, for example:
<div id="edit_this_div">
<p>Please edit this div to there isn't extra yellow background without manually setting the width.</p>
</div>
Then the CSS:
#edit_this_div p {
background-color: yellow;
display: inline;
}
Even cleaner would be to use both <p>-tags as well as additional inline tags, for example <span>-tags:
<div id="edit_this_div">
<p><span>Please edit this div to there isn't extra yellow background without manually setting the width.</span></p>
</div>
CSS:
#edit_this_div p span {
background-color: yellow;
display: inline;
}
What you need is <mark></mark> tag, like this:
<p>Do not forget to buy <mark>milk</mark> today.</p>
Here's a fiddle for you:
http://jsfiddle.net/am9rzfmd/
The default css settings for this tag are:
mark {
background-color: yellow;
color: black;
}
So you don't have to explicitly define the css, only just in case you need to change the color.
Update
As misterManSam pointed out:
Be aware that the element has a special semantic meaning and
shouldn't be used if you just want "to make my text a yellow
background"
Change it from a div to a span and it will only stretch its width to the contents within it.
<body>
<span id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</span>
<br>
<br>
<span id="bad_way">This is the inefficient and manual way.</span>
</body>
http://jsfiddle.net/bbv5ryhk/
I am trying to style a box for the alternative text in pictures. If a pictures doesn't exist I want the alternative-text to appear in a box with text in it that looks like a picture. It works on PC, but it doesn't look the way I want on Mac. A thin grey border appears and a question mark is placed in the middle.
Picture: http://postimg.org/image/tte1lw8sj/
This is my HTML for the pictures
<a href='LINK.php?id=$id'><img src='$filename' class='headerimg' alt='$alttext' width='300'></a>
And this is my CSS:
.headerimg {
color: #000;
font-size: 20px;
margin-bottom: 5px;
max-height: 120px;
border: none;
}
Does any one know why it box looks different on Mac?
The rendering of an img element in situations where the image is not displayed is very browser-dependent, and you cannot expect to style it consistently. For example, some browsers simply render the alt text as if the element were just replaced by that text (and some people think that this is really the most appropriate way).
Unless you need to support rather old browsers, consider using an object element instead. It allows the fallback content to be normal HTML, and you can put an element there and style it as desired:
<object data='$filename' width=300><span class=alt>$alttext</span></object>
I want to create a box like this with random text title: http://oi44.tinypic.com/1tu4xz.jpg
I know how to code this with static (unchanged) text, but k dont know how to do this effective with random variable-length text and border. It is important to let the background show through.
Please, do you know something? It may just be a reference to a similar solution.
You could try playing with fieldset and legend elements. They are usually used in forms, however they could certainly offer an easy solution ... to achieving what you want here.
You could try something like this:
<fieldset>
<legend>Title text</legend>
<p>Your random content ;-)</p>
</fieldset>
and in your CSS something like this:
legend {
text-align:center;
padding:0 20px;
}
fieldset {
border:2px dotted #000;
}
you can see the body background through the legend and the border.
here is a jsfiddle to play with (it uses a border image as an additional example).
Create a normal box with a frame, like:
<div style="border:1px solid black"></div>
Then insert an element OVER the box with your title, background-color: white and some paddings. Then this element will cover the part of the border.
Of course you can set some background image for the title element instead of white color- it will work too.
i'm doing a web app for iPhone, i'm having some troubles with borders.
To simplify things i have a background image for body, a box with rounded corners which have some elements inside and a title, and that's where problems begins as i want my title to be on the top border of my box without having the borderline behind it.
Here is a screenshot :
I can't see any solutions to render it properly, some of you have any guess ?
It would be much appreciated
From what I can gather, it looks like you should be using the fieldset element (as you are "grouping" form elements together), which conveniently also looks the way you want it to:
<fieldset>
<legend>Promoter</legend>
<select>
<option>Choose a promoter</option>
</select>
</fieldset>
Styling is simple. Align the legend text and style the fieldset border using CSS:
fieldset {
border: 1px solid black;
border-radius: 5px;
}
legend {
text-align: center;
}
For a live example, see this jsFiddle demo.
Not sure if there is a simple pure css based solution.
A method that somewhat achieves what you want is to have text shadow on the text floating above the border, using a color that blends with the general color of the background. You can tweak the values such that the border will (at least mostly) fade away behind the text. This will of course also fade away the background image, replacing it with the color of the shadow, but it might look fairly nice anyway. (Having a more solid background for the text will make it easier to read, too).