rootKID

i know, i fixed that part, sorry... told ya in the "EDIT" part i think. But i have another problem like i said in the "EDIT" part also, whenever my mouse goes over the jQuery, it dosent work... ideas Oo? And also another thing now, i noticed i have an annoying space in the bottom of my mobile view design, here: PICTURE: And not sure what's happening, i tried switching my "#accordian" ID between 2 divs. Right now i have the ID with my main container, however when i add a div INSIDE the container div, the bottom disappears, which is kinda the point ^^ Any ideas on how to fix that part? Because if i add the div on the inside of the container, my main-screen menu will ###### up. Meaning whenever it drops down, the menu will not go over the other divs but simply pushing them down, and that is not supposed to happen. Ideas? This is my CSS atm: /*# Navigation / Main==================================================*/#accordian { height: 40px; width: 100%; background: #004050; color: #FFFFFF; margin-bottom: 0;} /* ///////////////////////////////////// */ /* ////////// Heading Styles /////////// */ /* ///////////////////////////////////// */ /* heading styles */ #accordian h3 { margin-bottom: 5px; text-transform: uppercase; font-size: 1.083em; font-family: "Oswald"; line-height: 40px; text-align: center; cursor: pointer; color: #FFFFFF; /* fallback for browsers not supporting gradients */ background: #003040; background: linear-gradient(#003040, #002535); } /* heading styles - hover effect */ #accordian h3:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); } /* heading link styles - for single menu link without drop */ #accordian h3 a { display: block; text-align: center; color: #FFFFFF; text-decoration: none; } /* heading link styles - hover effect */ #accordian h3 a:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); } /* ///////////////////////////////////// */ /* ///////////// List Items //////////// */ /* ///////////////////////////////////// */ /* list items */ #accordian li { position: relative; float: left; width: 20%; margin-bottom: 0; } #accordian ul li ul li { width: 100%; } /*# Navigation / Sub-Menu==================================================*//* Lets hide the non active LIs by default */#accordian ul ul { margin: 0; display: none;}#accordian ul ul { /* position: relative; left: 0; right: 0; padding: 10px 0 10px 0; background-color: #333F4F; */}/* #accordian ul ul li { float: left; } *//*Showing the Sub-Menu when mouse-over(FIXED FOR ONLY CLICK AT MOBILE VIEW WITH "display: none;"!)*/#accordian li:hover > ul { display: block; }/* links */#accordian ul ul li a { color: #FFFFFF; padding: 10px 15px 10px 15px; background-color: #333F4F; text-decoration: none; font-size: 11px; line-height: 27px; display: block; /* transition for smooth hover animation */ transition: all 0.15s;}/* hover effect on links */#accordian ul ul li a:hover { background: #003545; border-left: 5px solid #90EE90;}/*# Global Design==================================================*/body { margin-top: 10px; }div.top_block {margin: 0 !important;}div.banner { height: 150px; background: url(images/logo/pc.png) no-repeat top center #FFFFFF; }/*# Home/Forside==================================================*/.home_news {background-color: #C2C2C2; }.home_feed { background-color: #C2C2C2; }/*# Media Queries==================================================*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) { div.banner { height: 138px; background: url(images/logo/tablet.png) no-repeat top center #FFFFFF; } /* # Navigation Menu -------------------------------------------------- */ #accordian { height: auto; } /* list items */ #accordian li { list-style-type: none; float: none; width: 100%; } /* Showing the Sub-Menu when mouse-over (FIXED FOR ONLY CLICK AT MOBILE VIEW WITH "display: none;"!) */ #accordian li:hover > ul { display: none; } /* links */ #accordian ul ul li a { color: #FFF; text-decoration: none; font-size: 11px; line-height: 27px; display: block; padding: 0 15px; /*transition for smooth hover animation*/ transition: all 0.15s; } /* ///////////////////////////////////// */ /* ////////// Heading Styles /////////// */ /* ///////////////////////////////////// */ /* heading styles */ #accordian h3 { text-transform: uppercase; font-size: 12px; font-family: "Oswald"; line-height: 34px; text-align: center; cursor: pointer; color: #FFFFFF; /* fallback for browsers not supporting gradients */ background: #003040; background: linear-gradient(#003040, #002535); } /* heading styles - hover effect */ #accordian h3:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); } /* heading link styles - for single menu link without drop */ #accordian h3 a { display: block; text-align: center; color: #FFFFFF; text-decoration: none; } /* heading link styles - hover effect */ #accordian h3 a:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); } }/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) { div.banner { height: 126px; background: url(images/logo/mobile_land.png) no-repeat top center #FFFFFF; } /* # Navigation Menu -------------------------------------------------- */ #accordian { height: auto; } /* list items */ #accordian li { list-style-type: none; float: none; width: 100%; } /* Showing the Sub-Menu when mouse-over (FIXED FOR ONLY CLICK AT MOBILE VIEW WITH "display: none;"!) */ #accordian li:hover > ul { display: none; } /* links */ #accordian ul ul li a { color: #FFF; text-decoration: none; font-size: 11px; line-height: 27px; display: block; padding: 0 15px; /*transition for smooth hover animation*/ transition: all 0.15s; } /* ///////////////////////////////////// */ /* ////////// Heading Styles /////////// */ /* ///////////////////////////////////// */ /* heading styles */ #accordian h3 { text-transform: uppercase; font-size: 12px; font-family: "Oswald"; line-height: 34px; text-align: center; cursor: pointer; color: #FFFFFF; /* fallback for browsers not supporting gradients */ background: #003040; background: linear-gradient(#003040, #002535); } /* heading styles - hover effect */ #accordian h3:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); } /* heading link styles - for single menu link without drop */ #accordian h3 a { display: block; text-align: center; color: #FFFFFF; text-decoration: none; } /* heading link styles - hover effect */ #accordian h3 a:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); } }/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) { div.banner { height: 126px; background: url(images/logo/mobile_land.png) no-repeat top center #FFFFFF; } /* # Navigation Menu -------------------------------------------------- */ #accordian { height: auto; } /* list items */ #accordian li { list-style-type: none; float: none; width: 100%; } /* Showing the Sub-Menu when mouse-over (FIXED FOR ONLY CLICK AT MOBILE VIEW WITH "display: none;"!) */ #accordian li:hover > ul { display: none; } /* links */ #accordian ul ul li a { color: #FFF; text-decoration: none; font-size: 11px; line-height: 27px; display: block; padding: 0 15px; /*transition for smooth hover animation*/ transition: all 0.15s; } /* ///////////////////////////////////// */ /* ////////// Heading Styles /////////// */ /* ///////////////////////////////////// */ /* heading styles */ #accordian h3 { text-transform: uppercase; font-size: 12px; font-family: "Oswald"; line-height: 34px; text-align: center; cursor: pointer; color: #FFFFFF; /* fallback for browsers not supporting gradients */ background: #003040; background: linear-gradient(#003040, #002535); } /* heading styles - hover effect */ #accordian h3:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); } /* heading link styles - for single menu link without drop */ #accordian h3 a { display: block; text-align: center; color: #FFFFFF; text-decoration: none; } /* heading link styles - hover effect */ #accordian h3 a:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); } }/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) { div.banner { height: 90px; background: url(images/logo/mobile_port.png) no-repeat top center #FFFFFF; } /* # Navigation Menu -------------------------------------------------- */ #accordian { height: auto; } /* list items */ #accordian li { list-style-type: none; float: none; width: 100%; } /* Showing the Sub-Menu when mouse-over (FIXED FOR ONLY CLICK AT MOBILE VIEW WITH "display: none;"!) */ #accordian li:hover > ul { display: none; } /* links */ #accordian ul ul li a { color: #FFF; text-decoration: none; font-size: 11px; line-height: 27px; display: block; padding: 0 15px; transition: all 0.15s; } /* ///////////////////////////////////// */ /* ////////// Heading Styles /////////// */ /* ///////////////////////////////////// */ /* heading styles */ #accordian h3 { text-transform: uppercase; font-size: 12px; font-family: "Oswald"; line-height: 34px; text-align: center; cursor: pointer; color: #FFFFFF; /* fallback for browsers not supporting gradients */ background: #003040; background: linear-gradient(#003040, #002535); } /* heading styles - hover effect */ #accordian h3:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); } /* heading link styles - for single menu link without drop */ #accordian h3 a { display: block; text-align: center; color: #FFFFFF; text-decoration: none; } /* heading link styles - hover effect */ #accordian h3 a:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); } } This is my HTML: <?php/*THIS PROJECT USES 960GRID SYSTEM!==================================*/# Database Settings & Setuprequire_once("database/db.core.php");ob_start();session_start();# Static Error Checkerrequire_once("includes/static.error.check.php");# Functions Libraryrequire_once("includes/functions.php");?><!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--><head><script type="text/javascript" src="http://platform.linkedin.com/in.js"> api_key: "h6YnI876FlO0VgdW" authorize: true</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>Hjem</title><link rel="stylesheet" href="style/base.css"><link rel="stylesheet" href="style/skeleton.css"><link rel="stylesheet" href="style/skillet.css"><link rel="stylesheet" href="style/main.css"><!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><link rel="shortcut icon" href="style/images/favicon.ico"></head><body><?phpecho "<div class='container'>"; // Sixteen Columns (Banner AND Logo, Userlogin, Menu) echo "<div class='sixteen columns top_block'>"; // Banner AND Logo echo "<div class='sixteen columns half-bottom banner'>"; echo ""; echo "</div>"; // NEW MENU // ================================ echo "<div class='sixteen columns half-bottom' id='accordian'>"; echo "<ul>"; // Forside echo "<li>"; //echo "<h3>Forside</h3>"; echo "<h3><a href='index.php'>Forside</a></h3>"; echo "</li>"; // Job Søgere echo "<li>"; echo "<h3>For Jobsøgere</h3>"; echo "<ul>"; echo "<li><a href='#'>Uopfordret ansøgning</a></li>"; echo "<li><a href='#'>Emnebank</a></li>"; echo "</ul>"; echo "</li>"; // For Virksomheder echo "<li>"; echo "<h3>For Virksomheder</h3>"; echo "<ul>"; echo "<li><a href='#'>Processen for jer</a></li>"; echo "<li><a href='#'>Rekruttering og udvælgse</a></li>"; echo "<li><a href='#'>Headhunting</a></li>"; echo "<li><a href='#'>Personlighedstest</a></li>"; echo "<li><a href='#'>Referencer</a></li>"; echo "</ul>"; echo "</li>"; // Ledige Stillinger echo "<li>"; echo "<h3>Ledige Stillinger</h3>"; echo "<ul>"; echo "<li><a href='#'>Processen for dig</a></li>"; echo "</ul>"; echo "</li>"; // Kontakt echo "<li>"; echo "<h3>Kontakt</h3>"; echo "<ul>"; echo "<li><a href='#'>Om RightMatch</a></li>"; echo "<li><a href='#'>Mission & Vision</a></li>"; echo "<li><a href='#'>Nyt og artikler</a></li>"; echo "</ul>"; echo "</li>"; echo "</ul>"; echo "</div>"; echo "</div>"; // Eight Columns (News Blog) echo "<div class='eleven columns half-bottom home_news'>"; echo "Sidste Nyheder"; echo "</div>"; // Eight Columns (Something) echo "<div class='five columns half-bottom home_feed'>"; echo "LinkedIN Feed"; echo "</div>"; // Sixteen Columns (Footer, Admin Login) echo "<div class='sixteen columns'>"; echo "<div>"; echo "© Copyright 2014 / ".date("Y")." | <a href='http://www.rightmatch.dk' target='_blank'>www.rightmatch.dk</a>"; echo "</div>"; echo "<div>"; echo "<a href='acp/index.php'>Admin Login</a>"; echo "</div>"; echo "</div>"; echo "</div>";?><!-- =============================================== --><!-- ============ JavaScript Loaded Here============ --><!-- =============================================== --><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/smoothmenu.js"></script></body></html> Ideas?

