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 :)
Related
The html code on the actual webpage
Hello. I am having some problems with pictures not properly displaying on a website. I have added the picture and created a div.tag for it and also added it to the CSS but it simply will not show properly. http://mala.co.uk/projects-sw-adelphi.html is one of the new webpages that I have added. http://mala.co.uk/projects-cat-a-eastcheap.html is a webpage with a picture being displayed properly. It is really baffling me why the new pages I have added have the pictures being cut off while the older pages render the pictures perfectly. The Eastcheap picture is how the size should be (more square) but new pages are showing the images more rectangular. Any help would be massively appreciated. Kind Regards
You have set a specific height for the large-6 columns divs. Changing that height has an influence on the image, as it is relative to the parent div container.
I am not sure how that height is generated or if you have hard coded that. It might also depend on the text on the right col, which will change the height of the left col.
Edit: I have edit your code in the inspector. It looks like that.
<div class="large-6 columns panel-container" data-equalizer-watch="" style="height: 450px;">
I have an ASP.net 4 app with a bunch of pages, all using the Site.Master as the primary layout which is a colored background, border, menu at the top and a gif in the bottom right corner of the border.
I've positioned everything using position:absolute and just set all of the elements in the site.master and the individual elements that appear on each page by using style:"left:100px top 100px" etc
So when you launch the app in normal IE mode everything looks perfect, however if you go full screen or you minimize IE, everything goes completely out of shape and all over the place.
What do I need to do in order for it to be consistent no matter whether you're in normal IE/Full screen/Minimized? Do I need to change the way I have used style:position tags on all of the elements or is it something else that I need to do?
My solution to this was to put a
div style="position:relative;"
inside and at the start of the BodyContent of each page then use absolute positioning on each of the elements which keeps all of them within the BodyContent border and shifts them properly when the browser is minimized or full-screened. Is this a good approach? It seems to have solved the problem I had but I'm concerned it may cause more problems I'm not currently aware of?
Page is not holding your settings because the width off page changes when you change browser size.
To make things all the same no mater what is the size of browser window set this with off body element.
Something like this:
<body style="width:1024px">
I'm working on a website which is working perfectly on every browser except firefox. In firefox extra space is added at the end and an extra vertical scrolling is there. My website is hosted here. Can anyone please tell me whats going wrong.
The I frame could be causing it. If you add
Style="position:fixed;"
in a div serving as the back ground like this
<html><head><title>your title</title></head><body>
<div Style="position:fixed;" name="entire web page">
<p><h1>HI and welcome to my world</p>
<div>some content...</div>
</div>
You might also add it to any "big" items like large pictures
it will also help if to make sure all of your appending** height percentage add up to no more than 100% trying to display 140% of a screen means it needs a scroll bar. a have had this trouble me for days before. **Any object that is stacked on top of another.
I am working on a fixed width page using bootstrap and I noticed when testing it on iPhone the full width header and footer background were clipped to 70% of the width.
It's Business marketing type site, frequented by people looking for a supplier, normally from their office PC so the responsive aspect was not a requirement but I digress.
Back to the problem
Viewing on a full size screen it looks as it should but if you scroll smaller than the limits of the container class (940px in this case) and then scroll back a little you can see the background has trimmed.
I have been tinkering with it for a while to the point where I have stripped everything out and just put in a simple bunch of nested divs to test and make sure the issue is not some rouge tag but it still does exactly the same thing.
I think the issue is related to items that are not wrapped in the class of container but if I need a full width panel and 940px fixed content I am not sure how I am going to achieve it with bootstrap.
// This Fails
<body>
<header class="fullwidth">
<div class="container">
<p>The content</p>
</div>
</div>
</body>
// This is fine but not full width
<body>
<header class="container">
<p>The content</p>
</header>
</body>
I have not adulterated bootstrap if I remove it or my styles together and restyle the body manually it goes away. But it seems to be a cumulative issue...
Anyone come across this before?
I don't really want to have to strip bootstrap out if possible.
As requested I have appended the link:
http://jsfiddle.net/NcZFz/3/
If you notice in jsfiddle whatever size your viewport is the header will fill it, but the view port only. And if you are using a MAc and have a magic mouse (or whatever) you can scroll right in that view port to see white. But this is supposed to be edge to edge so there should be no white.
It appears you have a margin on the <ul id="menu-primary-navigation">
#menu-primary-navigation { margin-left: 0; }
And you should also put .clearfix on the same element (because children are floating)
<ul id="menu-primary-navigation" class="clearfix">
Check this working jsfiddle.
All the above fixes could be avoided if you used the .navbar .nav classes (and associates) : read the doc.
creating a html page like these is a bad style ?
<html>
<head>
<!--some script goes here-->
</head>
<body>
<div id ="body" style="width:1000px">
<!-- now all stuff is done here-->
</div>
</body>
</html>
I was just wrapping all the tags of the body into wrapper #body. Because when I minimize my browser window, The page is getting up side down and my page also involves stuff like float:left and float:right and some times tables. Even though I dont use float properties or tables, the words are getting rearranged when I minimized my browser window
When i starting use <div style="width:1000px"> the elements were still at their same position even though I minimized the browser window. So I was using the div tag right from the start of body to end of it to wrap up all body elements into one. I was using just for width size
I wonder is this a bad style of designing? if it is then how do i stop web page from rearranging when i minimize browser window or when monitor size is too small to handle.
If you really want your page to be 1000px wide whatever the browser, it's OK. If you intend your page to degrade/resize/rearrange gracefully on smaller devices (phones, tablets, etc...) then it's obviously not. Simple as that.
However, designing a page to degarde gracefully requires work from the ground up : layout, stretching, menus disappearing, etc... it's not just a matter of everything working automagically.
Last point, instead of your own wrapper, I would suggest you go with a CSS grid or another (eg http://960.gs/), then first use a single row and a full width div. Then, as dev goes by, you might find yourself using more and more the grid to layout page elements, because it's simple, elegant and visually appealing. And the more your page will rely on the grid, the more it will be resizable.
I'd suggest looking at http://www.digital-web.com/extras/positioning_101/css_positioning_example.php as it covers most of the basics for positioning html elements.
From a semantic point of view I would not reuse words such as 'body' in an element id as it's unnecessarily confusing especially when writing CSS or JavaScript relating to it. Most English speakers tend to call the main page div 'container' or similar to differentiate, but if English isn't your first language then use whatever makes it easier for you to understand.