mobile web page, but it didn't take occupy the full screen - html

Trying to write a mobile web page, but it doesn't take the full screen on the emulated mobile page (neither on my LG Pro mobile phone). Any reason why?
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
</style>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico" />
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/modernizr.js"></script>
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="http://dbushell.github.io/Responsive-Off-Canvas-Menu/css/step4.css">
</head>
<body style="position:absolute; top:0; bottom:0; height=100%">
<!-- content goes here-->
<div id="outer-wrap" style="position:absolute; top:0; bottom:0; height=100%">
<div id="inner-wrap" style="position:absolute; top:0; bottom:0; height=100%">
<header id="top" role="banner">
<div class="block">
<h1 class="block-title">List</h1>
<a class="nav-btn" id="nav-open-btn" href="#nav">Book Navigation</a>
</div>
</header>
<nav id="nav" role="navigation">
<div class="block">
<h2 class="block-title">Chapters</h2>
<ul>
<li class="is-active">One</li>
<li>
Two
</li><!--
--><li>
Three
</li><!--
--><li>
Four
</li><li>
Five
</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
<a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
</div>
</nav>
<div id="main" role="main" style="height=100%">
<article class="block prose">
<h1>Welcome To John's recollection</h1>
Wonderful things in life
</article>
</div>
<footer role="contentinfo">
<div class="block prose">
<p class="small">Copyright © John & Joe</p>
</div>
</footer>
</div>
<!--/#inner-wrap-->
</div>
<!--/#outer-wrap-->
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/main.js"></script>
<script>
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
</script>
</body>
</html>


First of all you got some typos that you need to fix:
Take a look at body style attribute (height value), you wrote:
<body style="position:absolute; top:0; bottom:0; **height=100%"**>
But you need:
<body style="position:absolute; top:0; bottom:0; **height:100%"**>
First fix those kind of typos on page.
ONE BIG MISTAKE is to make your "body" absolute. Please take a look at how positioning really works.
http://www.w3schools.com/css/css_positioning.asp
To fix this, remove from "body" positioning at all. And make another element(div in your case), that will be positioned absolute, if you really need that.
For more help, try to make some live example of your project so we can inspect it better.
Without seeing what you done in CSS we can't be sure that this answer will fix your problem.
But it looks like you misunderstand concept of positioning, and over complicated your DOM and CSS.


use this meta tags :
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
and for responsive design YOU should use Media queries in your css


Media query is an easy way like this css code :
#media screen and (max-width:600px){
#bgimg1{display:none}
#bgimg{display:block}
.usertext{font-size:30px;}
.no_order2{font-size:20px;margin:auto 20%;margin-top:35%;}
#show-time{left:-15%;}
}
you can use !important to run your new codes over previous code


Thanks to the help of mehdi and Zlatko Vujicic, created a hack which appears to serve the purpose. The change? Moved footer to the immediate parent div of , use the idea of sticky css (thanks Zlatko Vujicic) to extend the height of the above mentioned div.
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
.wrapper1 {
min-height: 100%;
height: auto !important;
/*height: 100%;*/
margin: 0 auto -4em;
}
</style>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico" />
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/modernizr.js"></script>
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="http://dbushell.github.io/Responsive-Off-Canvas-Menu/css/step4.css">
<style type="text/css">
#media screen and (max-width:600px{
#bgimg1{display:none}
#bgimg{display:block}
.usertext{font-size:30px;}
.no_order2{font-size:20px;margin:auto 20%;margin-top:35%;}
#show-time{left:-15%;}
}
</style>
</head>
<body style="position:absolute; top:0; bottom:0; height:100%">
<!-- content goes here-->
<div id="outer-wrap" style="position:absolute; top:0; bottom:0; height:100%">
<div id="inner-wrap" style="position:absolute; top:0; bottom:0; height:100%">
<header id="top" role="banner">
<div class="block">
<h1 class="block-title">List</h1>
<a class="nav-btn" id="nav-open-btn" href="#nav">Book Navigation</a>
</div>
</header>
<nav id="nav" role="navigation">
<div class="block">
<h2 class="block-title">Chapters</h2>
<ul>
<li class="is-active">One</li>
<li>
Two
</li><!--
--><li>
Three
</li><!--
--><li>
Four
</li><li>
Five
</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
<a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
</div>
</nav>
<div id="main" role="main" class="wrapper1">
<article class="block prose">
<h1>Welcome To John's recollection</h1>
Wonderful things in life
<footer role="contentinfo" style="height: 4em; position: fixed; bottom: 0; width: 100%">
<p align="center" class="small" style="position: relative; top: 40%">Copyright © John & Joe</p>
</footer>
</article>
</div>
</div>
<!--/#inner-wrap-->
</div>
<!--/#outer-wrap-->
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/main.js"></script>
<script>
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
</script>
</body>
</html>