Ok i'm home now and tested. However i have chosen to go with one of those you listed up there, you were right, just needed a little bit of CSS, this helps one of my problems ALOT! This is the one i went with: http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3 However my code dosent works now, this is my JS: // NEW SOURCE// -----------------------$(document).ready(chooseMenuType); // Choose menu when loading the page$(window).resize(chooseMenuType); // Choose menu when resizing the pagefunction chooseMenuType() { // Bigger than 959px if($(window).width() > 959) { // Remove event listener $("#accordian h3").off("click", accordion); // Optionally show all lists. Remove this line if you want to //$("#accordian ul ul").show(); } else { // Add the event listener // Event listeners aren't duplicated, so there's no harm in doing this on every resize event $("#menu span").on("click", accordion); }}function accordion() { //slide up all the link lists $("#accordian ul ul").slideUp(); //slide down the link list below the h3 clicked - only if its closed if(!$(this).next().is(":visible")) { $(this).next().slideDown(); }} Changed some of the names and stuff, just to see if it was working properly, it does actually, but now whenever i resize my browser to be at mobile scale, the clicks on the menu dosen't have any form of effect... in other words dosen't react whenever i click on a menu item. This is my new HTML: <div id="accordian"> <ul> <li> <h3><span class="icon-dashboard"></span>Dashboard</h3> <ul> <li><a href="#">Reports</a></li> <li><a href="#">Search</a></li> <li><a href="#">Graphs</a></li> <li><a href="#">Settings</a></li> </ul> </li> <!-- we will keep this LI open by default --> <li class="active"> <h3><span class="icon-tasks"></span>Tasks</h3> <ul> <li><a href="#">Today's tasks</a></li> <li><a href="#">Urgent</a></li> <li><a href="#">Overdues</a></li> <li><a href="#">Recurring</a></li> <li><a href="#">Settings</a></li> </ul> </li> <li> <h3><span class="icon-calendar"></span>Calendar</h3> <ul> <li><a href="#">Current Month</a></li> <li><a href="#">Current Week</a></li> <li><a href="#">Previous Month</a></li> <li><a href="#">Previous Week</a></li> <li><a href="#">Next Month</a></li> <li><a href="#">Next Week</a></li> <li><a href="#">Team Calendar</a></li> <li><a href="#">Private Calendar</a></li> <li><a href="#">Settings</a></li> </ul> </li> <li> <h3><span class="icon-heart"></span>Favourites</h3> <ul> <li><a href="#">Global favs</a></li> <li><a href="#">My favs</a></li> <li><a href="#">Team favs</a></li> <li><a href="#">Settings</a></li> </ul> </li> </ul></div> Still working on the CSS but looking promising so far x) EDIT Never mind, i figured out the problem x) Now i have another problem, or so i think, just not sure how to type it in. Whenever i have the "normal" screen menu, i wish when my mouse goes over the h3/main menu item, all the submenu when they show, instead of just coming down i wont them to get a "slideDown" from the jQuery part, however whenever i try to add it to the JS it wont work, ideas etc?

