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.
Related
I am using a php script that outputs the post like this:
<div class="postoutput">
<p>
<img src="content/xeon.png" alt="xeon.png">
This is text, Xeon is great.```
</p>
</div>
I can't touch the output but I can modify the CSS, is there way to add a margin that ONLY applies to the text using only CSS
The image is 100% wide and this is okay.
The desired goal is to keep the image as it is but make the text ONLY have a 10px margin on each side. Remember, I only have access to the CSS file.
Long story short... no you cannot apply css directly to the text in your case.
You could probably emulate something close though.
Assuming your image is fullwidth you could probably use something like:
p {
padding:10px;
}
p > img {
margin:-10px -10px 10px;
}
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
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/
What is the best way to combine a border with some text like so:
----------- sometext ------------
| |
| form |
| |
---------------------------------
As it's for a form, you should use a fieldset element.
See: http://jsfiddle.net/thirtydot/AVGsr/
METHOD:
For use with anything even when not using the forms fieldset, you can use my method in this JSFiddle (It does NOT use Javascript, JSFiddle can be used for pure HTML & CSS), I will explain what it does in here:
What the fiddle demonstrates is having 3 divs as the top single border area, made up of 2 divs either side with a 1px border in the middle, and one on each side, and the middle div having text only, aligned to the center and padded as needed.
There is then a div placed underneath that which is the main content, but it only has 3 borders (left, right and bottom. The top has been made by the side div's).
The CSS and HTML is here, and JSFiddle link underneath.
FEATURES:
This method should fit all your criteria
Border text is in the place of part of the top border
Border text is central, can be placed anywhere along by modifying the CSS
Easy to change dimensions of the bordered area
CSS:
.wrapper-box { float:left; width:500px; height:150px; }
.side-border { float:left; height:24px; width:199px; border-top: solid black 1px; margin-top:25px; }
.side-border.l { float:left; border-left: solid black 1px; }
.side-border.r { float:left; border-right: solid black 1px; }
.border-text { float:left; height:35px; margin-top:15px; width:100px; text-align:center; }
.box-content { float:left; width:498px; height: 100px; border-left: solid black 1px; border-right: solid black 1px; border-bottom: solid black 1px; }
HTML:
<div class="wrapper-box">
<div class="side-border l"></div>
<div class="border-text">Border Text</div>
<div class="side-border r"></div>
<div class="box-content"></div>
</div>
EXTRA INFO:
To modify the CSS for longer text, just reduce the width of the border-text, and increase the width of the side-border.
JSFiddle Example Here
Hope this helps you out, I'll be keeping this for future reference myself :).
Define a division with border and put a heading in that division.
To make the heading overlap the top border, define a negative top-margin appropriately.
To make the line around the heading disappear define the background color of the heading same as the original background.
Here goes the code:
<div class="container" style="border: 1px solid black;">
<h4 style="margin-top:-1%; background: white;">Heading</h4>
</div>
Very similar to this discussion: How to center the <legend> element - what to use instead of align:center attribute?
As was said there, using the tag is a pain if you want consistent results across browsers. To achieve this effect, I'd use a <h> tag or <div> instead for the legend.
Here's a example: http://jsfiddle.net/CddE7/
Tested in Firefox, Chrome and IE 7,8,9 for PC. The vertical placement of the <h3> varies slightly by IE version but only by a little (and probably could be refined for more uniformity).
Since I assume people will complain about using an <h3> instead of a <legend>, yes, it's not as semantically correct. But it works.
Supporting the previous answer, the fieldset element came in html 4 and it helps to group like items within a form and creates a set or a field of like items or you can wrap all the items contained in your form..
e.g.
<form><fieldset><legend>Name of your field/Some Text(your case)</legend>
Then you can add your labels and inputs in p tags or table, but the p tag is more preferable. At the end close your fieldset and form tags.. and add this type of code to your css
fieldset{
border: thin dashed #000;
}
You can add border to your form elements in this way..
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).