I have code like this
<p><span>On this day,<div class="underline-text">Sunday</div>,we, the undersigned:</span></p>
and my css
.underline-text {
display: inline-block;
border-bottom: 2px solid black;
width: auto;
}
But my problem is when i run this code, is show like this :
On this day,
`Sunday,we, the undersigned:`
What i need is like this :
`On this day,Sunday,we, the undersigned:`
How i do that way????
NOTE : I'm using bootstrap 3.
UPDATE : Works, i was stupid so i'm changing <div> to <span>. Thanks you all for the answer.
Why i got -2 vote??? Wat's wrong with my question??? I just asking simple question, and i kno i'm so stupid cause i'm using inline-block on span. But why i got minus for this???
Make this adjustment:
On this day, <span class="underline-text">Sunday</span>,we, the undersigned:
A div inside a p element is invalid HTML. The paragraph element closes before the div element begins.
Here's how the browser renders your code:
For a complete explanation of this behavior see: https://stackoverflow.com/a/41538733/3597276
<p> or <span> tags can't contain block-level elements inside them. Most browsers will split it into 2 separate paragraphs. Check this answer: https://stackoverflow.com/a/5441670/6424295
Maybe try using a<div> instead of a paragraph and get rid of the <span> tags, as I don't think they're really doing anything.
Yes. It should be like this:
.underline-text {
display:inline-block;
border-bottom: 2px solid black;
width: auto;
}
<div>
<p>
On this day,<span class="underline-text">Sunday</span>,we, the undersigned:
</p>
</div>
Related
The problem is i need photoshop-like selection functionality. But when I add border to div that encloses the image, the image gets smaller by the thickness of the border x2.
How can i resolve that?
I tried, making
.picture-frame--image {
border: 5px solid red;
margin: -2px 0 0 -2px;
}
<div>
<img class="picture-frame--image" src="https://placehold.it/500x500">
</div>
<div>
<img src="https://placehold.it/500x500">
</div>
but the image is overlapping border, and i need otherwise. For some reason z-index won't work, i dont know why.
Accualy the best answer was made by cimmanon in nathaniel link.
I made:
img {
outline: 2px dashed violet;
outline-offset: -2px;
}
Thank you all for the answers. Really appreacie it.
It sounds like you need to add
* {
box-sizing: border-box;
}
to your css file. I'm not entirely sure though because you didn't post any code.
Check this site for more information: https://www.w3schools.com/css/css3_box-sizing.asp
I think what you are looking for are pseudo elements like ::after and ::before. With these you can add content around your element. But beware that these can only be applied to certain html tags. ::after MDN Documentation
See this StackBlitz
I know it sounds simple, but this is really annoying me. I have researched online and not found a perfect answer for me yet.
I have this html code:
<h5 class="start-online"><div id="online_ajax">0</div> Clients online </h5>
I want the online_ajax div to display inline before the Client online text.
My current css is:
h5.start-online {
text-align: center;
font-size: 11px;
}
.online_ajax {
position: relative;
display: inline-block;
}
You cannot nest <div> inside <h5>. Period. Make it <span> instead.
<h5 class="start-online"><span id="online_ajax">0</span> Clients online </h5>
You don't even need to style it! The <span> tag is the inline version of <div> tag (as how <div> tag is the inline version of <span>).
Also, in your CSS, you are supposed to select the id and # is the ID selector.
#online_ajax {
position: relative;
display: inline-block;
}
But yeah, as I said you before, please don't use <div>.
As mentioned before: You should use <span> instead of <div>. Then you don't need display: inline-block; anymore in your css.
You made a mistake.
online_ajax is an id, use # instead of dot(.)
I have a html code where I want to store long paragrapsh of information. The only issue is that in my code I don't want hundreds of sentences on just one line. Id rather see it formatted like:
<div id ="sidebar">
<div><b> Things to take into account: </b></div>
<div>
<p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</p>
</div>
</div>
However, when I do it this way and run my website the words run outside the container they are in
Can you help give me a way to display it this way in the code while keeping the words inside it's container?
my css:
#sidebar {
"background-color: #eee;
height: 200px;
width:350px;
float:left;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
border-radius: 5px;
display: block;
}
UPDATE: changed X to words and fixed it. Weird but ok lol
Your issue is that xxxxxxxxxxxxxx is considered one word and by default the browser won't break this word.
adding
word-wrap:break-word;
Will fix this, but I would guess once you use actual text in there it will break more naturally since it won't be a single word of so many characters.
fiddle: http://jsfiddle.net/ktbypbtt/
Here is another fiddle without the word-wrap, but with actual text.
http://jsfiddle.net/ktbypbtt/1/
Notice how it breaks itself since the browser will naturally wrap the word after each word if it hits the end of the div, but needs to be specifically told to break words.
Just add a <br> tag where ever you want the text to go to the next line
<div id ="sidebar">
<div><b> Things to take into ACCOUNT: </b></div>
<div>
<p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
</p>
</div>
</div>
Helpful? Let me know :)
add some css.
#sidebar{
display: block;
}
or add a class to your wrapping div and do the same thing with setting display as block
edited
You could cut off the overflow:
#sidebar{
overflow: hidden;
}
http://jsfiddle.net/5deyo1tb/
The 'invisible' <br> element always appears at the end of the line you wrote it for.
With styling, you can give it a visual appearance. I want to make it appear at the start of the next line instead, so the visual appearance would indicate the start of that line.
abc<br style="border:1px solid"/>abc
would give
abc|
abc
but i want
abc
|abc
if you want to show tag before or after every paragraph for any purpose. you should use pseudo selectors.. like :before and :after
<html>
<p>hello1</p>
<p>hello2</p>
<p>hello3</p>
<p>hello4</p>
<css>
p:after{
content: "";
border-right: 1px solid red;
margin-left: 5px;
}
“indicate a selected character, including line breaks”
Line breaks are non-printed characters. Most software (e.g. MS Word) uses a replacement character to display line breaks. You should do the same to highlight any line-breaks.
Or you can wrap the line break into another tag which then is styled accordingly:
HTML
abc<mark class="line-break-wrapper"><br></mark>abc
CSS
.line-break-wrapper {
background: #990;
padding: 0 .25em;
}
you can simply use
abc<br/><span style="border-left:1px solid ">abc</span>
to achieve this
But i don't think this is the good method
I think giving border is more better see this http://jsfiddle.net/46jyt4d7/
<p>abc<br/></p><p class="a">abc</p>
.a{
border-left:1px solid;
}
You can't actually style a <br /> tag to become visible. But to achieve what you want to achieve all you have to do is put another element that creates the line like this:
abc<br /><span></span>abc
And with the styling:
span {
border: solid 1px black;
margin-right: 2px;
}
Here is an example fiddle:
http://jsfiddle.net/tmqk0ppe/
Okay, I am working on a custom parser for a personal variant of the Creole markup language, and I'm having trouble with a macro I added, which centers text.
Given the following CSS code:
.boxsection {
text-align:left;
border:1px solid #333;
padding:10px;
margin:10px;
background:1px solid #ccc;
}
and the following HTML code output by the parser:
<div class='boxsection'>
<span style='text-align:center'>
<h4>Center</h4>
<pre><<center>>Some text in the middle<</center>></pre>
This macro causes the content inside of it to be centered.
</span>
</div>
The heading and the text in the block all renders centered, but the last line does not center at all, even though it is inside of the span. I have tried changing the span to another div, with display set to inline, but that didn't work.
The only thing that does work is using the tag, but that tag is deprecated and so I'd prefer to avoid using a solution that may stop working in a future browser update.
Edit: I've uploaded a small HTML page which demonstrates the problem: http://www.wuala.com/zauber.paracelsus/Public/centering_test.html/
It is because your HTML is invalid.
You can't adding elements with default display:block into elements which are by default display:inline.
Change your span to div and it will work.
HTML
<div class='boxsection'>
<h4>Center</h4>
<pre><<center>>Some text in the middle<</center>></pre>
This macro causes the content inside of it to be centered.
</div>
CSS
.boxsection {
text-align:center;
border:1px solid #333;
padding:10px;
margin:10px;
background:1px solid #ccc;
}
http://codepen.io/Chovanec/pen/Hyxqe