does the crypt method works like the sha1? just replacing the crypt with sha1? i will test when home, writing back to you later. Thanks!

I will try this out later when im home, i might have an idea with the number 3 you linked to... or was it 1... the one where there is a video also, i just saw it and got an idea (maybe) x)... i'm out right now but will write back later when home and tested! Thanks!

but i only need it when my users browser are in mobile mode, and when it's normal i need my menu to be according, that is why i dont think they will fit in... that i can see...

quetion, what is my password is sha1? Is that still being detected as "s"? EDIT This is my code i have so far, not sure if it's correct tho, but did my best to understand it right out from you have told me and from what i was reading. CODE: # Database Settings & Setuprequire_once("../database/db.core.php");ob_start();session_start();# Functions (Login) Libraryrequire_once("functions/functions_login.php");// ======================================================$username = $_POST['username'];$password = sha1( $_POST['password'] );// Prepare & Binding$stmt = $mysqli->prepare("SELECT u_id, username, password FROM users WHERE username=? AND password=?");$stmt->bind_param('ss', $username, $password);if ($result = $mysqli->query($stmt)){ /* while ($row = $result->fetch_row()) { // Code goes here... } */ $row = $result->num_rows; if($row == 1) { $_SESSION['admin'] = array(); $_SESSION['admin']['u_id'] = $row['u_id']; $_SESSION['admin']['username'] = $row['username']; $_SESSION['admin']['password'] = $row['password']; // free result set $result->close(); // Send user to ACP page header("location: index.php"); } else { // Send user back to login page with error... header("location: login.php?err=1"); }}// Closing "statement" AND "connection"$stmt -> close(); What i'm trying to do here is to check if only 1 row returns, and if true i wish to proceed with making the sessions as normal and let the user/admin pass to the admin page. However if no results/single row were affected/returned, then that user is being sent back to the original login page WITH an error. Is this code correct understood? I got a little bit confuced tho when you started to talk about stmt and all that, but what you think so far? Am i correct? And what about the SHA1 thing? Is that still detected as an "s"? Thanks in advance!

what you mean with that? I did read something about that part i mean in the SQLI, however i'm still learning how to use the SQLI since im used for the normal MySQL, and used simple variables inside the query then. Example: /* Prepared statement, stage 1: prepare */if (!($stmt = $mysqli->prepare("INSERT INTO test(id) VALUES (?)"))) { echo "Prepare failed: (" . $mysqli->errno . ") " . $mysqli->error;} Not sure what "$stmt" part means, and same with "VALUES(?)" part... what does the question mark? And what does the "prepare" function? Can you tell me in a understandable form? lol hehe But besides that i would be more than happy to try it out tomorrow. One more question, i noticed this in the second stage: /* Prepared statement, stage 2: bind and execute */$id = 1;if (!$stmt->bind_param("i", $id)) { echo "Binding parameters failed: (" . $stmt->errno . ") " . $stmt->error;}if (!$stmt->execute()) { echo "Execute failed: (" . $stmt->errno . ") " . $stmt->error;} The "bind_param("i")"... what does the function and what does the i means? Is there a reference somewhere? Can't seem to find it... or maybe just me -.-'... and the execution function is the one that runs the whole SQL i assume? Thanks in advance! Talk to you all tomorrow Mr R

A little bit, but i think it's no good due to the CSS system-frame i use. I'm using something that is called "GetSkeleton" which is based on "960Grid CSS Framework". However if it DOES work, i would consider adding it right now x). Do you think it is valid to add?

