(When loading) For some reason the content of my page shifts down really far while the background is stationary and then jumps back up to the appropriate placement. Anyone know why or how to fix this issue? I would really appreciate some help. Thanks!
Sounds to me like your background isn't really a background, but rather a layer with an image in it that you've stacked behind your content.
I generally find this to be a pain because if for some reason the z-index of the items get's confused (and it sounds like this is what's happening here), weird things will happen when the page loads.
I personally recommend you set the background image on the same block that all your content goes on. Consider the following
<div id="content">
<div class="header"> </div>
<div class="navigation"> <!-- Menu goes here --> </div>
<div class="main"> <!-- Main content goes here --> </div>
</div>
#content { background: transparent url("Images/mybackground.png"); }
This will set the background on the page element that also houses your content. Assuming I've identified the problem corrently, this should solve your problem.
HTH
Related
I am trying to set my position statically to the right side of the screen as thats where the logo I am trying to keep is. On different monitors it will flow of the screen.... Is there a way to set this statically, this is what I have right now for my slide... (using a parallax theme so I cannot force the position throughout the page, just the slide.)
<div id="slide-6996" class="slide slide-6996 cycle-slide-active slide-left light" style="background-image:url(http://18.205.33.160/wp-content/uploads/2018/08/ITData_HomePage2018_01.jpg);">
<div class="slide-body">
<div class="container">
<div class="slide-caption">
<div class="slide-content">
<h1><strong>COMPREHENSIVE IT SERVICES YOU CAN TRUST</strong></h1>
</div>
<h2 class="slide-title">Let us help you develop an IT Optimization Strategy and Define your technological priorities</h2>
<a class="slide-link button button-medium" href="http://18.205.33.160/index.php/itone-method/?customize_changeset_uuid=a588c51b-d8d4-4089-90c1-df8e14656af2&customize_autosaved=on&customize_messenger_channel=preview-2" target="_self">Learn how we can help you succeed</a>
</div>
<div class="slide-image">
</div>
</div>
</div>
</div>
This is what I've tried in CSS so far along with fixed positions (broke the page)
#slide-6996 {
width: 100%;}
Is there a way to keep the width at 100% and lock the image to the right of the slide and still be able to scroll past using CSS?
Assuming you are referring to the logo shown in the main image that is added as a background image then all you need to do is add the following:
#slide-6996 {
background-position: right;
}
This will keep the background aligned to the right so that the logo remains on the page however it will eventually slide under your text at smaller layouts. Perhaps you should use a media query to switch the alignment back to left at that point.
Another unfortunate side effect is due to the fact you have a whitebar on that side of your image you are going to be stuck with that unless you use an image without that. To save you the trouble ive edited it out myself and uploaded the image here: https://ibb.co/12dNQdn
So what I am trying to do is reproduce this effect (which can be seen using chrome Version 45.0.2454.101 m). The important thing to notice is that each div is displaying a piece of the overall background image in the wrapper (except it is actually a separate image of the same size that is modified by inverting the colors so you can see the difference).
Basically it appears as though each content div is using a background image that is the size of the document itself.
Structure:
<div class="wrapper">
<div class="content">
Here is some content
</div>
<div class="content">
Here is some more content
</div>
<div class="content">
So much content
</div>
</div>
However, if you were to go visit this link on your mobile device you'll notice that now each div is using its own background image and not overlaying with the wrapper's background image. The background image is now the same size of the content div and is positioned per content div. Why is this happening and how can I get the mobile website to look like the one experienced in a desktop browser? (I am also using chrome on mobile)
Link to JS Fiddle
Kudos for the effort, but this is simply not going to work as it depends on background-attachment:fixed. Mobile browsers try to actively improve the view experience by 'intelligently' handling certain page content differently, especially when it seems desktop-optimized.
One of the things they choose to do is ignore things like background-attachment:fixed, because usually it breaks more than it enhances on not-so-intelligently designed pages on a miniature screen.
So I'm sorry but http://caniuse.com/#feat=background-attachment is your problem here, and it's not going away soon :)
Sorry guys I made new one for this because it couldn't be done like I previously explained.
I want image to go over previous div and so it stays always at the same exact spot.
It's an border image for portfolio div what I'm trying to align here correctly, so that it makes peek kind of effect over previous div.
<div id="previous">some content</div>
<div id="portfolio">
<div class="some-other-content">Whole lot of html</div>
</div>
Link to my jsfiddle
Use in your CSS
"position:absolut" to set a fix position in your Window.
see more options here:
http://www.css4you.de/position.html
I'm new to html/html5, but not to programming, and i'm trying to code my personal website. I've read many resources and tutorials on the basics but I'm looking for some tips on how to begin achieving the layout I want.
In my layout (here) I'm looking to have the left half of my page as a fixed navigation panel with an image highlighting the current page, then with each option the right side refreshes to a new independently scrolling page and the highlight image animates in the nav panel to the new option.
How should I begin to achieve something like this? I just need a push in the right direction to the type of elements/scripts/whatever I will need to implement.
Thank you!
Here is a simple example to help you start out:
jsFiddle
You'll notice the text on the right slides out of the screen when you scroll but the green box stays in the same position. This is done with a slight bit of CSS.
The navigation div on the left is styled with position: fixed;. This keeps the navigation div in one place at all times.
In contrast, the content div on the right is styled with position: absolute; with a left: 25% set. The widths of the navigation div and content div are set in percentages. This allows the content to take up the same relative screen space whether the window is larger or smaller. Your content will adapt to your viewers resolution.
Using an <iframe> will is one possible solution to altering the content in the right hand content div. Another would be to use ajax but that is getting a little more advanced as you now must understand client and server scripting in order to receive the full benefits from it.
iFrame
Ajax
If you're information is static and will not change often, you could considering making a single page web app with multiple templates that are appended to the content div.
jQuery
jQuery Templates Plugin
jQuery is really good as well for learning JavaScript and makes building dynamic client side applications a breeze.
They also have ajax support as well:
jQuery Ajax
Hope this helps.
Good luck and Happy Coding!
You have the menu housed within an element that is set to position: fixed;
Position fixed will make sure the menu doesn't move around on the page regardless of scrolling the rest.
Then with javascript you can add an event listener for "scroll" on the window (or just the div you want to watch for scrolling). When this fires, check the scrollY property to see what range it is in and maybe highlight certain items in your menu.
Hopefully this leads you down the right path. It's a broad question, so here's a broad answer!
I second the suggestion from #Jeromy French -- I think Bootstrap , Foundation and other responsive frameworks have a lot going for them.
Here's an example using Bootstrap: http://jsfiddle.net/panchroma/2dF6s/
In addition to being HTML5, you can get a layout which works on everything from smartphones to wide desktops. It's not the only way to get a mobile friendly website, but it's one of several good options.
I think that with so much moving towards smartphones and tablets now, the more you can learn about responsive and mobile websites, the better off you will be in the future.
I think all the responsive frameworks use a grid based system, here's what the HTML looks like with Bootstrap:
<div class="container">
<div class="row-fluid" align="center">
<div class="span12">
<h1>Header</h1>
</div><!-- close span12 -->
</div> <!-- close row -->
<div class="row">
<div class="span3" id="side-nav" data-spy="affix" data-offset-top="200">
<h5>Option 1</h5>
<h5>Option 2</h5>
<h5>Option 3</h5>
<h5>Option 4</h5>
</div> <!-- end span3 -->
<div class="span9">
<p>Main Content Here </p>
</div> <!-- end span9 -->
</div><!-- end row -->
</div><!-- end containter -->
Good luck!
So I've received this project to improve a webpage and it has a weird behaviour. When the resolution is smaller than 900px (small laptops and tablets) and you get to the end of the page you can scroll down endlessly after the footer image (it appears the background image repeating itself). This also happens with all resolutions when I have firebug opened. All divs are properly closed. I really don't know what is behind this behaviour. Maybe someone saw it before...
Here's my footer:
<footer>
<div id="footer">
<div id="footerContainer">
<div id="footerMain">
<div id="legal"></div>
<div id="footerNav">
<img src="images/table-footer.png" alt="">
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
The #toTop anchor is being pushed down below the bottom of the viewport when the screen height is below a certain number. This is because whatever script is being used changes the top value of that anchor to be x amount more than the scrolled position. A better way to accomplish this same effect would be to make the bottom value of the guy be something like 10 more than the bottom of the viewport. Then he won't go down too far and cause the browser to think there's more space than there is.