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
Related
I understand fullpage.js is solely used to build single page vertical slider orienated sites where the content of the site transitions from slide to slide going up or down respectively.
Having successfully implemented and somewhat customised the vertical slider into new website layout, I am unable to view the others sections of the website that come below it.
The vertical slider it seems prevents the rest of the html section blocks below it to appear. Its as if the vertical slider is saying: 'I AM THE WEBSITE' ( ignores w/e the hell I place beneath it ).
Here is what we have:
<div id="fullpage">
<div class="slide" id="slide_1">
<div class="slide_caption">
<h1>This is slide 1</h1>
<h4>slide 1 description</h4>
Read More
</div>
</div>
<div class="slide" id="slide_2">
<div class="slide_caption">
<h1>This is slide 2</h1>
<h4>slide 2 description</h4>
Read More
</div>
</div>
<div class="slide" id="slide_3">
<div class="slide_caption">
<h1>This is slide 3</h1>
<h4>slide 3 description</h4>
Read More
</div>
</div>
<div class="slide" id="slide_4">
<div class="slide_caption">
<h1>This is slide 4</h1>
<h4>slide 4 description</h4>
Read More
</div>
</div>
</div>
<section class="full_width_container" id="home_container_1">
<!-- extra mark up for other stuff like latest products etc -->
</section>
<section class="full_width_container" id="home_container_2">
<!-- extra mark up for other stuff like news etc -->
</section>
<section class="full_width_container" id="home_container_3">
<!-- extra mark up for other stuff like testimonials etc -->
</section>
<section class="full_width_container" id="home_container_4">
<!-- extra mark up for blog post links -->
</section>
<footer>
<!-- extra mark up for footer items -->
</footer>
My question is - how the hell do I get the other sections below, i.e home_container_1, home_container_2, home_container_3 to show up ?
I tried applying overflow-y:scroll !important; on body whilst applying overflow-y:hidden on fullpage but it didn't quite work.
If somebody could point me in the right direction in terms of whats happening I would appreciate it no end.
SOLUTION: IF Anybody ends up having this problem, the issue is 99.999% related to not including the DOCTYPE html declarative.
grrrrr # this schoolboy error. Why, despite so many years of web dev am I making these kind of idiotic mistakes :| ? Alvaro the author of fullpage.js clearly mentioned this in his docs, 'make sure to include DOCTYPE html declarative else the heights wont work properly..'
So there you have it folks, the issue was the above.
Now the vertical slider stays put, takes up 100vh of the screen and if you use the mouse scroll it scrolls the ENTIRE content in the viewport so you can view whats beneath the slider (the other website sections).
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).
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
I wrote some custom HTML code in my Wikidot article - instead of the "original" Wikidot syntax, I have to use <a href="/page"> for links.
The content of my custom HTML block is like this:
<section class="intro">
<div class="container">
<h1>Headline-line text</h1>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>Time value </time> Text. Link here.
</div>
</li>
</ul>
</section>
The problem is that it loads the entire content of the HTML into that carefully selected small portion of the original site.
I can only assume that it has something to do with <div>s, as I've already seen this issue on other sites. Hence my assumption is that there must be a general source of this issue, and this is why I'm asking.
What's the reason of this problem and how can I avoid it?
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>