I am facing a weird problem in my HTML template.
Expected Layout is :
Navbar
Slider - Text on the slider
Some Section.
Result:
Navbar
1. Some Section
Slider - Text on the slider - Section on the slider i.e., below the navbar
I am using bootstrap.
Using 'Developers Tools' I found out that, the slider.js appends some div tags just before any other tags in the body. The whole area is covered by the slider div first. Then comes the navbar and section. Looks like there is no connection between navbar - section and slider.
The existing code looks like this in the browser in developer tools option:
<body>
<div class="slider></div>
<div class="container">
<div class="panel">
<img src="" class="" />
</div>
</div>
<nav>
</nav>
<section>
</section>
</body>
Please help me. I am unable to understand.
Thanks.
Related
Desired goal: I ultimately want my app to have a fixed, sticky menu bar at the top, then a div/component that contains the rest of the content and not scroll, while allowing the sub-components freedom to scroll when necessary. I will ultimately build this in Next JS, but I can't even make it work in plain HTML/CSS, so I'm unsure of the styles to apply in the Next code. I suspect that I have to apply styles to the outermost <body> tag, but nothing I tried seems to work. I also suspect that (to use Next), I will need to override the Document as they describe in the Next documentation and apply styles to <body>. But first, just in plain HTML...
If I write this in bad, incorrect pseudocode, I'm looking for:
<html>
<nav style="sticky to top">
<!-- Markup to render a menu. -->
</nav>
<body style="don't scroll; size=take up the rest of the page">
<table style="overflow-y: auto"
<!-- TONS OF TABLE ROWS. -->
</table>
</body>
</html>
I tried the brute force method of sticking overflow: hidden on just about every tag in the tree, but still nothing working.
I consulted this good post and saw this close post (with a terse answer) but didn't think the second post applied.
Here's dumb HTML that I was trying to get to work (ignoring the sticky nav part):
<html>
<nav>
<div style="background-color: purple;">
<p>Nav bar</p>
</div>
</nav>
<body style="overflow:hidden">
<div style="overflow: scroll">
<table style="color: red; overflow:scroll">
<tr><td>Item 1</td></tr>
<!-- Repeated the above about 20 times. -->
</table>
</div>
</body>
<footer>
<!-- Only put this here so the page bottom is obvious; not in my app. -->
<p>Footer here</p>
</footer>
</html>
For what it's worth, this is the Next/React code with Tailwind that will be the base of the main page:
const AppLayout = ({ children }) => (
<>
<header className = "sticky top-0 z-50">
<Menu />
</header>
<main id = "AppLayoutMain" className="relative bg-white antialiased overflow-hidden">
{children}
</main>
</>
);
I added extra tags in there with styles in random and unstructured ways, trying to hack it to work and no dice.
If someone could show me my errors, or post anything simple that works, I'd appreciate it. I use tailwindcss so you can express it that way if helpful.
You should be able to accomplish this by using flex-col and giving your content div overflow-hidden. Something like:
<div class="flex flex-col h-screen overflow-hidden">
<div class="flex-shrink-0">Header content</div>
<div class="overflow-hidden">
<div class="w-40 max-h-full overflow-y-auto">
Scrolling content
...
</div>
</div>
<div class="flex-shrink-0">Footer Content</div>
</div>
See it in action: https://play.tailwindcss.com/bxUwAuCs8R (shrink the screen vertically to see the scroll bar).
On my website https://bennetdev.de I have a fixed-top navbar which seems to be wider then my actual html tag. I think it is a problem between the navbar and my bootstrap modal but I don't know how to solve it. Due to the wider navbar a white space on the right side is shown when you visit the page, but disappears when opening the modal (through the contact button) and is not existent anymore until you refresh the page. Anyone knows how to fix this?
EDIT: There is no overflow because I hide the x-overflow on my body element but what I mean is the white bar on the right side, which would be a x-overflow without me hiding it
Ahh, yes, I see it now. It seems to be caused by the negative margins on a "row".
In your case, the div <div class="project row" >.
For bootstrap rows and columns to work correctly (ie. negative margins), the parent of a "row" should have the class "container". See the docs here.
eg.
<div id="projects" class="container">
<div class="project row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
<div>
You can use max-height: 210px; to define how much height do you want for your nav bar.
Anyway I recommended to upload some code that we can see.
I am using the new Foundation XY-grid on a new project. The site has a max-width of 1000px for the grid-container.
All is well.
But, i now need to make a new component for the site using the Accordion component from Foundation. No problem there either.
The problem, starts when, the background, of the open accordion element, needs to be, another bg-color, than that of the parent element (edge-to-edge).
This would not be a problem, if it was not for the fact, that i needs to fill the entire width of the page - the background color that is.
The content itself, still has a max-width of 1000px.
This is the standard markup:
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="large-12 cell">
<ul class="accordion" data-accordion data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
Accordion header
<div class="accordion-content" data-tab-content id="deeplink1">
Accordion content
</div>
</li>
</ul>
</div>
</div>
</div>
The above works as expected, and has the same bg color as the <body> - all is good.
But, there is a variation, of the above, where the background color, differs from the <body> bg-color.
To do this, i simply wrap the grid-container, in a callout, like so
<div class="secondary callout">
<div class="grid-container">
<div class="grid-x grid-margin-x">
<!-- accordion markup -->
</div>
</div>
</div>
This also works as expected.
The problems starts, when i open an accordion item.
The background-color, of the accordion item, needs to have the background-color from the <body> (or at least, not the same as the one from 'secondary callout').
But, how do I achieve this, in the best possible way?
Example: https://codepen.io/anon/pen/WXEMyp
Wanted output:
For example what is the difference between
<div class="page-header">
<h1>Example Page Header</h1>
</div>
and just writing:
<h1>Example Page Header</h1>
on the tutorial on w3Schools it says to place the "page-header"class in a divelement but does not say why. It seems unnecessary , is there a reason for this?
As the Bootstrap docs state:
The page-header class is:
A simple shell for an h1 to appropriately space out and segment
sections of content on a page. It can utilize the h1's default small
element, as well as most other components (with additional styles).
Not necessarily in a div, for example.
<nav class="page-header">
nav
</nav>
Or
<header class="page-header">
header
</header>
I have a simple jQuery mobile site with three pages in it.
In every page's div I've added
data-add-back-btn="true"
Still on none of the pages (not even on the sub-pages) a back button appears.
Is there some trick to this?
As of jQuery Mobile 1.4, data-add-back-btn="true" should be added to header div not page div.
<div data-role="page">
<div data-role="header" data-add-back-btn="true">
<h1>Header</h1>
</div>
</div>