hariskar

Thank you for advises! I corrected container, row order, removed container with 82% and did everything you suggested. I changed margin-top of content.col-12 and aside.col-6 to compensate the space required by lang. Shouldn't lang be aligned over right end of picture? I consider to use media query with margin-right=53px for bigger screens and margin-right=18px for smaller. Would you advise anything better? Thank you again!

Than you for reply! With above code added screen width 964px it is at the correct position. But as the screen width gets smaller it moves down.

In my page https://www.mikroviologos.gr/ I made a simple language selection <div> which is in the correct place when page is viewed in desktop size. But when the page is viewed with smartphone the lang <div> goes under both menus (horizontal and vertical) and other blocks. How could I make it be in the same place, under the header on the right side both in desktop and smartphone viewing size? Thank you!

With php registered users have access, each to their own results when they click to www.site.com/results. The results are pdf. So when a user clicks on results he can see a page with the links to all the pdf of his results. The problem is that if someone copies and pastes this link he can also see the results even if he is not registered. How could I avoid this? Here is the code: Thank you! <?php if ($_SESSION['username']=="user1") { readfile("https://www.site.com/results/user1.html"); } elseif($_SESSION['username']=="user2") { readfile("https://www.site.com/results/user2"); } else { ?> <p>Αν θέλετε να μπορείτε να βλέπετε τα αποτελέσματά σας online και να τα κατεβάζετε σε μορφή pdf παρακαλώ <b>ενημερώστε μας</b> προφορικά, με email ή συμπληρώνοντας τη <a href="forma -epikoinonias">φόρμα επικοινωνίας</a> και <a href="https://www.site.com/user/register">εγγραφείτε στην ιστοσελίδα μας</a>.</p> <?php } ?>

I was not very clear: Problem solved. I have one db connection in included file and a second in the main file. I had to put $db->exec("SET CHARACTER SET utf8;"); in both files after each connection to solve the problem.

In included config.php I changed $db->exec("SET NAMES 'utf8';"); to $db->exec("SET CHARACTER SET utf8;"); but the problem remains: Greek username is correct in mysql with Greek characters being correctly displayed, but last_login still does not update for usernames in Greek. Edit: I had to put it again, because I had a 2nd connection to the db. Thank you!

Thank you but I can not understand what is happening: since there is $db->exec("SET NAMES 'utf8';"); in the included file, the username registers correctly in mysql and login/php works fine. The only problem is that when a user with Greek username logs in last_login in mysql does not update. Is there anything wrong with this line? : $sql = "UPDATE members SET last_login=now() WHERE username='$username' ";

last_login in mysql is updated correctly when username is in Latin characters but not updated when in Greek. Here is the code: <?php //include config require_once('includes/config.php'); $username = $_POST['username']; $password = $_POST['password']; if($user->login($username,$password)){ $servername = "xxx"; $dbuser = "xxx"; $dbpass = "xxx"; $dbname = "xxx"; $conn = new mysqli($servername, $dbuser, $dbpass, $dbname); $sql = "UPDATE members SET last_login=now() WHERE username='$username' "; if ($conn->query($sql) === FALSE) {echo "Error updating record: " . $conn->error;}} //check if already logged in move to home page if( $user->is_logged_in() ){ header('Location: register'); } //process login form if submitted if(isset($_POST['submit'])){ $username = $_POST['username']; $password = $_POST['password']; if($user->login($username,$password)){ $_SESSION['username'] = $username; header('Location: /apotelesmata'); exit; } else { $error[] = 'Λάθος όνομα χρήστη ή κωδικός ή ο λογαριασμός σας δεν έχει ενεργοποιηθεί ακόμα.'; }}//end if submit //define page title $title = 'Login'; ?> and here is the included config.php <?php ob_start(); session_start(); //set timezone date_default_timezone_set('Europe/Athens'); //database credentials define('DBHOST','xxx'); define('DBUSER','xxx'); define('DBPASS','xxx'); define('DBNAME','xxx'); //application address define('DIR','http://www.mikroviologos.gr/'); define('SITEEMAIL','xxx@xxx.xx'); try { //create PDO connection $db = new PDO("mysql:host=".DBHOST.";dbname=".DBNAME, DBUSER, DBPASS); $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $db->exec("SET NAMES 'utf8';"); } catch(PDOException $e) { //show error echo '<p class="bg-danger">'.$e->getMessage().'</p>'; exit; } //include the user class, pass in the database connection include('classes/user.php'); include('classes/phpmailer/mail.php'); $user = new User($db); ?> In the included config.php there is a line $db->exec("SET NAMES 'utf8';"); but the problem still exists. Could you please help me on that? Thank you!

