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.
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 have my layout done like this
<div class="row newtryh2">
<div class="col-xs-12 col-sm-6 col-md-6 middlethat">
<h2>WiFi via Facebook</h2><span class="border"></span>
<p>Erbjud dina gäster & besökare fri WiFi genom vår WiFi tjänst. De letar helt enkelt upp ert Nätverk, Ansluter & då kommer er Facebooksida upp och ger besökaren möjlighet att Checka in på er Facebook sida för att få tillgång till nätverket. Perfekt Marknadsföring för ditt företag</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 shadowimg"><img class="img-responsive" src="Images/1.jpg" style="margin: auto;"></div>
</div>
<div class="row newtryh2">
<div class="col-xs-12 col-sm-6 col-md-6 shadowimg"><img class="img-responsive" src="Images/2.jpg" style="margin: auto;"></div>
<div class="col-xs-12 col-sm-6 col-md-6 middlethat">
<h2>Google Streetview</h2><span class="border"></span>
<p>Visa ditt företag från insidan med en virtuell rundtur i 360°. Perfekt för Restauranger & Butiker. Allt publiceras under din Google My Business och ger dina kunder en chans att gå in Virtuellt hos er. Vi utför även Filmning & Fotning i 360° där din fantasi sätter gränserna</p>
</div>
</div>
It works fine with text on the left then an image on the right and then the next row we have text on the right and image on the left but when it goes to mobile I want the text to be above the picture on the second row because right now on mobile devices it goes :
Text
Image
Image
Text
And I want
Text
Image
Text
Image
I was wondering how to do this ?
Thanks
You can do it like this with the Flexbox:
#media screen and (max-width: 480px) { /* adjust to your needs */
.row:not(:first-child) {
display: flex;
flex-direction: column;
}
.row:not(:first-child) > .shadowimg {
order: 2;
}
}
<div class="row newtryh2">
<div class="col-xs-12 col-sm-6 col-md-6 middlethat">
<h2>WiFi via Facebook</h2><span class="border"></span>
<p>Erbjud dina gäster & besökare fri WiFi genom vår WiFi tjänst. De letar helt enkelt upp ert Nätverk, Ansluter & då kommer er Facebooksida upp och ger besökaren möjlighet att Checka in på er Facebook sida för att få tillgång till nätverket. Perfekt Marknadsföring för ditt företag</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 shadowimg"><img class="img-responsive" src="Images/1.jpg" style="margin: auto;"></div>
</div>
<div class="row newtryh2">
<div class="col-xs-12 col-sm-6 col-md-6 shadowimg"><img class="img-responsive" src="Images/2.jpg" style="margin: auto;"></div>
<div class="col-xs-12 col-sm-6 col-md-6 middlethat">
<h2>Google Streetview</h2><span class="border"></span>
<p>Visa ditt företag från insidan med en virtuell rundtur i 360°. Perfekt för Restauranger & Butiker. Allt publiceras under din Google My Business och ger dina kunder en chans att gå in Virtuellt hos er. Vi utför även Filmning & Fotning i 360° där din fantasi sätter gränserna</p>
</div>
</div>
A only-css way to do this is Flexbox.
On your "newtryh2" containers, set the display:flex attribute.
Then with flex-direction:column and flex-direction:column-reverse on mobile you can change the order of the contained blocks.
I am trying to vertical align my icons with my text in wordpress so far I have the following
<div class="media oppsite">
<div class="media-left pull-right"> <?php query_posts('p=89'); ?><?php while (have_posts()) : the_post(); ?><div style="padding-top:42px;"></div></div>
<div class="media-body text-right">
<h2 class="media-headingb" style="text-align:center;"><?php the_title(); ?></h4>
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail( 'full', array( 'class' => 'imgtop' ) ); // show featured image
}
?><?php the_content(); ?>
<?php endwhile;?>
</div>
</div>
Which is not working imgTop is a class that verticle aligns text to top of image but I dont understand why its not aligning properly here is the site.
http://innovativeapps.dk/
I guess you forgot to include your image inside media-left class.
<div class="media oppsite">
<div class="media-left pull-right"> <img width="286" height="286" src="http://innovativeapps.dk/wp-content/uploads/2017/05/Icon-1.png" class="imgtop wp-post-image" alt="Icon-1" srcset="http://innovativeapps.dk/wp-content/uploads/2017/05/Icon-1.png 286w, http://innovativeapps.dk/wp-content/uploads/2017/05/Icon-1-150x150.png 150w" sizes="(max-width: 286px) 85vw, 286px"><div style="padding-top:42px;"></div></div>
<div class="media-body text-right">
<h2 class="media-headingb" style="text-align:center;">Value First</h2>
<p>Vi udvikler og udgiver din app helt gratis, tilmed giver vi dig en hel måned til at benytte alle dens funktioner kvit og frit. I denne måned vil du selv opleve en stigning i omsætningen som følge af din nye app.<br>
Skulle appen efter den første måned ikke leve op til dine forventninger, eller er der en anden grund til du ikke ønsker at fortsætte, så sletter vi bare appen igen og du bliver ikke trukket en krone.</p>
</div>
</div>
This is my site http://tholexos.nl/
But in IE 8 or lower it looks like garbage. Why is this?? My navigation goes immiediatly to mobile version and the actual menu is getting in the footer...
I know IE has some bugs but I don`t know what bugs are causing this problem for my site. I am asking you guys if you want to help my find the problem.
Thnx for the help!
<!doctype html>
<!--[if IE]><![endif]-->
<!--[if IE 7]><html xml:lang="nl-NL" lang="nl-NL" class="ie ie7"><![endif]-->
<!--[if IE 8]><html xml:lang="nl-NL" class="ie8"><![endif]-->
<!--[if (lt IE 8)|(gt IE 8)|!(IE)]><!--><html xml:lang="nl-NL" lang="nl-NL"><!--<![endif]-->
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.png"/>
<meta name="description" content="Onze visie als bedrijf bestaat uit het faciliteren van kinderen samen met hun ouders om zich zo goed mogelijk voor te bereiden op de verplichte rekentoets. Door het hoofdrekenen op een ouderwetse manier">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<p id="payoff"><span>l</span></p>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1">
<!--[if (gt IE 8)|!(IE)]><!--><link rel="stylesheet" href="abc.css" type="text/css"/><!--<![endif]-->
<!--[if (IE 7)|(IE 8)]><link rel="stylesheet" href="abc.css" type="text/css" media="screen,print" /><![endif]-->
<title>Tholexos - Home</title>
</head>
<body id="government">
<base target="_blank">
<div id="centerbox">
<div id="header">
<a href="index.html" target="_self" title="Naar de homepage van Rijksoverheid.nl">
<img src="logo.png" alt="Tholexos.nl"/>
</a>
<div class="skiplinks">
<p>
<span class="assistive">Ga direct naar</span>
<a title="Navigeer naar de inhoud" href="#content">
Inhoud</a>
<span class="assistive">of</span>
<a id="skip-to-menu" class="active" title="Navigeer naar het hoofdmenu" href="#navigation">
Menu</a>
</p>
</div><div id="search">
</div></div>
<!--[if lt IE 7]><p><strong>Rijksoverheid.nl omarmt moderne standaarden en technieken.</strong><br/>Uw webbrowser (Microsoft IE6) ondersteunt deze standaarden niet. Stap daarom over op een recente browser.</p><![endif]--><div id="main">
<div class="header">
<p id="breadcrumb">
</p><span class="assistive">Onderwerp: </span>
<!--<a id="topic-home" href="#"><span>Taal en rekenen</span></a><p class="assistive">Dit onderwerp bevat 1 rubrieken.</p>-->
<ul class="tabs">
<li class="selected">
Visie
</li>
</ul>
</div><!--<div class="decorative">
<img src="#" alt=""
title="Foto: Hollandse Hoogte."
/>
</div>-->
<div class="background2"></div>
<div id="contentr" class="article">
<div class="textindex">
Onze visie als bedrijf bestaat uit het faciliteren van kinderen samen met hun ouders om zich zo goed mogelijk voor te bereiden op de verplichte rekentoets. Door het hoofdrekenen op een ouderwetse manier en op een verantwoordelijke en getoetste leermethode, te kunnen oefenen op een modern apparaat, dat eenvoudig voor handen is en laagdrempelig in gebruik.
<br>
<br>
<h2>Ouderwets oefenen in een nieuw jasje! - reken op je toekomst!</h2>
</div><div class="img1"><img src="logo_met.png" alt="Reken op je toekomst!"/></div>
<!--<h1>Extra maatregelen rekenonderwijs voortgezet onderwijs en middelbaar beroepsonderwijs</h1>
<div class="lead">
<p>Het rekenonderwijs is nog niet op orde. Leerlingen mogen daar niet de dupe van worden. Daarom voert de Rijksoverheid een aantal extra maatregelen in het voortgezet onderwijs en het middelbaar beroepsonderwijs in.</p>
</div>
<h2>Voorbeelden extra maatregelen</h2>
<p>De extra maatregelen staan in de kamerbrief Stand van zaken invoering referentieniveaus taal en rekenen in vo en mbo. Voorbeelden van maatregelen zijn:</p>
<ul>
<li>Een overgangsperiode waarin leerlingen geen cijfer krijgen, maar een vaardigheidsscore (voldoende of onvoldoende). De overgangsperiode duurt 4 jaar. </li>
<li>Aangepaste toetsen voor leerlingen die zwak zijn in rekenen.</li>
<li>Entree-basisdiploma in de entreeopleiding en een vakdiploma in mbo-2.</li>
<li>Nieuwe regels voor de doorstroom van leerlingen.</li>
<li>Docenten mogen de rekentoetsen na afloop inzien.</li>
</ul>
<p>Het doel is zorgen dat zoveel mogelijk leerlingen het referentieniveau voor rekenen halen.</p>
<div class="content-image-left">
<img src="#" alt="Infographic over Rekenen op orde in 2020. Kijk voor een uitgebreide uitleg in het onderwerp: http://www.rijksoverheid.nl/onderwerpen/taal-en-rekenen"
title="Ministerie van OCW"
/>
</div>
<h2>Overgangsperiode met vaardigheidsscores in plaats van cijfers</h2>
<p>Tijdens een overgangsperiode van 4 jaar werken scholen en instellingen met vaardigheidsscores in plaats van cijfers. Leerlingen moeten minimaal een bepaalde vaardigheidsscore behalen om een �voldoende� voor het onderdeel rekenen te halen.</p>
<p>In het 1e jaar van de overgangsperiode krijgt een leerling een voldoende als hij een vaardigheidsscore haalt die gelijkstaat aan het cijfer 4,5. Daarna gaat de vaardigheidsscore elk jaar omhoog (opklimmende slaagcesuur). In het 4e jaar moet de vaardigheidsscore minimaal gelijk zijn aan het cijfer 5,5. Als blijkt dat er toch nog teveel leerlingen zakken voor de rekentoets, wordt de vaardigheidsscore weer aangepast, zodat er in het eerste jaar maximaal 5% van de studenten zakt.</p>
<p>De overgangsperiode gaat in tijdens het schooljaar waarin de rekentoets gaat meetellen voor het diploma. Dit verschilt per schoolsoort. </p>
<h2>Aangepaste toesten voor leerlingen die zwak zijn in rekenen</h2>
<p>Leerlingen die moeite hebben met rekenen, krijgen speciale rekentoetsen:</p>
<ul>
<li>de 2A toets voor leerlingen in het vmbo-bb, de entreeopleiding en mbo-2 die zwak zijn in rekenen;</li>
<li>ER-toetsen voor leerlingen met ERWD (ernstige reken-wiskundeproblemen en dyscalculie).</li>
</ul>
<p>Deze aangepaste toetsen zorgen ervoor dat leerlingen die alle andere vakken hebben gehaald, meer kans hebben om ook het onderdeel rekenen te halen. Zo kunnen ze hun diploma en startkwalificatie halen.</p>
<p>Scholen bieden leerlingen in het vmbo-bb en het mbo-2 altijd eerst de reguliere rekentoets aan. Als deze toets voor een leerling niet haalbaar is, kan de school de leerling een aangepaste toets laten maken. Dit gebeurt altijd in overleg met de leerling. </p>
<h2>Entree-basisdiploma in het mbo</h2>
<p>De entreeopleiding in het mbo krijgt een entree-basisdiploma. Dit diploma is voor leerlingen die alle beroepsspecifieke onderdelen van de entreeopleiding hebben gehaald, maar (nog) niet kunnen voldoen aan de eisen voor rekenen (of taal). Leerlingen die willen doorstromen van de entreeopleiding naar mbo-2, moeten aan dezelfde eisen voor taal en rekenen voldoen als leerlingen in het vmbo-bb. Als zij aan deze eisen voldoen, krijgen zij een entree-doorstroomdiploma.</p>
<h2>Nieuwe regels voor doorstroom van leerlingen</h2>
<p>Om te kunnen doorstromen naar een vervolgopleiding moeten leerlingen aan bepaalde eisen voldoen. Hier horen straks ook de eisen voor taal en rekenen bij. </p>
<ul>
<li><h3> Doorstromen naar mbo-3 </h3> Dit kan alleen met referentieniveau 2F. De aangepaste 2A toets is hiervoor dus niet voldoende.</li>
<li><h3> Doorstromen van voortgezet onderwijs naar mbo </h3> Leerlingen die in het voortgezet onderwijs een ER-toets hebben gemaakt, kunnen alle opleidingen in het mbo volgen. Ook in het mbo mogen ze een ER-toets maken. Een ER-toets is bedoeld voor kinderen met ERWD (ernstige reken-wiskundeproblemen en dyscalculie).</li>
<li><h3>Doorstromen naar het hoger onderwijs </h3> Iedereen met het juiste diploma kan naar het hoger onderwijs kan. Dus ook leerlingen die een diploma hebben gehaald met de ER-toets.</li>
<li><h3>Doorstromen naar de pabo </h3> Voor leerlingen die naar de pabo willen doorstromen geldt een uitzondering. Zij moeten de reguliere 3F toets taal en rekenen gehaald hebben. Anders hebben zij niet de vaardigheden die nodig zijn om goed rekenonderwijs te geven aan hun leerlingen.</li>
</ul>
<div class="block docs-pubs">
<h2>
Documenten en publicaties</h2>
<ul class="common">
<li>
<a href="/onderwerpen/taal-en-rekenen/documenten-en-publicaties/kamerstukken/2014/12/17/kamerbrief-invoering-referentieniveaus-taal-en-rekenen-in-vo-en-mbo.html" class="publication">
<h3>Kamerbrief invoering referentieniveaus taal en rekenen in vo en mbo</h3>
<p>Minister Bussemaker en staatssecretaris Dekker (OCW) informeren de Tweede Kamer over de stand van zaken van de invoering van de ...</p>
<p class="meta">
Kamerstuk | 17-12-2014</p></a>
</li>
<li>
<a href="/onderwerpen/taal-en-rekenen/documenten-en-publicaties/publicaties/2014/12/17/2020-rekenen-op-orde.html" class="publication">
<h3>2020: rekenen op orde</h3>
<p>Infographic over Rekenen op orde in 2020. Het rekenonderwijs wordt de komende jaren verbeterd. De rekentoets groeit stap voor stap ...</p>
<p class="meta">
Publicatie | 17-12-2014</p></a>
</li>
<li>
<a href="/onderwerpen/taal-en-rekenen/documenten-en-publicaties/publicaties/2014/12/17/doorstroming-naar-vervolgonderwijs.html" class="publication">
<h3>Doorstroming naar vervolgonderwijs</h3>
<p>Doorstroom: wat heb je nodig voor welk diploma en welke vervolgopleiding?</p>
<p class="meta">
Publicatie | 17-12-2014</p></a>
</li>
</ul>
</div>-->
</div><!--<div id="aside">
<div class="block">
<h2>Verder in dit onderwerp</h2>
<ul class="common">
<li>
Referentieniveaus taal en rekenen
</li>
<li>
Toetsen en examens voor taal en rekenen
</li>
<li>
Taal en rekenen op de pabo
</li>
</ul>
</div>
<div class="block">
<h2>Zie ook</h2>
<ul class="common">
<li>
<a
class="news"
title="Nieuwsbericht | 17-12-2014"
href="/onderwerpen/taal-en-rekenen/nieuws/2014/12/17/rekenen-stap-voor-stap-beter.html">
Rekenen stap voor stap beter</a>
</li>
</ul>
</div>
<div class="block banner">
<a href="/contact">
<img src="//roimg.nl/bestanden/afbeeldingen/banners/postbus-51/banner-inforijksoverh-ond.jpg" alt="Vragen? Bel Informatie Rijksoverheid: 1400" />
</a>
</div>
<div class="block">
<h2>Verantwoordelijk ministerie</h2>
<ul class="common">
<li>
<a href="/ministeries/ocw" >
Ministerie van Onderwijs, Cultuur en Wetenschap</a>
</li>
</ul>
</div></div>--><div id="follow-up">
<div class="block">
<div class="notifications"><!--
<h2>Taal en rekenen: blijf op de hoogte</h2>
<ul class="common">
<li>
<a class="email" href="http://abonneren.rijksoverheid.nl/e-mailattenderingen/aanmelden/onderwerpen/taal-en-rekenen/nieuws">
Nieuwsberichten via e-mail</a>
</li>
<li>
<a class="email" href="http://abonneren.rijksoverheid.nl/e-mailattenderingen/aanmelden/onderwerpen/taal-en-rekenen/documenten-en-publicaties">
Documenten en publicaties via e-mail</a>
</li>
<li>
<a class="rss-feed" href="http://feeds.rijksoverheid.nl/onderwerpen/taal-en-rekenen/nieuws.rss">
Nieuwsberichten via rss</a>
</li>
<li>
<a class="rss-feed" href="http://feeds.rijksoverheid.nl/onderwerpen/taal-en-rekenen/documenten-en-publicaties.rss">
Documenten en publicaties via rss</a>
</li>
</ul> -->
</div>
<div class="sharing">
<h2>Deel deze pagina op:</h2>
<ul class="common">
<li><a href="http://twitter.com/share?;text=Tholexos+is+een+startup+die+zich+bezig+houdt+met+het+volgen,+trainen,+en+coachen+van+kinderen+voor+een+succesvolle+overstap+naar+het+voortgezetonderwijs+#tholexos+http://www.tholexos.nl/" target="_blank" class="twitter" title="Deel deze pagina op Twitter">
<img src="twitter_logo.png" class="logo_grootte"/>Twitter</a></li>
<li><a href="https://www.facebook.com/sharer/sharer.php?u=http://www.tholexos.nl/" target="_blank" class="facebook" title="Deel deze pagina op Facebook">
<img src="facebook_logo.png" class="logo_grootte"/>Facebook</a></li>
<li><a href="https://www.linkedin.com/shareArticle?mini=true&url=Tholexos%20is%20een%20startup%20die%20zich%20bezig%20houdt%20met%20het%20volgen,%20trainen,%20en%20coachen%20van%20kinderen%20voor%20een%20succesvolle%20overstap%20naar%20het%20voortgezetonderwijs%20%23Thlexos%20http://www.tholexos.nl/&title=&summary=&source=" target="_blank" class="linkedin" title="Deel deze pagina op LinkedIn">
<img src="linkedin_logo.png" class="logo_grootte"/>LinkedIn</a></li>
<li><a href="https://plus.google.com/share?url=http://www.tholexos.nl/" target="_blank" class="google-plus" title="Deel deze pagina op Google+">
<img src="google_logo.png" class="logo_grootte"/> Google+</a></li>
<li><a href="http://www.tumblr.com/share/link?url=http://www.tholexos.nl/" target="_blank" class="tumblr" title="Deel deze pagina op Tumblr">
<img src="tumblr_logo.png" class="logo_grootte"/>Tumblr</a></li>
</ul>
</div>
</div>
</div>
<div id="sitemap">
<h2>
Informatie over rekenen:
</h2>
<div>
<ul class="common column">
<li>
Referentieniveaus taal en rekenen
</li>
<li>
Rekenhulp voor ouders en anderen
</li>
<li>
Nationaal expertisecentrum leerplanontwikkeling
</li>
</ul>
</div>
</div></div><div id="logofooter"></div>
<div id="navigation" class="block">
<!-- ------------ hier is bovenste nav ------------- -->
<h2>Hoofdnavigatie</h2>
<ul>
<li class="selected2"><a href="index.html" target="_self" >Home</a></li>
<li class="selected1"><a href="over_tholexos.html" target="_self" >Over Tholexos</a></li>
<li class="selected1"><a href="blog.html" target="_self" >Blog</a></li>
<li class="selected1"><a href="contact.html" target="_self" >Contact</a></li>
</ul>
</div>
<div id="footer" class="three-column">
<div class="background">
<div class="column">
<div class="footer_lijn"></div>
<h2>Over deze site</h2>
<ul>
<div class="text"><li class="center-li"><a href="over_tholexos.html" target="_self" >Over Tholexos.nl</a></li>
<li class="center-li"><a href="disclaimer.html" target="_self" >Disclaimer</a></li>
<li class="center-li">Rekenopjetoekomst.nl is een handelsnaam van Tholexos<li>
<li class="center-li"><a>© 2015 Tholexos - Reken op je toekomst</a></li>
</ul>
</div>
</div></div>
</div></div>
<script src="core-14.7.1.min.js"></script>
</body>
</html>
For the css script you get here --> http://tholexos.nl/abc.css
I see you're using media queries in your abc.css stylesheet; IE8 doesn't support media queries - so if you have designed your site 'mobile first' I guess IE8 is defaulting to that look.
There are a few solutions if you search for 'IE8 media queries' such as mentioned on this thread:
IE8 support for CSS Media Query
If you want to support IE8 you should do the following 3 things. There may be others:
1) Set the DOCTYPE to HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) Make sure all of your CSS is CSS2 compatible
3) Put your BASE tag inside of your HEAD
Hello I'm new to html and css and tried to display a images and some text. The idea was to get the text next to the image and that works. However the text starts at the bottom of the image not the top. Can some set it so that it starts at the top ?
this is the code i use in css:
.images{
float: left;
margin: 5px;
}
this is my html code:
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/main.css" />
<link rel="stylesheet" href="../css/contact.css" />
</head>
<header>
<div id="logo">
<h1>Baby kleding online</h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Kleding</li>
<li><a class="inuse" href="../html/contact.html"id="contactnav">Contact</a> </li>
<li>Vragen</li>
</ul>
</div>
</header>
<body id = "contact">
<div id="page">
<div class="content">
<h2>Contact</h2>
<images>
<img src="../images/logo.PNG">
Het bedrijf 'Baby kleding online' wordt in 1953 opgericht door een dynamisch Belgisch ondernemersechtpaar. De eerste winkel wordt geopend op de Groenplaats in Antwerpen. Hier vind je de eerste kleding voor Pasgeboorene, baby's, peuters en kleuters.
In het begin gebeurt de productie op de verdieping in een confectieatelier waar ook alle nieuwe modellen ontwikkeld worden.
Wat later worden er nog winkels geopend. Het echtpaar omringt zich al heel snel met medewerkers.
Het kleine confectieatelier groeit uit tot een groot plateau waarop verschillende modeontwerpsters werken.
Langzaam aan komen er nieuwe winkels over heel België.
Het merk gaat vervolgens over de grens: er worden filialen in Luxemburg en Athene geopend. Het bedrijf blijft internationaal uitbreiden.
Vandaag heeft het Belgische merk al een hele weg afgelegd met bijna 300 winkels in de wereld. Baby kleding online wil het leven mooier en nog makkelijker maken voor de mama’s en hun jonge kinderen, met een assortiment gaande van knuffels, relaxen, flessenwarmers tot luiertafels, meubilair en zwangerschaps- en kinderkleding.
</images>
<br>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.nl/maps?f=q&source=s_q&hl=nl&geocode=&q=KGD+Groenplaats,+Antwerpen,+Belgi%C3%AB&aq=&sll=51.219125,4.40313&sspn=0.002967,0.008165&ie=UTF8&hq=KGD&hnear=Groenplaats,+2000+Antwerpen,+Belgi%C3%AB&ll=51.218201,4.400925&spn=0.006295,0.006295&t=h&output=embed"></iframe><br /><small>Grotere kaart weergeven</small>
<br>
</div>
</div>
</body>
</html>
Thanks in advance !
There's alot of errors in your code, first your <body> tag should be right after </head>, get rid of the <images> tag (its not a HTML tag).
I updated your code and it should work how you want it to. (I dont really know where you want image to appear though).
Check this out
You should write in your css :
images img{float:left;margin:5px}
that should fix it for you.
the .images{float:left} refers to the images element and not to the items inside it + you have a mistake as you should write images{float:left} ( without the . )
the code you wrote is actually creating a hole new class called images, and you're not using it anywhere.
<div>
<p style="float: left;"><img src="../images/logo.PNG"></p>
<p>Het bedrijf 'Baby kleding online' wordt in 1953 opgericht door een dynamisch Belgisch ondernemersechtpaar. De eerste winkel wordt geopend op de Groenplaats in Antwerpen. Hier vind je de eerste kleding voor Pasgeboorene, baby's, peuters en kleuters.
In het begin gebeurt de productie op de verdieping in een confectieatelier waar ook alle nieuwe modellen ontwikkeld worden.
Wat later worden er nog winkels geopend. Het echtpaar omringt zich al heel snel met medewerkers.
Het kleine confectieatelier groeit uit tot een groot plateau waarop verschillende modeontwerpsters werken.
Langzaam aan komen er nieuwe winkels over heel België.
Het merk gaat vervolgens over de grens: er worden filialen in Luxemburg en Athene geopend. Het bedrijf blijft internationaal uitbreiden.
Vandaag heeft het Belgische merk al een hele weg afgelegd met bijna 300 winkels in de wereld. Baby kleding online wil het leven mooier en nog makkelijker maken voor de mama's en hun jonge kinderen, met een assortiment gaande van knuffels, relaxen, flessenwarmers tot luiertafels, meubilair en zwangerschaps- en kinderkleding.</p>
</div>
Like this!