I've been exploring methods for full-width background images combined with type. I found this website: http://starvedforattention.org/
I cannot figure out the logic for how the page works once the user starts scrolling. I know it's along the lines of big DIVs with backgrounds alongside setting absolute/relative locations.
Approaches for coding this would be much appreciated.
As I can see, what you are looking for is a Parallax Scrolling Effect.
Perhaps you must take a look to jParallax if you're going to work with jQuery. :)
Best!
Related
I am trying to make a good website and I have a big problem: overlapping.
When I make the window smaller, all of my elements are spread.
On mobile is worse. What can I do?
https://bucovina-tour.000webhostapp.com
I took a look at your .css definitions, and it looks like the way you're positioning your html elements isn't ideal when trying to build a responsive/adaptative website.
When you define margin-top: 500px for your .button_center class, for example, please note that those margins will start stacking on top of each other at some point.
With standard resolution (1366x768, for example) there's enough space for all of your buttons to be inline with each other, so their margins will overlap and work as if they were one. When shrinking screen resolution, though, there won't be space for all of your buttons to stay in the same line, so they will start stacking on top of each other. But since, by css definition, there should be a margin of 500px on top of each button, they'll begin to spread vertically on the screen.
That's one of the reasons your website is overlapping, but there are a lot more. I highly recommend taking a look at Responsive Webdesign Principles and playing with responsivity on smaller scale before editing a template. When you stack multiple inexpected behaviors on CSS, it becomes exponentially difficult to understand why each element broke.
Also, explore the inspect tool that most browsers have. With this tool you might be able to visualize margins, borders, widths and various other characteristics of your html components simply by hovering over them! It's really useful for web debugging.
some of your code is very hard-coded. try to think about mobile sizes (and check it by console) before you give size to elements
Like said above, for every step, use a #media query
I strongly recommend learning how to work with flex in your CSS. It might seem a bit complicated at first, but it's really not. It does most of the responsive work for you. This is the real beauty of it!
Good luck :)
Basically, I want to display a screenshot of a website inside an iphone frame. And I also want this to be responsive.
I have a rough idea but wouldn't know the best way of positioning the image, I'd probably be using the 'overflow-y' css property and set it to scroll, and set the height, so that my long image will scroll inside the iphone frame, however my problem is getting the image to be the right size of the iphone. Is this some javascript witchcraft I'm yet to discover? thanks!
P.S. Don't say that 'this has been asked before and link this because none of the examples actually work so I can't understand it, and don't know if they're trying to achieve the same thing.
Would leave this as a comment, but not enough rep.
You should probably just try it out for yourself and then post your code if you're having any issues.
If you really have nowhere to start go to codepen and search for 'iphone'.
I've got my slider up and running on http://cirrusfitness.com
The problem I'm running into is when I shrink down the browser (to test responsive) the image inside the slider shrinks as well, independent of the carousel container and is creating a large white gap before the panel pager nav.
I have attempted to use background-size: cover but I can't seem to target the correct elements.
Any suggestions would be greatly appreciated. Thanks so much.
Are you using a plug-in for your slider? It seems like the JavaScript automatically generates the styles every time the slide switches, which makes your CSS code over the background useless.
You can try making your background-size !important, but I'm not sure if that would fix it perfectly. Unless you can locate and change the Javascript instead, I don't see any easy way of fixing this.
I have used and would suggest this plug-in instead, which have the images at fixed sizes: http://www.menucool.com/javascript-image-slider
I am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.
I am currently working on recreating Apple's iOS 5 Toggle Switch in HTML5 and CSS3. The key is that due to requirements, the composition cannot be made up of any images whatsoever. I have been able to achieve almost everything that I wanted, however there seems to be an issue with cropping the container box so that it only displays half of the toggle at a time.
Here's a screenshot to help explain what I mean:
Notice that the pink border (added only for development purposes) is rounded, but the content which extends past it seems to break out of the border-rounding. Can anyone suggest a suitable method by which I can prevent the content from expanding past the border-radius - effectively cropping the content of that div to fit inside the rounding?
I am currently thinking that this could be achieved using the -webkit-mask-box-image property, and image data URLs (for example somethin like: data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7). Is there a better solution, or can anyone offer help on creating these data URLs?
I hope that makes sense, and any help gratefully received.
Unfortunately I believe this is a design flaw with webkit. The content is never clipped to the border radius. As for base64 encoding, I've found this tool helpful