I'm creating a simple personal website (using jekyll), and I have a problem in the "About Me" page. Every page of the website (including the about-me page in question) has a header on the top and a footer at the bottom. In the "About Me" page, I want the middle content section to be split vertically, with some text on the left and my picture on the right.
To achieve that, my "about-me.html" has the following two divs:
<div class='about_content' id='about_left'>
...
</div>
and
<div class='about_content' id='about_right'>
<span style="margin:0 10px; float:right">
<a href="/assets/picture.jpg" title="Gautam">
<img src="/assets/picture.jpg" width="240" height="320" alt="Gautam"/>
</a>
</span>
</div>
The about-me text that I want to show is in a markdown file called "about-me.md", but all my attempts to show those contents in the "about_left" div defined above have failed :(
One option is for me to not use markdown for the about-me text, but instead write plain HTML in the "about_left" div. I don't like this option.
Another option is to not use the "about-me.html" file at all, but instead embed an image tag inside "about-me.md" as suggested in this answer. This sort of works, but the text and the image are then not in separate divs; due to which the text extends under the image -> something I'd like to avoid.
Is there a way for me to keep my "about-me.html" file with the two divs, but still show the text from my "about-me.md" file inside the "about_left" div?
You can do something like this in your HTML file where you want the content of the Markdown file to show:
{% capture about %}{% include about-me.md %}{% endcapture %}
{{ about | markdownify }}
Related
If I use mathjax on blogger then I want to put macros in a "hidden" <div> command like:
<div style="display: none;">
\( \newcommand{\al}{\alpha} \)
</div>
This works fine for the main blog post, but on the main page, the "summary" of the blog post displays the macro verbatim, it is NOT hidden there (i.e. I see \newcommand{\al}{\alpha} ) .
Is there some way to get my main blogger page to respect the "hidden" div style?
I have isolated the problem to this very simple example, and the <div> is still not hidden on the main page
<div id="Project" class="bg-white fnt-white brdr project-div ">
<div class="float-left image-for-project-container brdr">
<img src="{% static './Images/manworking.webp' %}" alt="manworking" height="630px">
</div>
{% for project in project_details %}
<div class=" project-container inline-block ">
<h2 class="text-center fnt-black head-portfolio">
{{project.project_name}}
</h2>
<br>
<br>
<p class="margin-auto txt-portfolio roboto hover-orange fnt-black">
{{project.project_details}}
</p>
<br>
Read More
</div>
{% endfor %}
</div>
Issue: The project container when receiving dynamic entries from Django model, creates multiple project containers as executed by the forloop. However, as evident from the image attached, as each project container is created, it is creating an unwanted upward indentation or margin successively. What am I doing wrong?
This is the HTML code. I do not think there is any requirement for my CSS stylesheet as when I view the HTML file without Django, it's absolutely alright. I have also attached an image to show the space that is being created. In case the Imgur is not being shown here is the link (https://i.stack.imgur.com/EnUUG.png).
Inline block's vertical-alignment is set to the text baseline, this is why the bottom text, the 'Read More' links line up. To make them align at the top, you will have to set vertical-align:top to the project-container class.
I want to introduce hash links to the headings of a page into the menu of a web page. The web page is generated with Jekyll and it's default layout looks as follows:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div id="BigFatContainer">
{{ content }}
{% include footer.html %}
</div>
</body>
</html>
It is in the header that the menu for navigating to the different pages is located. I've been able to add a table of contents to the {{ content }} with the help of the following Kramdown command:
* Point at which the TOC is attached
{:toc}
One could use some ugly JavaScript hack to move this table of contents from the {{ content }} and into header.html but that'd be a bad solution. It's not possible to place the {:toc} macro inside header.html since that's not parsed by Kramdown, and even if you make sure that it's parsed by Kramdown using for example this plugin it outputs the TOC of header.md instead of the TOC for the content.
#miroslav-nedyalkov was on the right track here. Following his suggestion of looking at the Bootstrap documentation, I found that it uses a Ruby Gem - jekyll-toc that allows you to place a TOC anywhere in a layout file. You enable it in the front matter. I'm now successfully using:
<nav aria-label="Table of Contents">
{{ content | toc_only }}
</nav>
<section itemprop="articleBody">
{{ content }}
</section>
I would suggest you to use the approach Bootstrap website (scroll down and observe the right navigation area) is using - make your TOC as part of the content area, but style it to be placed on the side like main navigation. The main reason I'm suggesting you this approach is that you may (and most probably will) have more than one page. In this case you will need to display different page navigation for every page and display some navigation between the pages.
For more information you may refer to this article - http://idratherbewriting.com/2015/01/20/implementing-scrollspy-with-jekyll-to-auto-build-a-table-of-contents/
Why moving the toc block ?
This is correct to say that this toc is part of the page content. Semantically speaking.
You problem here is not at the document structure level but at the presentational one.
In this case the use of CSS is recommended to solve your problem.
I'm trying to put up a logo for the web page of one of our repositories. I managed to place the logo on the base html as that code is used throughout the whole site, it just calls the html fragments from the directory depending on what the user clicked in the navbar.
The problem: It displays correctly in the home page (dashboard) but when you click on the other navbar items the image converts to an icon that I usually see when an image fails to load.
this is the site: http://dir.coe.upd.edu.ph/
<div class="image" style="position:absolute; padding: 5px;">
<img src="../static/css/images/logo.png" class="responsive-image">
</div>
<div style="background-color:#d07837;height:300px;width:100%;position:absolute;z-index:-10;"> </div>
<div class="container" style="margin-top:50px;">
<div>
<h1 class="page-title">{% block page_title %}{% endblock page_title %}</h1>
<div class="row-fluid">
<div class="span12 well content-box">
{% block body %}{% endblock body %}
</div>
</div>
</div>
I'm still currently editing the site and I noticed this problem. the site was constructed though codeigniter and bootstrap
Your image is at the location http://dir.coe.upd.edu.ph/static/css/images/logo.png
so your src attribute of image tag should be
<img src="/static/css/images/logo.png" class="responsive-image">
The html are not at the same levels so your src attribute of the img tag is wrong.
This is what chrome devtools shows on the different pages.
logo.png /static/css/images
logo.png /works/static/css/images <-- There is no image in this
folder. It should be in /static/css/images
One of them is not found because they are different. Try use the absolute path or change the location of your template.
Solution change your image tag to
<img src="/static/css/images/logo.png" class="responsive-image">
Have a look on image...Hope this help
I have a simple web page written in markdown where the title looks like this:
---
title: <h1 class="side">Text Title | </h1><h3 class="side">Text Subtitle</h3>
---
In the body of the page it displays correctly, but it shows the formatting in areas like the tab bar of the browser. I'd like to find a way to keep the formatting without having it displayed.
Just to be clear, the class="side" is a css <style> to display the headings inline, and the page is processed into html with the following result:
<title><h1 class="side">Text Title | </h1><h3 class="side">Text Subtitle</h3></title>
and the area in the body where the title is correctly displayed looks like this:
<header>
<h1>{{ page.title }}</h1>
</header>
You cannot have HTML within a title element.
If your title is stored somewhere and written out via server-side code, you will need to change your server side code to somehow strip the HTML.
You cannot style the <title> element - and using it outside the <head></head> is invalid HTML/XHTML
More info from the w3c