Related

How do I change position of .container

I am trying to make a website (just for learning). What I want is "follow us" h2 and two icon youtube and twitter at a side(right).
and if web page shrinks or if I open the website in the mobile device. it needs to be under the menu.
<!DOCTYPE html>
<html>
<!--
Meta data and stylesheet link
-->
<head>
<meta charset="UTD-8" >
<meta name="description" content="Tech Lovers Youtube Channel" >
<meta name="keywords" content="HTML,CSS,XML,Javascript">
<meta name="author" content="Owais Qureshi">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title> Tech Lovers | Welcome</title>
<link rel="stylesheet" href="../CSS/Style.css">
</head>
<body>
<header>
<!--
top logo with heading
-->
<div id="logo" class="container">
<img src="../Media/IMG/logo.jpg" alt="tech_logo">
<h1>Tech Lovers</h1>
</div>
<!--
menu
-->
<nav id="menu" class="container">
<ul>
<li>Home</li>
<li>Blogs</li>
<li>About Us</li>
</ul>
</nav>
<!--
i want this on right side. -->
<div id="follow_us" class="container">
<h2>Follow us</h2>
youtube_img_icon
twitter_img_icon
</div>
</header>
</body>
</html>
my website looks

This should do what you want it to. :)
.headerContainer{
display : inline-block;
float : left;
width : 200px;
}
/* small screens and mobile */
#media screen and (max-width:767px) {
.headerContainer{
display : block;
float : left;
clear : both;
}
}
<!DOCTYPE html>
<html>
<!--
Meta data and stylesheet link
-->
<head>
<meta charset="UTD-8" >
<meta name="description" content="Tech Lovers Youtube Channel" >
<meta name="keywords" content="HTML,CSS,XML,Javascript">
<meta name="author" content="Owais Qureshi">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title> Tech Lovers | Welcome</title>
<link rel="stylesheet" href="../CSS/Style.css">
</head>
<body>
<header>
<!--
top logo with heading
-->
<div id="logo" class="container">
<img src="../Media/IMG/logo.jpg" alt="tech_logo">
<h1>Tech Lovers</h1>
</div>
<!--
menu
-->
<nav id="menu" class="headerContainer">
<ul>
<li>Home</li>
<li>Blogs</li>
<li>About Us</li>
</ul>
</nav>
<!--
i want this on right side. -->
<div id="follow_us" class="headerContainer">
<h2>Follow us</h2>
youtube_img_icon
twitter_img_icon
</div>
</header>
</body>
</html>

header {
display: flex;
flex-direction: column;
}
#media (min-width: 480px) {
header {
flex-direction: row;
}
}
You could try this CSS. Hope it will solve your problem.

Try:
position:absolute, bottom:0px

I want to center my <div> with css codes

I am learning HTML and CSS and i have problems with positioning.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
<meta charset="utf-8">
<title>My Website</title>
</head>
<body>
<div id="main">
<header>
<h1 id="baslik">Dünyanın en iyi web sitesi!</h1>
</header>
<nav>
<p>Bu sitede bulacaklarınız:</p>
<ul>
<li>Videolar</li>
<li>Blog yazıları</li>
<li>Eğlenceli şeyler...</li>
</ul>
</nav>
<footer>
<p>Bu sitenin copyright hakları tarafımıza aittir.</p>
</footer>
</div>
</body>
</html>
And this is my CSS code:
#main{
text-align: center;
}
I cant align my text, how do i do this with HTML and CSS?

To horizontally center a block element (like div), use margin: auto;
Setting the width of the element will prevent it from stretching out to the edges of its container.
The element will then take up the specified width, and the remaining space will be split equally between the two margins.
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}

.center {
text-align:center !important
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
<meta charset="utf-8">
<title>My Website</title>
</head>
<body>
<div id="main" class="center">
<header>
<h1 id="baslik">Dünyanın en iyi web sitesi!</h1>
</header>
<nav>
<p>Bu sitede bulacaklarınız:</p>
<ul>
<li>Videolar</li>
<li>Blog yazıları</li>
<li>Eğlenceli şeyler...</li>
</ul>
</nav>
<footer>
<p>Bu sitenin copyright hakları tarafımıza aittir.</p>
</footer>
</div>
</body>
best to use a class when applying across many divs.

Where is this grey background coming from?

I cannot figure out why the container-fluid div in my body has a grey background on top nor how to get rid of it. I'm assuming it's something that bootstrap is adding.
I was able to get rid of it with
container-fluid *{
background-color:#fff;
}
but then that caused problems with the button background of the jumbotron.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resuarant Name</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<nav class="navbar navbar-right">
<div class="container">
<ul class="menuItems">
<li>Menu</li>
<li>Reservations</li>
<li>Reviews</li>
<li>Photos</li>
</ul>
<form id="searchForm">
Search
<input type="text" name="search"><br/>
</form>
</div>
</nav>
<nav class="navbar-header">
<div class="container">
<ul class="mainMenu">
<img id="logo" src="images/logo001.png"/>
<li>Home</li>
<li>History</li>
<li>Recipes</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</body>
</html>
css:
.menuItems{
display:inline-block;
list-style:none;
float:right;
}
.menuItems li{
float:right;
padding: 0 10px;
}
#searchForm{
float:right;
}
#logo{
float:left;
max-height:80px;
padding-left:200px;
}
.mainMenu{
float:left;
width:100%;
margin-right:auto;
margin-left:auto;
padding:20px 50px;
border-top:dotted thin;
border-bottom:dotted thin;
}
.mainMenu li{
display:inline-block;
float:right;
padding: 20px 25px;
}
.welcomePost *{
}
.jumbotron *{
float:right;
padding: 0 150px;
}