It works with display:block!I would never find this myself... I made the html this way, because I want the transparent non hover border and the blue hover border to be over the image edges and not around/externally of the image with the image smaller. Is there a simpler way to do this? Thank you!

Why does the border on hover that appears on the 4 smaller pictures not fall exactly on the pictures edge, but at the bottom it is about 7px lower and leaves an empty space? http://www.mikroviologos.gr/test2 Thank you!

In my webpage I would like to put an image in the text logo I have now. I would like the image to be in the right of mikroviologos.gr. Now the code is: <div id="logoArea" class="col-3" title="Μικροβιολογικό Εργαστήριο στην Καβάλα"><h1><a href=/><div id="l1">mikroviologos.gr</div><div id="l2">Εργαστήριο Μικροβιολογίας</div></a></h1></div> If I change it to <div id="logoArea" class="col-3" title="Μικροβιολογικό Εργαστήριο στην Καβάλα"><h1><a href=/><div id="l1">mikroviologos.gr<img src="image.png"></div><div id="l2">Εργαστήριο Μικροβιολογίας</div></a></h1></div> and try to apply some margin-top the whole logo moves. How can I make only the picture move? I want to align it to the text. Thank you!

I made my site www.mikroviologos.gr without any cms with the valuable help of w3schools lessons and this forum (I had almost no knowledge of html, css, javascript, php, mysql before). My site functions as it should but I think I don't like my design so much. Of course I still have no logo, but the rest of the design seems too simple and maybe old fashioned. Of course I would not like something very modern.. My problem is I can't decide what is wrong and what should I change.. I think I don't like the main picture being so big, but if I made it smaller, it would be narrower than the text. Please feel free to make any comment, not only about the design. Thank you!!

I added $db->exec("SET NAMES 'utf8';"); in php and now usernames are stored correctly in mysql. Thank you!

In a member register form how can I add a validation rule to allow only latin characters for username and password? Today a member registered and put in Greek characters and the result in mysql is Σοφία Δέδε ... (In mysql collation is utf8_general_ci). How can I avoid this? Thank you!

