I'm creating a website. and I'm starting with the header first.
I have this code for my header page:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<a href="index.php">
<img border="0" class="logo" src="images/logo.png" width="15%" height="20%" align="left" /></a> <font size="15%"><div align="center" class="BDtext"> Title Here<br> Description Here</font></div><br>
<nav class="clearfix">
<ul class="clearfix">
<li class="home">Home</li>
<li class="about">About</li>
<li class="me">About Me</li>
<li class="sessions">Sessions</li>
</ul>
Menu
</nav>
</body>
</html>
Which I am aware that the align="left" is used to allow everything else to be positioned to the right of image.
however.
I only want the title and description to be to the right of the image.
in some web browsers, the menu bar goes over the image.
an example of this is when I use this code in my style.css:
#media only screen and (max-width : 320px) {
.BDtext {
display: none;
}
I want this to be aligned underneath the image.
Please can someone explain how I can keep the image aligned left but stop the menu bar from overlapping the image instead of using the br code?
please help.
thank you.
Related
I am using phpstorm to create project using php, bootstrap and jquery. In this Project,I got two errors. But i don't know how to solve this error.
Can anyone tell me what is the fault? I have attached two images.
Code
<html>
<head>
<title>boutique</title>
<link rel="stylesheet" href="css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/main.css" media="screen" title="no title" charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-----NavBar----->
<nav class="navbar navbar-default navbar-fixedtop">
<div class="container-fluid">
boutique
<ul class="nav navbar-nav">
<li class="dropdown">Men<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Pants</li>
<li>Shoes</li>
<li>Accessories</li>
<li>Watch</li>
</ul>
</li>
</ul>
</div>
</nav>
<!---Header------>
<div id="headerwrapper">
<div id="back-flower"></div>
<div id="logotext"></div>
<div id="for-flower"></div>
</div>
<script>
jquery(window).scroll(function () {
var vscroll=jquery(this).scrollTop();
jquery('#logotext').css({
"transform" :"translate(0px,"+vscroll/2+"px)"
});
var vscroll=jquery(this).scrollTop();
jquery('#back-flower').css({
"transform" :"translate("+vscroll/5+"px,-"+vscroll/12+"px)"
});
var vscroll=jquery(this).scrollTop();
jquery('#fore-flower').css({
"transform" :"translate(0px,"+vscroll/2+"px)"
});
});
</script>
</body>
</html>
Why do you using same name for var?
You can extract the scroll position using jQuery's .scrollTop() method
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
// Do something
});
Or try this;
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > some_number) {
// do something
}
});
I have a variable called $cat(which stands for 'category') in the URL.
Depending on whether it is "a" or "b" I swap the stylesheet using a link:
<?php
if($cat == "a") { ?>
<link rel="stylesheet" href="/css/styleA.css">
<?php }
elseif($cat == "b") { ?>
<link rel="stylesheet" href="/css/styleB.css">
<?php } ?>
styleA.css makes the background-color of the header blue, and styleB.css makes it red
<div id="header" data-role="header" data-position='fixed'>...</div>
if I click on a link that looks like this:
Click for red
Click for blue
the URL actually works (content is incuded depending on $cat) and I do get the value of $cat but the stylesheet does not seem to have swapped, since the color doesn't change. But if I reload the page (with the URL given by the link before) the stylesheets swap and everything works perfectly.
I used the same method for the desktop version of the website I'm working on and everything works perfectly fine.
This issue seems to only appear if I use jquery mobile.
Does anyone see why this isn't working as it should?
EDIT (adding html):
This is pretty much it, but here's the rest of it:
headpart:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<!-- Extra Codiqa features -->
<link rel="stylesheet" href="/css/codiqa.ext.css">
<link rel="stylesheet" href="/css/style.css">
<?php if($cat == "a") { ?> <link rel="stylesheet" href="/css/styleASS.css"> <?php }
if($cat == "b") { ?> <link rel="stylesheet" href="/css/styleBB.css"> <?php }
?>
<!-- jQuery and jQuery Mobile -->
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- Extra Codiqa features -->
<script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
</head>
<div data-role="page" id="page">
<div id="panel_menu" data-role="panel" data-display="overlay">
<ul data-role="listview">
<li role="heading">Navigation</li>
<li>Home</li>
<li>Products</li>
<li>Service</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
<div id="header" data-role="header" data-position='fixed'>
<h1>Header</h1>
Menu
</div>
<div data-role="content">
<?php include "$menu_page_content";?>
a
b
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" class="ui-icon-nodisc">
<ul>
<li><a href="#" id='language' data-icon='custom'>Change Language</a></li>
<li><a href="#" id='category' data-icon="custom" >Change Category</a></li>
<li><a href="#" id='contact' data-icon="custom" >Contact</a></li>
</ul>
</div>
</div>
</div><!-- page -->
EDITIT:
Uploaded it to a free hoster: here
You may either click on one of the links in the content area, or on "category" in the footer area. Click & reload the page.
If most of your styles are the same with the exception of the color I would suggest putting them in a single style sheet and writing in a class to the body.
For Example
.header {
/* general header styles margins paddings and whatnot */
}
.cat-a .header {
background-color: red;
}
.cat-b .header {
background-color: blue;
}
Then variably write the class in on the body
<body class='cat-<?php echo $cat; ?>'>
It must depends on how data are cached on the browser you're using.
Several solutions are possible.
You could not swap CSS stylesheet, but add style properties using PhP or Javascript. That way you'll be 100% sure it will change. (As long as the user has javascript by the way, PhP would make it really 100% sure)
Or force the browser to reload CSS sheets everytime, but it's not a bandwidth friendly solution, I would not recommend that.
In case you want to use it to save user's choice and reload the correct background everytime, give a look at this :
http://www.dynamicdrive.com/forums/archive/index.php/t-44389.html
Didn't find any SO link though
I am very new in codeigniter and I am facing lots of problems while I develop my website with it. I am facing basic navigation problem. First of all I've to say where my files are situated. My css,js and image file are situated at the root folder, that is where the application folder is situated. And my other files which contains html, php, js code are situated in view folder . My controller is like that:
<?php
class Saffron extends CI_Controller
{
function index()
{
$this->load->view('header');
$this->load->view('index');
$this->load->view('footer');
}
function book_table()
{
$this->load->view('book_table');
}
}
?>
I am trying to navigate to my 'book_table.php' page from my home page. Now see my nevigation.php page from where I am navigating my webpages (just showing the basic header part and anchor tags):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/book.css">
<!--<link href='http://fonts.googleapis.com/css?
family=Great+Vibes' rel='stylesheet' type='text/css'>-->
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/tms-0.4.1.js"></script>
<script src="js/vpb_script.js"></script>
<script src="js/pop.js"></script>
<!--start popup window ref-->
<link href="css/colorbox.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery_002.js"></script>
<script>
$(document).ready(function(){
$(".image_show").colorbox({rel:'image_show', transition:"fade"});
});
</script>
<!--end popup window ref-->
<script>
$(document).ready(function(){
$('.slider')._TMS({
show:0,
pauseOnHover:true,
prevBu:false,
nextBu:false,
playBu:false,
duration:700,
preset:'fade',
pagination:true,
pagNums:false,
slideshow:8000,
numStatus:false,
banners:false,
waitBannerAnimation:false,
progressBar:false
})
});
</script>
<style type='text/css'>
/*This will work for chrome */
#vpb_general_button{
padding:5px 2px 4px 2px;
}
/*This will work for firefox*/
#-moz-document url-prefix() {
#vpb_general_button{
padding:5px 2px 6px 2px;
}
}
</style>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/
internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/
banners/warning_bar_0000_us.jpg" border="0" height="42"
width="820" alt="You are using an outdated browser.
For a faster, safer browsing
experience,
upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body>
<div class="nav_b">
<nav>
<ul class="menu">
<li ><a href="index.html">
Online Order
</a>
</li>
<li>
<a href="<?php echo base_url(); ?>
index.php/saffron/book_table">Book Table
</a>
</li>
<li><a href="#">
Gallery
</a>
</li>
<li>
<a href="#">
About Us
</a>
</li>
<li>
<a href="#">
Awards
</a>
</li>
<li>
<a href="#">
Contact Us
</a>
</li>
</ul>
<div class="clear"></div>
</nav>
</div>
</body>
Now the problem is that I can navigate my Book table page but without the design. It's loading just like a basic html page, I can't understand why it's happening, because it doesn't find the css, js and images, isn't it? But my home page finds all and is fine, then why not the page(Book table) i am nevigating not finding the css,js and images?
In this scenario make use of base_url();. In application/config/config.php specify $config['base_url'] = 'http://www.yoursite.com';
Then in view change the link href and script src
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo(base_url());?>css/reset.css">
<script src="<?php echo(base_url());?>js/jquery-1.7.min.js"></script>
I'm working on my own personal site here. If you hover over any of the nav bar elements you will notice there is some flicker and not all of the elements are visible. You can verify this via F12. It seems to me that the <aside> tag is "hiding" the info I'm looking for.
Would someone please tell me how to bring the nav bar to the front of something. I'm not really sure what's going on here.
index.php:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Grown Kidd Creations</title>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<header>
<img alt="Picture of me and Cian" src="img/caindaddysleepin.jpeg" title="Cian and Daddy">
<?include_once 'nav/nav.php';?>
</header>
<aside class="left"><p>No idea what to put here. how about you fill out the form and tell me?</p></aside>
<aside class="right">
Recent News/Updates:<br/>
<span class="undercon">This will be updated soon with links and maybe a blog.</span>
<ul>
<li>Cian</li>
<li>Work</li>
<li>Family</li>
</ul>
</aside>
<footer>
Send me some love at BillyThaKidd04#gmail.com<br/>
Or find me at:<br/>
<div class="g-plus" data-href="https://plus.google.com/109325835178774768962?prsrc=3" data-theme="dark" rel="author"></div>
Follow #ThaKidd04
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</footer>
</body>
</html>
nav.php
<?//navigation bar?>
<script>
var el = document.getElementsByTagName("body")[0];
el.className = "";
</script>
<noscript>
<!--[if IE]>
<link rel="stylesheet" href="nav/css/ie.css">
<![endif]-->
</noscript>
<link rel="stylesheet" href="nav/css/nav.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<nav id="topNav" class="no-js">
<ul>
<li>Home</li>
<li>Projects
<ul>
<li>Personal Projects</li>
<li>Work Projects</li>
<li class="last">This Site</li>
</ul>
</li>
<li>Contact Me
<ul>
<li>FaceBook</li>
<li>Google +</li>
<li>LinkedIn</li>
<li class="last">Email Me</li>
</ul>
</li>
<li>About Me
<ul>
<li>Blog</li>
<li>Resume</li>
<li class="last"><a target="new" href="https://github.com/billythakidd04" title="GitHub">GitHub</a></li>
</ul>
</li>
</ul>
</nav>
<script src="nav/js/modernizr.custom.69568.js"></script>
<script>
(function($)
{
//cache nav
var nav = $("#topNav");
//add indicators and hovers to submenu parents
nav.find("li").each(function()
{
if ($(this).find("ul").length > 0)
{
$("<span>").text("").appendTo($(this).children(":first"));
//show subnav on hover
$(this).mouseenter(function()
{
$(this).find("ul").stop(true, true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function()
{
$(this).find("ul").stop(true, true).slideUp();
});
}
});
})(jQuery);
</script>
You should post your css since it seems that the whole issue is connected—or at least can be solved—by a z-index adjustment:
The z-index CSS property specifies the z-order of an element and its
descendants. When elements overlap, z-order determines which one
covers the other. An element with a larger z-index generally covers an
element with a lower one.
I basically use php variables to store the value of the title and the body's ID.
This last one is a technique to have my button (pressed) in the navigation according to which section of the page the user is (in this case the user will know he is currently at "home").
Beginning of my index.php:
<?php
$title = "New Project";
$body = "home";
include("common/header.php");
?>
<div id="content">
<div class="container">
<div id="tagline">
Beginning of my header.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="styles/slimbox2.css" />
<link rel="stylesheet" type="text/css" href="styles/global.css" />
<link rel="stylesheet" type="text/css" href="styles/home.css" />
<link rel="stylesheet" type="text/css" href="styles/contact.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type="text/javascript" src="scripts/slimbox2.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</head>
</head>
<body id="<?php echo $body; ?>">
<div id="header">
<div class="container">
<div id="topbar">
<h1>wider design</h1>
<ul id="lang">
<li>English</li>
<li>Español</li>
<li>中文(繁體)</li>
<li>中文(简体)</li>
</ul>
<ul id="nav">
<li class="home">home</li>
<li class="products">products</li>
<li class="about">about</li>
<li class="contact">contact</li>
</ul>
To let the user know in which section he/she is:
#home li.home a, #products li.products a, #contact li.contact {
color: #999;
}
is there a simpler way of doing this?
Am I using unnecessary those PHP variables?
Yes, what you're doing is fine. I do something similar with a PageTemplate class. In addition to setting the title and navigation, it allows navigation links to appear based on user authentication, allows javascript and css to be added to the head section, etc.
What you're doing is very common. There are a million ways to do it, but they'll all require setting some variables.
janoChen,
I use the following method:
// get the url
$url= $_SERVER['PHP_SELF'];
// add a class on the menu item
<ul id="lang">
<li><a href="index.php" <?php if (strpos($url, "index.php")) { echo " class='active'"; } ?>>English</a></li>
//with css I set a style for the class active
li a.active {
color: #990000;
}
But you method also works.
Or else use an MVC framework like CakePHP
This works, but you should consider using a template engine such as Smarty instead.