For the security part, any suggestions? So far i have this at ALL my non-login admin pages: PHP function at top: user_check("u_id"); And this is the functions i use, still in the coding proccess tho function start_my_session(){ if( session_id() == '' ) { session_start(); }}function user_check( $name ){ # To make sure "session_start();" is started! start_my_session(); if( !isset( $_SESSION['admin'][$name] ) ) { header("Location: login.php"); exit(); }} for the admin part, i forgot to add the stupid array, even tho when i check it with "$_SESSION" and call it out with a normal print_r, it's being created... is your way much better etc? Will edit it tomorrow, it's about 23:33 in Denmark and i need to sleep Making the changes tomorrow and sees what happens Thanks! Cya tomorrow

i already use Media Queries. But if i dont use JS for my "menu" and to make it clickable, the users with normal phones/tablets/etc can't use the website, that im aware off... and how am i supposed to show the "sub menus" at the small design etc? Not sure how... unless you have any suggestions? This is my CSS: /*# Navigation / Main==================================================*/.navigation { height: 40px; background-color: #333f4f; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;} ul.nav {} ul.nav ul { display: none; } ul.nav > li { position: relative; float: left; } ul.nav > li > a { display: block; padding: 0 20px; color: #FFFFFF; text-transform: uppercase; font-size: 1.083em; font-family: "Oswald"; line-height: 40px; text-decoration: none; } ul.nav > li:hover > a, ul.nav > li:active > a { /* -webkit-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); -moz-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); background-color: rgba(51,63,79,.09); */ color: #F15B19; } ul.nav li:hover:first-child a, ul.nav li:active:first-child a { -webkit-border-radius: 0 0 0 7px; -moz-border-radius:0 0 0 7px; border-radius:0 0 0 7px; } /*# Navigation / Sub-Menu==================================================*//* Showing the Sub-Menu */ul.nav li:hover > ul { display: block; }/* Making sure there is no space between Main and Sub-Menu */ul.nav ul { margin: 0 0 0 0; }/* If position "absolute" i can define custom width etc without errors! */ul.nav ul { position: absolute; left: -15px; right: -15px; padding: 10px 0 10px 0; background-color: #333f4f;}ul.nav li ul li a { display: block; text-align: center; /*color: #FEFEFE; -> only if JS is activated with color fading script like U232!*/}ul.nav li ul li > a { color: #8E5452; text-decoration: none; font-family: "Oswald"; }ul.nav li ul li:hover > a { color: #F15B19; }ul.nav li ul li:hover { -webkit-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); -moz-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); background-color: rgba(0,0,0,.15);} /*ul.nav li ul li:hover > a {}*//*# Media Queries==================================================*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) { div.banner { height: 138px; background: url(images/logo/tablet.png) no-repeat top center #FFFFFF; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) { div.banner { height: 126px; background: url(images/logo/mobile_land.png) no-repeat top center #FFFFFF; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) { div.banner { height: 126px; background: url(images/logo/mobile_land.png) no-repeat top center #FFFFFF; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) { div.banner { height: 90px; background: url(images/logo/mobile_port.png) no-repeat top center #FFFFFF; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }} My HTML <?phpecho "<div class='sixteen columns half-bottom navigation'>"; echo "<span class='nav-btn'></span>"; echo "<ul class='nav'>"; // Forside echo "<li><a href='index.php'>Forside</a></li>"; // Job Søgere echo "<li><a href='#'>For Jobsøgere</a>"; echo "<ul>"; echo "<li><a href='#'>Uopfordret ansøgning</a></li>"; echo "<li><a href='#'>Emnebank</a></li>"; echo "</ul>"; echo "</li>"; // For Virksomheder echo "<li><a href='#'>For Virksomheder</a>"; echo "<ul>"; echo "<li><a href='#'>Processen for jer</a></li>"; echo "<li><a href='#'>Rekruttering og udvælgse</a></li>"; echo "<li><a href='#'>Headhunting</a></li>"; echo "<li><a href='#'>Personlighedstest</a></li>"; echo "<li><a href='#'>Referencer</a></li>"; echo "</ul>"; echo "</li>"; // Ledige Stillinger echo "<li><a href='#'>Ledige Stillinger</a>"; echo "<ul>"; echo "<li><a href='#'>Processen for dig</a></li>"; echo "</ul>"; echo "</li>"; // Kontakt echo "<li><a href='#'>Kontakt</a>"; echo "<ul>"; echo "<li><a href='#'>Om RightMatch</a></li>"; echo "<li><a href='#'>Mission & Vision</a></li>"; echo "<li><a href='#'>Nyt og artikler</a></li>"; echo "</ul>"; echo "</li>"; echo "</ul>";echo "</div>";?> Ideas?

so what you are saying is that i could make the if/else statement INSIDE the resize part and say that if bigger than 600px, remove attribute, else add the attribute back to the ul.nav? That is how i understand it anyways.. sorry, JS is not my best side hehe, trying to push myself into it ^^'

yoyo W3S Ok, so to make this one short. My script is "supposed" to work, and it does on the login. However it is supposed to send the user "back" to the login page when no results has been found from the query i'm making... this is my login script, should make sence to you also i think, very simple login script so far $username = $_POST['username'];$password = sha1($_POST['password']);$query = "SELECT u_id, username, password FROM users WHERE username='$username' AND password='$password'";$result = mysqli_query( $db_connection, $query );$num = mysqli_num_rows($result);if($num == 1){ // Fetch the result... $row = mysqli_fetch_array($result); $_SESSION['admin']['u_id'] = $row['u_id']; $_SESSION['admin']['username'] = $row['username']; $_SESSION['admin']['password'] = $row['password']; header("location: index.php");}else{ // Send user back to login page with error... header("location: login.php?err=1");} However, it sends me to the index.php, even when there's an error and NO users with the damn name i'm typing... my question is now, what have i done wrong here? Thanks in advance! Mr r

how do you suggest i run the same function as soon the page is being loaded Oo?

lol, it wasn't the color... it was "visibility" in the CSS, stupid me hehe... i only needed display: none About what my intensions are, those are simple. Whenever my screen size for tablet,mobile etc are under 960px width, it will show the clickable menu for people around the world not having trouble with the view of the website. And if bigger or equal to 960px width, it will then show a normal dropdown menu, which works without any problems The reason i remove the style attribute whenever the window size width is bigger than 900 (or so), that is for the normal PC/Laptop menu to work properly without any problems. If i dont the menu will have problem being viewed by people that uses the normal PC/Laptop view of the website. Hope this clears stuff up a big? ... another question that is actually related, now my idea for the mobile/tablet view if to first show the main-menu items whenever the "Menu" has been clicked, and then i wish to make another clickable item, in which case would be the main menu item for that item to show it's sub-menu items. My question is, would it be possible to make another just like now in the JS? If i select the "ul.nav li" to be clickable and then show all the "ul li" within that specific drop? What are your suggestions? Kind of in a hurry, hope you can help me hehe Thanks again!

It was just really to keep my code in the background clean from the style attribute, why? Is that the thing that gives me error? Oo?... EDIT Lol i misunderstood your question, i added it because whenever my browser returns to the full PC size, all the menu items has for some reason been erased, basically just like my problem now, in the menu whenever i scroll down my items aren't there...

Ok thanks alot! Helps on the understanding! Now i have one question left, which dosen't makes sence to me in a way. Whenever i click the "Menu" at the mobile view, my menu dosen't appear Oo? I mean it does... but the items are not loaded, almost like the design is being taken away for some reason? This is the image of the website: Ideas? Oo? This is my HTML + CSS and JS CSS: body { margin-top: 10px; }.home_banner { height: 70px; background-color: #F1F1F1; }.userlogin_top { height: 70px; } .userlogin_top a { margin-left: 100px; line-height: 70px; text-decoration: none; }.home_news {background-color: #C2C2C2; }.home_feed { background-color: #C2C2C2; }/*# Navigation / Main==================================================*/.navigation { height: 40px; background-color: #333f4f; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;} ul.nav {} ul.nav ul { display: none; } ul.nav > li { position: relative; float: left; } ul.nav > li > a { display: block; padding: 0 20px; color: #FFFFFF; text-transform: uppercase; font-size: 1.083em; font-family: "Oswald"; line-height: 40px; text-decoration: none; } ul.nav > li:hover > a, ul.nav > li:active > a { -webkit-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); -moz-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); background-color: rgba(51,63,79,.09); color: #8E5452; } ul.nav li:hover:first-child a, ul.nav li:active:first-child a { -webkit-border-radius: 0 0 0 7px; -moz-border-radius:0 0 0 7px; border-radius:0 0 0 7px; } /*# Navigation / Sub-Menu==================================================*//* Showing the Sub-Menu */ul.nav li:hover > ul { display: block; }/* Making sure there is not space between Main and Sub-Menu */ul.nav ul { margin: 0 0 0 0; }/* If position "absolute" i can define custom width etc without errors! */ul.nav ul { position: absolute; left: -15px; right: -15px; padding: 10px 0 10px 0; background-color: #333f4f;}ul.nav li ul li a { display: block; text-align: center; /*color: #FEFEFE; -> only if JS is activated with color fading script like U232!*/}ul.nav li ul li > a { color: #F15B19 !important; text-decoration: none; }ul.nav li ul li:hover { -webkit-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); -moz-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); background-color: rgba(0,0,0,.15);} /*ul.nav li ul li:hover > a {}*//*# Media Queries==================================================*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) { .userlogin_top { height: 70px; } .userlogin_top a { margin-left: 70px; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) { /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) { .userlogin_top { height: 60px; } .userlogin_top a { margin-left: 170px; line-height: 60px; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) { .userlogin_top { height: 50px; } .userlogin_top a { margin-left: 110px; line-height: 50px; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }} HTML: <?php/*THIS PROJECT USES 960GRID SYSTEM!==================================*/ob_start();session_start();# Database Settings & Setuprequire_once("database/db.core.php");# Functions Libraryrequire_once("includes/functions.php");?><!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>Hjem</title><script type="text/javascript" src="js/jquery.js"></script><link rel="stylesheet" href="style/base.css"><link rel="stylesheet" href="style/skeleton.css"><link rel="stylesheet" href="style/skillet.css"><link rel="stylesheet" href="style/main.css"><!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><link rel="shortcut icon" href="style/images/favicon.ico"></head><body><?phpecho "<div class='container'>"; // Sixteen Columns (Banner AND Logo, Userlogin, Menu) echo "<div class='sixteen columns'>"; // Banner AND Logo echo "<div class='ten columns half-bottom home_banner'>"; echo "Banner/Logo"; echo "</div>"; // Banner AND Logo // LinkedIN Login echo "<div class='five columns half-bottom userlogin_top'>"; echo "<a href='#'>LinkedIN Login</a>"; echo "</div>"; // LinkedIN Login // Menu echo "<div class='sixteen columns half-bottom navigation'>"; echo "<span class='nav-btn'></span>"; echo "<ul class='nav'>"; // Forside echo "<li><a href='index.php'>Forside</a></li>"; // Job Søgere echo "<li><a href='#'>For Jobsøgere</a>"; echo "<ul>"; echo "<li><a href='#'>Uopfordret ansøgning</a></li>"; echo "<li><a href='#'>Emnebank</a></li>"; echo "</ul>"; echo "</li>"; // For Virksomheder echo "<li><a href='#'>For Virksomheder</a>"; echo "<ul>"; echo "<li><a href='#'>Processen for jer</a></li>"; echo "<li><a href='#'>Rekruttering og udvælgse</a></li>"; echo "<li><a href='#'>Headhunnting</a></li>"; echo "<li><a href='#'>Personlighedstest</a></li>"; echo "<li><a href='#'>Referencer</a></li>"; echo "</ul>"; echo "</li>"; // Ledige Stillinger echo "<li><a href='#'>Ledige Stillinger</a>"; echo "<ul>"; echo "<li><a href='#'>Processen for dig</a></li>"; echo "</ul>"; echo "</li>"; // Kontakt echo "<li><a href='#'>Kontakt</a>"; echo "<ul>"; echo "<li><a href='#'>Om RightMatch</a></li>"; echo "<li><a href='#'>Mission & Vision</a></li>"; echo "<li><a href='#'>Nyt og artikler</a></li>"; echo "</ul>"; echo "</li>"; echo "</ul>"; echo "</div>"; // Menu echo "</div>"; // Eight Columns (News Blog) echo "<div class='eleven columns half-bottom home_news'>"; echo "Sidste Nyheder"; echo "</div>"; // Eight Columns (Something) echo "<div class='five columns half-bottom home_feed'>"; echo "LinkedIN Feed"; echo "</div>"; // Sixteen Columns (Footer, Admin Login) echo "<div class='sixteen columns'>"; echo "<div>"; echo "© Copyright 2014 / ".date("Y")." | <a href='http://www.rightmatch.dk' target='_blank'>www.rightmatch.dk</a>"; echo "</div>"; echo "<div>"; echo "<a href='#'>Admin Login</a>"; echo "</div>"; echo "</div>"; echo "</div>";// JavaScript Loaded Hereecho "<script type='text/javascript' src='js/smoothmenu.js'></script>";?></body></html> JS: $('span.nav-btn').click(function() { $('ul.nav').slideToggle("fast");})$(window).resize(function() { // if "BIGGER" than 600px if ( $(window).width() > 600 ) { $('ul.nav').removeAttr('style'); }}) Hope you can spot it, i can't Oo?

Well now it works! Thanks haha... one question tho, why? I don't get it... It should be able to work at the meta tag right Oo? And another thing, what about the jQuery part? Should that be in the <meta> also? Or at the bottom? Thanks ALOT again! Been trying to figure this one out for 2 days now -.-'... And weird thing is, i didn't get any errors that i could see in the console, so don't think i have any x) Thanks anyways x)

