I want to make it for my site,
This is my question:
If the user is using a computer to view my web page the css should be
<link rel="stylesheet" href="/pc.css" type="text/css" media="all" />
But if they use mobile the css should be
<link rel="stylesheet" href="/mobile.css" type="text/css" media="all" />
How will I do it. I want html not php
You could do something like this through media queries
<link rel="stylesheet" media="screen and (min-device-width: 1024px)" href="pc.css" />
<link rel="stylesheet" media="screen and (max-device-width: 1024px)" href="mobile.css" />
If you wanted to go the Javascript route for this
function adjustStyle(width) {
width = parseInt(width);
if (width < 1024) {
$("#size-stylesheet").attr("href", "css/mobile.css");
} else {
$("#size-stylesheet").attr("href", "css/pc.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
It may be more reliable do accomplish this with media queries in CSS. Because some browsers do not have JavaScript enabled, especially mobile browsers, it is considered a best practice to support basic functionality without JavaScript. See this answer by Haylem for more.
A great explanation of CSS3 media queries is available in this SmashingMagazine.com article, "How to Use CSS3 Media Queries". In your example, you could quickly implement this as follows:
<style>
#import url(/pc.css) (min-width:480px);
#import url(/mobile.css) (max-width:480px);
</style>
Naturally this will not work in ancient versions of Internet Explorer, so you might need to consider this also:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="/pc.css"/>
<![endif]-->
However, if you do not have strong experience with responsive web design (RWD), you may be better off considering a CSS framework like Foundation or Bootstrap. Check out this Mashable.com article for a good overview.
You might also want to check out HTML5 Boilerplate which is used in the more comprehensive quick start kit, INIT.
Related
I downloaded some free web templates and updating the site as per my needs. I observed most of site content is displayed in upper case. Can someone help me, how to disable this?
Attached is the screenshot of the page. All links and content is displayed in uppercase.
How to display this in normal case letters?
Following is my html before body
<!DOCTYPE html>
<html>
<head>
<title>Freee-Learn. Your learning partner...</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Free Style Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:100,300,400,500,700,800,900,100italic,300italic,400italic,500italic,700italic,800italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/myJavaScript.js"></script>
<!-- start menu -->
<script src="js/simpleCart.min.js"> </script>
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script>$(document).ready(function(){$(".memenu").memenu();});</script>
</head>
And also i observed, when the internet is off, the site is displayed in normal case letters.
It's the fonts that you're using in the website. The fonts are downloaded from an Google API. Download the fonts to use locally or use another font.
One of the web fonts you're leveraging (Alegreya Sans SC) is only available as a small caps family. When your "internet is off", the web font is not being loaded and therefore a default family is leveraged which most likely supports lower case.
To fix this, find where you're using Alegreya Sans SC within your stylesheets and simply switch to a more multi-case friendly family.
Looks like the google font Alegreya is causing this google.com/fonts/specimen/Alegreya+Sans+SC
On our company website http://exciga.com/Services.php# when one clicks on any of the services on the right hand side (ex: the IT Governance image), a Window Pops Up with information regarding IT Governance along with a Blue Menu on the left hand side. This Blue Menu can be seen in IE 10 but not in Chrome. Please help as I cant figure out what I have done wrong :-)
The 2nd issue I face is in the Service Lists. When I click on the list of Services (ex: the "+"sign near IT Governance), I get a list of services related to it. As you can see the fonts are different here. I am unable to place the same font as in the Service List header ("IT Governance"). If I try making a change, the font for the entire webpage changes. I want the font in the drop down list to be the same as the one in the Service List header ÏT Governance +" Hope I was clear for u guys.
Finally, what is the syntax to ensure that the size of an object does not change if I Zoom in and out in a browser.
The blue menu is actually present in Chrome. It's just that it's getting hidden by the pop up window's size: <div class="popupbox3_pm" id="popuprel3" style="display: block; margin-top: -355px; margin-left: -380px;">, which is its parent element. Because this <div> has position: fixed; and a set width/height, anything outside of its dimensions gets cut.
I'm not quite sure why the z-index: 999 on the blue menu is not setting it above the black space around it though. That might have to do with the placement of the element in the HTML. Also, it should have a higher z-element than the black fade box, which has z-index: 9999;.
First fix <head> section, you have included multiple jQuery libraries, if your plugins can work with latest jQuery (you should test it) then I suggest you to download jQuery 1.10.2 put it in your js folder and replace <script src="js/jquery-1.6.js" ></script> with <script src="js/jquery-1.10.2.min.js"></script>.
Now replace your <head> element with this new one and I wish you luck ;) P.S. I don't say that this will fix the problem you have.
<head>
<title>Exciga</title>
<meta charset="utf-8">
<meta name="description" content="Write short description of your site here.">
<meta name="keywords" content="write, site, keywords, here, like, this, comma, delimited">
<meta name="author" content="Name of the site author">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style2.css"> <!-- Why style2.css ? Is this another style for entire site or you could merge style.css with style2.css ? -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/hover/style_common.css">
<link rel="stylesheet" href="css/hover/style2.css">
<link rel="stylesheet" href="css/jquery.akordeon.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="popup/style.css">
<link rel="stylesheet" href="assets/application-d7d505356b55e600106ef945bd484e9f.css">
<script src="js/jquery-1.6.js"></script>
<!-- These scripts you can/should put just before the </body> tag, if after that some elements lose functionality then put that script again in the <head> section -->
<script src="js/atooltip.jquery.js"></script>
<script src="js/jquery.akordeon.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/cufon-replace.js"></script>
<script src="js/Vegur_300.font.js"></script>
<script src="js/PT_Sans_700.font.js"></script>
<script src="js/PT_Sans_400.font.js"></script>
<script src="popup/custom.js"></script>
<script src="assets/application-aa8aaa30c70f4a42013dec916e9b29b0.js"></script>
<script>
$(function() {
$('#buttons').akordeon();
$('#button-less').akordeon({ buttons: false, toggle: true, itemsOrder: [0, 1,2,3,4,5,6,7] });
});
</script>
<!-- End of scripts -->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="all">
<![endif]-->
<!--[if lt IE 7]>
<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]-->
</head>
Update: About font-family for the Service Lists open style.css and insert code below then change font family and size in accordance with your desires.
.responsive,
.responsive-half {
font-family: Verdana !important;
font-size: 16px !important;
}
In my site, I have a css file with all the media queries. how can i use a condition not to use that file if its IE8? i am using html and jquery. IE8 does not support media queries. so i want to restrict IE8 to get that media-queries.css file. but all other browsers should get it. It can be jquery or javascript.
the css is included in the head:
<head>
<link rel="stylesheet" type="text/css" href="/templates/css/style.css" />
<!-- dont want this only in IE8 and bellow -->
<link rel="stylesheet" type="text/css" href="/templates/css/media-queries.css" />
</head>
Just use:
<link rel="stylesheet" type="text/css" href="/templates/css/style.css" />
<!--[if gt IE 8]><!-->
<link rel="stylesheet" type="text/css" href="/templates/css/media-queries.css" />
<!--<![endif]-->
The code means: if greater than IE8 take notice of this html. Only IE reads these queries so by adding <!--> and <!-- other browsers just see two comments with a link to a CSS file in between.
Launched my website – http://www.artsbrand.co.uk – yesterday without having tested the finished product on IE. Now that I have, it initially brings up completely unstyled html, then after a couple of seconds the screen just goes blank. When that happens, this is the only thing in the source:
<script defer onreadystatechange='google.loader.domReady()' src=//:></script>
Does this have something to do with my Google Custom Search Engine?
I have a few conditional comments, which I'll list below in case they're important:
First I set up the html class (the no-js class is for Modernizr):
<!--[if lt IE 7 ]><!--> <html class="ie ie6 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 7 ]><!--> <html class="ie ie7 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 8 ]><!--> <html class="ie ie8 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 9 ]><!--> <html class="ie ie9 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"><!--<![endif]-->
Then I set up three different stylesheets with media queries:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 489px)" href="<?php bloginfo('stylesheet_directory'); ?>/device.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 490px) and (max-width: 899px)" href="<?php bloginfo('stylesheet_directory'); ?>/smallscreen.css" />
<!--<![endif]-->
<link rel="stylesheet" type="text/css" media="screen and (min-width: 900px)" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
This one's just for Sticky Footer (as per the instructions here http://www.cssstickyfooter.com/style.css ):
<!--[if !IE 7]><!-->
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<!--<![endif]-->
I only have access to IE7 and IE9, but the behaviour is exactly the same in both of those – 1-2 seconds of unstyled page (I saw a split second of CSS once in IE9!) followed by sheer blankness. I'd be very grateful for any help you guys can offer!
EDIT - I'm less convinced it has anything to do with conditional comments now – I just tried getting rid of all of them and it made no difference at all. I should probably also mention that I've tried both versions of Google CSE (Search Element V1 and Search Element V2) and the results were the same.
UPDATE - I've got a fairly messy workaround now, although the search will have to be out of action in IE for now. The problem was a combination of my dodgy use of media queries/conditional comments (I'm new to both of them!) and the still unknown issue that's causing IE to react badly with the Google CSE. So anyway here's what my stylesheet links look like now:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 489px)" href="<?php bloginfo('stylesheet_directory'); ?>/device.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 490px) and (max-width: 899px)" href="<?php bloginfo('stylesheet_directory'); ?>/smallscreen.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 900px)" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
<!--<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
<![endif]-->
Meanwhile the search script is wrapped in [if !IE] comments.
This is just a guess because I can't get my IE7 machine to boot right now, but I think it may be because the script you have is before the closing head tag.
From what I remember, IE does weird things when you try to access elements on the page that haven't been fully parsed yet.
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); is essentially trying to insert the new script tag before the very first script tag, which is inside the uncompleted head tag.
I thought s.parentNode would be null (or undefined) in this case, but apparently it's something else, maybe the whole document? Who knows, IE does crazy things.
At any rate, what I'd try is moving that google script tag inside the body of your page, instead of in the head, and see if that makes a difference.
As for the CSS, IE before 9 doesn't support media queries. You can use something like respondjs to make it work in IE, but you need to put the queries in the CSS file, not in the link tag itself.
I need help writing a persistent stylesheet switcher. I have found an article on ALA but for whatever reason I cannot get it to work!
I have three stylesheets, the default one for the layout and another two which the user will switch between (adjusting the colours). I may later add one for print but I am not there yet.
The style switcher javascript file can be found here http://www.alistapart.com/d/alternate/styleswitcher.js
I have this in the <head> of my page at the moment.
<script type="text/javascript" src="js/styleswitcher.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="alternate stylesheet" type="text/css" href="css/alt_style1.css" title="purple" />
<link rel="alternate stylesheet" type="text/css" href="css/alt_style2.css" title="red" />
I want the user's selection to be stored in a cookie so that it can be remembered.
The links that select the different stylesheets, in my <body> tag look like this.
purple
red
I really don't know what I am doing wrong. The stylesheet doesn't change. See it in action here - or not as the case is!
http://uni.michaelnorris.co.uk/