SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 61
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation What I am wrong about this css style of site?

    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!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    <!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:

    Code:
     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.

    Code:
    <!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> &nbsp; &nbsp; &nbsp; &nbsp; <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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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..


  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tomislav91 View Post
    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...
    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%.
    Code:
    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)
    Code:
    <!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> &nbsp; &nbsp; &nbsp; &nbsp; <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>

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Am I so stupid, or what?
    Again error.


  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tomislav91 View Post
    Is that ok? I want to do with xhtml mp language and using wcss
    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.
    Code:
    <!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> &nbsp; &nbsp; &nbsp; &nbsp; <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>

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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..

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)


  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    html, body {
    	margin:0;
    	padding:0
    }
    #wrap {
    	min-height:100%;
    	background:url(lav-bg-intro.png) no-repeat 50% 50%;
    }
    i.e.
    Code:
    <!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> &nbsp; &nbsp; &nbsp; &nbsp; <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?

  13. #13
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  15. #15
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Try adding target-density to the viewport meta tag as follows.

    Code:
    <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi, initial-scale=1.0">
    See if that makes a difference.

  17. #17
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not helped.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  19. #19
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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?

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Francky View Post
    It looks like tomislav91 is rebuilding from scratch ("my page"), as a learning project, the existing homepage of lavpivo ("their page").
    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.

    http://coding.smashingmagazine.com/2...ve-web-design/
    http://www.sitepoint.com/responsive-web-design/
    http://en.wikipedia.org/wiki/Responsive_Web_Design

  21. #21
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm so sorry for information which you didn't understand.
    Lavpivo.rs is actualy site, and I want to make, for exercise for mobile, to fit the screen, but examples MUST DO in xhtml mp and wcss. I know that this can do in doctype what you propose, but, can it be done in that 2 language or not? Just told me, if it is, what to write, what command. I was searcing a couple days, but no answer anywhere on web for this.

  22. #22
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for not appropriate answer..lavpivo.rs(their) is the actualy site that exist on network. I want with xhtml mp and wcss to make mobile version, but like you can see on my last post, what happend when I tried with emulator mobile...Image PC is my PC version of that site, where you can see that all is *almost)perfect, excep a small font details..
    I realy don't know what to write in code and solve my problem..

  23. #23
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tomislav91 View Post
    examples MUST DO in xhtml mp and wcss ... I was searcing a couple days, but no answer anywhere on web for this.
    That's probably because the web has moved on and left these things behind. The simple HTML5 doctype is the way forward, so it's not clear why you are so attached to the outdated stuff.

  24. #24
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Is the "MUST DO in xhtml mp and wcss" a kind of homework assignment of a course? Then the lessons are outdated - but that doesn't help you ...

  25. #25
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A kind of homework.

    I know it's outdated, but what I can do :P


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •