I'm developing a page using Bootstrap and Django.
I have two pages: Pets and Cats. Both are in the nav bar.
Pets have several sections, including Cats.
When I click on Cats in the navbar, I want it to load the Pets page and scroll down to the Cats section.
My Pets page has the following code:
<div class="section" id="cats">
<div class=" centred auto">
<h1 class="h1">Cats</h1>
<p>Here you can find pictures of cats</p>
</div>
</div>
Cats part of the navbar has the following code:
<li class="active">
<a class="dropdown-item" href="{% url 'pets' %}#cats">CATS</a>
</li>
Now, when I'm on the Pets page and click Cats in the navbar, it scrolls down to Cats.
When I'm any other page on my website, click Cats in the navbar, it takes me to the Pets page, but does not scroll down.
I'm running a test server and I have tried this on Chromium, Chrome, and Firefox.
Any idea why / how to fix this?
In my case, the code that added CSS to the page turned out to be the culprit.
When the page went live, it worked as intended.
We think it's the issue of dynamic less compiler, but we haven't conducted the tests needed to pinpoint why this is happening in the first place.
Related
I'm using a gatsby html5up template, and I'm attempting to fix an issue with the block posts not stacking properly. Depending on the screen size, there are gaps because of the different lengths of text each post has. I'm only guessing this is the reason, because I went through and made all the images the same size. I've tried making each of the paragraphs the same height, but that didn't fix it. What do I need to do to fix it so that it won't leave gaps?
My gallery code:
<article className="6u 12u$(xsmall) work-item" key={i}>
<div className="articleDiv">
<a
className="image fit thumb"
href={obj.source}
onClick={e => {
e.preventDefault();
this.toggleLightbox(i);
}}
>
<img src={obj.thumbnail} />
</a>
<h3>{obj.caption}</h3>
<p>{obj.description}</p>
</div>
</article>
Here's the html of the page for one of the posts:
<article class="6u 12u$(xsmall) work-item">
<div class="articleDiv">
<a class="image fit thumb" href="/static/15Fullsize-95788b0c2a3cd7f5b7be5197b162af0b.jpeg"><img src="/static/15Thumbnail-3f93874146f2072572920b9eb793a1cf.jpeg"></a>
<h3>2005 Chevrolet Equinox LT AWD</h3>
<p>Local vehicle with heated leather, moonroof, and lots more. Completely checked out, serviced, and inspected. Only $4,995. Gets around on the ice fantastic.</p>
</div>
</article>
Here is a screenshot in developer to show the way the articles do not match up.
This library for layout probably uses CSS float to build a grid, and you probably have to use clearfix somewhere.
If that is true, the space below the card appears because that card is higher than others (we can see that text has three lines while other cards have two lines).
I'm trying to reuse HTML from a previous page and write new content on a new page while still retaining the home button and footer for a portfolio. I copied over the HTML containing my home button and footer and used the same stylesheet. But upon opening up a new page with (mostly) the same content sans the hero and work section, the elements on my page look shifted over slightly to the right.
When I add the content from the landing page onto the new page, this problem goes away and the elements are flushed to the left like I want them. However, when I put in any content that does not contain the hero and work section from the landing page, the problem persists.
I've tried looking into not using margin and instead using positioning but am confused if this is the right direction I should go. I'll add the codepens to compare the two. Hopefully the difference is visible, as I really want to work on the actual content of my portfolio. I appreciate any advice.
My landing page:
<div class="container">
<header>
<h1 class="logo">Ryan M</h1>
</header>
<section class="hero">
<p>Hi, I'm Ryan!</p>
<p>
I'm a recent graduate from UC San Diego, where I received a B.S. in
Human-Computer Interaction. I am currently looking for work so feel
free to send me an email!!
</p>
<p class="social">
<a href="#"
>Resume</a
>
—
<a href="#"
>LinkedIn</a
>
—
<a href="
#">Github</a>
</p>
</section>
<section class="work">
<h2>Work ↓</h2>
<article>
<h3 class="title">KOTX website design</h3>
<h4 class="meta">Jan-Mar 2019</h4>
</article>
</section>
</div>
My new page I'm trying to make
What is the best approach for creating a website with multiple page navigation. I've done both in the past but i dont know with one is better.
In-page navigation:
<nav>
Home
Products
About Us
</nav>
<div id="home">
...
</div>
<div id="products">
...
</div>
<div id="about">
...
</div>
You can have multiple divs and hide them and show them using css when each link is active.
Site navigation:
<nav>
Home
Products
About Us
</nav>
You have multiple html files and you just redirect to them.
I think the most common way to do it is the second way, but if you dont use a server side code processor/compiler/library you will need to duplicate the layout(is this example just the nav but can be more).
Which one should i use for a simple website, different sections or different pages?
Good evening everyone,
I’ve got a dilemma which I can’t solve on my own. I have a webpage with two pages. The menu contains 5 elements 4 of which are navigated to via anchors, and another one is the second page. The problem appears when I’m trying to go from this second page to some menu element which is anchored and hence not accessible. The anchored navigation works perfectly if I’m on the first page where these anchors are.
How can I solve this issue? Hope someone can help me!
UPDATE: added the code, hope my problem is more clear now.
<div class="col-md-auto">
<button class="top-menu-hamburger"><i class="fas fa-bars"></i></button>
<ul class="top-nav-menu" id="top-nav-menu">
<!-- 1st page -->
<li>About Us</li>
<li>Course</li>
<!-- 2nd page -->
<li>Our Blog</li>
</ul>
</div>
<!-- 1st page -->
<div id="about-us_header">
<h2 class="about-us" class="font-size:2.0rem">We believe that it is necessary not only to READ about your teacher, but to HEAR him as well.</h2>
</div>
<div id="course">
<h2 class="course-text" class="font-size:2.0rem">We believe that it is necessary not only to READ about your teacher, but to HEAR him as well.</h2>
</div>
Navigation to a specific location in a page works because the destinations need to have id attributes set up on them and the links that navigate need to include #ID (where ID is replaced with the actual value of the id attribute you've already set up at the destination). To be able to move between pages in both directions, each page would need to have elements with ids established at the destination points and each page would need links pre-configured to go to those destinations on the other page.
For example:
Page1.html
<p id="page1destination">Some good stuff here</p>
Go to pre-confiured spot on page 2
Page2.html
<p id="page2destination">Some good stuff here</p>
Go to pre-confiured spot on page 1
Hi I have a page that I am working on, which takes articles from a database. the results are split using php and show six articles per page. The problem i have is that if there are seven results and we roll into page 2, then everything thing is fine as can be seen under the timepieces menu button.
If however there are less than 6 articles and only one page the first article goes funny and the text drops below the image as can be seen under the private aviation button.
A link to the website is here : http://goo.gl/N8p8CT
Both items appear to be within the article.row.mid and so i am struggling to work out why.
Cause first article has image wrapped into <a></a> tag, but second article hasn't, these two images are rendered by different css rules.
and
first one is styled by botstrap.css rules, 2-nd is by your own stylesheet.
Anyway if you use bootstrap, then it's better to wrap image of article into a div for better alignment using bootstrap grid.
I'd do:
<article class="row mid">
<div class="col-xs-4">
<a href="https://www.flyvictor.com/?utm_source=display&utm_medium=leaderbanner&utm_campaign=tempus20141010" target="_blank">
<img src="admin/images/private_jet_hanger-1413201025.jpg" alt="post1" height="250px" width="250px">
</a>
</div>
<div class="col-xs-8 info"><a href="https://www.flyvictor.com/?utm_source=display&utm_medium=leaderbanner&utm_campaign=tempus20141010" target="_blank">
</a><h1>Jet Partner launches empty leg service...</h1>
<p class="details"></p>
<p class="tags"></p>
<p class="text">
</p><p>The advantages associated with private jet travel are invaluable: the ability to journey in comfort, security and privacy; to arrive at the airport just 15 minutes before take-off and to completely avoid check-in. Now, the advent of groundbreaking </p>
Read More <ul class="counters list-inline">
</ul>
</div>
</article>