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.
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…
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.
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 … 
A kind of homework. 
I know it’s outdated, but what I can do 
It doesn’t matter, you can still use that outdated doctype and the answer is still the same as I have given above
Remove the viewport meta tag and the media queries and your page will be scaled in modern mobiles. The page will be invalid most likely because that old doctype only supports a subset of html and css but modern browsers will still render it. There may be issues in old smartphones that ignore html and css that they don’t understand but you can’t expect cutting edge css3 and html to work in outdated systems unless you just want plain text.
Again the crux of the matter is that you need to use media queries (and the viewport meta tag) to produce a different more readable display on mobile devices rather than trying to squash an existing web page into a 3 inch wide screen.
I have given you most of the tools you need and provided examples in earlier posts so I suggest you start from the beginning of this thread again and work your way through what has already been discussed and coded.
You should really set up a demo site so that we can help you with specific code or at least set up a codepen example.
If I remove media, and that meta tags, it’s doesn’t solve anything. But, are the answer that with this technologies, can’t do it right?
Hi,
What do you mean it doesn’t solve anything? What are you trying to solve exactly?
Your demo looks the same on a mobile as a desktop but squashed which seems to be what you were aiming for.
Are you not supporting desktop at all?
You are using application/html+xml which IE8 and under don’t understand and most likely won’t display correctly as they don’t understand real xhtml. They can only use xhtml when served as text/plain (basically html).
You also have the viewport meta tag twice in your code for some reason.
You still don’t say what your desired result is?
My desired result is that page fit to any screen while I change resolution(phone). in #17 post, you can see, what is the difference of actualy and my site(viewed by mobile opera).
SOMETHING HAPPEND, I create ID of my body tag, and all was perfect, and i don’t know why, my lav-bg.png is not showing. I use one css which import that css which include that body id tag.
#naslovna {
background-attachment: fixed;
background-image: url('images/lav-bg.png');
background-repeat: no-repeat;
background-position: right top;
background-color:#012B60;
}
I have already explained this and in post #17 picture 1 (Their) is wrong and is not mobile optimised at all. Its just been scaled down by the mobile browser to fit the width of the smaller screen. That is the default action for all sites that are not mobile optimised.
If you want to create a site that is not mobile optimised then do nothing. Don’t add viewport meta tags, don’t add mobile doctypes. Just design for 980px fixed width and that’s it.
You should not be trying to emulate the result in picture 1 (post #17) as that is not a mobile optimised site. You should as I have been saying all along be creating a cut down version with a revised layout with normal sized text (not miniscule text as in picture 1). Please read the articles I have linked to or you will learn nothing from this exercise.
Please, can you download this http://www.sendspace.com/file/8kq982 and look in the lav.css where I import all css, but in sajt.css file, i specifed that lion go to the right top side, but why is my page background where I specifed that body have id “naslovna” without lion? All was ok, but suddenly is wrong.
Please look.
Hi,
Unfortunately I am unable to download that file for the reasons shown in the screenshot below.
You don’t need to use a third party download helper like that just create a local zip and attach it to your post. However make sure it is virus free before you send as you have probably picked up unwanted programs from that site. You really must get a proper paid host if you want to continue with web design and they are very cheap these days for a basic starter package.
I can’t like that, showing me some error ocured. ( Invalid File)
It’s virus free. No virus/mallware or something harmful. Maybe your AV is warning you, I don’t know where is a problem in files.
Here you a another link, try this.
Hi,
Sorry but I can’t risk downloading something from those share sites as they are just too notorious for installing viruses and spyware. You have scanned your own file but that’s not the problem its the places where you are asking me to download it from that are the problem.
I’m not sure why you can’t simply zip it up? It’s not as though its an involved project with scripts and databases etc. If you have windows just right click the folder and send to compressed folder; that’s all there is to it.
Otherwise set up a dropbox account and you can share files that way as it is a trusted source.
Ok, I solve the problem. Now, i have red your article about responsive design. Can you help me to finish this example. I have add to all site meta tags for them, now just to add that media tags, so please help me to do that… Have I resize image to max 120px width or can use that which using.
Here you are all my files, so If you be so kind to just look, and try to do it.
https://www.dropbox.com/sh/h4dtm0mbygsaopp/1pvdXbE7gB
or the zip file
https://www.dropbox.com/s/4kl77chx9r1kkhs/site.zip
Hi.
I’ll give you a start on naslovna.xhtml but you will need to follow similar patterns on all the other pages. I’m not going to code them all for you as it would take to long and you will learn nothing in the process.
This is the new css for lav.css.
@import url("css/sajt.css");
@import url("css/novi.css");
@import url("css/under_construction.css");
@import url("css/ko_je_lav.css");
@font-face {
font-family: 'Homestead Display';
src: url('fonts/Homestead-Display.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Homestead Regular';
src: url('fonts/Homestead-Regular.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Wisdom Script';
src: url('fonts/WisdomScript.otf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Wisdom';
src: url('fonts/wisdom.otf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Wisdom';
src: url('fonts/wisdom.otf');
font-weight: normal;
font-style: normal;
}
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;
}
.zivilav {
font:60px 'Homestead Display', Arial, Helvetica, sans-serif;
color:#fff;
text-align:left;
}
.igra_i_strast { font:60px 'Homestead Display', Arial, Helvetica, sans-serif; }
html, body {
margin:0;
padding:0
}
#wrap {
min-height:100%;
background:url(images/lav-bg-intro.png) no-repeat 50% 50%;
}
#wrap1 {
min-height:100%;
background:url(images/splash_screen.jpg) 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:center;
}
#dugme {
margin:20px;
padding-bottom:20px;
text-align:center;
white-space: nowrap;
position:relative;
}
.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+ */
}
#dugme1 {
margin:200px;
padding-top:100px;
text-align:center;
}
.lav1 {
display:inline-block;
width:120px;
height:50px;
border:1px solid #729fc9;
text-align:center;
font:45px/30px '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+ */
}
#dugme a:hover { text-decoration:underline; }
#dugme1 a:hover { text-decoration:underline; }
#top {
top:0;
left:0;
right:0;
height: 110px;
padding-bottom: 10px;
position: fixed;
top: 0;
text-align:center;
}
.image-cnt {
display:block;
margin:0 auto 110px;
width:146px;
height:195px;
}
#header { padding:120px 0 0; }
.lav {
font-size:25px;
line-height:40px;
width:90px;
height:40px;
}
#content2 {
width:70%;
color:#000;
background-color:white;
padding-top:2px;
padding-left:10px;
padding-right:10px;
}
.o-nama { color:blue; }
#naslovna h1.fancy1 {
font: 50px/27px 'Wisdom Script',Tahoma,Geneva,sans-serif;
text-align: left;
}
#naslovna h1.fancy1 span{display:block;margin:40px 0 0}
#flasha-cnt1 a{
display:inline-block;
margin:0 0 20px;
}
.img68{margin:0 0 0 10px}
@media screen and (max-width:800px){
#flasha-cnt1 a.portfolio{text-align:center;display:block}
.img68{width:50px;height:auto;margin:0 10px 0 10px}
.bottles{display:block!important}
#flasha-cnt1 {padding-left:0}
}
@media screen and (max-width:660px){
#flasha-cnt1 {text-align:center}
#naslovna {background-position:50% 0}
#container1 {
padding:0;
width:auto;
}
#top1 img{
float:none!important;
width:50%;
max-width:194px;
height:auto;
margin:auto;
display:block;
}
#naslovna h1.fancy1 {
font-size:35px;
line-height:1.2;
text-align:center;
}
.zivilav {font-size:45px;text-align:center}
#naslovna h1.fancy1{margin:0}
#naslovna h1.fancy1 span{margin:10px 0 0}
ul#list-of-items-first-row1 {padding:0;margin:0;}
.img283{width:220px;height:auto}
.img68{width:30px;height:auto;margin:0 10px 10px 0}
}
@media screen and (max-width:480px){
#naslovna h1.fancy1 {
font-size:25px;
line-height:1.2;
text-align:center;
}
.zivilav {font-size:30px;text-align:center}
.video,.img283{float:none;display:block;margin:auto}
}
Here is the revised html for naslovna.xhtml.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Main page</title>
<link href="lav.css" rel="stylesheet" type="text/css" media="screen, projection" />
</head>
<body id="naslovna">
<div id="container1" >
<div id="top1"><img src="images/radi-kako-mislis-zivi-kao-lav-logo.png" alt="lav" style="float: left" width="194" height="146" />
<h1 class="fancy1">Radi kako mislis <span class="zivilav"> Zivi kao lav</span></h1>
</div>
<div id="header1">
<div id="links1"> <a href="naslovna.xhtml" title="Naslovna" accesskey="1">Naslovna (1)</a> | <a href="#" title="Kontakt" accesskey="2">lav vesti (2)</a> | <a href="portfolio.xhtml" title="portfolio" accesskey="3" >lav portfolio (3)</a> | <a href="ko_je_lav.xhtml" title="Ko je lav" accesskey="4">ko je lav? (4)</a> | <a href="#" title="Twitter LavPivo" accesskey="5">Twitter LavPivo (5)</a> | <a href="#" title="lav" accesskey="6" >lav fudbal (6)</a> | <a href="#" title="LavTwist Pinterest" accesskey="7">foto galerija (7)</a> | <a href="#" title="Carlsberg" accesskey="8">video galerija (8)</a> </div>
</div>
<div id="content1">
<ul id="list-of-items-first-row1" >
<li id="flasha-cnt1"> <a class="portfolio" href="portfolio.xhtml"> <span class="video"><img class="img283" src="images/video.jpg" alt="JA SAM LAV" width="283" height="253"/> </span> <span class="bottles"><img class="img68" src="images/flasha-lavpivo.png" alt="Lav pivo" width="68" height="255"/> <img class="img68" src="images/flasha-limun.png" alt="Lav pivo limun" width="68" height="255"/> <img class="img68" src="images/flasha-grejp.png" alt="Lav pivo grejp" width="68" height="255"/> <img class="img68" src="images/flasha-djumbir.png" alt="Lav pivo đumbir" width="68" height="255"/> <img class="img68" src="images/flasha-twist.png" alt="Lav pivo twist" width="68" height="255"/></span> </a>
<br /><a href="lavigraistrast.xhtml"> <span><img class="img283" style="display:block;" src="images/sajt-slicica.jpg" alt="JA SAM LAV" width="283" height="253" /> </span> </a> <a href="sponzor.html"> <span><img class="img283" src="images/sponzorstvo-modul.jpg" alt="JA SAM LAV" width="283" height="253"/> </span> </a> <a href="video2.html"> <span><img class="img283" src="images/video2.jpg" alt="JA SAM LAV" width="283" height="253" /> </span> </a> </li>
</ul>
</div>
<div id="bottom"></div>
<div id="footer">
<hr />
<div id="navigacija1"> <a href="under_construction.xhtml" title="Sitemap">Sitemap</a> | <a href="under_construction.xhtml" title="Kontakt">Kontakt</a> | <a href="under_construction.xhtml" title="RSS" >RSS</a> | <a href="under_construction.xhtml" title="Facebook stranica" >Facebook stranica</a> | <a href="under_construction.xhtml" title="Lav Pivo Twister">LavPivo Twitter</a> | <a href="under_construction.xhtml" title="LavPivoSrbija Youtube">LavPivoSrbija Youtube</a> | <a href="under_construction.xhtml" title="LavTwist Pinterest" >LavTwist Pinterest</a> | <a href="under_construction.xhtml" title="Carlsberg" >Carlsberg</a> | Copyright Fedek Tomislav 2013
<hr />
</div>
</div>
</div>
</body>
</html>
Pay attention to the media queries at the bottom of the css file that modify your elements depending on how they look at smaller widths. It’s a matter of changing the browsers window width and seeing what it looks like and then tweaking the layout accordingly until you can scale the page reasonable from big to small.
If you use the above code your layout will look like this on a small screen.
Work your way through the media queries and see how they modify the way the page is displayed to best fit the smaller screen. Sometimes it means you have to design the normal desktop page with this is mind so that you can have hooks for styling and for moving blocks around.
Small word is thank you. I see that you know about this…So, I know that is not ok, that you finish, but it will help me. I seem what you do, but I don’t know to other pages. Ok, what I now should do? Problem is that I don’t understand at all what thay saying in the that text…
I now should add that class and so on, and make some media in css with that class? or what?
Please help me.
Just post the piece of code you don’t understand and I will talk you through it.
First confirm that you now see on your small-screen device the display as shown in my screenshot which will tell me if you have copied the code correctly?
A quick run through of the media query I used.
@media screen and (max-width:800px){
#flasha-cnt1 a.portfolio{text-align:center;display:block}
.img68{width:50px;height:auto;margin:0 10px 0 10px}
.bottles{display:block!important}
#flasha-cnt1 {padding-left:0}
}
This is a media query:
@media screen and (max-width:800px){
/*CS code goes here......*/
.test{background:red}
}
/* end media query */
What the above media query is saying that on viewports smaller than 800px please apply these new styles within this block. Therefore you can see that for 800px width or smaller I have tweaked these styles.
#flasha-cnt1 a.portfolio{text-align:center;display:block}
.img68{width:50px;height:auto;margin:0 10px 0 10px}
.bottles{display:block!important}
#flasha-cnt1 {padding-left:0}
There is nothing special there but just moving things around and changing the size of the images so that they fit better. Feel free to change it as best suits your design.
Then next you will see:
@media screen and (max-width:660px){
}
This is the next point at which your design seems to break (these break points will vary with every design). I have again just re-coded the display to fit more neatly into the smaller width.
You can add as many breakpoints as you like but its best not to overdo it as that means you are making too much work for yourself. Try and find a happy medium with the design so that just a few tweaks can bring things back into line. I can’t really teach you these things so you need to experiment.
At smaller than 400px width you need to ensure that you have no big elements in place so reduce image size via css so that they fit better n the space available. Make sure no divs are too wide and where you have more than one column reduce it to one column for the smaller display. It’s like creating a new layout but restricted somewhat with the html already in place so you have to plan ahead and be inventive.
You need to make a copy of the site and then play around with the code I have given you until you are comfortable with applying the concept and making changes.