So I basically have the exact same code as this code pen i found (with different images but same css and html), but what im not being able to do is add the rest of my page under that parallax effect
I have a normal page with the following structure:
<section class="position-relative bg-blah-blah">
<divs>
</divs>
</section>
.
.
.
<section class="position-relative bg-blah-blah">
<divs>
</divs>
</section>
So where should i put the rest of my page after that parallax code so that the parallax hides under my first section and the rest of the pag follows
Im sorry if this is not the correct way to make a question, its my first time
with the same CSS you can't put the flow of the page right behind it because the CSS is aligned to display absolute. So it doesn't matter where you put your own code the first 2000px will disappear behind the cover. You could start to adjust the CSS and change from display absolute to display relative e.g. the class "parallax". But your problem here is not the HTML flow but the CSS.
Related
I'm currently in a web design class to learn to code, but I have been struggling with a code and cannot figure it out for the life of me.
I have my portfolio website I'm currently working on and cannot figure out how to get the background color of my main section to go all the way to the page. If you look in the attached screenshot, my main section won't go to the bottom of the page. I have tried height: 100% and height: 100vh with no luck.
Photo of problem:
Coding is to much to post because I'm not even sure what could be causing it...however, the website link is here if you could look at the page source:
http://cherylju.com/com6338/p1_Ju_Cheryl/about.html
Any help would be amazing! I've been trying to figure this out for hours now.
Wrap you sections side by side inside a div and give it the property display:flex
<div style="display: flex;">
<section class="secondary-page"></section>
<aside class="resume"></aside>
</div>
Doing it you 'll notice inmediate changes (including what you are looking for) but the order of the sections will be changed... Then, You can get rid of float that it's not at all the best option for your goals... specially if badly used (you don't use float right to an element and float left to the other... both need same direction).
More about flex here
I want to recreate this side menu behavior:
I have HTML structure currently:
<body>
<header>
<nav>
<ul></ul>
</nav>
</header>
<main></main>
<footer></footer>
</body>
I want all visible area scale down once side menu is called, including footer if it's visible at the moment. I was thinking of wrapping main and footer in div and scaling it like in this mock-up:
But is it not against good HTML structure principles? And what tag will be best for it?
Code needs to be working in all modern browsers.
There are a couple of thoughts you can consider.
Only insert the wrapping div when sidebar is called to appear - Your probability going to use javascript to open the side menu. Your HTML structure will only be effected when opening the sidebar. When the animation/state closes you can remove the wrapping div.
Scale the two elements and place them together - You don't need to make the main and footer as one element, try to scale them down and place them near each other and make it look like one element. I'm aware that this going to need some back and forward correction. But this means you don't need to wrap the elements at all.
Make a screenshot of the page after page load - This is a more technical solution. There are libraries that can screenshots of your current viewport and make it an image. You can screenshot and place them inside the navigation element. I do think this is not the best solution, but still worth a mention. See: http://html2canvas.hertzen.com/
I want to overlay the jumbotron component over the carousel to get a sort of website heading. What should I implement to get this working?
You're not being very descriptive or giving us any code, however if I could assume your asking how to overlay two elements, you use the z-index property in CSS
On my wordpress built site, with a Responsive theme child theme, there is a div which contains widgets.
The widgets and their content are showing fine, but the "wrapping" div is not showing what I have styled via css. If I use firebug, I can see that the div is appearing up at the same spot as another div "featured", but is obviously behind it. Well, I need it to be below.
The site is http://thelawcompany.com.au.
The problem div is <div id="widgets" class="home-widgets">. I want the background and top-border that I have declared in CSS to appear behind the widgets. Also, there is a massive gap below the widgets that I can't seem to get rid of.
It because the #featured element is floated.
A solution is to float the widgets also by adding the class grid
Demo: Problem, Solution
<div id="widgets" class="home-widgets grid">
I am trying to create one advert that use both empty sides of the website content. So i add the advert image as a background on BODY tag. look nice. But the problem is to add a link to it. I start with onclick att on body, but them all site content become clickable. Also i try to use different z-index for body and the content div. Don;t work as well.
This the website i take the idea from. I just want to do some thing similar.
http://www.sport.co.uk/
Any help are welcome.
I would forget about the body background and use 3 div columns.
Other possibility would be to use absolute positioning in css and for new browsers you can make the div to stay on its position and not to scroll.