I am building one single website for both mobile and desktop.I am using the Fixed position for the header to satisfy the navigation requirement(like scroll spy).It is working fine in desktop version.When i try to browse the same in mobile version,since i made the min-width:850px; the content is not showing up properly in the mobile.Because of the fixed position i cannot able to drag to the header also.
I have found that http://www.visualstudio.com/en-us/downloads this MS website follow the same, when i minimize the website i am having the same problem.But when i load that page in mobile , the webpage loads in complete zom out mode,but mine zoom in and fits the page to the mobile browser.I wounder there must be some trick to make the page zoom out completely, so that while loading in the mobile it wont break.
If anyone have any idea, pls share. I have made a simple fidle to demonstrate my problem.
http://jsfiddle.net/rg46D/6/
<div style="position: fixed; height: 70px; background-color: lightcoral;width:100%;min-width:950px">
P.S: i cant change the minimum width of the page.
Try removing the min-width and place some padding on the navigation container instead:
<div class="header" style="position: fixed; background-color: lightcoral;width:100%;">
Home
Links
About
Link1
Link2
LInk3
</div>
Then the CSS:
.header {
padding-bottom: 20px;
}
http://jsfiddle.net/rg46D/7/
Nice learning for me.I found the problem by myself.If you are not following the responsive design and having some of fixed width , never use this tag.
<meta name="viewport" content="width=device-width" />
I have removed it , it is working just like desktop in mobile..
Related
I would like to show a video inside a web browser, in full screen using HTML5 tags.
Here my online test, that you can run and see the source code:
http://rospo.altervista.org
My problem is that I am unable to avoid margins (blank borders),
in other words I can't obtain a real FULL SCREEN
In the screeenshot here below I show the unwanted margins:
Any idea to get a full-full-screen ? :-)
BTW, double clicking on the image
I get finally a real full screen but I think in this case come in the game thge flash player, isn't it ? The point is that i would like to visualize the full screen video also froma a smart/phone/tablet browser (without any flash player ....)
Many thanks!
giorgio
I've checked the HTML in your page and if it doesn't contain any PHP coding with markup, then I would suggest you make the body margin to zero
CSS
body{
margin: 0;
padding: 0;
}
I believe in your css you have the page body with 8px margin.
UPDATE after the PO comment in this answer
to get the scroll bar out, you need to modify the height property value in you inline style of your <video> markup in this line
<video autoplay="" loop="" controls="" style="width: 100%; height: auto;">
the line should be
<video autoplay="" loop="" controls="" style="width: 100%; height: 100%;">
I believe this should solve this precise problem.
P.S. general advice: always separate your style from your HTML in an external .css file to make it easy for you to change and update the look and feel of your website.
My website 5focusmanagement.com is not displaying completely on mobile. Only footer is displaying. May be error with HTML tags or CSS styling. Here I am attaching code. Please suggest me how can I display complete website when we open on mobile browsers. Thank you.
Please download the code here..
<div class="container hidden-phone">
You have a hidden-phone class that hides the content on mobile devices.
.hidden-phone {
display: none !important;
}
Remove this rule and the content will be displayed.
Here's a description of the problem: for starters, I have a background logo image displaying on the webpage version (screen media) at the top of the page spanning the entire width of the page (basically a masthead).
Then I added a print stylesheet and have been hiding and showing certain parts to optimize the experience for users and their printers .
However, and here's the problem, I noticed that on IE in every page of the print preview the logo image is being added to the top of every page in the print out when the page content is enough for more than one page in the total number of pages. So if there's enough content for 3 pages then in all those three pages the logo image appears at the top every page in the print out, when it should only appear in the 1st one.
I've checked my CSS and I can't find whats going on. I don't have the section that contains the CSS class that defines the background image repeated more than once. This only happens on IE. Not on Chrome nor Firefox.
Here's an excerpt of the HTML:
....
<body>
<div class="repeating-bg-img">
<div class="container">
...
<!-- /.inner content that is long enough for more than one page -->
...
</div><!-- /.container -->
</div><!-- /.repeating-bg-img -->
</body>
</html>
and here's an excerpt of the CSS in the print.css stylesheet with media = print :
.repeating-bg-img {
background: #ffffff url('../img/background-image.png') scroll repeat-x left top;
}
Has anyone encountered this before on IE? If so, do you have a fix for this?
I ran into the same problem today. One solution is a structure like this:
<body>
<div id="background" style="position: relative;">
<img src="bkgnd.png" style="position: absolute; z-index: -1;">
<div class="container" ...>
...
</div>
</div>
</body>
The basic idea is to take the image out of the flow but position it relative to its containing <div>. The z-index pushes it behind other elements. So this can be used as any kind of column header.
One upside to this is that the background image will print even if the "background images" option isn't set in the print dialog. I'd like to see a proper solution as well though.
Edit 2013/07/23:
It looks like the CSS3 property will be box-decoration-break. This isn't going to help with older versions of IE but the spec is available here: http://www.w3.org/TR/css3-background/#box-decoration-break
If what you really want is a masthead, I also thought this might work:
#media print {
div#background { background: none; }
#page :first { background: url('bkgnd.png') center no-repeat;
margin: ...; }
}
But it looks like that is CSS3 as well. Chrome loads the image from the server but only honors the 'margin' attribute; Firefox and IE9 seem to ignore all of it.
I have an unusual problem that's driving me crazy! I haven't found a question posted yet that pertains to this exact issue.
I have a page on my site where certain elements render incorrectly on random page loads. Using chrome for example, the page will render normally but after a number of refreshes a basic ul in the header will shift down into the body. Sometimes a carousel won't appear, or a navigation block will slide to the next row. I have duplicated this behavior on Firefox as well.
I can't really give a snippet of code for anyone to look at because I have no idea where the issue is originating from. The page with the issue is the index of www.Calibrus.com.
What's really amazing is that by using Chrome Dev Tools I can set display:none to the incorrect ul, then set display back to normal, and the ul renders where it should again. This suggests to me that the exact same html and css is somehow rendering differently (regardless of any scripts being used).
Also, this isn't an issue with the server. I have the same problem when running the code locally.
Does anyone have any idea whats going on here?
I believe the issue is tied to floats and the slideshow javascript.
Whenever I triggered the layout bug on the live site, it was accompanied by the first slide not rendering correctly. This would cause <div id="r1"> to have a height of 0 which in turn seems to aggravate the afore mentioned float bug. There seems to be some tension between the <ul> which is floated and the <a> which is not.
This is the solution that worked for me:
In index.html add a class (or ID if you prefer) to allow yourself to target the link within the CSS. In this example I have simply given it a class of logo:
<a class="logo" href="index.html">
<img src="images/Calibrus_logo.png" alt="logo" border="0">
</a>
Then, in your CSS:
// target the link using your chosen selector
.logo {
display: block;
float: left;
}
Once I added those rules, I could no longer replicate the rendering bug.
Side note:
I would recommend declaring your character encoding just after the opening <head> tag with <meta charset="utf-8">.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calibrus</title>
Also, the border attribute for images has become obsolete. So rather than:
<img src="images/Calibrus_logo.png" alt="logo" border="0">
Simply target the <img> with CSS and declare:
.logo img {
border: none;
}
I'm working on a facebook tab that includes an iframe showing content from another website. I've narrowed the iframe down to only showing the part of the website that I want it to and disabled scrolling. In addition to that, I'd like to disable the links in the iframe content, and I've read that it should be possible by adding a transparent .png background image to a div containing the iframe and setting the iframe's z-index to -1, but the iframe is still in front of the image.
So far my css looks like this:
<style type="text/css">
iframe
{
z-index:-1;
}
.bgimg {
background-image: url('transparent.png');
}
</style>
and my html like this:
<div class="bgimg" style="overflow:hidden; width: 700px; height: 100%;margin:auto;">
<iframe src="http://www.url.com/site.html" width="1100" height="700" seamless="seamless" frameborder="0" scrolling="no" style="margin-top:-230px;"></iframe>
</div>
I'm using this to give a direct link to my amateur soccer team's league table, instead of manually having to update the tab each week with all the new information, but I don't want it to be possible to click on each team for team information - just the League table.
I've read several places that this should be possible, but haven't been able to find a functioning code - also read a few places saying it's impossible, and yet some others that say it can only be done using jQuery (which I know nothing about).
If anyone has any alternative solutions to what I'm doing now - please let me know.
Keep in mind that z-index only works for positioned elements (can be relative though.)
See: http://www.w3.org/TR/CSS21/visuren.html#z-index:
Applies to: positioned elements