I have scanned through your vast database of question but don't seem to find an answer. I am having Problems with Take the text to a new line - even with space still left on the line before. Here is the code :
p1 {
border-left: 6px solid blue;
background-color: lightblue;
padding: 10px 9px;
font-size: 17px;
word-wrap: break-word;
}
br {
line-height: 200%;
}
<br>
<p1> <b> < !DOCTYPEhtml > <br> < html > </b>
</p1>
<br>
Now if you were to run it, you would see something like the image below:
Now what would I have liked it to look like is something like this:
Now this is am image of a text box under the tab Editors on the W3School Webpage. I was trying to create similar box for my website - with the Blue side line running all the way down, and with text laid out similar to the W3Schools. But I cant seem to get it right even after spending 5 hours on this very problem. Can anyone help me out?
Regards Satanshu
Use real HTML elements.
p.t1 {
border-left: 6px solid blue;
background-color: lightblue;
padding: 10px 9px;
font-size: 17px;
word-wrap: break-word;
}
br {
line-height: 200%;
}
<br>
<p class="t1"> <b> < !DOCTYPEhtml > <br> < html > </b>
</p1>
<br>
This works because <p> is a real element and <p1> is not.
And if you are curious to the specifics, the reason why <p1> does not work is not that it is an undefined element. (Otherwise, it wouldn't do anything; it wouldn't even have a left border on the first line.) It is because the error correction routines of your browser considers this an inline element, while <p> is a block element. That's really what's causing the difference in display.
Don't count on error correcting routines solving everything for you though. Sooner or later you'll run into an error that is not handled the same by all browsers, and then you'll be in trouble. Better stick to the rules.
Thanks Chris, It seemed that using tags such has caused the text box to not work as it should. I appreciate you help mate and would look forward to returning the favor in the future.
Regards
Satanshu
Conclusion - Use classes!
Try this:
<!DOCTYPE html>
<html>
<head>
<style>
.w3-code{
line-height: 200%;
border-left: 6px solid blue;
padding: 10px 9px;
font-size: 17px;
word-wrap: break-word;
color:#FFFFFF;
background-color: #A9A9A9;
margin:10px 5px 0 0;
}
</style>
</head>
<body>
<div class=w3-code>
<!DOCTYPE html><br>
<html><br>
<head><br>
<title>Page Title</title><br>
</head><br>
<body><br><br>
<h1>This is a Heading</h1><br>
<p>This is a paragraph.</p><br><br>
</body><br>
</html>
</div>
</body>
</html>
This is worked for me.
Related
I was writing a CSS for a simple page and I've stumbled across a problem. I have a style for code that makes it have a simple border. The problem is when the line wraps inside that code when it's inside a paragraph. For example, the code below:
<!DOCYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
p { text-align: justify; }
code { border: 1px solid black; border-radius: 3px; }
</style>
</head>
<body>
<p>
Here I have a paragraph and a really long code text:
<code>I'm a really long code text with a border.</code>
</p>
</body>
</html>
When the line wraps inside the code element, the border stops in the first line and continues on the second incomplete at the break, which is kinda ugly. I'd like to make it so that the line can't wrap inside the code element as if this element is treated as a single word in a paragraph and appears entirely on the next line; or that the border stops when the line wraps and appears again when the next line starts. However, I have no idea of how to do this and I haven't found anything similar on the internet, can someone please help me?
You can use display: inline-block or display: block on the code element
code {
border: 1px solid black;
display: inline-block;
}
<p>
Here I have a paragraph and a really long code text:
<code>I'm a really long code text with a border. I'm a really long code text with a border.</code>
</p>
You may use outline instead border :
p {
text-align: justify;
}
code {
outline: solid 1px;
}
<p>
Here I have a paragraph and a really long code text:
<code>I'm a really long code text with an outline border.</code>
</p>
Fix for tag code
More info - https://www.w3schools.com/html/html_blocks.asp
code {display: inline-block)
Let's say I have this CSS:
.tbl-div > h1 {
border-bottom: 1px solid black;
display: block;
font-size: 25px;
margin: 10px -15px 30px -10px;
padding: 0 0 0 40px;
}
.tbl-div > h1 > span {
color: #006ec7;
display: block;
font-size: 14px;
}
So let's say that there's this styling for a simple output div. The DOM for something like this would look as such
<div class="tbl-div">
<h1>*title*<br><span>*subtitle*</span></h1>
*content goes here*
</div>
The idea for the header section is that there is large text, then below it is a subtitle in smaller text and blue font. Here's the kicker. It actually works everywhere BUT an iframe. Once this goes into an iframe, the page just utterly thinks the CSS isn't there, and only in this case. It appears as a giant string of text 25px in font.
No other browser does this. And it's only with these properties, and only in an iframe.
What is happening?
I checked it, working fine for me.
Make sure your document structure is proper. Then use iframe from another webpage like this:
<iframe src="file-containing-source.html"></iframe>
I made it here. See this: http://codepen.io/MustagheesButt/pen/RNXpEy
I try to turn a PDF book into a mobi book (html), and I also want to recreate the layout.
There, after every break the text is intended one line.
This should be doable with
<body style="text-indent:20px each-line;">
but I'm doing something wrong, as it doesn't work.
I don't want to do this with paragraphs as that also includes a blank line by default, but those breaks don't always mean a entire new paragraph...
each-line is not yet supported in browsers (see text-indent on MDN). However, this is what you will want to use when it becomes available.
Use the semantically correct paragraph tags <p> and use CSS to modify padding/margin as needed.
Paragraphs are the way to go on the markup level. The blank lines you describe, are margins that are added by Web browsers by default. Since you will already be editing the style sheet to add the text indenting, overriding these default margins should be no hassle at all. In fact, the following should be enough:
p {
margin: 0;
text-indent: 2em
}
Why 2em? That means twice the width of the letter m of the typeface the paragraph is set in. So whatever the reader does with his or her personal settings (font size, resolution, et al.), the indenting should be proportional to the text. It is also somewhat of a typographic convention. Of course, you could set this value to a lot of other things, like 20px or 1cm.
When you run the code snippet it will give you example HTML text you can copy and past and play around with.
Hope this helps. As this is a way to put text any way you see fit. Thanks!
<!DOCTYPE html>
<html>
<body>
<style>
h3 {
text-indent: 25px;
}
h3.small {
line-height: 0.2;
margin-top: 0em;
margin-bottom: 0em
}
h4.small {
line-height: 0.2;
margin-top: 1.5em;
margin-bottom: 1em;
}
</style>
<h1>Example</h1>
<h3 class="small">Put text where you want</h3>
<pre style="font-family:verdana">
This text will keep spacing.
This this line too.</pre>
<h4 class="small", style="text-indent: 50px">
This is how to make the above example, hope it helps:
</h4>
<pre>
<html>
<body>
<style>
h3 {
text-indent: 25px;
}
h3.small {
line-height: 0.2;
margin-top: 0em;
margin-bottom: 0em
}
h4.small {
line-height: 0.2;
margin-top: 1.5em;
margin-bottom: 1em;
}
</style>
<h1> Example </h1>
<h3> class="small">Put text where you want <h3>
<pre> style="font-family:verdana"
This text will keep spacing as formated in HTML file.
This line too.</pre>
</body>
</html></pre>
REFERENCE:
W3schools.com link to HTML <pre> Tag:
https://www.w3schools.com/tags/tag_pre.asp
W3schools.com link to HTML line height:
https://www.w3schools.com/css/tryit.asp?filename=trycss_line-height
W3schools.com link to HTML <p> tag default options:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_p_default_css</pre>
</body>
</html>
Preface: I've read lots of articles about images inside a div having a strange space around them, etc.
Example #1: Unwanted padding-bottom of a div
Example #2: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Example #3: cannot eliminate space between 2 horizontal divs inside containing div
Their issues seems similar but not identical to mine. In this sample document, the border, padding, outline, etc are set to zero .. yet both Opera and Firefox render a spare pixel at the top of the div. The third may cheat a way around this space but nobody seems to answer why it's there..
Edit: I read MANY articles that are temptingly close to answering this, but they all seem slightly different with the actual issue.
What am I missing? It's my first question so be patient please :)
<!doctype html>
<html>
<head>
<title>Anger</title>
<style>
*{
cursor: default;
margin: 0;
outline: 0;
border: none;
padding: 0;
text-decoration: none;
}
body{
background-color: #87cefa;
}
div{
background-color: #ffffff;
}
button{
border-radius: 9px;
padding: 1px 6px 2px 6px;
font: 14px monospace;
color: #ffffff;
background-color: #1e90ff;
}
</style>
<head>
<body>
<div>
<button>Sample Button</button>
</div>
</body>
<html>
Is there some CSS3 that will make it all work? This is an experimental project, so the latest CSS3 is welcomed.
PS: I only care about the Opera rendering, though Firefox would be nice to support with the same standards compliant code.. Thanks!
Change the line-height on the div to zero.
div{
background-color: #ffffff;
line-height:0;
}
jsFiddle example
Set vertical-align to top on the button. That will fix it.
I have some dynamic titles where the design requires each word to be on their own line. Here is the desired look:
http://jsfiddle.net/alanweibel/2LEmF/2/ (note the black backgrounds for each word)
The problem I need help with is keeping the style above while having the whole title inside of one tag. I cannot dynamically insert H1's before and after each word.
I need to change the HTML markup from
<div class="tagline">
<h1>
Oh
</h1>
<h1>
Look
</h1>
<h1>
A
</h1>
<h1>
Headline
</h1>
<h1>
Thanks
</h1>
</div>
to something similar to
<div class="tagline">
<h1>
Oh Look A Headline Thanks
</h1>
</div>
while keeping the same style as in the link above.
Thanks in advance.
See: http://jsfiddle.net/thirtydot/HksP2/
It looks perfect in IE9, IE8 and recent versions of Firefox, Chrome, Safari, Opera; all on Windows 7. It degrades reasonably well in IE7. In Safari on Mac, it's almost perfect.
This is based off a previous answer. Quoting myself from that answer:
Note that the line-height and padding adjustments can be very
tricky to get right.
line-height: 1.83; looks good, and was found by picking something that looked close to what you wanted, then using trial and error to find something that works in both Chrome and Firefox (they render text differently).
HTML:
<div class="tagline">
<h1><span>
Oh Look A Headline Thanks
</span></h1>
</div>
CSS:
.tagline {
display: inline-block;
width: 0;
line-height: 1.83;
padding: 1px 0;
border-left: 20px solid #000;
}
.tagline h1 {
font-size: 20px;
font-weight: normal;
color: #fff;
background: #000;
display: inline;
padding: 8px 0;
text-transform: uppercase;
}
.tagline span {
position: relative;
left: -10px;
}
Your only option for doing this, that I'm aware of, is to write some javascript that will take your <h1>oh look ..</h1> stuff and split it out into separate h1 tags.
update:
I just thought of a way: http://jsfiddle.net/2LEmF/10/
Basically, you need to move your background color up to the main div. Then set the width on your h1 to something that is going to force the text to break along normal text breaking rules. Something like 10px.
I'm not sure what this is going to do on a number of browsers as you are essentially giving a size that is way to small to your H1... but it might be just what you are looking for.
Here's a simple example of how to get one line per word:
https://jsfiddle.net/xaq5ttf2/5/
HTML:
<div class="tagline">
<h1>
Oh Look A Headline Thanks
</h1>
</div>
CSS:
.tagline h1 {
display: inline-block;
word-spacing: 100vw;
}
You can set the width of the h1 to less than that of the smallest word e.g. 10px.
It produces exactly the same result as your example (at least on Chrome and Firefox).
Jsfiddle here.
You could search and replace spaces with <br /> to get this look:
http://jsfiddle.net/WwbUL/
I'm not sure I understand the problem. It seems that you're stuck with the HTML as posted in your question, but you want it to display in-line?
What about just adding display:inline; to .tagline ?
http://jsfiddle.net/XmCLd/
Or is it the other way around? That you have normal-looking HTML, but you need to split your lines at the spaces?
http://jsfiddle.net/GQ44u/
Make the tagline div really thin and make it block instead of inline. Then make the h1 inline.
.tagline
{
width: 1px;
margin:5px;
display: block;
}
.tagline h1
{
color:#fff;
background: #000;
padding: 4px 10px;
font-size: 20px;
line-height: 30px;
text-transform:uppercase;
display: inline;
}
JSFiddle here.