<style> div.img {margin:5px;border:1px solid #ccc;float:left;width:220px;} div.img:hover {border:1px solid #777;} div.img img {width:100%;height:auto;} div.desc {padding:15px;text-align:center;} .img {cursor:pointer;transition:0.3s;} .image:hover {opacity:0.7;} /* The Modal (background) */ .modal { display:none; /* Hidden by default */ position:fixed; /* Stay in place */ z-index:1; /* Sit on top */ padding-top:100px; /* Location of the box */ left:0; top:0; width:100%; /* Full width */ height:100%; /* Full height */ overflow:auto; /* Enable scroll if needed */ background-color:rgb(0,0,0); /* Fallback color */ background-color:rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content {margin:auto;display:block;max-width:100%;} /* Add Animation */ .modal-content, #caption {-webkit-animation-name:zoom;-webkit-animation-duration:0.6s;animation-name:zoom;animation-duration:0.6s;} @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:bold;transition:0.3s;} .close:hover,.close:focus{color:#bbb;text-decoration:none;cursor:pointer;} /* 100% Image Width on Smaller Screens */ @media only screen and (max-width:700px){.modal-content {width:100%;}} @media screen and (max-width:900px) {#content {margin-bottom:120px}} </style> <div id="content" class="col-9"> <h1>Φωτογραφίες</h1> <div class="img"><img class="image" src="http://s.mikroviologos.gr/image/aithousa_anamonis_1.jpg" alt="Αίθουσα αναμονής 1"></div> <div class="img"><img class="image" src="http://s.mikroviologos.gr/image/aithousa_anamonis_2.jpg" alt="Αίθουσα αναμονής 2"></div> <div class="img"><img class="image" src="http://s.mikroviologos.gr/image/aithousa_anamonis_3.jpg" alt="Αίθουσα αναμονής 3"></div> <div class="img"><img class="image" src="http://s.mikroviologos.gr/image/fygokentroi.jpg" alt="Φυγόκεντροι"></div> <div class="img"><img class="image" src="http://s.mikroviologos.gr/image/analytes_1.jpg" alt="Αναλυτές 1"></div> <div class="img"><img class="image" src="http://s.mikroviologos.gr/image/analytes_2.jpg" alt="Αναλυτές 2"></div> <div class="img"><img class="image" src="http://s.mikroviologos.gr/image/analytes_3.jpg" alt="Αναλυτές 3"></div> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">×</span> <img src="http://s.mikroviologos.gr/image/pixel.gif" class="modal-content" id="img01" alt=""> </div> <script> // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal var images = document.getElementsByClassName("image"); for(var i = 0; i < images.length; i++) {images[i].onclick = showCaption;} var modalImg = document.getElementById("img01"); function showCaption(){ modal.style.display = "block"; modalImg.src = this.src; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() {modal.style.display = "none";} modal.onclick = function() {modal.style.display = "none";} </script> I think I put all the relative code. It works great, you can see here.

I finished the mobile part and started the desktop part. My css is small, it seems that my only gain will be the elimination of 2-3 float:none.

My css is follows Desktop-first design. Should I convert it to Mobile-first? Would there be any advantages? Would it be smaller? Is there a procedure to find the css parts used from mobile now, keep them and add as media query the desktop parts? Thank you! Here is my css: *{box-sizing:border-box} html{overflow-y:scroll;position:relative;height:100%} header.top{height:92px;width:100%;margin:auto;background-color:#1a3365;border-bottom:2px solid #6e98c2} header>.container{overflow:visible;white-space:nowrap} #nav a{color:#d2dce6;display:block;padding:3px 4px;font-weight:bold} #nav li{margin-left:8px;border:2px solid #6e98c2;border-radius:5px;float:left} #nav li:hover,#nav li:active,#nav li.selected{background-color:#101f3d;border:2px solid #4b80b4} #l1{color:#f2f2f2;font-size:19px} #l2{color:#d2dce6;font-size:14px} #logoArea{display:inline-block;float:none;vertical-align:top;font-weight:bold;font-family:Arial} #logoArea>a{white-space:normal} #logoArea>a div{margin-left:12px} #nav{list-style:outside none none;overflow:hidden;margin:0;padding:0} #navArea{display:inline-block;margin:50px 0 0;position:relative;white-space:nowrap} .container{width:81%;margin:0 auto;max-width:1000px} aside{height:100%;margin:12px 0 15px 0} h1{color:#4a6b98;font-size:21px} h2{font-size:19px} #block1{height:auto;margin-top:14px} #block1 ul{height:auto;padding:0;margin:0} #block1 li{list-style:none;padding:6px;text-align:left;margin:0 6px;border-bottom:1px solid #d9d9d9} #block1 a{display:block;font-weight:bold} #block1 a:hover,#block1 a.selected{color:#262626} #block1 li:first-child{border-top:1px solid #d9d9d9} #block2,#block3{height:auto;background-color:#ecf1f8;border-top:1px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,0.2);border-radius:5px;padding:10px;margin-top:20px} #block2 h2,#block3 h2{margin:0;font-size:18px} #block2 p,#block3 p,#block2 form{font-size:13px} body{height:100%;background:#fff;margin:0;padding:0;font-family:"Trebuchet MS",Helvetica,Arial;font-size:15px;color:#404040;line-height:1.5} body a{text-decoration:none;color:#4a6b98} footer.col-12{position:relative;bottom:auto;overflow:hidden;min-height:100px;padding-top:0;padding-bottom:0;margin-top:-100px;background-color:#dae4f1;border-top:#6e98c2 2px solid} footer p{font-size:12px;margin:0;line-height:1.43} #iso{float:left;margin-right:5px} #p1,#c{color:#1a3365} #p2{color:#dae4f1} ul.topnav li.icon{display:none} .row::after{content:"";clear:both;display:block} [class*="col-"]{float:left;padding:15px} #wrapper{min-height:100%} aside:after,#content:after{content:"";display:block;padding-bottom:100px} @media screen and (min-width:1001px){#content{margin:26px 0 15px} .col-2{width:16.6667%} .col-3{width:25%} .col-4{width:33.3333%} .col-9{width:75%} .col-12{width:100%} } @media screen and (max-width:1000px){aside:after{padding-bottom:15px} #content h1:first-child{margin:0 auto;display:block} ul.topnav li:not(:first-child){display:none} ul.topnav li.icon{float:right;display:inline-block} #logoArea{display:block;text-align:center} header.top{height:auto} #navArea{display:block;height:30px;margin:1em 15px} [class*="col-"]{width:100%} #nav li{float:none;margin:0;background-color:#1a3365} #nav{position:absolute;left:0;right:0} ul.topnav li.icon{display:inline-block;position:absolute;right:0;top:0} #nav a{font-size:16px} #content{margin-top:0} aside{margin-bottom:0} .container{width:auto} ul.topnav.responsive{position:relative} ul.topnav.responsive li.icon{position:absolute;right:0;top:0} ul.topnav.responsive li{float:none;display:block;margin:0} ul.topnav.responsive li a{display:block;text-align:left} #nav.topnav.responsive>li:not(:first-child):not(:last-child){margin-top:-2px}}

I thought that if the css code for each screen would be eliminated, the message could go away. I have only one small 3366kB css. I can't understand why google suggests this. If I put the code of the css in the head, the message goes away and I get 100/100 for both Desktop and mobile. But noway will I put my css in every single page... This suggestion seems wrong to me.

Thank you, if I do this, is there any change that this message: "Eliminate render-blocking CSS in above-the-fold content" in google pagespeed goes away?

In my css I specify only what happens with @media screen and (max-width:1000px) Is that correct? Should I not specify what should happen with width > 1000px? Of course some rules are common for <1000px and >1000px, but some are only for >1000px. Now they are just overridden by the @media screen and (max-width:1000px) rules. Would it be better to add a @media screen and (min-width:1001px) for these? *{box-sizing:border-box} html{overflow-y:scroll;position:relative;height:100%} header.top{height:92px;width:100%;margin:auto;background-color:#1a3365;border-bottom:2px solid #6e98c2} header>.container{overflow:visible;white-space:nowrap} #nav a{color:#d2dce6;display:block;padding:3px 4px;font-weight:bold} #nav li{margin-left:8px;border:2px solid #6e98c2;border-radius:5px;float:left} #nav li:hover,#nav li:active,#nav li.selected{background-color:#101f3d;border:2px solid #4b80b4} #l1{color:#f2f2f2;font-size:19px} #l2{color:#d2dce6;font-size:14px} #logoArea{display:inline-block;float:none;vertical-align:top;font-weight:bold;font-family:Arial} #logoArea>a{white-space:normal} #logoArea>a div{margin-left:12px} #nav{list-style:outside none none;overflow:hidden;margin:0;padding:0} #navArea{display:inline-block;margin:50px 0 0;position:relative;white-space:nowrap} .container{width:81%;margin:0 auto;max-width:1000px} aside{height:100%;margin:12px 0 15px 0} h1{color:#4a6b98;font-size:21px} h2{font-size:19px} #block1{height:auto;margin-top:14px} #block1 ul{height:auto;padding:0;margin:0} #block1 li{list-style:none;padding:6px;text-align:left;margin:0 6px;border-bottom:1px solid #d9d9d9} #block1 a{display:block;font-weight:bold} #block1 a:hover,#block1 li a.selected{color:#262626} #block1 li:first-child{border-top:1px solid #d9d9d9} #block2,#block3{height:auto;background-color:#ecf1f8;border-top:1px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,0.2);border-radius:5px;padding:10px;margin-top:20px} #block2 h2,#block3 h2{margin:0;font-size:18px} #block2 p,#block3 p,#block2 form{font-size:13px} body{height:100%;background:#fff;margin:0;padding:0;font-family:"Trebuchet MS",Helvetica,Arial;font-size:15px;color:#404040;line-height:1.5} body a{text-decoration:none;color:#4a6b98} #content{margin:26px 0 15px} footer.col-12{position:relative;bottom:auto;overflow:hidden;min-height:100px;padding-top:0;padding-bottom:0;margin-top:-100px;background-color:#dae4f1;border-top:#6e98c2 2px solid} footer p{font-size:12px;margin:0;line-height:1.43} #iso{float:left;margin-right:5px} #p1,#c{color:#1a3365} #p2{color:#dae4f1} ul.topnav li.icon{display:none} .row::after{content:"";clear:both;display:block} [class*="col-"]{float:left;padding:15px} .col-2{width:16.6667%} .col-3{width:25%} .col-4{width:33.3333%} .col-9{width:75%} .col-12{width:100%} #wrapper{min-height:100%} aside:after,#content:after{content:"";display:block;padding-bottom:100px} @media screen and (max-width:1000px){aside:after{padding-bottom:15px} #content h1:first-child{margin:0 auto;display:block} ul.topnav li:not(:first-child){display:none} ul.topnav li.icon{float:right;display:inline-block} #logoArea{display:block;text-align:center} header.top{height:auto} #navArea{display:block;height:30px;margin:1em 15px} [class*="col-"]{width:100%} #nav li{float:none;margin:0;background-color:#1a3365} #nav{position:absolute;left:0;right:0} ul.topnav li.icon{display:inline-block;position:absolute;right:0;top:0} #nav a{font-size:16px} #content{margin-top:0} aside{margin-bottom:0} .container{width:auto} ul.topnav.responsive{position:relative} ul.topnav.responsive li.icon{position:absolute;right:0;top:0} ul.topnav.responsive li{float:none;display:block;margin:0} ul.topnav.responsive li a{display:block;text-align:left} #nav.topnav.responsive>li:not(:first-child):not(:last-child){margin-top:-2px}}

You are right, sorry.. I started a new topic with more details here.

In my site www.mikroviologos.gr I would like to make a news section at the bottom of the content like this example. I tried different ways: 1. Inside <div id="content" class="col-9"> after the last <p> I created a <div class="col-4"> to divide the content into 3 columns. 2. I made .floating-box following this tutorial inside <div id="content" class="col-9"> after the last <p> but the result was always the same: part of bottom text goes under footer. Why does this happen? Since I put news section inside <div id="content" class="col-9"> shouldn't it have the behavior of content (push the footer down)? So, I would like to ask, which is the best way to create a News section and how can I make it not hide under the footer, but push the footer down like now content does? Here is my .css: * {box-sizing: border-box;} html{overflow-y:scroll;position:relative;height:100%} header{height:92px;width:100%;margin:auto;background-color:#1a3365;border-bottom:2px solid #6e98c2;} header > .container {overflow: visible;white-space:nowrap;} #nav a{color:#d2dce6;font-size:15px;display:block;padding:3px 4px;font-weight:bold;} #nav li{margin-left:8px;border:2px solid #6e98c2;border-radius:5px;float:left} #nav li:hover,#nav li:active,#nav li.selected{background-color:#101f3d;border:2px solid #4b80b4;} #l1 {color:#f2f2f2;font-size:19px} #l2 {color:#d2dce6;font-size:14px} #logoArea {display:inline-block;float:none;height:auto;padding-bottom:0;vertical-align:top;font-weight:bold;font-family:Arial} #logoArea > a {white-space:normal;} #logoArea > a div {margin-left:12px;} #nav {list-style:outside none none;overflow:hidden;} #logoArea,#nav {margin:0;} #navArea {display:inline-block;margin:50px 0 0;position:relative;white-space:nowrap;} ul#nav {padding:0;} .container {width: 81%; margin:0 auto;max-width:1000px} aside{height:100%;margin:12px 0 15px 0} h1{color:#4A6B98;font-size:21px;} h2{font-size:19px} h3{font-size:16px} #block1{height:auto;margin-top:14px;} #block1 ul{height:auto;padding:0;margin:0;} #block1 ul li{list-style:none;padding:6px;text-align:left;margin:0 6px;border-bottom:1px solid #d9d9d9;} #block1 ul li a{color:#4a6b98;text-decoration:none;font-size:15px;padding:0;display:block;font-weight:bold;} #block1 ul li a:hover, #block1 li a.selected{color:#262626;} #block1 li:first-child{border-top:1px solid #d9d9d9;} #block2, #block3{height:auto;background-color:#ecf1f8;border-top:1px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,0.2);border-radius:5px;padding:10px;margin-top:20px;line-height:1.5} #block2 h2, #block3 h2{margin:0;font-size:18px} #block2 h3, #block3 h3{margin-top:0;} #block2 p, #block3 p, #block2 form{font-size:13px;} p{font-size:15px;} body{height:100%;background:#fff;margin:0;padding:0;font-family:"Trebuchet MS",Helvetica,Arial;font-size:14px;line-height:1.43;color:#4d4d4d;} body a{text-decoration:none;color:#4a6b98;} #content{font-size:15px;margin:26px 0 15px;line-height:1.5} footer{width:100%;text-align:center;background-color:#dae4f1;margin-left:auto;margin-right:auto;border-top:#6e98c2 2px solid} footer p{font-size:12px;text-align:left;margin:0;line-height:1.43} #iso {width:41px;height:40.5px;float:left;margin-right:5px} #p1 {color:#1a3365} #p2 {color:#dae4f1} #c {color:#1a3365} ul.topnav li.icon {display:none;} .row::after {content: "";clear:both;display:block;} [class*="col-"] {float:left;padding:15px;} .col-1 {width:8.33333%;} .col-2 {width:16.6667%;} .col-3 {width:25%;} .col-4 {width:33.3333%;} .col-5 {width:41.6667%;} .col-6 {width:50%;} .col-7 {width:58.3333%;} .col-8 {width:66.6667%;} .col-9 {width:75%;} .col-10 {width:83.3333%;} .col-11 {width:91.6667%;} .col-12 {width:100%;} #wrapper {min-height:100%;} footer.col-12 {position:relative;bottom:auto;overflow:hidden;min-height:100px;padding-top:0;padding-bottom:0;} aside:after, #content:after {content:"";display:block;padding-bottom:100px;} footer.col-12 {margin-top:-100px;} @media screen and (max-width:1020px) { aside:after {padding-bottom:15px;} #content img:first-child, #content h1:first-child + img {margin:0 auto;display:block;} ul.topnav li:not(:first-child) {display:none;} ul.topnav li.icon {float:right;display:inline-block;} #logoArea {display:block;text-align:center;} header {height:auto;} #navArea {display:block;height:30px;margin:1em 15px;} [class*="col-"] {width:100%;} #nav li {float:none;margin:0;background-color:#1a3365;} #nav {position:absolute;left:0;right:0;} ul.topnav li.icon {display:inline-block;position:absolute;right:0;top:0;} #navArea #nav a {font-size:16px;} #content {margin-top:0px;} aside {margin-bottom:0;} .container{width:auto;} ul.topnav.responsive {position:relative;} ul.topnav.responsive li.icon {position:absolute;right:0;top:0;} ul.topnav.responsive li {float:none;display:block;margin: 0;} ul.topnav.responsive li a {display:block;text-align:left;} #nav.topnav.responsive > li:not(:first-child):not(:last-child) {margin-top:-1px;} } @media screen and (max-width:1090px) {#nav a {font-size:14px;}} and here is my .html <!DOCTYPE html> <html lang="el"> <head> <meta name=viewport content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="css/main.css"> <title>Αρχική σελίδα | Μικροβιολογικό Εργαστήριο στην Καβάλα</title> <meta name="description" content="Ο Χάρης Καραχριστιανίδης είναι Mικροβιολόγος στην Καβάλα. Το Μικροβιολογικό Εργαστήριό του λειτουργεί από το 2005 στην οδό Φιλικής Εταιρείας 5"> <style> h1 {margin-top:0;font-weight:bold;font-family:Arial;margin-left:12px} #mc {max-width:100%;height:auto} #l1, #l2 {display:block} </style> </head> <body><div id="wrapper"> <header> <div class="container"> <div id="logoArea" class="col-3" title="Μικροβιολογικό Εργαστήριο στην Καβάλα"><h1><a href=/><span id="l1">mikroviologos.gr</span><span id="l2">Εργαστήριο Μικροβιολογίας</span></a></h1></div> <div id="navArea"> <ul id="nav" class="topnav"> <li><a href="/">Αρχική σελίδα</a></li> <li><a href="biografiko">Βιογραφικό</a></li> <li><a href="syxnes-erotiseis">Συχνές ερωτήσεις</a></li> <li><a href="arthra/">Άρθρα</a></li> <li><a href="apotelesmata">Αποτελέσματα</a></li> <li><a href="epikoinonia">Επικοινωνία</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">☰</a> </li> </ul> </div><!--End of navArea--> <script> function myFunction() { var x = document.getElementById("nav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; }} </script> </div> </header> <div class="row"> <div class="container"> <aside class="col-3"> <div id="block1"> <ul> <li><a href="organosi-ergastiriou">Οργάνωση εργαστηρίου</a></li> <li><a href="exoplismos">Εξοπλισμός</a></li> <li><a href="fotografies">Φωτογραφίες</a></li> <li><a href="tmimata-exetaseis">Τμήματα - εξετάσεις</a></li> <li><a href="proliptikes-exetaseis">Προληπτικές εξετάσεις</a></li> <li><a href="politiki-poiotitas">Πολιτική ποιότητας</a></li> <li><a href="asfalistika-tameia">Ασφαλιστικά ταμεία</a></li> </ul> </div><!--End of block1--> <div id="block2"><h2>Εξετάσεις αλλεργίας</h2><hr><p>Το εργαστήριό μας πρόσφατα απέκτησε τον αναλυτή της Phadia UniCAP 100 που προσδιορίζει με μεγάλη ακρίβεια με τη μέθοδο αναφοράς ImmunoCAP τις ειδικές IgE και την τρυπτάση</p></div> <div id="block3"><h2>Αποτελέσματα online</h2><hr><p>Αν θέλετε να μπορείτε να βλέπετε τα αποτελέσματά σας online και να τα κατεβάζετε σε μορφή pdf παρακαλώ ενημερώστε μας και <a href="/user/register">εγγραφείτε στην ιστοσελίδα μας</a></p></div> </aside> <div id="content" class="col-9"> <img id="mc" src="http://s.mikroviologos.gr/image/microscope.jpg" alt="Μικροβιολογικό Εργαστήριο του Χάρη Καραχριστιανίδη στην Καβάλα"><p>Το μικροβιολογικό εργαστήριο του Χάρη Καραχριστιανίδη, Iατρού Bιοπαθολόγου (Mικροβιολόγου), λειτουργεί από τις αρχές του 2005 στο κέντρο της πόλης της Καβάλας. Σε καίριο σημείο, με εύκολη πρόσβαση από τα χωριά του νομού μας καθώς και από άλλους νομούς, προσφέρουμε υπηρεσίες ιατρικής με εγκυρότητα και υπευθυνότητα.</p> <p>Ο άρτια εξοπλισμένος χώρος μας με αναλυτές τελευταίας τεχνολογίας, σε συνδυασμό με το εξειδικευμένο και ειδικά καταρτισμένο προσωπικό, σας εγγυώνται αξιοπιστία και ασφάλεια.</p> <p>Η συνέπεια, η στήριξη, ο επαγγελματισμός και το ανθρώπινο πρόσωπο είναι τα βασικά στοιχεία της παροχής υπηρεσιών υγείας του εργαστηρίου μας, για την κάλυψη των δικών σας αναγκών, κάθε στιγμή που αυτό είναι απαραίτητο.</p> </div><!--End of content--> </div><!--End of container--> </div><!--End of row--> </div><!--End of wrapper--> <footer class="col-12"><div class="container"><p class="col-3"><u>Πιστοποίηση ποιότητας</u><br><img id="iso" src=http://s.mikroviologos.gr/image/iso_logoss.png alt="Πιστοποιημένο με ISO 9001:2008 Μικροβιολογικό Εργαστήριο στην Καβάλα">Εργαστήριο πιστοποιημένο<br>με <a href="http://s.mikroviologos.gr/files/iso90012008.pdf" target="_blank">ISO 9001:2008</a> από την<br>TUV Hellas</p><p class="col-2"><u>Διεύθυνση</u><br>Φιλικής Εταιρείας 5<br>(έναντι ΙΚΑ και ΚΤΕΛ),<br>Καβάλα</p><p class="col-3"><u>Επικοινωνία</u><br><span id="p1">☏</span> 2510-620630,<br><span id="p2">☏</span> 6974-900493<br><span id="c">✉</span> <a href="http://www.mikroviologos.gr/forma-epikoinonias">Φόρμα επικοινωνίας</a></p><p class="col-4"><br>Σχεδιασμός: <a href="/">Χάρης Ν. Καραχριστιανίδης</a><br>Copyright © 2005-2016</p></div></footer> </body> </html> Thank you!

How can I make a "Latest news" section at the bottom of content like https://medicine.yale.edu/labmed/ ? If I make inside #content.col-9 a div class="col-6" to divide #content in 2 columns bottom text goes under footer. Thank you!

OK, thank you, polls work OK now, I don't want to add something in my php polls, I just thought if I could substitute them with AJAX-Javascript polls but not I know that this is not possible.

I already use polls with php IP restrictions in my site, I just asked if there was a way to use this ajax example. Thank you for replies!