I am trying to create a simple document after recently starting to learn HTML and CSS. I am using Notepad++ with the plugin "Preview HTML".
The problem is the text in the preview window is centered by default(meaning i have to insert text-align to render any text left).
However, when I open my HTML file in a browser (without text-align), it displays text to the original left alignment.
Any idea how I can change the default text alignment in the "Preview HTML" window to left?
Below are screenshots depicting the problem
Preview in "Preview HTML"
Preview in Google Chrome
I tried what you gave, and the reason is improper closing <h2> tag. You missed the forward-slash sign while closing. Causing the <h2> tag to never end and the below <p></p> tag was treated as enclosed inside this and thus style for parent tag i.e. .heading class got applied to the child tag of <p>
<h2 id="heading">Testing<h2>
should be
<h2 id="heading">Testing**</h2>**
for it to work.
screenshot of corrected html is below
screenshot showing what happened actually in DOM
Related
I'm using Tailwindcss to working with nextjs, I met a issue that recorded <p> tag cannot contain any element in middle of the text. It will breakline right before the element show up
It shouldn't breakline on the element on normal <p> tag. I disabled all the attribute can be find in the style console but it wasn't fix the problem. Only disable base class import in tailwind.css lead <p> run correctly, but it shouldn't be fixed like that
Are you talking about "#tailwind base;" in application.tailwind.css? You shouldn't disable this as it might get issues in other designs.
Instead, what you can try is to wrap your text in the "span" tag and see whether it works. Hope I understood your question... For this, you'll have to use multiple span tags wrapping up your text only.
As you can see from the screenshot below, I placed some text inside the tag without any other element such as . When I view it, the test is shown on the HTML page. But is this a legal way?
I have an iframe on my html page that displays text output from a file.
I am using an iframe to display a the text in a box.
The text from the text file is actually there, but it can't be seen. The problem is that I need the text to match the color scheme of the page. the background is black and the text is else where on the page is light blue.
However, the text in the iframe is showing up as regular black text. I have tried different html code to change the font color but nothing works.
Here is my code:
<div class="aligncenter">
<p><iframe style="color:blue" src="/home/ironmantis7x/Documents/BSSLLC/node_electron/jasminWeb_v2/engine/py-chatbotAI/test.txt" frameborder="2" height="300" width="50%"></iframe></p>
</div>
What is the correct way to make the text visible in the iframe?
Is there a better way to do it other than using an iframe?
The iframe loads another page in your page. You cannot style it from the page containing the iframe tag, it has to be styled in the page the iframe points to.
It could actually be done if both are on the same origin by accessing the iframe document from JavaScript. But it would be tricky and not a good way to do this.
You can open inspect element and see the class name or tag name which you want to change, then in your css overwrite it
Update
If you are using Chrome, right-click the element and select "Inspect Element".
The Dev Tools "Styles" panel shows you where CSS declarations come from:
When I create a div with a link, and I toggle the editor, JCE removes the entire link code from the div.
This is the example:
<div id="test">text or image here</div>
When I toggle editor to see the result, and than back to the code view, this is the result:
<div id="test">text or image here </div>
So I don't understand why JCE removes the link outside of the div. I put there the link cause I would like the entire div with its background to be clickable.
If I save the article, when I'm in the code view, it saves the link! So it remove this only if I change to the visual way when I'm editing the article.
<div> is a block element and <a> is an inline element ahd before HTML5 putting a block inside of any inline element was not valid. This is why I suspect that JCE would wipe it out; in pre HTML5 this would be invalid markup. In HTML5 you can put a block element inside of <a> it, but I'm not sure if there is a setting in JCE to get it to validate with HTML5. You should probably ask on their forums. This link gives you some more detail.
I'm having a problem finding out which css is actually applied to an element when using Firebug 1.11.2. I'm setting the paragraph font from my own css file (d.css), which is meant to over-ride 3 system css files (a.css, b.css, c.css).
I click on the html tab, and click on the <p> element that I'm
trying to debug.
The style window on the right now shows the applied styles from a.css, b.css, and c.css, but not d.css. No paragraph font is shown, but I can change the paragraph line-height, for example, from a.css.
If I click on the css tab, and find d.css, I can manually change the font and font size and see the changes applied to the <p> element in the main window. However, the style window on the right still shows no font.
Is there some magic to showing all the applied styles?
Try using another add-on for viewing your CSS code, for instance:
https://addons.mozilla.org/en-US/firefox/addon/web-developer
You can try other add-ons.
A bit dumb, but probably worth answering rather than withdrawing the question...
turns out that you have to be rather more careful when selecting the html element than I'd realised. My text was actually in a span:
<p>
<span class="foo">bar</span>
</p>
The problem was simply that selecting the <p> element or the bar text doesn't show the styles applied to bar - you actually have to select the entire span element by clicking on the span word.
Thanks.