i have a page that displays a menu and im trying to make and learn to code a responsive layout using #media screen coding.
so i coded the following page;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Header Test</title>
<meta name="viewport" content="width=1024">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<link type="text/css" rel="stylesheet" href="font.css" />
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>
$(function(){
$(window).resize(function(){
if (window.innerWidth > 850) {
$("#nav").removeClass('vertical');
}
});
$("#menu").click(function(){
$("#nav").toggleClass('vertical');
return false;
});
});
</script>
</head>
<body>
<div id="header">
<div class="wrap">
<div id="logo">
<img src="http://www.real-creative.co.uk/new/img/logo-white.png">
</div>
<span id="menu"><img src="img/menu-icon.png" width="40" height="40" /></span>
<div id="navWrap">
<ul id="nav">
<li><h1>HOME</h1></li>
<li><h1>WORK</h1></li>
<li><h1>SERVICES</h1></li>
<li><h1>ABOUT</h1></li>
<li><h1>CONTACT</h1></li>
</ul>
</div>
</div>
</div><!--header-->
</body>
</html>
what I am trying to achieve is once the page is below 800 pixels wide the button to drop down the navigation appears, I made an image in Photoshop to show what the desired look I wanted, but im unsure on how to style lists to the way i show in the image.
can anyone please help me out.
URL for current site is:
http://www.real-creative.co.uk/new/
and here is the image;
http://www.real-creative.co.uk/new/viewport.png
appreciate if anyone can help me out.
There are many ways to do this, one approach is to use absolute positioning for your div#navWrap, so that it moves when your media query is active.
something like...
#navWrap{position:absolute;top:0;left:500px;}
#media all and (max-width: 800px) {
#navWrap{top:100px;}
#navWrap ul#nav{border:1px solid #f00;border-radius:10px;width:100px;}
#navWrap ul#nav li{display:block;border-radius:10px;margin:4px auto;}
}
example codepen - http://codepen.io/lukeocom/pen/pGjco
hope that helps...
Related
on my WordPress Website I want to display another logo on the mobile version than on the desktop version. I manage to achieve this using the following code:
#media only screen and (max-width: 981px) {
#logo {
content: url("URL OF MOBILE LOGO");
}
}
This works pretty decent but now I have big problem. The link for this logo is missing. Usually the logo should link to "/home/" However, it does not.
I tried to add the link in the header via html with the following code:
<a id="logo" href="/"><span>Return to Home Page</span></a>
This just clones the mobile logo and puts in above or below the header. But with a link :/ ...
Could you guys please help me out on this one :)
Best regards,
Marius
You can use JQuery append() to achieve this.
Final Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#media only screen and (max-width: 981px) {
.mobileLogo a:before {
content: 'MobileLogo';
display: block;
}
}
</style>
</head>
<body>
<header>
<div class="desktopLogo">DesktopLogo</div>
<!-- append mobileLogo here -->
</header>
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- custom script -->
<script>
$('header').append('<div class="mobileLogo"></div>');
</script>
</body>
</html>
First off, my website is: http://www.volunteeringnews.com
On the website I want white to continue to the bottom of the website but he is now cutting it just after the background image.
I could offcourse make my img 10000 px high but that seems to create a very big image in size.
So far I tried creating a new Div to go around the background divs but then he just goes over the background divs.
I tried z-index but that did nothing.
I tried to use the IMG from HTML and not CSS but that got my img out of line. (I have the background split in two images for the top and the main section).
I've been on it all day and hoped that someone might be able to help me out.
ps.I'm sorry if this is kind of a noob question but I am only on building websites for a few months.
Thank you!
#head{
margin:0px;
height:215px;
background-image:url(../img/background/background_01.gif);
background-repeat:no-repeat;
width:100%;
}
#mainc {
margin-top: 0px;
width:90%;
position:absolute;
background-image:url(../img/background/background_02.gif);
background-repeat:no-repeat;
min-height:100%;
add
background-color:#fff;
to your #mainc and #head as well ;)
just by adding
background-color: #FFFFFF;
to your #mainc style should do the trick
First off start by cleaning up your html which currently looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering News- All your volunteering news plus a database to look for your own advernture. - Cheap and free</title>
<link href="css/styles.css" rel="stylesheet">
<link href="wordpress\wp-content\themes\twentytwelve\style.css" rel="stylesheet">
<meta name="Volunteering" content="width=device-width, initial-scale=1.0">
</head>
<!--body-->
<body>
<div class="topnav"></div>
<header><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering Field- Volunteer direct, cheap and easy</title>
<link href="css/styles.css" rel="stylesheet">
<meta name="Volunteering" content="width=device-width, initial-scale=1.0">
<div class ="sql">
</div>
</head>
<body>
<div id="wrapper">
<img src="img/form/background.jpg" class="stretch" alt="" />
</div>
<div id="head">
<div class="logo">
<img src="img/head/logo.png">
</div>
<div class="menu-top">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering Field- Volunteer direct, cheap and easy</title>
<link href="css/styles.css" rel="stylesheet">
<meta name="Volunteering" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="navigation">
<ul id="nav" class="drop">
<li>Home</li>
You have multiple doctypes, multiple html tags, multiple head tags, multiple css declarations. This will never work properly.
I am using pre-built CSS and HTML to display a drop down menu on my site, but the menu does not work in Internet Explorer. I am not sure if it is the doctype or what, I have it linked to a csshover.htc page, as it came with, but it still won't work. I will list the code below for the first section of the menu that contains the doctype and file link, as well as the csshover.htc code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
<title>Mega Drop Down Menu</title>
<!--[if IE 6]>
<style>
body {behavior: url("csshover.htc");}
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px;
</style>
<![endif]-->
<body>
<ul id="menu">
<li>Home<!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome !</h2>
</div>
<div class="col_2">
<p></p>
</div>
</div><!-- End 2 columns container -->
And here is the info from the csshover.htc file:
<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)): (hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\- ]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;var q=/\.([a-z0-9_\-]*on(hover|active|focus))/i;var s=/msie (5|6|7)/i;var t=/backcompat/i;var u={index:0,list:['text-kashida','text-kashida-space','text-justify'],get:function(){return this.list[(this.index++)%this.list.length]}};var v=function(c){return c.replace(/-(.)/mg,function(a,b){return b.toUpperCase()})};var w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;i<l;i++){this.parseStylesheet(a[i])}},parseStylesheet:function(a){if(a.imports){try{var b=a.imports;var l=b.length;for(var i=0;i<l;i++){this.parseStylesheet(a.imports[i])}}catch(securityException){}}try{var c=a.rules;var r=c.length;for(var j=0;j<r;j++){this.parseCSSRule(c[j],a)}}catch(someException){}},parseCSSRule:function(a,b){var c=a.selectorText;if(m.test(c)){var d=a.style.cssText;var e=n.exec(c)[1];var f=c.replace(o,'on$1');var g=c.replace(p,'.$2'+f);var h=q.exec(g)[1];var i=e+h;if(!this.callbacks[i]){var j=u.get();var k=v(j);b.addRule(e,j+':expression(CSSHover(this, "'+f+'", "'+h+'", "'+k+'"))');this.callbacks[i]=true}b.addRule(g,d)}},patch:function(a,b,c,d){try{var f=a.parentNode.currentStyle[d];a.style[d]=f}catch(e){a.runtimeStyle[d]=''}if(!a.csshover){a.csshover=[]}if(!a.csshover[c]){a.csshover[c]=true;var g=new CSSHoverElement(a,b,c);this.elements.push(g)}return b},unload:function(){try{var l=this.elements.length;for(var i=0;i<l;i++){this.elements[i].unload()}this.elements=[];this.callbacks={}}catch(e){}}};var x={onhover:{activator:'onmouseenter',deactivator:'onmouseleave'},onactive:{activator:'onmousedown',deactivator:'onmouseup'},onfocus:{activator:'onfocus',deactivator:'onblur'}};function CSSHoverElement(a,b,c){this.node=a;this.type=b;var d=new RegExp('(^|\\s)'+c+'(\\s|$)','g');this.activator=function(){a.className+=' '+c};this.deactivator=function(){a.className=a.className.replace(d,' ')};a.attachEvent(x[b].activator,this.activator);a.attachEvent(x[b].deactivator,this.deactivator)}CSSHoverElement.prototype={unload:function(){this.node.detachEvent(x[this.type].activator,this.activator);this.node.detachEvent(x[this.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})();
Change over to <!DOCTYPE HTML>
and add
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
into your head
also add a <html> tag and </head> tag
for example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
</head>
<body>
<!-- Content -->
</body>
</html>
Your missing a lot of tags which are essential add these in and im sure your problem should be fixed
you also aren't closing your <ul> tag and <li> tag
I have to create a DOM Tree for class and just wanted to know if I did it correctly before I turn it in. If anyone could confirm for me that it is correct or point out what I did wrong I would appreciate it. Here is the code:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Lab 2</title>
<link href="lab2.css" type="text/css" rel="stylesheet">
<script src="lab2.js"></script>
</head>
<body>
<h1>Images</h1>
<div id="content">
<img id="display" src="images/blank.gif" alt="Blank Image"><br />
<button onclick="change()" id="changeImage">Display Image</button>
<h2 id="description">The image is blank</h2>
</div>
</body>
</html>
The img and the h2 are children of the div, not siblings.
Also, what happened to the button and the br?
Im trying to put a rounded rectangle using Nifty technique. But not working help me. My Code is Below
st.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="nifty.js"></script>
<link href="niftyCorners.css" rel="stylesheet" type="text/css" />
<link href="niftyPrint.css" rel="stylesheet" type="text/css" />
<link href="stm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div.indian","#377CB1","#9BD1FA");
}
</script>
</head>
<body>
<div class="indian">
<p>I am an Indian</p>
</body>
</html>
stm.css
#charset "utf-8";
/* CSS Document */
.indian
{
height:300px;
width:300px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
}
Help me
Your <div class="indian"> is not closed. This is probably keeping the Javascript from finding the <div> in the DOM.
You need to set the "media" for your print stylesheet. The print stylesheet hides all of the work that the Nifty JS does.
You are not setting background colors for the page or the "indian" <div>. Without doing this, the effect will not work correctly.
I don't think that setting the height of the "indian" <div> is supported when using the Nifty technique.
Correcting these errors, your code works as seen here: http://demo.raleighbuckner.com/so/1277789/
Also, you should probably use the newer version of the Nifty technique found here: http://www.html.it/articoli/niftycube/index.html
Your HTML is incorrect. You are missing a closing DIV:
<body>
<div class="indian">
<p>I am an Indian</p>
</div> <!-- This was missing -->
</body>
Also, you're using the old version of Nifty. Try the newer version: http://www.html.it/articoli/niftycube/index.html