I got a problem with html validator it show me errors on "row x of a row group established by a tbody element has no cells beginning on it"
I'm beginner and I don't really understand why this isn't correct and how to fix it..
Here's the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style_responsive.css">
<link href="fontawesome/css/all.css" rel="stylesheet">
<title>La note enchantée</title>
</head>
<body>
<header>
<a href="index.html">
<h1>ohmyfood</h1>
</a>
</header>
<h2 id="note_title">La note enchantée</h2>
<div id="note_corps">
<p class="note_title_img"><img src="img/note.png" alt="note"></p>
<p class="note_title">La note enchantée</p>
<div id="note_font">
<p class="sub_notemenu_title"><img src="img/note_bar.png" alt="notebar" class="note_bar1"><span class="underline_note_entree">Prélude</span><img src="img/note_bar.png" alt="notebarturn" class="note_bar_turn1"></p>
<table>
<tr><td>Ravioles de foie gras accompagnés de leur crème à la truffe</td> <td>98€</td></tr>
<tr><td>Caviare osciètre sur blini à la farine de blé noir</td> <td>115€</td><tr>
<tr><td>Homar et espuma de potiron mariné aux zests d'orange</td> <td>89€</td><tr>
<tr><td>Foie gras de canard cuit entier, confiture de figue et pain toasté</td> <td>105€</td></tr>
</table>
<p class="sub_notemenu_title"><img src="img/note_bar.png" alt="notebar" class="note_bar2"><span class="underline_note_plat">Point d'orgue</span><img src="img/note_bar.png" alt="notebarturn" class="note_bar_turn2"></p>
<table>
<tr><td>Noix de coquilles Saint-Jacques sur lit de purée de céleri-rave</td> <td>102€</td></tr>
<tr><td>Langoustine poêlée, purée de patate douce</td> <td>205€</td><tr>
<tr><td>Mijoté de queue de boeuf et riz sauvage aux zests de citron</td> <td>169€</td><tr>
</table>
<p class="sub_notemenu_title"><img src="img/note_bar.png" alt="notebar" class="note_bar3"><span class="underline_note_dessert">Mouvement final</span><img src="img/note_bar.png" alt="notebarturn" class="note_bar_turn3"></p>
<table>
<tr><td>Macaron noisette et chocolat, glace au caramel brun et sel de Guérande</td></tr>
<tr><td>Baba au rhum revisité avec son coulis de citron</td><tr>
<tr><td>Tarte au citron meringuée destructurée</td><tr>
</table>
</div>
<p class="note_pied"><img src="img/note.png" alt="note">La note enchantée</p>
</div>
<footer>
<div id="infos">
<a class="mentions_legales" href="mentions_legales.html">Mentions légales</a>
<a class="contactez_nous" href="mailto:ohmyfood#gmail.com">Contactez-nous</a>
</div>
</footer>
</body>
</html>
Related
I am a beginer but I already made websites so, I know HTML, CSS, and working with servers and FTP.
I was working on my html, and some weiiiird thing happenned to me (for me, as I really don't understand what is happening, it is weird...)
So, Localy, my images in the section "projets" shows, as asked by the code.
BUT, on my server, the images won't show. They are IDENTICAL lines, the images ares correctly named (01.jpg.02.jpg...) and placed on the server, the images 1 and 4 shows correctly, but the others, nope. I tried to copy/past the line from picture 1 to the picture 2 line and, the site shows picture 1 two times, so, I really don't understand at all what is wrong...
my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Agency</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<header style="background-color: #fafafa"> <!-- entête du site, contiendra le menu de navigation ainsi que le carrousel-->
<nav class="nav" role="navigation"> <!-- navigation-->
<img src="./webagency_images/images/logo.png" />
<ul clas="menu">
<li>Accueil</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div id="slider"> <!-- carrousel-->
<figure>
<img src="./webagency_images/images/slider/bg1.jpg" alt="Images Slider">
<img src="./webagency_images/images/slider/bg2.jpg" alt="Images Slider">
</figure>
<figcaption><h1><span style="color:#62a8d0">WEBAGENCY</span> : L'AGENCE DE TOUS VOS PROJETS!</h1><p>Vous avez un projet Web? La WebAgency vous aide à le réaliser!</p><br/><br/>
<button class="button" type="button">Plus D'infos</button>
</figcaption>
</div>
<!-- navigation dans le carrousel-->
<div class="slider_navigation">
<div class="fa fa-chevron-left" aria-hidden="true"></div>
<div class="fa fa-chevron-right" aria-hidden="true"></div>
</div>
</header>
<!-- section services de la page du site-->
<section class="services">
<h1 style="text-align: center">NOS SERVICES</h1>
<div class="point_bleu"></div>
<hr/>
<p class="bloc_centre">Nous proposons les meilleurs services et en plus, aux meilleurs prix!! Nous avons une équipe de professionnels tous prêt à accueillir votre projet et lui donner vie selon vos souhaits. N'hésitez pas à nous contacter pour un devis, un projet web ou pour un magasin web. Les éléments pris en charge par l'UX vont de la partie commerciale à l'accessibilité.</p><br/>
</div>
<div class="assides">
<img src="./webagency_images/images/main-feature.png" />
<div class="blocs"><h1>UX Design</h1>
<p><b>U</b>ser e<b>X</b>périence : son rôle à pour but de faire la liaison entre l'interface construite, et l'utilisateur. Il est chargé de rendre l’expérience d'utilisation fluide, simple, intuitive, de faciliter l'utilisation de l'utilisateur, de réfléchir pour lui à tout ces moyens là d'avoir la meilleure expérience possible sur son support.</p>
<div class=""><h1>UI Design</h1>
<p><b>U</b>ser <b>I</b>nterface : son rôle est là pour rendre accessible, optimale et facile, l'accès et l’exécution des dispositifs liés à l'interface des applications et machines.</p>
</div>
<div class=""><h1>SEO</h1>
<p><b>S</b>earch <b>E</b>ngine <b>O</b>ptimization : son rôle est d'optimiser au mieux le référencement des outils web, d'un site... Le travaille se fait sur les mots clés, la sémantique, l'étude de la concurrence, du marché actuel et doit être fait régulièrement pour mettre à jour les données importantes au référencement.</p>
</div>
</div>
</section>
<!-- section portfolio de la page du site -->
<section class="projets">
<h1 style="text-align: center">NOS PROJETS</h1>
<div class="point_bleu"></div>
<hr/>
<p class="bloc_centre">Lorem Ipsum et tout le tralala blablabla à remplir plus tard.</p><br />
<div class="row">
<div><img src="./webagency_images/images/portfolio/01.jpg" alt="Image1"/></div>
<div><img src="./webagency_images/images/portfolio/02.jpg" alt="Image2"/></div>
<div><img src="./webagency_images/images/portfolio/03.jpg" alt="Image3"/></div>
<div><img src="./webagency_images/images/portfolio/04.jpg" alt="Image4"/></div>
</div>
<div class="row">
<div><img src="./webagency_images/images/portfolio/05.jpg" alt="Image5"/></div>
<div><img src="./webagency_images/images/portfolio/06.jpg" alt="Image6"/></div>
<div><img src="./webagency_images/images/portfolio/07.jpg" alt="Image7"/></div>
<div><img src="./webagency_images/images/portfolio/08.jpg" alt="Image8"/></div>
</div>
</section>
<!-- bas de page contenant un iframe google maps et un formulaire de contact-->
<footer>
<form method="post">
<div>
<h1>Contact Info</h1>
<h4>WebAgency SAS<br /> 25 rue d'Hauteville 75010 Paris<br /> Tel : 01 02 03 04 05</h4>
</div>
<label for="Nom"></label>
<input type="text" name="Nom" placeholder="Nom"><br/>
<label for="E-mail"></label>
<input type="text" name="E-mail" placeholder="E-mail"><br />
<label for="Sujet"></label>
<input type="text" name="Sujet" placeholder="Sujet"><br />
<label for="Message"></label>
<textarea type="text" rows="10" cols="35" placeholder="Votre message"></textarea><br />
<input class="button" type="submit" value="Envoyer" style="width: 50%">
</form>
<div class="google_iframe">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11139.440186098542!2d4.878186999999999!3d45.73390145!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sfr!4v1524499866273" width="100%" height="650" frameborder="0" style="border:0; opacity: 0.7" allowfullscreen></iframe>
</div>
</footer>
</body>
</html>
The link to my website page :
http://web-tool-box.com//openclassrooms/projets/webagency/webagency.html#
Am I making some "stupid junior mistake"?
I'm trying to scroll down with the following website, in a mobile view and I can't, any suggestions?
The thing is that I understand that this may be happening due to the menu I'm using but I'm not able to make it scroll as a normal in HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,400' rel='stylesheet' type='text/css'>
<!-- build:js modernizr.touch.js -->
<script src="elastic/modernizr.touch.js"></script>
<!-- endbuild -->
<link href="elastic/index.css" rel="stylesheet">
<!-- build:css mfb.css -->
<link href="elastic/mfb.css" rel="stylesheet">
<!-- endbuild -->
<link rel="stylesheet" href="elastic/style.css">
<style>
.ion-location{
color : #FB0000;
}
.ion-social-facebook{
color : #3b5998;
}
.ion-social-googleplus{
color : #d34836;
}
.ion-social-instagram-outline{
color : #3f729b;
}
</style>
</head>
<body>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="elastic/ionic.css" rel="stylesheet">
<script src="elastic/ionic.bundle.js"></script>
<ion-header-bar class="bar-positive bar bar-header disable-user-behavior" >
<h1 class="title">Sobre mí</h1>
</ion-header-bar>
<ion-content delegate-handle="example-scroller" elastic-header="example-elastic-header" overflow-scroll="false" class="scroll-content ionic-scroll has-header"><div class="scroll" style="transform: translate3d(0px, -1px, 0px) scale(1);" >
<div id="example-elastic-header" class="background-image" style="transform-origin: center bottom 0px; transform: translate3d(0px, 0.5px, 0px) scale(1, 1); background-image: url("los7aguacates.jpg");"></div>
<div class="content">
<div class="padding">
<h1>Los 7 aguacates </h1>
<p>Mi vida ha estado siempre marcada por mis grandes amores y pasiones:<br><br>
- La nutrición, y la posibilidad de “curar lo incurable” a través de una alimentación adecuada.<br><br>
- La gente, y la posibilidad de mejorar su vida, aumentar la autoestima, transformar la mente y acompañar a las personas durante el proceso de cambio mientras observo los maravillosos pasos hacia la salud y el bienestar.<br><br>
- Mi país, Polonia y España, que por elección es mi segunda casa.<br><br>
- Los aguacates, que no sé muy bien por qué, pero se han hecho una parte inseparable de mí ;)
"</p>
<p>Justo por eso estoy donde estoy, hago lo que hago y …!quiero seguir! </p><p>
Todos tenemos el poder de impactar en la vida de otra persona. ¿Por qué no aprovecharlo para mejorar la salud y la calidad de vida de los demás? Quiero que la buena alimentación se haga viral (¡ya ves que necesito tu ayuda para ello!) e impacte en todas las personas, mostrando también a los peques (¡que son las nuevas generaciones!) qué significa comer bien y cómo. A través de una vida saludable, se pueden evitar muchos problemas de salud.
</p><p>Únete a mi movimiento, al movimiento de los7aguacates, un movimiento que promueve la alimentación sana como forma de vida, como base para una existencia más plena y feliz. ¡Un movimiento que quiere “curar lo incurable”! Comiendo bien, compartiendo recetas, dando ejemplo tú también impactas positivamente en los demás, ¿quieres ser mi ayudante? Te necesito, necesito tu impacto para llegar a otras personas. ¡Formemos un equipo! Comer bien es fácil y divertido. ¡Yo te lo mostraré!</p>
</div>
<div class="list">
</div>
</div>
</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="transform: translate3d(0px, 1px, 0px) scaleY(1); height: 356px;"></div></div></ion-content>
<ul id="menu" class="mfb-component--tr mfb-fountain " data-mfb-toggle="hover">
<li class="mfb-component__wrap">
<a href="#" class="mfb-component__button--main">
<i class="mfb-component__main-icon--resting ion-navicon-round"></i>
<i class="mfb-component__main-icon--active ion-close-round"></i>
</a>
<ul class="mfb-component__list">
<li>
<a href="external://https://www.facebook.com/los7aguacates/" data-mfb-label="Sígueme en Facebook" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-facebook"></i>
</a>
</li>
<li>
<a href="external://https://www.instagram.com/los7aguacates/" data-mfb-label="Sígueme en Instagram" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-instagram-outline"></i>
</a>
</li>
<li>
<a href="external://https://play.google.com/store/apps/details?id=com.mubiquo." data-mfb-label="Valora la app" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-heart"></i>
</a>
</li>
</ul>
</li>
</ul>
<section id="panel" class="panel">
</section>
<!-- build:js mfb.js -->
<script src="elastic/mfb.js"></script>
<!-- endbuild -->
<script>
var panel = document.getElementById('panel'),
menu = document.getElementById('menu'),
showcode = document.getElementById('showcode'),
selectFx = document.getElementById('selections-fx'),
selectPos = document.getElementById('selections-pos'),
// demo defaults
effect = 'mfb-zoomin',
pos = 'mfb-component--br';
showcode.addEventListener('click', _toggleCode);
selectFx.addEventListener('change', switchEffect);
selectPos.addEventListener('change', switchPos);
function _toggleCode() {
panel.classList.toggle('viewCode');
}
function switchEffect(e){
effect = this.options[this.selectedIndex].value;
renderMenu();
}
function switchPos(e){
pos = this.options[this.selectedIndex].value;
renderMenu();
}
function renderMenu() {
menu.style.display = 'none';
// ?:-)
setTimeout(function() {
menu.style.display = 'block';
menu.className = pos + effect;
},1);
}
</script>
<script src="elastic/index.js"></script>
</body>
</html>
I have a page with a simple structure, have a lot of divs repeating same content (text-and two images), i need this to print a image that doesnt repeat in firefox only, heres an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>Cupones de descuento</title>
</head>
<body>
<div class="content">
<!---------------------------------------CUPON TURISTA--------------------------------------->
<img src="img/cortesup.png" class="corte" />
<div class="cupon">
<div class="logo"><img src="img/logobuzios.png" class="logobuzios" alt="logobuzios" /></div>
<div class="cont">
<h3>CUPON N°:</h3>
<p>Nombre:</p>
<p>DNI:</p>
<p class="info">Válido desde DD/MM/AA hasta DD/MM/AA</p>
<img src="img/separador.png" class="separador" alt="separador"/>
<h3>MENÚ TURISTA</h3>
<p>VÁLIDO PARA: 1 (UN) ALMUERZO O CENA</p>
<p class="turista">Menú Turista: Incluye 1 (un) plato de entrada a elección + Incluye 3 (tres)
opciones de plato principal + Incluye 1 (un) postre a elección.<br />
NO Incluye Bebida. Horario de atención: 12 a 21:30 hs.</p>
<img src="img/separadordos.png" class="separador" alt="separador"/>
<p class="restaurant"><strong>RESTAURANTES ASOCIADOS:</strong> CLUB LA PLAGE - DON JUAN - BAR DO MANGUE - BUZIN -
ENU SUSHI - LA DOLCE VITA - PATIO HAVANA - NOI - PURO SABOR - SAN TELMO - DONA FLOR
MINEIROS GRILL - LORENZO - RINCON - PARVATI.</p>
</div>
<div class="pie">
<p class="asociados">Visite nuestro listado de <strong>Restaurantes Asociados</strong></p>
<img src="img/cubiertos.png" class="cubiertos" alt="cubiertos"/>
<p class="web">www.grupobuziosgourmet.com</p>
</div>
</div>
<!--Datos útiles-->
<div class="datos">
<div class="datoshead">
<p class="datosutiles">DATOS ÚTILES</p>
</div>
<p class="utiles">El pasajero titular deberá presentar el o los vouchers impresos en el restaurante que haya seleccionado para consumir.<br />
<strong>UBICACIÓN DE RESTAURANTES:</strong><br />
<strong>CENTRO DE BÚZIOS:</strong> DON JUAN - BUZIN - LA DOLCE VITA - ENU SUSHI - PATIO HAVANA - NOI - PARVATI - PURO SABOR - MINEIROS GRILL - LORENZO.<br />
<strong>JOÃO FERNANDES:</strong> CLUB LA PLAGE - DONA FLOR.<br />
<strong>MANGUINHOS:</strong> BAR DO MANGUE (PORTO DA BARRA).<br />
<strong>ORLA BARDOT:</strong> MATAHARI - RINCON (CENTRO).<br />
<strong>FERRADURA:</strong> SAN TELMO (SOBRE AV. PRINCIPAL).<br />
<strong>HORARIO DE ATENCIÓN:</strong><br />
Todos los restaurantes asociados a Grupo Búzios Resto atienden de 12 a 21.30HS.
<strong>Excepto Club La Plage (sólo almuerzo con bebida + 1 café o caipirinha de cortesía) de 12 a 16 hs. Dona Flor (sólo cena) de 18 a 21.30 hs.</strong>
Ante cualquier inconveniente podrá comunicarse de L a V al tel. +5411-5275-0075 y a nuestro servicio de guardia los fines de semana: Cel. Búzios: +0055-22 9227-8174 / +0055-22 99282-2067
</p>
</div>
I have tried to put the height: 100%; and min-height too 100% to body and html, , at the div container too, but still not working.
Thanks!
You just try this.
html{
height: 100%;
}
body {
min-height: 100%;
}
Refer this url:
Make body have 100% of the browser height
i updated your fiddle:
you gotta remove the height: 100% from html and body and use it like this:
body {float: left;}
#content {float: left;}
https://jsfiddle.net/7x32pna7/1/
hope that helps
Try:
body {float: left;
margin: 0px;
height: 100%;
width: 100%;
}
I just did a simple update within my index.html only added some texts and did not do anything else with the code. When I uploaded it everything is a mess.
I uploaded the English site and other pages and everything is ok. Other pages I updated worked ok. Check here: http://hallfjallet.se/indexeng.html
When I uploaded the Swedish site (the html page I did the updates) which always worked well before, somehow the utf code messed up - but I haven't done anything with it. (See the site in Swedish here : http://hallfjallet.se/ )
All I did was to use Filezilla to upload via FTP.
My code:
<!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">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>
Hållfjällets turiststation
</title>
<link rel="stylesheet" type="text/css" href="./Hållfjällets turiststation_files/default.css" media="screen">
<link rel="stylesheet" type="text/css" href="./Hållfjällets turiststation_files/prettyPhoto.css" media="screen">
<script type="text/javascript" src="./Hållfjällets turiststation_files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./Hållfjällets turiststation_files/core.js"></script>
<script type="text/javascript" src="./Hållfjällets turiststation_files/jquery.pngFix.js"></script>
<script type="text/javascript" src="./Hållfjällets turiststation_files/jquery.prettyPhoto.js"></script>
<!--[if IE 6]>
<style>
#pitch .infoline {margin-top:-74px;}
.post-options {margin:-55px 0 40px 138px;}
</style>
<![endif]-->
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/sv_SE/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="wrapper">
<div id="logo">
<img src="./Hållfjällets turiststation_files/hallfjallet.png" alt="Hållfjället">
</div>
<div id="content">
<!-- main menu -->
<ul class="menu" id="jMenu">
<li class="current.remove">Hem</li>
<li>Historia</li>
<li>Prislista</li>
<li>Lunchmeny</li>
<li>Kontakta oss</li>
<li><a id="ctl00_hlLanguage" href="indexeng.html"><img src="./Hållfjällets turiststation_files/us.png" alt="In English"> In English</a></li>
</ul>
<div class="x"></div>
<!-- image slider -->
<div id="pitch">
<div class="pitch-gallery">
<div class="pitch-gallery-holder" id="gallery-pitch-holder" style="left: 0px;">
<div class="pitch-gallery-div">
<img src="./Hållfjällets turiststation_files/3.jpg" alt="Pitch 1" style="">
<div class="infoline">Hållfjällets turiststation</div>
</div>
<div class="pitch-gallery-div">
<img src="./Hållfjällets turiststation_files/17.jpg" alt="Pitch 2">
<div class="infoline">...</div>
</div>
<div class="pitch-gallery-div">
<img src="./Hållfjällets turiststation_files/1.jpg" alt="Pitch 3">
<div class="infoline">...</div>
</div>
<div class="pitch-gallery-div">
<img src="./Hållfjällets turiststation_files/7.jpg" alt="Pitch 4">
<div class="infoline">...</div>
</div>
</div>
</div>
</div>
<!-- main content -->
<div id="left">
<!-- Svenska -->
<h1>Hej!</h1>
<p>Hållfjället har nya ägare, men fortsätter att vara samma unika idyll som vanligt.
Vi öppnar den 1:a Februari - 2015 och kommer att hålla öppet under hela säsongen.
Bokningar för säsongen kan göras på telefon 0706-859710 eller 0647-340 49.<br/>
<img src = "./Kontakta oss_files/owners.jpg"width="600" height="400" border = "0">
Vårt föreståndarpar Kjell och Majli hälser er välkomna.
<br clear="both">
<hr>
<br clear="both">
<h1>För dig som vill uppleva något annorlunda</h1>
<p>Tänk dig att efter en stärkande skön sömn, vakna och upptäcka att solen lyser från en klarblå himmel. Efter en snabb uppstigning så väntar en näringsrik "Hållfjälls¬frukost", en bra början på en dag ute på fjället. I samband med frukosten så gör du ditt eget smörgåspaket och hämtar din termos som är fylld med varm choklad, kaffe eller varför inte med kall "Hållfjällssaft".</p>
<p>Tillsammans med din familj eller kompisar, så tar ni på er skidorna direkt utanför bron och åker ut på dagens skidtur. Turen startar direkt med skön och härlig skidåkning, inget slitsamt klättrande för att komma upp på fjället här inte, du startar ju direkt på kalfjället.</p>
<p>Efter ett par timmars skidåkning så är det dags för välbehövlig rast, och ni letar upp en plats som ligger lite i lä för vinden. Om solen fortfarande är framme så blir rasten extra njutbar och ni kanske vill ta långrast, sitta eller ligga och känna hur solens varma strålar bättrar på solbrännan.
Ett annat förslag kan vara att testa fjällfiske i någon av områdets sjöar.( Då behöver du fiskekort) .</p>
<p>Framåt fyra-fem tiden så känns det bra att se Hållfjället ligga i solskenet, och den sista biten hem blir extra lättåkt, kanske även "först hem får pris". Efter att du har duschat, så känns det skönt att slappa en stund.</p>
<p>Klockan 18.00 är det så dags för middag i matsalen, där såväl brasan i öppna spisen som de tända ljusen ger en intim och festlig stämning. Middagen består alltid av tre rätter; förrätt, varmrätt och dessert. Hållfjällets matsedel, som bygger på husmanskost, brukar vara mycket uppskattad av gästerna.</p>
<p>Efter maten så erbjuder Hållfjället möjligheter till samvaro mellan gästerna på sätt som man själva bestämmer. Någon TV finns inte och det är medvetet, därför att under vistelsen på Hållfjället ska man kunna koppla av "världen utanför", och slippa matas med det eländes elände som TV och övriga massmedia lever på. Självklart så finns det möjligheter att ordna olika arrangemang, om gästerna så vill.</p>
<p>Om det är stjärnklart och eller månsken, så kan du på Hållfjället uppleva en vinterhimmel som ingen annanstans. Att stå ute på bron och titta på en stjärnhimmel som inte störs av det ljussken som finns i vanliga fall, är en sak man minns länge. Om dessutom norrskenet flammar, då är det bara kylan utomhus som får dig att gå in i värmen igen.</p>
<p><b> OBS Vi är alkoholfria</b></p>
<!-- Engelska -->
</div>
<!-- sidebar -->
<div id="right">
<!-- Svenska -->
<h2> Gilla oss på facebook</h2>
<div class="fb-like-box" data-href="https://www.facebook.com/hallfjallet" data-width="200" data-height="150" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
<hr>
<br clear="both">
<h2>Nyheter</h2>
<img src= "./Hållfjällets turiststation_files/sidbild2.jpg" "width = 200" height = "150">
<br>Nu hyr vi ut fullt utrustad sportstuga i anslutning till hotellet. För mer info, se prislistan.<br>
<br>
<hr>
<img src="./Hållfjällets turiststation_files/newspaper.png" alt="Skrivet om Hållfjället" style="float: right">
<h2>Vad andra skriver om Hållfjället</h2>
<!-- Engelska -->
<p><b>» På Hållfjället går tiden lite långsammare</b><br>
Dagens Nyheter (extern länk)</p>
<p><b>» Hotellet utan el i väglöst land</b><br>
Södra Årefjällen (external länk)</p>
<p><b>Hållfjället - strömlös 50-talsnostalgi</b><br>
Allt om resor (extern länk)</p>
<img src="./Hållfjällets turiststation_files/Det Goda Livet.png" alt="De goda livet i Jämtland och Härjdalen" style="float: right">
<p><b>» Det goda livet i Jämtland och Härjedalen</b></p>
<p>Prisbelönad bok av bl a Tage Levin och Ulla Tham. Hållfjällets bidrag till boken är dess berömda trattkantarellsoppa och hjortronparfait.</p>
</div>
<div class="x"></div>
<!-- <div class="break"></div> -->
<!-- small posts -->
<div id="feature">
</div>
</div>
<!-- footer -->
<div id="footer">
<div style="width: 33%; float: left">
<p>Hållfjällets turiststation<br>Ottsjö<br>830 10 Undersåker</p>
</div>
<div style="width: 32%; float: left; text-align: center">
<p>Tel: +46 706-85 97 10 (Magnus Olsson)<br/>
0647-340 49 (Hållfjällets turiststation under öppettider)<br/>
Tillfällig epost: magnus.olsson#stromsslott.se</p>
</div>
<div style="width: 33%; float: left; text-align: right">
<p>Bankgiro: 660-5505</p>
</div>
</div>
</div>
<!-- gallery starter and prettyPhoto starter -->
<script type="text/javascript">
jGallery('pitch');
$(document).pngFix();
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
<div class="pp_overlay" style="opacity: 0; height: 1842px; display: none; width: 1349px;"></div><div class="pp_pic_holder" style="top: 276.5px; left: 624.5px;"><div class="pp_top"><div class="pp_left"></div><div class="pp_middle"></div><div class="pp_right"></div></div><div class="pp_content">Expand<div class="pp_loaderIcon"></div><div class="pp_hoverContainer" style="margin-left: 20px;"><a class="pp_next" href="http://www.hallfjallet.se/#">next</a><a class="pp_previous" href="http://www.hallfjallet.se/#">previous</a></div><div id="pp_full_res"></div><div class="pp_details clearfix"><a class="pp_close" href="http://www.hallfjallet.se/#">Close</a><p class="pp_description"></p><div class="pp_nav">Previous<p class="currentTextHolder">0/0</p>Next</div></div></div><div class="pp_bottom"><div class="pp_left"></div><div class="pp_middle"></div><div class="pp_right"></div></div></div><div class="ppt" style="top: 276.5px; left: 644.5px;"></div>
</body>
</html>
The problem is that your resources (css, js, jpg, and a total of 17 files) are not loading (404 not found) because of differences in encoding.
The UTF-8 document contains links encoded like this:
./H�llfj�llets turiststation_files/default.css
which incorrectly refers to
http://hallfjallet.se/H%EF%BF%BDllfj%EF%BF%BDllets%20turiststation_files/default.css
Failed to load resource: the server responded with a status of 404 (Not Found)
whereas the English document contains links encoded like this:
href="./Hållfjällets turiststation_files/default.css"
which correctly refers to
http://hallfjallet.se/H%C3%A5llfj%C3%A4llets%20turiststation_files/default.css
One suggestion is that you can copy the encoded link given by your browser for each resource (Cntrl+Shift+i) and use it.
I solved this by doing the following.
Taking and .html file that worked and moved only the breadtect there.
THen I updated it again and it worked.
I dont know why.
I have experience in web development but zero experience in mobile development. I have therefore purchased a website template (html5 +css3) and I then used it as a starting point for a PHP website.
Some of the pages are not working very well on mobile though. When I test this page, the text is not sizing to the mobile screen. Even worse, when I go into Reader mode on iOS, there's just this big image of silver rings showing, instead of the actual text.
How can this be fixed ?
The code responsible for showing a block of text is the following:
<div class="container">
<div class="content_block row">
<div class="fl-container span9">
<div class="row">
<div class="posts-block span12">
<div class="contentarea">
<div class="row-fluid">
<div class="span12 module_cont module_text_area module_medium_padding">
<h3 class="headInModule"></h3>
<p>Les prestations commencent à partir de 250 euros.</p>
<p>Lors de ma prestation, je suis à votre entière disposition pendant un
nombre d’heures qui varie en fonction de la formule choisie. </p>
<p>Je m’engage à délivrer les photos dans un délai de 4 semaines suivant le
mariage.</p>
<p>Les frais de déplacement sont inclus dans la région Alsace-Lorraine,
Luxembourg et Province Luxembourg en Belgique. Pour toute autre région,
veuillez me contacter.</p>
</div>
</div>
<!-- .row-fluid -->
<div class="row-fluid">
<div class="span12 module_cont module_text_area module_medium_padding">
<img src="/img/bronze.jpg" alt="formule bronze"
style="float:left"/>
<div style="float:right">
<h3 class="headInModule">Formule Bronze</h3>
<a id="anchor1"></a>
<ul class="list_type1">
<li>6H de prestation le jour du mariage * (plage horaire à préciser
avec les mariés)
</li>
<li>Rencontre des futurs mariés avant le mariage et signature du
contrat de prestation
</li>
<li>La prestation comprend un photo reportage permettant de couvrir
les thèmes suivants:
<ul>
<li>préparatifs (habillage, maquillage, coiffeur)</li>
<li>cérémonie</li>
<li>photos de couple ou/et de groupe</li>
<li>vin d’honneur</li>
</ul>
</li>
<li>Travail de post-production et de retouches</li>
<li>1 DVD contenant les photos retravaillées en haute résolution
(min. 150 photos)
</li>
<li>Galerie photo internet sécurisée et disponible pendant 1 an
minimum.
</li>
<li>Cession intégrale des droits de reproduction dans un cadre privé
uniquement.
</li>
</ul>
<i>prix sur demande</i>
</div>
</div>
</div>
<!-- .row-fluid -->
Your classes .span9 and .span12 has a width of 700px and 940px which is stretching your content. If you set these to 100% in your media queries it should work.
e.g.
#media only screen and (max-width: 770px){
.span9, .span12 {width:100%;}
}