Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Line breaks are appearing when the DOM is rendered that aren't in my source code, push the content out of place. Why? And how can I fix that? Here is my code:
<div class="float-left" style="position:relative;left:15px">
<h2 style="color:#323C41;margin-bottom:0;">A New Hope</h2>
<p style="color:#323C41;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula nisl at hendrerit ornare. Ut non ipsum urna. Praesent non.</p>
</div>
When I inspect the page in Chrome, it shows this:
<div class="d-flex justify-content-center align-items-center bg-grey-kr fg-navy-kr secondary">
<br>
<img src="/images/testers/rebels.png" alt="Rebel symbol" class="rebel"><br> <div class="float-left" style="position:relative;left:15px">
<br>
<h2 style="color:#323C41;margin-bottom:0;">A New Hope</h2>
<br>
<p style="color:#323C41;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula nisl at hendrerit ornare. Ut non ipsum urna. Praesent non.</p>
<br>
</div>
This causes my page to look like this:
When I delete the line breaks, I see the expected result:
Thanks for checking this out. I searched all morning and couldn't find an answer. Sorry ahead of time if it is obvious!
The issue was coming from adding HTML code directly into my "new page" from the Hexo tool. Hexo is a blogging tool that compiles Markdown files into a static, live page. Whenever I was hitting enter to write code on a new line, Markdown took that as if I were hitting enter on a text editor. Moving the code all to one line fixed the issue.
Couldn't find the answer online, but when I figured it out I wanted to post it here for visibility.
Related
I’m using Sublime 3 to prepare HTML files that will eventually be turned into an epub in Sigil. This is working very well except that the formatting isn’t helping the readability.
I have HTMLbeautify and HTML/CSS/JSPrettify. They do a great job with the indentation but I would also like a method of putting the opening and closing paragraph tags on new lines, something like
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum dolor in lacus efficitur consequat. Cras turpis dolor, pretium sit amet tincidunt sed, porta iaculis lectus. Morbi consectetur vitae justo eu pretium.
</p>
Can anybody help?
I've read all the other Sublime/HTML formatting queries and i can't find anything that quite covers this.
Just select all lines (Ctrl A) and then from the menu select Edit → Line → Reindent. This will work
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I'm making a website using HTML5 and don't know which semantic element to use for the first page content the user sees first (full viewport height and width). I've read that the <header> element should be used for introductory stuff like website title and navigation. I don't even have that in my site, instead I have something like this, basically the first part of the website where you can see what it is about and links to some contact stuff.
It is a single page site, but if I had more pages, they would not have that content and I would probably make a navbar and put it in a <header>. With <main> I'd like to cover more stuff than only this.
Maybe an even different element? I don't know, it's like the combination of a <header>, a <section> and a <main>.
What do you think would be best?
Edit: This is not the entire page I have shown on the image. It is just the part that shows up first when you open the website, there is also content under it. I wanted to know what element to wrap over the thing in the image.
Here is the code (deleted classes and changed text to dummy text):
<header>
<address>
123 456 789
</address>
<div>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nibh nibh, egestas eget justo maximus, consectetur ultricies ante. Quisque facilisis pellentesque sagittis. Donec iaculis tellus nisl, vitae sodales ipsum ornare id. Suspendisse potenti. Curabitur eu ornare quam. Fusce laoreet vitae quam at ornare. Etiam quis malesuada magna.</p>
Button
</div>
</header>
Is this OK?
(the phone icon on the bottom right has position: fixed and is outside the header)
This is honestly a matter of opinion.
Personally I wouldn't bother at all with sectional elements on such a small site, since it really just adds noise. It won't be helping, say, a blind person or a search engine crawler to understand better, because there's just not that much to understand.
However I admire your effort. I would put "heading" in header, the phone stuff in "footer" (even though it's at the top) and the rest in main.
Edit: Considering that this is just the top of your page, I believe considering it the header is reasonable. The code you posted is certainly valid html.
Consider the example
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>In sed diam vitae justo laoreet ullamcorper.</p>
<p>Donec vehicula tellus vitae ligula finibus congue.</p>
<p>In ut sapien consectetur, efficitur ante et, interdum leo.</p>
It is rendered in a browser as expected with each paragraph on its own line:
Now when copying this text and pasting it into any plaintext context extra newlines appear:
Should you paste this into formatting-aware application (say LibreOffice Writer) no extra newlines this time:
And finally by copying this from LibreOffice Writer to the first mentioned plaintext editor we can get rid of these extra newlines:
Tried copying from Firefox and Chromium with the same results, so I assume it is universal among browsers.
Those screenshots were made on GNU/Linux with Geany and LibreOffice Writer. Absolutely the same behaviour is observed under MS Windows with Notepad++ and MS Office Word.
The questions are:
Why is it that newlines are added if pasting into plaintext application?
Is there any way to get rid of them if pasting into plaintext application?
I am working on an HTML theme that contains several HTML templates with the same navigation panel, footer and assets. The problem is when I modify something in a footer, for example, I have to edit all other templates one by one to bring them into line. Is there any tools to automate this procees? Thanks in advance.
EDIT: I'm not aware if you can do this in normal HTML, but if you don't like my suggested method, you can check out .load() from Jquery: $(“#header”).load(“header.html”);
Sure. You can use something like Middleman or Jekyll for simple websites. It's very easy to learn and you can have a general layout, multiple layouts and even partials. Basically you're going to make a _footer.erb and render it in the layout.
If you have multiple pages like about, contact etc, and the structure of your website is not going to change (only content), I suggest you to use one layout and create some views that are yielded in there. It's a easy concept, you can learn it with middleman in few hours.
EDIT2:
How to use this
layout.haml:
%body
%header
%nav
= link_to 'index', '/index.html'
= link_to 'about', '/about.html'
= link_to 'contact', '/contact.html'
%section#wrapper
= yield
%footer
Something here
about.html.haml
%h2
About Us
%p
............
contact.html.haml
%h2
Contact
%p
Constact us at Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec sit amet placerat nisi.
Maecenas sollicitudin ut nisl a faucibus. Etiam et cursus eros.
Nulla ut tortor aliquam, rutrum diam vitae, posuere ante.
Basically you create a layout that goes for all pages and yield the content from other pages into it. Of course you can have multiple layouts and invoke different headers and footers from partial files but this is not the case you asked.
This is haml, middleman by default uses erb. You can convert this here if you need it.
I hope is clear enogh
I am in the middle of a web app and we're just about to start with a cache-layer that features memcache and disk-based cache.
We just questioned ourself - what level/amount of formatting should we use on the stored cache data?
Let say that we have a database table called articles. Articles table have a number of columns including headline and content.
If we we're about to store this as an array, it would look like this:
array (
'headline' => 'Brilliant news - sunshine all week',
'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a
semper mi. Aenean rutrum ultrices mauris sed dictum. ');
Or, the pre-formatted HTML version:
<div class="article">
<h1>Brilliant news - sunshine all week</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a
semper mi. Aenean rutrum ultrices mauris sed dictum. </p>
</div>
Pros and cons
Obviously, the pre-formatted html version increases the size of each cached datablock, since it includes a number of html tags. Also, there will be some headache included if the data were about to be formatted in different ways (I don't think that we will do this though). The option for that is of course to instead store multiple versions of each article in the cache.
So, what's common sense to do in our case? Let the HTML be rendered each time based upon the array that are retrieved from memcache, or just output the pre-formatted html?
I think it all depends on performance you need but I would use array version as it give possibility to play with content before rendering. Also building HTML having content is usually quite cheap when compared to getting content itself.