Hello W3S Well i did post my menu thing in the CSS but that part is fixed now. Now i have another problem jQuery/Javascript related. What i wish is to make a drop-down menu in the mobile AND a slidedown in the normal PC version when a mouse is over the menu. I have started with the Menu at the moment, but not doing well. This is my JS file: $('span.nav-btn').click(function() { $('ul.nav').slideToggle("fast");}) and this is my HTML: <?php/*THIS PROJECT USES 960GRID SYSTEM!==================================*/ob_start();session_start();# Database Settings & Setuprequire_once("database/db.core.php");# Functions Libraryrequire_once("includes/functions.php");?><!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>Hjem</title><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/smoothmenu.js"></script><link rel="stylesheet" href="style/base.css"><link rel="stylesheet" href="style/skeleton.css"><link rel="stylesheet" href="style/skillet.css"><link rel="stylesheet" href="style/main.css"><!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><link rel="shortcut icon" href="style/images/favicon.ico"></head><body><?phpecho "<div class='container'>"; // Sixteen Columns (Banner AND Logo, Userlogin, Menu) echo "<div class='sixteen columns'>"; // Banner AND Logo echo "<div class='ten columns half-bottom home_banner'>"; echo "Banner/Logo"; echo "</div>"; // Banner AND Logo // LinkedIN Login echo "<div class='five columns half-bottom userlogin_top'>"; echo "<a href='#'>Bruger Login</a>"; echo "</div>"; // LinkedIN Login // Menu echo "<div class='sixteen columns half-bottom navigation'>"; echo "<span class='nav-btn'></span>"; echo "<ul class='nav'>"; // Forside echo "<li><a href='index.php'>Forside</a></li>"; // Job Søgere echo "<li><a href='#'>For Jobsøgere</a>"; echo "<ul>"; echo "<li><a href='#'>Uopfordret ansøgning</a></li>"; echo "<li><a href='#'>Emnebank</a></li>"; echo "</ul>"; echo "</li>"; // For Virksomheder echo "<li><a href='#'>For Virksomheder</a>"; echo "<ul>"; echo "<li><a href='#'>Processen for jer</a></li>"; echo "<li><a href='#'>Rekruttering og udvælgse</a></li>"; echo "<li><a href='#'>Headhunnting</a></li>"; echo "<li><a href='#'>Personlighedstest</a></li>"; echo "<li><a href='#'>Referencer</a></li>"; echo "</ul>"; echo "</li>"; // Ledige Stillinger echo "<li><a href='#'>Ledige Stillinger</a>"; echo "<ul>"; echo "<li><a href='#'>Processen for dig</a></li>"; echo "</ul>"; echo "</li>"; // Kontakt echo "<li><a href='#'>Kontakt</a>"; echo "<ul>"; echo "<li><a href='#'>Om RightMatch</a></li>"; echo "<li><a href='#'>Mission & Vision</a></li>"; echo "<li><a href='#'>Nyt og artikler</a></li>"; echo "</ul>"; echo "</li>"; echo "</ul>"; echo "</div>"; // Menu echo "</div>"; // Eight Columns (News Blog) echo "<div class='eleven columns half-bottom home_news'>"; echo "Sidste Nyheder"; echo "</div>"; // Eight Columns (Something) echo "<div class='five columns half-bottom home_feed'>"; echo "LinkedIN Feed"; echo "</div>"; // Sixteen Columns (Footer, Admin Login) echo "<div class='sixteen columns'>"; echo "<div>"; echo "© Copyright 2014 / ".date("Y")." | <a href='http://www.rightmatch.dk' target='_blank'>www.rightmatch.dk</a>"; echo "</div>"; echo "<div>"; echo "<a href='#'>Admin Login</a>"; echo "</div>"; echo "</div>"; echo "</div>";?></body></html> And in case you wish my CSS: body { margin-top: 10px; }.home_banner { height: 70px; background-color: #F1F1F1; }.userlogin_top { height: 70px; } .userlogin_top a { margin-left: 100px; line-height: 70px; text-decoration: none; }.home_news {background-color: #C2C2C2; }.home_feed { background-color: #C2C2C2; }/*# Navigation / Main==================================================*/.navigation { height: 40px; background-color: #333f4f; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;} ul.nav {} ul.nav ul { display: none; } ul.nav > li { position: relative; float: left; } ul.nav > li > a { display: block; padding: 0 20px; color: #FFFFFF; text-transform: uppercase; font-size: 1.083em; font-family: "Oswald"; line-height: 40px; text-decoration: none; } ul.nav > li:hover > a, ul.nav > li:active > a { -webkit-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); -moz-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15); background-color: rgba(51,63,79,.09); color: #8E5452; } ul.nav li:hover:first-child a, ul.nav li:active:first-child a { -webkit-border-radius: 0 0 0 7px; -moz-border-radius:0 0 0 7px; border-radius:0 0 0 7px; } /*# Navigation / Sub-Menu==================================================*/ul.nav li:hover > ul { display: block; left: 0; background-color: #333f4f;} /*ul.nav li ul li { width: 150px; }*//*# Media Queries==================================================*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) { .userlogin_top { height: 70px; } .userlogin_top a { margin-left: 70px; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) { /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) { .userlogin_top { height: 60px; } .userlogin_top a { margin-left: 170px; line-height: 60px; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) { .userlogin_top { height: 50px; } .userlogin_top a { margin-left: 110px; line-height: 50px; } /* # Navigation Menu -------------------------------------------------- */ .navigation { height: auto; } ul.nav { display: none; visibility: hidden; } .nav-btn { display: block; padding-top: 5px; padding-bottom: 5px; font-size: 20px; color: #FFFFFF; text-align: center; cursor: pointer; } .nav-btn:before { content:"Menu"; }} Now this is a design still in the process, but bottom line is that whenever i have a table/mobile view (all other designs that is higher than 960px width), then as you see in my CSS media query i have made a simple ":before" to make the "Menu" appear. Here comes my problem, i followed a simple JS tutorial on youtube on how to make a responsive navigation-menu and it dosen't work whenever i click on the menu. I wonder if anyone can see where the error is? Because not sure where to look to be honest... hoping someone can help me out where i can't help myself hehe Thanks in advance! Regards, rootKID.

