I've been looking all over the Internet for a tutorial on using the Scott Kellum's parallax technique, but didn't find any. I've seen his example on CodePen and for the life of me couldn't figure out how to position and size elements on the page properly.
Let's say that I have a few simple sections as follows:
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
<div id="section4"></div>
Inside each section I have some content (could be any HTML). How would I go about using Kellum's technique to make backgrounds "overlap"? I'm looking for a tutorial on actually using the technique. Thank you!
This is not a very good answer, but if you want a fairly simple way of doing parallax check out skrollr. All you have to do is link the source and initialize it, and after that it is as simple as adding parameters to your elements. Also there is a very good tutorial if you just search skrollr on Google it will be one of the top hits.
Related
I do hate to keep asking questions. I have been trying to add code to my website. No matter what code I add, none of it works. I have changed the names of the CSS names thinking that would work but it fails.
Currently I am trying to add in some image gallery blocks. I am on w3 schools and it works.
https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery
I bring the CSS and code to my website and it looks like this:
https://postimg.cc/image/ifn4dsqrr/
I have tried so many card and block codes and they all either mess up my homepage or ruin the css and I have to revert back to the previous version.
Over the last 2 days I have spent 6 hours trying to get 4 little responsive blocks with image background and text overlay to simply work in between 2 banners.
Here is a link to my test store where I am building out a homepage:
http://newdev-vitavibe-com.3dcartstores.com/
I am determined to learn why. I opened up a request to pay someone to build this homepage for me. I had lots of offers but I really want to learn how myself.
If you are willing to use bootstrap you could put them in containers, I linked below the documentation for this. Bootstrap will make your life a lot easier when it comes to grids, saved my butt plenty of times.
https://getbootstrap.com/docs/4.0/layout/grid/
Inspecting the html of your site, a saw that what you want could be accomplished with the following html structure
<div id="fullWidthBlock" class="fullWidthBlock2">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div id="fullWidthBlock">...</div> <!-- all the div.gall where here -->
Note that the <br/> between the two div#fullWidthBlock where removed.
And dont repeat the id attribute it is meant to be unique in each html document.
Thats the page with the changes:
Take a look at "!important" keyword in CSS. You should use it like that:
#smth { color: red !important; }
I'm an HTML/CSS beginner. I've made my first homepage without too much difficulty but I want to add some style to my header.
Could someone point me in the direction of a tutorial or basics of how to build a grid for my links or a starting point? I've been looking for one and typing up grid or table results in tutorials to create actual tables so I've not found anything appropriate to what I want to do yet.
From what I can gather if I can separate each list item and give it a border my idea is achievable but I'm struggling with positioning.
I don't know if Dreamweaver supports it, but i'd wrap the menu in a <div> that uses the CSS display: table-row attribute. Then i'd wrap each menu item in a separate <div> that uses the CSS display: table-cell attribute.
There is plenty of resources out there, I would reccommend checking around CSS Tricks and Site Point.
Here is one from sitepoint
Here is one from CSSnewbie
Here is one from CSS-Tricks
im looking for an scrolling page effect, I found it here: http://alterego.ae/
I really like that image slower scroll down effect then the content (with white background) but I didnt want to use javascript (I dont even know how!) to do that.
I want the same effect, without using javascript to do that.
How I achieve that?
HTML
<div style="background-image: url(../img/bg1.png); position: 50% 10px>
<div class="container">content (example: about us)</div>
</div>
<div style="background-image: url(../img/bg1.png); position: 50% 10px>
<div class="container">content (example: about us)</div>
</div>
Unfortunately, you really cannot achieve this type of scrolling (called parallax) without a bit of Javascript. However, other people on the internet have kindly written plug-ins, allowing you to implement parallax scrolling with more ease. You'll still need to use a small amount of JS to have this work, but far less than by writing the methods yourself.
I'd recommend: https://github.com/Prinzhorn/skrollr (I have no personal connection to this, just seen it before and like it!), it is easy to implement.
Sorry that this probably isn't the answer you're looking for, but parallax scrolling requires Javascript.
I want my blog's post(33%width) to be floated from top to bottom, and when they rich the end of the content (static height), to continue again from top to bottom beside the rest of them. I have already made this static web page with columns(link is in the jsfiddle project).
There is a simple static example, of what i am talking about, here :http://jsfiddle.net/KBX5B/1/
<div id="content"><div>
But I want it to be automated (not to pass left and top values for each post) with pure html/css. I would like not to mess Javascript, but if you think it's the only way i would like to know about it.
I am sorry for my bad English and I do appreciate your time.
You can use column-count or column-width properties to achieve what you want. Will only work on modern browsers. IE10 included.
http://jsfiddle.net/KBX5B/2/
Actually I found the solution after reading MANY Posts...
Here it is :)
Vertical-floating elements in CSS?
I am a programmer, not a designer and I don't like writing html and css code. I was using table's for layout for a long time. Now, I want to break this bad practice and start using div's in my website. This was a very important decision for me. Because I really hate using div's.
As always, I started reading written code to understand how positioning of divs work, which is the best way for me to learn something new. However, I really couldn't understand. I think there is something wrong. It shouldn't have been that hard, I really think. This div "API" is written wrong, should have been simpler. However, I know that this discussion is non-sense.
I'm now confused with the usage of the following items,
float, clear, inline, block, position, relative, absolute
I'm looking for web-sites, stackoverflow posts, tutorials for learning div's for beginners who have a programming background like me.
PS: I checked w3's CSS standards. However, it is too long and detailed. I want something shorter, easier to understand for pragmatical purposes.
When I was teaching myself HTML I spent a lot of time on W3Schools website. I simply cannot find a better place to learn HTML and CSS. Here is a sample code that demonstrates how float works:
<!DOCTYPE html>
<html>
<head>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<p>
<img src="http://vsual.co/wp-content/uploads/2011/09/HumanRightsLogo_CO.jpg" width="95" height="84" />
This is some text. This is some text. This is some text.
</p>
</body>
</html>
If you are still unsure please fell free to visit W3Schools link 1 and W3Schools Editor
I hope this helps
I would recommend checking out the articles on http://net.tutsplus.com and the related webdesign.tutsplus site.
On their network there's also a very good introduction course on CSS, but it's not free.
Anyway it's not hard at all.
You have a few types of elements: block, inline and online-block you'll use most. Others will be used as well as defaults.
Divs are block elements, so they normally take the while weight of their parent element and as much height as they need. To form complex layouts and columns sometimes we use float, which changes this by placing the div out of the page flow so other elements stack next to it.
That's a really rough and perhaps not accurate enough description, but should serve as a starting point.
Also definitely check this out: http://learnlayout.com
It's an awesome explanation of CSS layouts by example.
I hope this will help you find your way around.