Grey background is coming from jumbotron which is its default color just change jumbotron color like this
.jumbotron {
background-color: // whatever color you want or you can also make it "none"
}
For more on Jumbotron: https://getbootstrap.com/

Element in iframe with height: 100% strech

I'm fighting with this problem:
I have iframe in which I'm showing website, which has some html structure. And inside this structure is element, which has css property: height: 100%;
Problem is, that element stretch to iframes full height, anyway it shouldn't I think. Could you give me some idea, how to solve this problem?
Here is source code for iframe content:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/swiper.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/style.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/grid.css" />
</head>
<body>
<div id="overview">
<div class="overview slider swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
XXX
</div>
</div>
</div>
<div id="benefits">
<div class="grid">
<article id="article1" class="clearfix">
<div class="text col right">
<h2>People behavior in one picture</h2>
</div>
</article>
</div>
</div>
</body>
</html>
Here is source code, where I put an iframe:
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="1600" height="4000"></iframe>
</body>
</html>
Thank you very much for you help.

On the child page (the page inside the iframe) will be shown starting from the top left corner, so positioning the child page is usually not necessary. The styling of the iframe's dimensions on the parent page determines how much of the child page will be seen. The easiest and most effective way is to make the iframe responsive (able to adapt to changes of screen sizes and/or window)
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="100%" height="100%" style="position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%;overflow: hidden; overflow-x: hidden; overflow-y: hidden;" allowfullscreen webkitallowfullscreen mozallowfullscreen ></iframe>
</body>
</html>

Page is not top aligned when we redirect to it from another page

When I click on a button to redirect to a new page, new page is not at the top position. I have to scroll down to have a look. Please have a look at below pictures.
Page titled 'LIST' is the page I am redirecting to.
HTML of the page I'm redirecting to is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Some Title</title>
<link href="css/style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.mobileMenu').click(function(){
$("#mobileNav").toggle();
});
$("#mobileNav li").click(function(){
$('#mobileNav').hide();
});
});
</script>
</head>
<body>
<div id="innerheader">
<div class="innerwrapper">
<h1 id="someId" onClick="location.href='index.html'"></h1>
<div class="mobileMenu"></div>
<div id="mainNav">
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
<div id="mobileNav">
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div id="priceList">
<h4>List</h4>
<div class="innerwrapper">
<div class="leftsection">
<div class="listSec">
<h5>ABC</h5>
<ul>
<li>
<p>A</p>
<span>70</span>
<div class="clear"></div>
</li>
<li>
<p>B)</p>
<span>300</span>
<div class="clear"></div>
</li>
<li>
<p>C</p>
<span>100/150/200</span>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</body>
</html>
The CSS
.innerwrapper {
width:1140px;
height:700px !important;
margin:0 auto;
position:relative;
z-index:99999
}
#priceList{
background:#fff;
padding-bottom:80px;
}
#priceList h4{
font-size:24px;
color:#37444d;
line-height:65px;
font-weight:300;
text-align:center;
text-transform:uppercase;
border-bottom:solid 1px #f0f0f0;
border-top:solid 1px #f0f0f0;
}
If I remove height from above class, it works fine.

The reason that the #priceList div is being pushed down is because your div innerwrapperhas height: 700px set to it which pushes the content beneath it(i.e. priceList) down 700 pixels.
Edit:
To solve this you need to remove/change height: 700px !important on innerwrapper.
If it's crucial for your design that innerwrapper is 700 pixels high you have two options. Either absolute position your price list and place it exactly where you want it or you can move your pricelist to within the innerWrapper.

Your script is doing something here.
<script>
$(document).ready(function(){
$('.mobileMenu').click(function(){
$("#mobileNav").toggle();
});
$("#mobileNav li").click(function(){
$('#mobileNav').hide();
});
});
</script>
Try removing the script part and see how it works. Then, you can recode it as per the need.