I am new at this forum, and want to say HI to all of you!
I have problem, and don’t know where exactly to put, but, i am going to put here.
This is the site which I am going to make, but in mobile opera version
This is mine, PC version(gradient is not right, I don’t know why…)
And the same one, but in mobile opera. Why is resolution so big? What is the mistake…
Here are the xhtml and css code.
Link
Please if anybody have some ide, write here.
Thank’s a lot! 
Hi, Welcome to Sitepoint
That’s a mixed bag of old and new techniques that you have there and some weird positioning going on.
I would also remove that doctype as mobiles these days understand the same doctypes as desktops and that will avoid tripping quirks mode in desktops in some browsers. Just use the html5 doctype.
<!DOCTYPE HTML>
The main problem is that you are using the viewport meta tag to tell the mobile not to scale the page and then you go and set the page to twice as wide as a mobile with a fixed width! If you omit the meta tag then the mobile will scale the site to fit the screen (or scale 960px to fit the screen).
However what you should be doing is using the viewport meta tag but then deliver smaller width to that device with media queries. You can’t fit 750px width on a 320px or smaller device so you need to make sure that either the page scales smaller or you supply smaller widths for the breakpoints in the design to fit more suitably.
Don’t use cm for measurements as that is a real world measurement (such as print) and not applicable to the web. Use pixels, ems or percent instead. I’m not sure what this code is either as it is not css:
margin-left: -(X/2)px;
margin-top: -(Y/2)px;
It looks like CSS calc but in the wrong format but isn’t needed for simple tasks such as centering anyway.
Your “#lav-bg-intro” that you have placed over the whole screen will stop any links working in the page at all as it will sit on top of everything. You could add pointer-events:none to the css for that element but that is only recognised in the very latest browsers and I’m not sure mobile understand it yet. You would be better of making sure the links were on top of that image so that they work properly. Indeed I would have placed that image as a background on a wrapper somewhere else rather than using absolute positioning which will fail should the page scroll.
This is very rough but this is how I would go about it.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Main page</title>
<link href="lav.css" rel="stylesheet" type="text/css" media="screen, projection" />
<style>
html {
background: #1f8cc4; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1f8cc4), color-stop(60%, #073d85), color-stop(100%, #073d85)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* IE10+ */
background: linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f8cc4', endColorstr='#073d85', GradientType=0 ); /* IE6-8 */
}
h1 {
font:100px 'Homestead Display', Arial, Helvetica, sans-serif;
color:#fff;
text-align:center;
}
#container {
width:98%;
margin:0 auto;
color:#fff;
font-family:arial, helvetica, "sans serif";
font-size:12pt;
white-space: nowrap;
}
.denied {
font:70px 'Homestead Regular', Arial, Helvetica, sans-serif;
color:#fff;
text-align:right;
position:absolute;
}
#dugme {
margin:20px;
padding-bottom:20px;
text-align:center;
white-space: nowrap;
}
.lav {
display:inline-block;
width:183px;
height:79px;
border:1px solid #729fc9;
text-align:center;
font:53px/79px 'Wisdom', Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
margin-left: auto;
margin-right: auto;
background: -moz-linear-gradient(left, rgba(3,67,141,0.3) 0%, rgba(0,169,234,0.3) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3,67,141,0.3)), color-stop(100%, rgba(0,169,234,0.3))); /* Chrome,Safari4+ */
}
/*
img {
position: center;
top: 50%;
left: 50%;
margin-left: -(X/2)px;
margin-top: -(Y/2)px;
}
*/
#top {
top:0;
left:0;
right:0;
height: 110px;
padding-bottom: 10px;
position: fixed;
top: 0;
text-align:center;
}
#top div {
display:inline-block;
background:red;
max-width:750px;
}
#content .lav_porastes {
font-size:20pt;
text-align: left;
}
.image-cnt {
display:block;
margin:0 auto 110px;
width:146px;
height:195px;
}
/*
#lav-bg-intro {
background:url(lav-bg-intro.png) no-repeat 50% 50%;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:1;
}
*/
#header { padding:120px 0 0; }
@media screen and (max-width:650px) {
h1 { font-size:48px }
.lav {
font-size:25px;
line-height:40px;
width:90px;
height:40px;
}
}
</style>
</head>
<body>
<div id="container" >
<div id="top">
<div>top</div>
</div>
<div id="header"> header</div>
<div id="content">
<div id="dugme" > <a class="lav " href="http://lavpivo.rs/naslovna">ili jesi</a> <a class="lav " href="denied.xhtml">ili nisi</a> </div>
<h1>PUNOLETAN</h1>
</div>
<div id="bottom"></div>
<div id="footer"> </div>
</div>
</body>
</html>
Hope it helps anyway.
Thank’s Paul for your answer…
But when I try your code, I get some confuse error…And please without html5…Because, i just want to do with xhtml mp language…
Link XHTML & CSS
Mine is left, but what I am trying to acchive is to the right side…
The error is that you don’t need to self close those meta tags in html5 otherwise there is no problem.
The doctype you are using is for very old phone such as mobile phones before the smartphone generation as part of the “WAP 2.0” stack. If you want to support those devices then you should only use the features that that doctype allows which I believe is a small subset of html and css and certainly not the css3 features you are ploughing aimlessly into your code. Read this thread for more info especially the replies form Alex.
If you want to support modern devices then use modern doctype (htm4.01, xhxtml1,0 or html5)
If you want a full height background then apply the gradient to the body element andf then set html and body to height:100%.
html,body{height:100%}
body {
background: #1f8cc4; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1f8cc4), color-stop(60%, #073d85), color-stop(100%, #073d85)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* IE10+ */
background: linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f8cc4', endColorstr='#073d85', GradientType=0 ); /* IE6-8 */
}
Here is the full working demo: (in html 4.01 this time)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main page</title>
<link href="lav.css" rel="stylesheet" type="text/css" media="screen, projection" >
<style type="text/css">
html,body{height:100%}
body {
background: #1f8cc4; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1f8cc4), color-stop(60%, #073d85), color-stop(100%, #073d85)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* IE10+ */
background: linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f8cc4', endColorstr='#073d85', GradientType=0 ); /* IE6-8 */
}
h1 {
font:100px 'Homestead Display', Arial, Helvetica, sans-serif;
color:#fff;
text-align:center;
}
#container {
width:98%;
margin:0 auto;
color:#fff;
font-family:arial, helvetica, "sans serif";
font-size:12pt;
white-space: nowrap;
}
.denied {
font:70px 'Homestead Regular', Arial, Helvetica, sans-serif;
color:#fff;
text-align:right;
position:absolute;
}
#dugme {
margin:20px;
padding-bottom:20px;
text-align:center;
white-space: nowrap;
position:relative;
z-index:3;
}
.lav {
display:inline-block;
width:183px;
height:79px;
border:1px solid #729fc9;
text-align:center;
font:53px/79px 'Wisdom', Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
margin-left: auto;
margin-right: auto;
background: -moz-linear-gradient(left, rgba(3,67,141,0.3) 0%, rgba(0,169,234,0.3) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3,67,141,0.3)), color-stop(100%, rgba(0,169,234,0.3))); /* Chrome,Safari4+ */
}
/*
img {
position: center;
top: 50%;
left: 50%;
margin-left: -(X/2)px;
margin-top: -(Y/2)px;
}
*/
#top {
top:0;
left:0;
right:0;
height: 110px;
padding-bottom: 10px;
position: fixed;
top: 0;
text-align:center;
}
#top div {
display:inline-block;
background:red;
max-width:750px;
}
#content .lav_porastes {
font-size:20pt;
text-align: left;
}
.image-cnt {
display:block;
margin:0 auto 110px;
width:146px;
height:195px;
}
/*
#lav-bg-intro {
background:url(lav-bg-intro.png) no-repeat 50% 50%;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:1;
}
*/
#header { padding:120px 0 0; }
@media screen and (max-width:650px) {
h1 { font-size:48px }
.lav {
font-size:25px;
line-height:40px;
width:90px;
height:40px;
}
}
</style>
</head>
<body>
<div id="container" >
<div id="top">
<div>top</div>
</div>
<div id="header"> header</div>
<div id="content">
<div id="dugme" > <a class="lav " href="http://lavpivo.rs/naslovna">ili jesi</a> <a class="lav " href="denied.xhtml">ili nisi</a> </div>
<h1>PUNOLETAN</h1>
</div>
<div id="bottom"></div>
<div id="footer"> </div>
</div>
</body>
</html>
Am I so stupid, or what?
Again error.
Hi,
You are saving the file with an xhtml extension and the browser expects xhtml. Just save it with .htm or .html as per normal.
Is that ok? I want to do with xhtml mp language and using wcss
And what is with my lion png background, why you put in css that in comment, and left out from html ?
Hi, why do you want to do it with xhtml mp language and using wcss? What benefits does that give you or are you targeting very old devices only?
Are you targeting only mobiles or do you want desktop support also?
I don’t know anything about WCSS except that it’s a subset of CSS2 so you won’t be able to use any modern properties such as gradients and many other things. You will need to check the specs to see what you can use but I don’t believe its much. As far as I know the doctype you mention is for supporting older devices with limited capabilities so you can’t present a modern interface to them.
And what is with my lion png background, why you put in css that in comment, and left out from html ?
I didn’t have access to your image so I couldn’t test it out but you will need to set the container to position:relative and then you can steretch the image across the layout.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main page</title>
<link href="lav.css" rel="stylesheet" type="text/css" media="screen, projection" >
<style type="text/css">
html, body { height:100% }
body {
background: #1f8cc4; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1f8cc4), color-stop(60%, #073d85), color-stop(100%, #073d85)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* IE10+ */
background: linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f8cc4', endColorstr='#073d85', GradientType=0 ); /* IE6-8 */
}
h1 {
font:100px 'Homestead Display', Arial, Helvetica, sans-serif;
color:#fff;
text-align:center;
}
#container {
width:98%;
margin:0 auto;
color:#fff;
font-family:arial, helvetica, "sans serif";
font-size:12pt;
white-space: nowrap;
}
.denied {
font:70px 'Homestead Regular', Arial, Helvetica, sans-serif;
color:#fff;
text-align:right;
position:absolute;
}
#dugme {
margin:20px;
padding-bottom:20px;
text-align:center;
white-space: nowrap;
position:relative;
z-index:3;
}
.lav {
display:inline-block;
width:183px;
height:79px;
border:1px solid #729fc9;
text-align:center;
font:53px/79px 'Wisdom', Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
margin-left: auto;
margin-right: auto;
background: -moz-linear-gradient(left, rgba(3,67,141,0.3) 0%, rgba(0,169,234,0.3) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3,67,141,0.3)), color-stop(100%, rgba(0,169,234,0.3))); /* Chrome,Safari4+ */
}
/*
img {
position: center;
top: 50%;
left: 50%;
margin-left: -(X/2)px;
margin-top: -(Y/2)px;
}
*/
#top {
top:0;
left:0;
right:0;
height: 110px;
padding-bottom: 10px;
position: fixed;
top: 0;
text-align:center;
}
#top div {
display:inline-block;
background:red;
max-width:750px;
}
#content .lav_porastes {
font-size:20pt;
text-align: left;
}
.image-cnt {
display:block;
margin:0 auto 110px;
width:146px;
height:195px;
}
#lav-bg-intro {
background: url(lav-bg-intro.png) no-repeat 50% 50%;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:1;
}
#header { padding:120px 0 0; }
@media screen and (max-width:650px) {
h1 { font-size:48px }
.lav {
font-size:25px;
line-height:40px;
width:90px;
height:40px;
}
}
#content { position:relative }
</style>
</head>
<body>
<div id="container" >
<div id="top">
<div>top</div>
</div>
<div id="header"> header</div>
<div id="content">
<div id="dugme" > <a class="lav " href="http://lavpivo.rs/naslovna">ili jesi</a> <a class="lav " href="denied.xhtml">ili nisi</a> </div>
<h1>PUNOLETAN</h1>
</div>
<div id="bottom"></div>
<div id="footer"> </div>
<div id="lav-bg-intro"></div>
</div>
</body>
</html>
Now is ALMOST all ready for this first page. Issue you can see on this image
My is left, and you have notice that word “Punoletan” is behind this lion image? Where is there a problem…
But in opera mobile, there is a problem. Look, when I change the resolution…
They should fit to size of screen, like is in the picture left…
main page
and page when you click on link “ili nisi”
You can spot the difference, that text and picture(in case 2) is behind the lion … Why??
And in opera mobile something is wrong. He shound fit the size of screen, you can see, that when I resize, look what I got(difference between my and site)
When I resize, look whats happend, I compare with real and my site in opera mobile
And look in word punoletan, it’s behind picture lion, why?
Hi,
As I mentioned before you would be better off placing that transparent image on the background of a main container.
e.g. Add a wrap to the page and add these styles.
html, body {
margin:0;
padding:0
}
#wrap {
min-height:100%;
background:url(lav-bg-intro.png) no-repeat 50% 50%;
}
i.e.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main page</title>
<link href="lav.css" rel="stylesheet" type="text/css" media="screen, projection" >
<style type="text/css">
html, body { height:100%; }
body {
background: #1f8cc4; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1f8cc4), color-stop(60%, #073d85), color-stop(100%, #073d85)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* IE10+ */
background: linear-gradient(top, #1f8cc4 0%, #073d85 60%, #073d85 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f8cc4', endColorstr='#073d85', GradientType=0 ); /* IE6-8 */
}
h1 {
font:100px 'Homestead Display', Arial, Helvetica, sans-serif;
color:#fff;
text-align:center;
}
html, body {
margin:0;
padding:0
}
#wrap {
min-height:100%;
background:url(lav-bg-intro.png) no-repeat 50% 50%;
}
#container {
width:98%;
margin:0 auto;
color:#fff;
font-family:arial, helvetica, "sans serif";
font-size:12pt;
white-space: nowrap;
}
.denied {
font:70px 'Homestead Regular', Arial, Helvetica, sans-serif;
color:#fff;
text-align:right;
position:absolute;
}
#content { position:relative }
#dugme {
margin:20px;
padding-bottom:20px;
text-align:center;
white-space: nowrap;
position:relative;
z-index:3;
}
.lav {
display:inline-block;
width:183px;
height:79px;
border:1px solid #729fc9;
text-align:center;
font:53px/79px 'Wisdom', Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
margin-left: auto;
margin-right: auto;
background: -moz-linear-gradient(left, rgba(3,67,141,0.3) 0%, rgba(0,169,234,0.3) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3,67,141,0.3)), color-stop(100%, rgba(0,169,234,0.3))); /* Chrome,Safari4+ */
}
/*
img {
position: center;
top: 50%;
left: 50%;
margin-left: -(X/2)px;
margin-top: -(Y/2)px;
}
*/
#top {
top:0;
left:0;
right:0;
height: 110px;
padding-bottom: 10px;
position: fixed;
top: 0;
text-align:center;
}
#top div {
display:inline-block;
background:red;
max-width:750px;
}
#content .lav_porastes {
font-size:20pt;
text-align: left;
}
.image-cnt {
display:block;
margin:0 auto 110px;
width:146px;
height:195px;
}
#header { padding:120px 0 0; }
@media screen and (max-width:650px) {
h1 { font-size:48px }
.lav {
font-size:25px;
line-height:40px;
width:90px;
height:40px;
}
}
</style>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="top">
<div>top</div>
</div>
<div id="header"> header</div>
<div id="content">
<div id="dugme" > <a class="lav " href="http://lavpivo.rs/naslovna">ili jesi</a> <a class="lav " href="denied.xhtml">ili nisi</a> </div>
<h1>PUNOLETAN</h1>
</div>
<div id="bottom"></div>
<div id="footer"> </div>
</div>
</div>
</body>
</html>
I don’t know what the opera mobile problem is. Do you have the viewport meta tag and media queries in place?
Hi,
I’ve checked on the opera mobile emulator and it works fine for me but as I don’t have the real device to check.
If you supply the url to your site I can check your site on the emulator and see if I can spot anything.
One thing I don’t understand is why you have a resolution of 1346x480 on the mobile as surely that will make it desktop width and won’t fit on your small screen display without scrolling up and down. The HTC one x default is 720px x 1280 I believe and the site works fine on that (on the emulator).
I must admit I don’t really know much about opera mobile so not really sure what is going on here.
I don’t know where I defined the resolution 1346x480
Site should fit to all screen’s. That’s problem for me.
I don’t know how to do that.
Try adding target-density to the viewport meta tag as follows.
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi, initial-scale=1.0">
See if that makes a difference.
not helped.
Ok, you are going to have to stop these non informative one word replies and qualify your statements with some information about what you are trying to do.
You are showing me pictures of things I’ve never seen before with the words “Their”, “my” and “PC” underneath them.
What does “Their” mean?
What does “My” mean ?
Are these screenshots of actual devices?
Or are they emulators?
Why are the first and second pictures different?
To me it looks like the first one is the broken one because its just a scaled down version of a normal page when it should be a mobile version like image number 2 except that you haven’t optimised image number 2 for mobile.
I’m afraid I can’t help you unless you expound on these questions (and the questions I have asked you all along to which you have not supplied full answers). I really need to see the real page so you can PM me the link if you don’t want it public and I will try to help.
It looks like tomislav91 is rebuilding from scratch (“my page”), as a learning project, the existing homepage of lavpivo (“their page”).
@tomislav91:
As a start for the answers to the above questions of PaulO’B: Is that correct?
Thanks Francky
If that’s correct then the reason for the differences is that the real site is not mobile optimised at all. It is just automatically shrunk to fit and too small to be used by any normal person and you would need to pinch and zoom to read or use it. This is the default behaviour for sites that are not mobile optimised so that they will at least work on mobile devices.
If you want to replicate that behaviour then you need do nothing. Remove the doctype (which you should do anyway as I have told you a number of times already) and use a current doctype. Remove the viewport meta tag as that is what stops the page being shrunk and then the page will be squashed infinitesimally small to fit on a mobile screen.
In essence you do nothing at all to make the site display as per your first drawing.
Of course this means it is not mobile optimised at all!
What you should be doing as I have been saying all along is to alter the display of the content so that it looks better on the mobile version and more usable by arranging elements into single columns and making sure they are readable and usable (as per my examples).
There is no quick fix and you have to use media queries to deliver alternative styles for the mobile version and re-arrange the content in a better manner.
Take some time to read the following articles.