Hello @gong First that i noticed is that you need to insert this into your "<head></head>" area: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> This peace of code detects mobile website sizes/etc. You also need this code instead of "<!DOCTYPE>" to have HTML5 working, that i remember, not sure: <!DOCTYPE html> Add this peace of code RIGHT AFTER/BELOW the "<!DOCTYPE html>" code: <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> It will help alot when you use HTML5 on your website etc This is my own code from the "<!DOCTYPE html>" part to the "<body>" start: <!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>Hjem</title><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/smoothmenu.js"></script><link rel="stylesheet" href="style/base.css"><link rel="stylesheet" href="style/skeleton.css"><link rel="stylesheet" href="style/skillet.css"><link rel="stylesheet" href="style/main.css"><!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><link rel="shortcut icon" href="style/images/favicon.ico"></head><body> I imagine you can get a few ideas from my own work? Hope this helps, comment if not

Hello W3S, it's been a while. Now i need help once again x). Well i'm currently trying to make a sub-menu to my website, however not working for some reason and would like to know if anyone in here can spot the error in the CSS/HTML if possible since i have no clue regarding where the error is, i have almost tried everything that i am aware off and still no results :/. Hoping you can help me somehow. This is my HTML file as a start: <?php/*THIS PROJECT USES 960GRID SYSTEM!*/ob_start();session_start();# Database Settings & Setuprequire_once("database/db.core.php");# Functions Libraryrequire_once("includes/functions.php");?><!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>Hjem</title><script type="text/javascript" src="js/jquery.js"></script><!--<script type="text/javascript" src="js/smoothmenu.js"></script><script type="text/javascript">ddsmoothmenu.init({ mainmenuid: "navigation", orientation: "h", classname: "navigation", contentsource: "markup"});</script>--><link rel="stylesheet" href="style/base.css"><link rel="stylesheet" href="style/skeleton.css"><link rel="stylesheet" href="style/skillet.css"><link rel="stylesheet" href="style/main.css"><!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><link rel="shortcut icon" href="style/images/favicon.ico"></head><body><?phpecho "<div class='container'>"; // Sixteen Columns (Banner AND Logo, Userlogin, Menu) echo "<div class='sixteen columns'>"; // Banner AND Logo echo "<div class='ten columns half-bottom home_banner'>"; echo "Banner/Logo"; echo "</div>"; // Banner AND Logo // LinkedIN Login echo "<div class='five columns half-bottom userlogin_top'>"; echo "<a href='#'>Bruger Login</a>"; echo "</div>"; // LinkedIN Login // Menu echo "<div class='sixteen columns half-bottom navigation'>"; echo "<ul>"; // Subject 1 echo "<li><a href='index.php'>Subject 1</a>"; echo "<ul class='nav_sub_two'>"; echo "<li><a href='#'>Subject 1.1</a></li>"; echo "<li><a href='#'>Subject 1.2</a></li>"; echo "<li><a href='#'>Subject 1.3</a></li>"; echo "</ul>"; echo "</li>"; // Subject 2 echo "<li><a href='#'>Subject 2</a>"; echo "<ul class='nav_sub_two'>"; echo "<li><a href='#'>Subject 2.1</a></li>"; echo "<li><a href='#'>Subject 2.2</a></li>"; echo "<li><a href='#'>Subject 2.3</a></li>"; echo "</ul>"; echo "</li>"; // Subject 3 echo "<li><a href='#'>Subject 3</a>"; echo "<ul class='nav_sub_two'>"; echo "<li><a href='#'>Subject 3.1</a></li>"; echo "<li><a href='#'>Subject 3.2</a></li>"; echo "<li><a href='#'>Subject 3.3</a></li>"; echo "</ul>"; echo "</li>"; echo "</ul>"; echo "</div>"; /* echo "<div class='sixteen columns half-bottom navigation'>"; echo "<ul>"; // Forside echo "<li><a href='index.php'>Forside</a></li>"; // Job Søgere echo "<li><a href='#'>For Jobsøgere</a>"; echo "<ul class='sub-menu'>"; echo "<li><a href='#'>Uopfordret ansøgning</a></li>"; echo "<li><a href='#'>Emnebank</a></li>"; echo "</ul>"; echo "</li>"; // For Virksomheder echo "<li><a href='#'>For Virksomheder</a>"; echo "<ul class='sub-menu'>"; echo "<li><a href='#'>Processen for jer</a></li>"; echo "<li><a href='#'>Rekruttering og udvælgse</a></li>"; echo "<li><a href='#'>Headhunnting</a></li>"; echo "<li><a href='#'>Personlighedstest</a></li>"; echo "<li><a href='#'>Referencer</a></li>"; echo "</ul>"; echo "</li>"; // Ledige Stillinger echo "<li><a href='#'>Ledige Stillinger</a>"; echo "<ul class='sub-menu'>"; echo "<li><a href='#'>Processen for dig</a></li>"; echo "</ul>"; echo "</li>"; // Kontakt echo "<li><a href='#'>Kontakt</a>"; echo "<ul class='sub-menu'>"; echo "<li><a href='#'>Om RightMatch</a></li>"; echo "<li><a href='#'>Mission & Vision</a></li>"; echo "<li><a href='#'>Nyt og artikler</a></li>"; echo "</ul>"; echo "</li>"; echo "</ul>"; echo "</div>"; // Menu */ echo "</div>"; // Eight Columns (News Blog) echo "<div class='eleven columns half-bottom home_news'>"; echo "Sidste Nyheder"; echo "</div>"; // Eight Columns (Something) echo "<div class='five columns half-bottom home_feed'>"; echo "LinkedIN Feed"; echo "</div>"; // Sixteen Columns (Footer, Admin Login) echo "<div class='sixteen columns'>"; echo "<div>"; echo "© Copyright 2014 - ".date("Y")." | <a href='http://www.rightmatch.dk' target='_blank'>www.rightmatch.dk</a>"; echo "</div>"; echo "<div>"; echo "<a href='#'>Admin Login</a>"; echo "</div>"; echo "</div>"; echo "</div>";?></body></html> This is my CSS file: body { margin-top: 10px; }.home_banner { height: 70px; background-color: #F1F1F1; }.userlogin_top { height: 70px; } .userlogin_top a { margin-left: 100px; line-height: 70px; text-decoration: none; }.home_news {background-color: #C2C2C2; }.home_feed { background-color: #C2C2C2; }/*--------------------------------*//* NAVIGATION - MAIN *//*--------------------------------*/.navigation { clear: both; height: 40px; background-color: #F2F2F2; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;} .navigation > ul > li { position: relative; float: left; } .navigation > ul > li > a { display: block; padding: 0 20px; color: #2A2B2B; text-transform: uppercase; font-size: 1.083em; font-family: "Oswald"; line-height: 40px; } .navigation > ul li a.child {padding-right: 33px;} .navigation > ul > li:hover > a, .navigation > ul > li.active > a { -webkit-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); -moz-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15); background-color: rgba(0,0,0,.09); } .navigation li:hover:first-child a, .navigation li.active:first-child a { -webkit-border-radius: 0 0 0 7px; -moz-border-radius:0 0 0 7px; border-radius:0 0 0 7px; } /* .ie7 .navigation li:hover a, .ie7 .navigation li.active a, .ie8 .navigation li:hover a, .ie8 .navigation li.active a { background: url(images/navigation/mask.png) repeat; } *//*--------------------------------*//* NAVIGATION - SUBMENU *//*--------------------------------*/.navigation ul li ul { position: absolute; left: 0; z-index: 9999; display: none; visibility: hidden; padding: 10px 0 0 0; height: auto;}.navigation ul.nav_sub_two li ul {padding: 0 0 0 10px !important;}.navigation ul li ul li {width: 144px;}.navigation ul.nav_sub_two li:first-child { -webkit-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; border-top: none;}.navigation ul.nav_sub_two li:last-child { -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;}.navigation ul.nav_sub_two li { position: relative; padding: .5em 0; border-top: 1px dashed #3A3A3A; padding-left: 8px; background-color: rgba(0,0,0,.9);}/*.ie7 .navigation ul.sub-menu li,.ie8 .navigation ul.sub-menu li { background-color: #000;}*/.navigation ul li ul li a:after { position: absolute; left: 4px; top: 7px; display: block; width: 16px; height: 16px; background: url(images/navigation/bg-nav.png) no-repeat left bottom; content: '';}.navigation ul li ul li a { padding-left: 28px; color: #FEFEFE; }.navigation ul.nav_sub_two li:hover > a { color: #F15B19 !important; } /*#Media Queries==================================================*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) { .userlogin_top { height: 70px; } .userlogin_top a { margin-left: 70px; }}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) {}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) { .userlogin_top { height: 60px; } .userlogin_top a { margin-left: 170px; line-height: 60px; }}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) { .userlogin_top { height: 50px; } .userlogin_top a { margin-left: 110px; line-height: 50px; }} I am currently using "getskelleton" framework for my website, would help alot if anyone in here could help me out somehow Thanks in advance!

