My footer is well placed on some pages but on others it isn't. I did try to fit some suggestions offered on stackoverflow but did not work as it isn't the same issue. Thus, please do not downgrade this question.
An example for footer working well on some pages :
An example of bad footer, with white space above and bellow is this:
Even when doing drop down for Info tab, I have another page with the same bad footing space.
Here is the actual code I am working with:
<footer class = "site-footer">
<div class = "phs-purple-container">
<div class = "container-inner-contents" id = "further-links-section">
<!-- links to other profiling products -->
<div class="col-sm-3">
<img padding: 10px 10px; height="150px" src="www/bftb_logo_v8_bare.png">
</div>
<div class="col-sm-3">
<h4 style = "color:#d2cfeb" >Links</h4>
<ul>
<li><a style = "color:#d2cfeb" href="http:/bftb">test/bftb</a></li>
<li><a style = "color:#d2cfeb" href="https://test.com/groups/430852910696122/">Workplace Group</a></li>
<li><a style = "color:#d2cfeb" href="https://testics-for-the-Bench.aspx">Tutorial Recordings</a></li>
</ul>
</div>
<div class="col-sm-3">
<h4 style = "color:#d2cfeb" >About us</h4>
<p style = "color:#d2cfeb">The Bioinformatics for the Bench landing page was built by Gab under supervision of And and Jo. Please contact us with suggestions </p>
</div>
<div class="col-sm-3">
<h4 style = "color:#d2cfeb">Support</h4>
<ul>
<li><a style = "color:#d2cfeb" href="mailto:test.com">Contact Gab</a></li>
<li><a style = "color:#d2cfeb" href="mailto:test.com">Contact And</a></li>
<li><a style = "color:#d2cfeb" href="mailto:test.com">Contact Jo</a></li>
</ul>
</div>
</div>
</div>
</footer>
Can someone help me fix and understand the error?
Your error here is that your footer by default just comes after the element before your footer. Without knowing your whole page, you'd tell the footer where to be placed. In Angular Material, they use the following CSS which should also work for you:
z-index: 9000;
bottom: 0;
left: 0;
right: 0;
position: fixed;
sorry for my bad english. btw, i think it is because the page where footer looks good have enough content and in which page not enough content there footer comes up. Try to give some margin from bottom in body section .
Sadly none of the above answers work for me.
However I have solved it a bit differently. Indeed, the reason why I got those footers with so much space above and bellow, was that my content was too little on those pages compared to the other pages.
I have solved it but placing severals br(), br() into an R script I had written for each tab. For example, I have about us script (which fits into drop down menu from Info):
about_us_tab <-
tabPanel(
"About Us",
# value = "About Us",
sidebarPanel(width = 1),
mainPanel(
width = 8,
h3( style = "color:navy; font-weight: 600"),
br(),
br(),
htmltools::htmlTemplate("www/about_us_tab.html"),
br(),
br()
)
As you can see, I have put br()'s as much as I needed. And voila, the issue with different spaces on footer on different pages is solved!
Related
I'm new to Svelte and I'm trying to apply an animation to the content of my page when the user navigates to a new page. However the animation causes my entire website to duplicate during the animation.
My content looks like this:
<div class="entire-page">
<nav>
<ul>
<li> Navigation items </li>
<li> Navigation items </li>
<li> Navigation items </li>
</ul>
</nav>
<div class="content" in:slideIn out:slideOut>
Here is my first page content. This is supposed to slide in / out.
</div>
</div>
However, when the animation executes. it duplicates everything (i.e. .entire-page): This is the result in my browser until the animation is gone:
<div class="entire-page">
<nav>
<ul>
<li> Navigation items </li>
<li> Navigation items </li>
<li> Navigation items </li>
</ul>
</nav>
<div class="content" in:slideIn out:slideOut>
Here is my first page content. This is supposed to slide in / out.
</div>
</div>
<div class="entire-page">
<nav>
<ul>
<li> Navigation items </li>
<li> Navigation items </li>
<li> Navigation items </li>
</ul>
</nav>
<div class="content" in:slideIn out:slideOut>
Here is my second page content. This is supposed to slide in / out.
</div>
</div>
Is this due to some missing reference to elements?
Yes, this is to be expected.
(besides the mixup between animation and transition).
Your first page is leaving the DOM and the out:transition is triggered, this is nothing more than some fancy css that transform the element somehow, in your case some kind of slide animation. The DOM is still there until the end of this animation.
At the same time your new page is coming in, this triggers the in:transition, again just fancy css, but the DOM is there.
As you can see, logically during the in/out transition both entire pages will be present. (Almost) nothing you really can do about.
One thing you can do however is delay the in: animation with the duration of the out: one, that way the incoming page will wait for the outcoming page to have slided away. This of course only works if both pages have the same duration for the transition.
If you don't want the two pages to come one under the other, you have to wrap them in another div (that always is present) and start messing around with positioning in css. This could be used to for example have a page slide in from the right and out to the left, giving the impression that one is pushing the other out.
I had the same issue with some images i wanted to change reactively based on the page.url.pathname, my entire __layout.svelte got duplicated.
i solved it using the key directive:
<script lang="ts">
import { page } from '$app/stores';
import { fade } from 'svelte/transition';
import { colors } from '/stores';
const nav = [{ title: '/Dev', path: '/', imgUrl: '../images/dev', color: 'devBG', keyword: '/dev' }]
let keywordTitle: string;
let activeIndex: number = 0;
$: pageUrl = $page.url.pathname;
$: {
switch (pageUrl) {
case '/':
keywordTitle = nav[0].keyword;
colors.set(nav[0].color);
activeIndex = 0;
break;
}
</script>
{#each nav as cat, i}
{#key $page}
{#if activeIndex === i}
<img transition:fade src="{cat.imgUrl}-1800.jpg " />
{/if}
{/key}
{/each}
key destroys and recreate their contents when the value of an expression changes.
Docs for {#key}: https://svelte.dev/docs#key
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
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?
newbie self learning web design. In theory, I've learned html and css. In practice I've hit a snag. Here is the barebones code so far.
<header>
<a id="site-logo" href="/"><img src="#" alt="Dot Design" /></a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<form id="search">
<input type="search" placeholder="Search" />
</form>
</header>
<div id="content>
<!-- content goes here -->
</div>
Here is the template I'm referencing for practice: http://min.us/i/braxZb11KQjfD
The problem is I'm not quite sure if:
everything in the red box should go in the header
only the jquery slider should go in the header
everything in the red box should not be in the header
or it doesn't matter and just a matter of preference
Since I have no experience, I'd like some feedback as to which method is correct? Or more generally accepted and preferred?
Thank you very much for your input.
Everything in the red box should not be in the header unless that content describes the page content. Which at this point it does't look like it does. It's just homepage content. Unless the intro is directly related to the slider there's no reason to combine the two.
<header></header>
<div id="content">
<figure class="hero"></figure>
<p class="lead"></p>
...
</div>
Would work fine as a setup. The HTML offers a way to group elements semantically (for instance the section and header) or to provide hooks for styling (#content and .hero etc).
I'm using the jQueryUI accordion widget to provide the functionality I need. I'm not that familiar with IE tweaks so the solution escapes me.
If you visit my test site, try to expand the categories using a modern browser such as Firefox, Opera or Chrome. It works as intended.
However when using IE8, the category tree moves to the left a bit, and there is even some bigger separation between the categories themselves.
What can I do to fix this bad behavior?
(Note: Forget about IE6,7 support, it just has to work, not look pretty. )
remove width from categories class, tried in ie8 and problem disappear
You have poorly formed HTML5 markup. That might not be helping. The number of list elements you have is real long so I'll just give a snippit.
<div class="widget-box">
<h1>MENÚ PRODUCTOS</h1>
<div class="content">
<div class="categories">
<h3><img src="http://i.imgur.com/TThAk.gif" />CCTV<p class="subtext">Circuito cerrado de televisión </p></h3>
<div>
<ul>
<div class="categories">
<h3><img src="http://i.imgur.com/TThAk.gif" />Camaras<p class="subtext"></p></h3>
<div>
<ul>
<div class="categories">
<h3><a class="nochild" href="/Productos/Categoria/115">Camaras Infrarrojas</a><p class="subtext nochild"></p></h3>
<div>
<ul></ul>
</div>
</div>
<div class="categories">
<h3><a class="nochild" href="/Productos/Categoria/116">Profesional</a><p class="subtext nochild"></p></h3>
<div>
<ul></ul>
</div>
</div>
On the 7th and 11th line above, you have UL tags but then proceed to use DIV tags. UL tags can only have LI elements as a child per W3. http://www.w3.org/TR/2011/WD-html-markup-20110113/ul.html
I think your HTML could be closer to this:
<div class="widget-box">
<h1>MENÚ PRODUCTOS</h1>
<div class="content">
<ul>
<li>
<h3>CCTV <b>Circuito cerrado de televisión</b></h3>
<ul>
<li>
<h3>Camaras</h3>
<ul>
<li>Camaras Infrarrojas</li>
<li>Profesional</li>
</ul>
</li>
Though, there's probably better semantic use of tags possible than what I've got here.
You can then add a little padding to the left of your H3 > a tag and use the +/- gif as a background image that can be swapped with a CSS class. That will make the swap real straight forward in jQuery to simply toggle the clicked anchor class. That will help solve the previous bug I mentioned.
I hope that helps a little as Yucel seems to have a solution for the other issue, but there might be more going on with the HTML issues.
Cheers!