At the moment the used code centers a div with a width of 980px in a background div which contains an image with a link. This works fine on PC, Apple and Android. When the resolution is more than 980px, you see the background image equally on both sides. On Android phone or tablet you see 100% of the maincontainer div. But on iPhone and iPad, the maincontainer div aligns to the left and you see about 200px of the background div on the right side. I tried a lot of things, but I can't get it to act on iPhone and iPad like it does on Android devices: the maincontainer div 100% of the viewport.
My code is this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
html {
height:100%;
width:100%;
overflow-x: hidden;
overflow-y: scroll;
background-color: #FFF;
}
body {
width:100%;
height:100%;
font-family:Arial,Verdana,Helvetica;
font-size:12px;
font-weight:normal;
color:#020051;
line-height:14px;
text-align:center;
background-size: 100%;
background-attachment:fixed;
background-position: center top;
margin-left: auto;
margin-right: auto;
}
#background_with_link{
position:absolute;
top:0px;
width:2400px;
left:50%;
display: block;
margin-left:-1200px;
text-align:center;
}
#main_container{
position:absolute;
top:0px;
width:980px;
left:50%;
margin-top:103px;
margin-left:-490px;
margin-bottom:50px;
margin-right:auto;
}
</style>
</head>
<body>
<div id="background_with_link">
<img src="/UserFiles/Banners/image.jpg" alt="" title="" border="0" />
<!-- Main Container start -->
<div id="main_container">
</div>
<!-- Main Container end-->
</div>
</body>
</html>
I hope there is a solution for this. Thanks!
Erwin
Related
HTML CODE:
(Image is present in the right directory)
<html lang="en-US">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<h1>Sample Header</h1>
</header>
<main>
<article>
<h2>Sample Header 2</h2>
<p>Sample Paragraph 1</p>
<p>Sample Paragraph 2</p>
</article>
</main>
</body>
CSS CODE:
html{
font-family: 'Open Sans', sans-serif;
background-image: url('images/pattern.png');
background-color: burlywood;
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
position: relative;
}
header {
height: 150px;
}
h1 {
font-size: 50px;
line-height: 140px;
margin: 0 0 0 32.5px;
}
main {
background: #ccc;
}
article {
padding: 20px;
}
h2 {
margin-top: 0;
}
p {
line-height: 2;
}
background-image does not work in the above form,but when the same css-code is included in style tag,background-image works perfectly fine,why not in external stylesheet?
I think this is a path issue for the background-image: url(...). I can't reproduce at the moment because of lacking information but please be aware of your folder structure. When you use <style> for CSS the starting point for the relative path is your root folder (or where the HTML is located).
In case of the style.css the starting point is the folder styles. So mind that in that case the path might have to change. You can use the Firefox developer tools or Chrome developer tools to modify your path on the fly. This way you can easily find out yourself where the issue with the path originates or if the background-image rule was applied properly on your element.
Updated: added links to developer tools (Mozilla, Google)
I have html content that has to start at the absolute top left corner of the page. However, the HtmlConverter automatically adds a 0.5in gap from the top and left side of the pdf page. How do I override this default margin?
You can set the margins of a page through CSS using #page. The following declaration sets all the page-margins to 0, as well as draws a border around paragraphs for visual reference:
#page{
margin:0pt;
}
p{
border-left: solid 2pt blue;
border-top: solid 1pt blue;
border-bottom: solid 1pt blue;
}
Use the following as input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin example</title>
<link href="margin.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<p>This page should have the margins set at 0</p>
</div>
</body>
</html>
And you'll see that the paragraph's border is touching the left side of the page, but not yet the top side. That's because the paragraph has some innate margin as a blockelement as well. Setting this to 0 will do the trick:
p{
border-left: solid 2pt blue;
border-top: solid 1pt blue;
border-bottom: solid 1pt blue;
margin-top: 0pt;
}
#page{
margin:0pt;
}
And the output:
I want to make a responsive site that has an image with links you can click.
This site has invisible divs that sync up with the picture even as the image scales and resizes with the browser.
I want to first try to do the same thing with an image, and then I want to try it with a video.
Are they using any scss or javasript to make that happen, or are they just using css and html?
You can do it using just CSS and HTML, I've made a quick JSFiddle with a full size image background and a little nav.
As with the links you make the text on the image, then create a div ontop of them, don't set a background and just use a border until you get them in the correct place.
https://jsfiddle.net/2mow8qhv/2/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="bgHeader"></header>
<nav id="topNav">
Description | Gallery | Map |
Comments
</nav>
<div id="pageWrapper">
<div id="description">
<body>
</html>
/* Set all padding and margins to 0 by default, and colour to a grey unless overwritten*/
*{
padding: 0px;
margin: 0;
color: #333;
}
/* HEADER AND NAVIGATION*/
/* Sets a background image to fill 100% of the screen and fixes it in place*/
header#bgHeader{
background-image:url("http://seattlebubble.com/blog/wp-content/uploads/2014/11/Weyerhaeuser-Mansion_Tacoma.jpg");
background-size: cover;
background-position: center center;
background-attachment: fixed;
position:absolute;
width:100%;
height:100%;
}
/* Sets the navigation menu to the bottom of the page, and layered above the image*/
nav#topNav{
height: 60px;
width: 100%;
position: absolute;
bottom: 0px;
font-size: 1.5em;
line-height: 55px;
z-index: 2;
background: #000;
opacity: 0.7;
text-align: center;
}#topNav a{
text-decoration: none;
color: #FFF;
}#topNav a:hover{
color: #CCC;
}
heres the the code, can someone help me fix this, i want it to stay centered and it will relatively expand the mask even if you zoom in your browser, give it a try so you'll know what im talking about, im not an expert, im still learning
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple JQuery Modal Window from Queness</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
});
</script>
<style type="text/css">
}
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
.close {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
background-color:#f9f9f9;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:-0.48px;
border:1px solid #dcdcdc;
display:inline-block;
color:#666666;
font-family:Verdana;
font-size:11px;
font-weight:bold;
font-style:normal;
height:18px;
line-height:18px;
width:18px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
display:inline;
z-index:3200; position:absolute; top: -10px; right:-10px; cursor:pointer;}
}
.close:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
background-color:#e9e9e9;
}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog {
width:728px;
height:90px;
padding:10px;
background-color:#ffffff;
}
</style>
</head>
<body>
<div id="boxes">
<div id="dialog" class="window">
X
</div>
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
</body>
</html>
Try inserting <body align="center"> or wrap the whole body in a <div id="something"> and give
#something {
text-align:center;
}
in the CSS in the <head></head> of your code.
I have a html called today.html and I use it on my iphone and I have to zoom in to see my tasks how can I have it formated correctly so that I it warps around the screen on the iphone and the text is the right size
here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tasks for today</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="sebastian stephenson">
<style type="text/css" media="screen">
body {
border: medium dashed #7979ff;
background-color: #fff;
margin: 0 auto;
}
body p{
font: 2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding-left: 10px;
}
.todos {
font: 1em"Lucida Grande", Lucida, Verdana, sans-serif;
color: #7D1518;
padding-left: 20px;
}
.todos p{
font: 1em Arial;
}
</style>
<!-- Date: 2008-08-24 -->
</head>
<body>
<p>a greeting</p>
<div class="todos">
<li>a task</li>
<li>a task with detail</li>
<p>detail</p>
<li>a task with muilple acitons</li>
<ul>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
</ul>
</div>
</body>
</html>
thanks
Have you tried setting the viewport to fit the iphone screen size?
<meta name="viewport" content="width=320" />
see more details at: constrain-your-viewport-for-iphone-web-development
Also see developer.apple.com for other factors regarding iPhone web development (such as Adjust Text Size for Readability)
Have a look here
Quote:
If you are a CSS expert, your first thought will be to use the "handheld" media type in your CSS code. For instance, if a browser considers itself a handheld device, this code will hide all elements that belong to the navigation CSS class. That's handy if you know that these elements are convenient but redundant and take up more space than a handheld user wants to give up:
#media handheld {
.navigation {
display: none;
}
}
Unfortunately this won't work on the iPhone. Why? Because Apple knows that the iPhone can display a page much better than most handhelds. And they didn't want the iPhone to display all web pages in a "dumbed-down" way. So the iPhone looks at the "screen" media type, just like your desktop browser does.
Is there an alternative? Yes! You can specify that a set of CSS rules apply only when the screen is smaller than a certain resolution:
#media only screen and (max-device-width: 480px) {
.navigation {
display: none;
}
}
Try setting font-size: 100%; on the body, that way the browser will definitely be starting from it's default size before applying your em sizes. In addition to that try adding -webkit-text-size-adjust: auto; to your page.
This article goes into a lot of depth on the specifics of developing for mobile safari:
http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/
Ive cleaned up your HTML a little, by putting the LI inside UL and getting rid of the redundant div.
You can set a max-width on any block level element, so combining that with #epatel's media declarations get's you the following.
Play around with the width's and so on. Ive just set them randomly.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tasks for today</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="sebastian stephenson">
<style type="text/css" media="screen">
body {
border: medium dashed #7979ff;
background-color: #fff;
margin: 0 auto;
}
body p{
font: 2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding-left: 5px;
}
.todos {
font: 1em"Lucida Grande", Lucida, Verdana, sans-serif;
color: #7D1518;
padding-left: 20px;
}
.todos p{
font: 1em Arial;
}
ul {
max-width:200px;
}
#media only screen and (max-device-width: 480px) {
ul {
max-width:480px;
}
}
#media only screen and (max-device-width: 240px) {
ul {
max-width:240px;
}
}
</style>
<!-- Date: 2008-08-24 -->
</head>
<body>
<p>a greeting</p>
<ul class="todos">
<li>a task</li>
<li>a task with detail
<p>detail</p>
</li>
<li>a task with muilple acitons
<ul>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
</ul>
</li>
</ul>
</body>
</html>
The selected answer is for iphone but for dynamic width of ranging devices you may add this piece of code in your "head" tag.
Reference
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">