Ok, so i could not find this anyways, i don't know maybe i did not loot hard enought but seems faster to just ask here instead since i think this one u all might know except me hehe . I'm trying to expand my knowledge inside CSS Mobile websites, but not only mobile also bigger screens like TV for screens (like mine etc) and so on. I was thinking, does it really "NEED" to be specific numbers before the mobile or screen reacts to the browser? Example: We know that ipads (portrait) uses 768px as a minimum and maximum as 1024px... this is what i have so far: @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { #wrapper { margin: 0 auto; min-width: 768px; max-width: 1024px; background-color: #485778; } } And i'm very surten that i got this one right (tell me if i'm wrong)... however, what if i were to build my "own" design? A screen that has something that is between that number or just 1px "above" the 1024px.. do i just add in another pixel like this 1025px and then it will react as normal? My bottom line question is this, does the media query only react on specific numbers related to devices OR is it also possible to related this to custom build devices and screens? Hope someone can answer as always, thanks!

hmm... u suppose i see ur point, but the way i have build my website is a little bit complicated... i have developed my own "sort of" website design/theme template, so not sure how to re-do the whole thing and then use the MySQLI the proper way as u told me too...

hmm... starting to make sence x)... Will try and see if it's working later when home x)...

ohh... did not realise that one before you told me, how embarrasing! Thanks! -.-'... EDIT I'm not sure, but i noticed that i only get the "filename" and not the extension to my database via "$tab" variable... could it be because inside my DB i actually uses the extension on each file? like "filename.php"... How do i get the filename + extension Oo?

