I have a small problem when scrolling the page, the elements is one under other, also when I click to do a search, the elements follow the keyboard. I'll show the problem in the screenshots. The intention is category fixed at the bottom, without following the keyboard, also that they aren't one under the other, they need to be one below the other, for example: Action category at the top and the fantasy category at the bottom of the action. remembering that all elements is inside a header. I was thinking in create a div category and scrolling these subcategories inside the div. can anyone help with this CSS or explain me how to do it?
Screenshots
Searching
Without keyboard
Css
<body>
<header>
<-- rest of code -->
<section>
<h4>Popular</h4>
<i class="bi bi-chevron-left"></i>
<i class="bi bi-chevron-right"></i>
<div class="cards">
</div>
</section>
<section>
<h4>Fantasy</h4>
<i class="bi bi-chevron-left"></i>
<i class="bi bi-chevron-right"></i>
<div class="cards">
</div>
</section>
</header>
<script src="script.js"></script>
</body>
replace relative by fixed
header section .cards {
position:fixed;
}
the problem was in the structure of the html, I already reformulated it and it was just as I wanted. sorry for making this topic for nothing.
Related
Helle, I am making a website. This is a project for my studies. Since I haven't studied java script yet, I wanted to make a carousel in html en css only. This one works well except that when I press the right/left chevrons, the page scrolls down. I couldn't find where the problem was in my code.
My teacher asked me to come and ask you the question.
I therefore cometo ask you for help in order to find the solution.
Many thanks in advance.
Have a good day.
<body>
<div id="conteItemsCarrusel">
<div class="itemCarousel"id="itemCarousel-1">
<div class="carousel"id="acarrusel-1">
<img src="./image/cuisinier.jpeg" alt="itemCarousel-1">
</div>
<div class="fleche">
<a href="#itemCarousel-3">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-2">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-2">
<div class="carousel"id="acarrusel-2">
<img src="./image/photojpgd.jpg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-1">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-3">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-3">
<div class="carousel"id="acarrusel-3">
<img src="./image/serveur.jpeg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-2">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-1">
<div class="droite">
»
</div>
</a>
</div>
</div>
</div>
</body>
WhyMy page scrolls when I click on the chevrons and I don't know where is the problem in my code
The point of href="#foo" is to link to an element on the page and scroll directly do it.
You are presumably (you didn't include your CSS in your question) using :target to style that element. :target is designed so you can add additional styling to the element to draw more attention to it that it would get from just being at the top of the screen.
You appear to be trying to get the styling of the element linked to element without triggering the primary effect of linking to it.
You can't do that.
If you want a carousel, then use JavaScript. It's the right tool for the job.
Code that should get me to div with id "contact":
<a href="index.html#contact" class="w3-bar-item w3-button w3-padding-large w3-hover-black"><i class="fa fa-envelope w3-xxlarge"></i>
div:
<div class="w3-padding-64 w3-content w3-text-light-grey" id="contact">
I this moves me to:
<div class="w3-half w3-margin-bottom"><ul class="w3-ul w3-black w3-center w3-opacity w3-hover-opacity-off"><li class="w3-dark-grey w3-xlarge w3-padding-32">Voice Assistant</li><li><img src="https://opengraph.githubassets.com/08acf1b9b376cf16c3a6ec2b3bcfea4e8ed1e33a3291221dbaf5e18086213795/LudwikZimmenhof/Voice-Assistant" style="max-width: 432px"></li></ul></div>
Website: https://ludwikzimmenhof.github.io/Portfolio/index.html
Github respo: https://github.com/LudwikZimmenhof/Portfolio
Anybody know how to fix it?
You have at least two issues going on:
Since your #projects contains floated elements (float: left;) you need to use something to avoid it to collapse (a clear fix)
A large part of your projects aren't properly inside the #projects div, you current setup is:
<div id="projects">
<div id="project-1"></div>
<div id="project-2"></div>
<div id="project-3"></div>
</div><!-- the project div end here -->
<div id="project-4"></div>
<div id="project-5"></div>
<div id="project-6"></div>
PS: There is also an issue with your CSS reset:
I aggree with #Ben Souchet but if you want to fix it and you dont know how to resolve completely. You could point to this section for now...
Also: You can loose the 'index.html' in your href parameters ;)
Contact Info section
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).
I have got some elements on my page, they should all be styled the same except for every other one, where I just want to change some styling.
Here is the CSS which I was hoping would select the div inside the stack of different elements:
.stagger_reviews[class=inner]:nth-child(2n+2) {
background-color:#003;
}
Here is the HTML:
<div class="stagger_reviews">
<!-- Later use PHP to load reviews, CSS should switch the images from left to right -->
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
</div>
As you can see I just want to adjust the one div inside each article which has the class name inner. And maybe some other elements as well but once I have this working I can do that.
The style isn't being applied to the second inner div, I have made about 4 copies of the article and none are being changed.
Here is the solution, I put the nth-child in the wrong place.
.stagger_reviews > article:nth-child(2n+2) div[class=inner]
I knew this answer at one time, but I can't for the life of me remember it. I've searched all over for the answer but I just can't find it. I have a webpage with some anchors that are as shown below:
<a onclick="make_ajax_request('list')">
<div class="viewbar ">
<div class="icon list">
<img src="/icons/list.png"/>
</div>
<p>List</p>
</div>
</a>
They basically are links with picture icons and text. They work most of the time, but every now and then you have to click on them twice to trigger the function. I remember that it had something to do with not having an "href" attribute or the anchors themselves being inline-blocks. But I've tried everything to no avail. Does anyone have any idea of what I am referring to?
You shouldn't be wrapping block level elements such as with inline elements like <a>. Actually this is fine now, my information was outdated. That could very well be causing the trouble. Some (all?) browsers will try to fix that when it loads, and you could effectively end up with something like this:
<a onclick="make_ajax_request('list')"></a>
<div class="viewbar ">
<div class="icon list">
<a><img src="#" /></a>
</div>
<p><a>List</a></p>
</div>
<a></a>
In any case, you might be better off wrapping the img in the tag, and then using javasript to interpret a click on the div as a click on the inner link. Or in your case where it's not actually a link, just do:
<div class="viewbar" onclick="make_ajax_request('list')">
<div class="icon list">
<img src="/icons/list.png"/>
</div>
<p>List</p>
</div>
and in your css
.viewbar { cursor: pointer; }