I have a gh-pages with jekyll minima theme on https://physicys.github.io/
Site source:
https://github.com/Physicys/physicys.github.io
How can I create a Table of Contents on the left/right side exactly like this site:
https://0xdf.gitlab.io/2022/10/08/htb-opensource.html
So the ToC will still there/following when I scroll down or click on the content.
Updates:
I don't see how it can automatically generate the ToC on a specific post based on heading elements. like this afeld.github.io/bootstrap-toc but I have no idea how to implement it in Jekyll based site. talk.jekyllrb.com/t/jekyll-minima-toc-on-the-left-side/7734/3
I play around with bootstrap-toc for a while, it require bootstrap.min.css and bootstrap.bundle.min.js which turns out messing with my dark theme and the ToC doesn’t look like working as intended. I can't embed the screenshot here. talk.jekyllrb.com/t/jekyll-minima-toc-on-the-left-side/7734/5
I had some trouble getting your page to work after looking at https://afeld.github.io/bootstrap-toc/#headings.
On your sample page, the "Recon" heading is an <h2>, and the subordinated headings are <h3>. Your page contains an h1, then h2 and h2, h2, and finally an h3.
I used this page content for testing (with some longer lorem ipsum) texts between the headings:
h2
h3
h3
h2
h3
h3
h3
h3
h2
Screenshot from my 2022-10-21-Toc-Test.md page
I have removed the following part (from the _layout.scss) to have the correct distances (using the new CSS below):
nav[data-toggle="toc"] {
top: 42px;
}
I have added this new CSS (to the main.css):
.sticky-top {
position: sticky;
top: 100px;
align-self: flex-start;
}
The idea is from My position: sticky element isn't sticky when using flexbox.
Note: I have not edited the margins/distances of the hover effects to match the screenshot but I am sure you will find it out.
Related
I'm new to CSS. I have copied a CSS from existing code and changed as below:
.feedback_h1 {
width: 100%;
float: left;
margin: 0px;
font-family: Arial;
font-size: 12px;
font-width: 400;
color: #000000;
margin-bottom: 15px;
}
<div Class="feedback_h1">
We will use only personal information. Our <a href="https://example.com" target="_blank">privacy
policy</a> agreed?
</div>
Right now I'm getting result as below:
We will use only personal information. Our
privacy policy
agreed?
However, I'm expecting a result like (in one line) :
We will use only personal information. Our privacy policy agreed?
I think, I need a right alignment (as left is aligned properly) OR
Am I missing something in CSS? What additional attribute can I consider in CSS to make this in a single line?
Is VS 2013 provides a designer view to align cshtml page?
It seems as though your <a> anchor element might have a display of block. This will cause the words wrapped between the anchor elements to have a width of 100% by default.
Try putting the following in your css
.feedback_h1 a {
display: inline-block;
}
<a> elements are display: inline by default, so not sure why it might be like this. But from the code, that seems to be the most obvious reason your code is having this result.
To figure out what's going on, I would suggest using your browser's inspector tools and directly inspecting the element. It usually helps with debugging to look at the CSS styles applied to an element, and test by unchecking them, or changing them, to see the live effect of this on your site.
I'm using jekyll to generate my pages and as anyone knows that uses jekyll, the anchor tags on h-tags are automatically generated.
Solutions I am not looking for:
Add padding — my h-tags are using margins because I'm a normal person. Also, my sticky header is 50px tall which means that all my h-tags would need a miniumum of 55(ish)px padding. This causes there to be too much spacing.
Create your own anchor in a span tag — this defeats the point of the autogenerated tags and I'm trying to live a D.R.Y. lifestyle.
Summary: I need to offset the anchor's position without changing the location of the h-tag.
If this has already been answered, I apologize for creating a duplicate question. I could not find the answer to this that was not 'solved' with the previous mentioned 'solutions'.
You may want to use the :target pseudo selector, which matches when the hash in the URL and the id of an element are the same. Therefore, the style will only apply to the h-tag which has been navigated to rather than all of them.
For example, you can use :target::before to add a margin to the top of the selected tag:
:target::before {
content: "";
display: block;
margin-top: -75px;
height: 75px;
}
Here, this technique was used along with an animation which removes the margin after one second so that the margin no longer exists if/when the user scrolls up the page.
Adding this solved my problem.
html {
scroll-padding-top: 70px; /* height of sticky header */
}
I have two lines that have space between them. Like the one below....
<h2> Something Something <h2>
<h4> Something here too </h4>
I want it to look like this:
<h2> Something Something <h2>
<h4> Something here too </h4>
The space is shown in the browser. I used the tags just to make it clear.
How to reduce the space within the orange rectangle ?
First, ensure that padding and margin on your header elements is 0.
After that, you can adjust their line-height values to get the amount of space you like. Example: http://jsbin.com/afivoq/4/edit
Another option for you! You can apply a negative margin-top on header elements which follow other header elements, like so:
h2 + h4 { margin-top: -20px; }
See the jsbin for updated example.
I'd set all padding and margins to 0.
h4, h2 { padding:0; margin:0; }
This is an oversimplification of your code most likely but it'll get the job done.
Add it in your css:
h2{
margin-bottom: 10px; //something smaller
}
h4 {
margin-top: 10px; //Whatever you like
}
Your second <h2> isn't a close tag </h2> so your adding an extra H2 element. Also take a look at this example with Firebug installed. Firebug has a feature called Layout which will show you where the space is coming from:
Resetting your margin and padding for the header tags like everyone else is saying is a great start. The best advice I can give someone who is learning CSS is to get chrome.
Right-click the element you want to change and hit "Inspect element." On the right hand side, you can alter the CSS on the fly. Then you can copy and paste the results into your application. Chrome also has the ability to save your CSS code.
I have a website that was developed using iWeb where you can drag any object anywhere and make really nice websites. However it does not easily work well with websites that need a database. Because of this I am rewriting a website using Ruby on Rails 3.2.3, CSS3, Bootstrap 2.0, etc.
Here is the link to the website I am rewriting. http://www.iktusnetlive.com/Home.html
I am trying to replicate the portion where the blue camera with LIVE in yellow is in the header. I want to line up text to where the camera lens is. The graphic is 60X55. I have tried for a few hours playing with line-height, padding-top and other CSS options but I could not get the text to move down.
Here is my HTML code that includes the graphic and text I want to line up with the camera lens:
<p class="align-center"><span id="camera-text"><span id="text-bold"><%= image_tag("live_transparent.png", alt: "iktusNETlive") %> To view FREE LIVE STREAMING VIDEO, you will need to create a FREE ACCOUNT and be logged in.</span></span></p>
Here is my CSS code:
#camera-text {font-size: 15px; vertical-align: middle; color: #red;}
.align-center { text-align: center; }
#text-bold { font-weight: bold; }
I wonder if this is something that I will be able to do. As you can see I have a gradient as my page background. I do not know if this is possible using Bootstrap, CSS3 or HTML5. I would have created a table back in the day and use cell padding and other options that are no longer available in HTML5 apparently.
Any help would be appreciated.
You can generally center block level items in CSS like this:
.some-class {
display: block; /* needed if you'd like to center an inline element */
margin: 0 auto;
}
Setting the right and left margins to auto does the trick.
Try absolute positioning When you need to get really specific:
If you're building a basic website, Ruby on Rails and Twitter Bootstrap are overkill and will only complicate things. You might try WordPress as you get the hang of it.
I am working on a blog: http://poweryogatrainings.blogspot.com/search. If you check the link you can see that currently the blog posts are just below the thumbnail. Now I am trying to make the blog posts align beside (on the right side of) the thumbnail but I am not sure how. Does anyone know what is causing the line break and what can I do to avoid it?
Also I think there was a website where you could edit codes of your website and watch the preview without actually changing the codes. Any ideas about it?
Simply add left float to the image, and give it some space to the right and bottom, as below:
img.postthumb {
float: left;
margin: 0 10px 10px 0;
}
Use float to place your contents on same line. Like float:left; for img tag will allow contents to be displayed horizontally.
if your thumbnails are all the same width, then you can do this:
article { overflow: hidden; /* or some other clearfix method */ }
article img.postthumb { float: left; }
article h3, article header, article div.postbody, article footer { margin-left: WIDTH_OF_IMAGE }
a few points:
WIDTH_OF_IMAGE should be replaced by the actual width of your image, and possibly any extra space that you want to appear between it and the words of your article
the code I've recommended will line things up in columns, if you want to avoid that, then just remove the third line of css and you will have flowing paragraphs which wrap the image
there is a lot you could do to make your code a bit more consise, for instance your article's h3 tag should really be in your article's header tag etc. You also have <title> and <meta> tags in your body, when these are best placed in the <head> of your document..
anyway, good luck, I love yoga sites in general and, look forward to seeing the finished article