Sorry for the late reply, i have just begun in schools again so did not really have time before now to answer. But as a start, i'm trying to learn MySQLI and only because i actually DO know normal MySQL, not sure about PDO tho... What i am trying to do is to "like i stated previous" to make a working menu that i can use on my files that is in the "root" of my server... Why i'm making a "object" in the switch is because of that i'm using it on the "query" function i made... like i also stated in the earlier/previous posts is the functions i have here is still in a "beta" mode. The project i'm working on is a little bigger than i can explain "i think"... but the reason i'm trying to make the menu as i wish it to work is that i'm trying to make a website that can have ALOT websites within the source code i'm trying to work on. An example is that if i have a file that is called "webshop.php" and another called "forums.php"... forums are normally not using the "Webshop" part... so, in order to make sure the file is NOT being used by any users on the forum AND on the same website/template design used, the user will get an error message. The reason i made the object was to make an actual connection in the query function so it would work like a normal query... but like i said, the whole project is still in a "beta" mode, so working on the functionality. I can give you the whole project if you wanna see what i am trying to do here, because it is a little hard to explain what i'm trying to do here. The "main" thing is that i'm trying to make it easier for coders (me for instance) to make a new website with faster methods. The website will be able to build AND contain more than one website within itself, in other words then a coder can instead of just moving around between codes inside an editor, then he can gather the whole project under one website/place-project... I'm not sure if you understand what i'm trying to do or explain here, but if you wonna have the source i'm trying to build i'm more then willing to send it to you so you can see what i'm talking about. And yes, i do know what you mean about making a prepared statement and all that, but i just thought it would be easier to gather the whole thing under one function Oo?... What i wish is just to make this one work... it is vital for my project to work this one out and make sure it's working... Hope you have some sort of idea, or at least have some good tips on how to fix the DB-Connection function and query function x) And sorry for the bad english/language, i was partying hard last night and well.. got lucky hehe x)... that, and then i also just woke up -.-'. Thanks in advance if you still can help out Oo? Just ask if you wish me to try to explain the project later, might be i'm more awake and helpful than now haha ^^' Thanks again!