See it or yourself! The meal-category-box div has an inexplicable jump from the title to the rest of the content. We can't work it out?
My code is also shown here:
/* Begin Base */
body {
color: #245a03;
background-color: #e7f5df;
font-family: "Helvetica Neue Light", "HelveticaNeue-Light",
"HelveticaNeue", Helvetica, Arial;
font-size: 17px;
margin: 0;
padding: 0;
height: 100%;
}
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MealMarket</title>
<meta name="description" content="">
<meta name="author" content="" >
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap-responsive.css"/>
<link rel="stylesheet" href="/static/css/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Voces' rel='stylesheet' type='text/css'>
<script src="/static/bootstrap/js/bootstrap-alert.js"></script>
<script src="/static/js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body class="">
<div id="container">
<div id="header">
<a href="/"><h1>Meal Market</h1>
<span>Share food, get food, more merry mealtimes</span></a>
</div>
<div id="main" role="main" class="container">
<div id="user-info">
<img src="/static/images/pics/profile-default.jpg">
<div id="user-column-options">
<h3 style="word-wrap:break-word;">
Matt</h3>
<p>Credits: 10</p>
<ul>
<li>Make meal</li>
<li>Find meal</li>
<!--<li>Past meals</li>-->
</ul>
</div>
</div>
<!-- End user info column -->
<div id="stream">
<!-- Start user's coming hosted meals div -->
<div class="meal-category-box">
<h4>Coming Meals that You're Cooking</h4><br />
<div class="meal-box-small">
<div class="meal-details">
<p><h5><a href="/meals/matt/22/Apr/2012/05:30">
Fungus food</a></h5>
April 22, 2012, 5:30 a.m.
</p>
<p> (View map)</p>
<p style="margin-top: 10px;">
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</p>
</div>
</div>
<div class="clearer"> </div>
<div class="meal-box-small">
<div class="meal-details">
<p><h5><a href="/meals/matt/21/Apr/2012/19:00">
Lentil stew</a></h5>
April 21, 2012, 7 p.m.
</p>
<p> (View map)</p>
<p style="margin-top: 10px;">
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</p>
</div>
</div>
<div class="clearer"> </div>
</div>
<!-- End user's coming hosted meals div -->
<div class="clearer"> </div>
<div class="clearer"> </div>
<!-- Start other coming meals div -->
<div class="meal-category-box">
<h4>Other Upcoming Meal Invites</h4>
<div class="meal-box">
<img src="">
<div class="meal-details">
<p><h5><a href="/meals/jervin/13/Apr/2012/00:30">
Great flippin' food</a></h5>
</p>
<p>April 13, 2012, 12:30 a.m.<p>
<p> (View map)</p>
<p>Cooked by
<a href="/users/jervin/">
jervin</a>
</p>
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</div>
</div>
<div class="meal-box">
<img src="">
<div class="meal-details">
<p><h5><a href="/meals/jervin/29/Apr/2012/04:30">
Veggie curry</a></h5>
</p>
<p>April 29, 2012, 4:30 a.m.<p>
<p> (View map)</p>
<p>Cooked by
<a href="/users/jervin/">
jervin</a>
</p>
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</div>
</div>
</div>
<!-- End other coming meals div -->
</div>
<div class="clearer"> </div>
</div>
<div id="clearer"> </div>
<footer class="footer">
<hr>
<ul id="footer-links">
<li>About / FAQ</li>
<li>Privacy / Legal</li>
<li>Media</li>
<li>Contact</li>
</ul>
</footer>
</div>
</div> <!-- end of #container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/static/js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<!--<script defer src="/static/js/plugins.js"></script>
<script defer src="/static/js/script.js"></script>-->
<script src="/static/bootstrap/js/bootstrap-collapse.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".collapse").collapse({toggle: false});
});
</script>
<script type="text/javascript">
// On click...
$("#cross-icon").click(function() {
$('#new-user-box p').slideUp("slow")
$('#new-user-box').slideUp("slow");
});
</script>
<script> // Change UA-XXXXX-X to be your site's ID
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>
Remove clear: both; from the style for .meal-box-small.
#user-column-options is set to float: left;, so the clear: both; causes .meal-box-small to move below that.
How about the 70px bottom margin on your #header? (The Developer Tools: use them.)
div#header has a margin-bottom of 70px. Decrease that to lessen the space between your title and content.
Make this change in your HTML:
<!-- Start user's coming hosted meals div -->
<div class="meal-category-box">
<h4>Coming Meals that You're Cooking</h4>
<div class="meal-box">
<div class="meal-details">
Just change the div with the class meal-box-small to the class meal-box and all is fine.
Related
I'm having a lot of trouble stopping my header from going transparent whilst scrolling down the page. I'm not sure what is causing it (I used a template), but you can view the code here:
https://github.com/IF-Apps/IF-Charts
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>IF-Charts - Charts and Plates for Flight Simulation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<link rel="stylesheet" href="css/etline-font.css">
<link rel="stylesheet" href="bower_components/animate.css/animate.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</head>
<body id="top">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<section class="hero">
<section class="navigation">
<header>
<div class="header-content">
<div class="header-nav">
<nav>
<ul class="primary-nav">
<li>Home</li>
<li>IF-Charts</li>
<li>Learn More</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="navicon">
<a class="nav-toggle" href="#"><span></span></a>
</div>
</div>
</header>
</section>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="hero-content text-center">
<h1>IF-Charts</h1>
<p class="intro">Plan your flight with plates.</p>
</div>
</div>
</div>
</div>
</section>
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>Plan your flight</h3>
<p>Select the airport you would like charts for. Want to learn how to use charts? Check out the tutorial. PLEASE NOTE THAT THESE CHARTS ARE NOT FOR OPERATIONAL USE!</p>
<br>
<div class="fb-like" data-href="https://www.facebook.com/IF-Charts-1233474450057832/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div> <br> <br>
<br>
<div align="center">
<h2>Please choose:</h2>
<br />
<span>
<img src="img/takeoff-the-plane.png" alt="Departures" style="width:80px;height:80px;border:0;">
<img src="img/plane-landing.png" alt="Arrivals" style="width:80px;height:80px;border:0;">
</span>
<p>View all charts here.
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="footer-links">
Licence | <p><p>By Giacomo Lawrance.</p>
</div>
</div>
</div>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="bower_components/retina.js/dist/retina.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="bower_components/classie/classie.js"></script>
<script src="bower_components/jquery-waypoints/lib/jquery.waypoints.min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
I think it has to do with the CSS, but I am not sure.
The problem is that when at the top, the menu items cannot be seen. I just want the header to stay black. You can see the problem here:
https://if-charts.000webhostapp.com/
In your scripts.js file there is a function that adds or removes several things on scroll.
/***************** Header BG Scroll ******************/
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 20) {
$('section.navigation').addClass('fixed');
$('header').css({
"border-bottom": "none",
"padding": "35px 0"
});
$('header .member-actions').css({
"top": "26px",
});
$('header .navicon').css({
"top": "34px",
});
} else {
$('section.navigation').removeClass('fixed');
$('header').css({
"border-bottom": "solid 1px rgba(255, 255, 255, 0.2)",
"padding": "50px 0"
});
$('header .member-actions').css({
"top": "41px",
});
$('header .navicon').css({
"top": "48px",
});
}
});
});
Remove this function entirely.
Change
<section class="navigation">
To
<section class="navigation fixed">
If you want to use the other properties as well add them to the following classes in the CSS file.
header {
border-bottom: none;
padding: 35px 0;
}
header .member-actions {
top: 26px;
}
header .navicon {
top: 34px;
}
You need to add a background color to the navigation.
.navigation {
background: #232731;
}
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
I'm developing an ASP.NET MVC 5 app with Visual Studio 2015, C# and .NET Framework 4.6.1.
I have this _Layout.cshtml page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My product</title>
#Styles.Render("~/Content/css")
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
#RenderSection("Styles", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<img src="~/images/logo.png" alt="" /><br />
<span>Versión 2.0</span>
</div>
<div class="nav">
¡Hola, #User.Identity.Name!
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="container body-content">
#RenderSection("Body")
<hr />
<footer>
<p style="font-size:20px">© #DateTime.Now.Year - My Company</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
All my pages won't have vertical scrollbar and I want to show <footer> always at the bottom of the page.
How can I do it?
footer{
position:fixed;
bottom:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My product</title>
#Styles.Render("~/Content/css")
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
#RenderSection("Styles", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<img src="~/images/logo.png" alt="" /><br />
<span>Versión 2.0</span>
</div>
<div class="nav">
¡Hola, #User.Identity.Name!
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="container body-content">
#RenderSection("Body")
<hr />
<footer>
<p style="font-size:20px">© #DateTime.Now.Year - My Company</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
A footer that stays at the bottom of the page or 'sticky footer' can be achieved with some css. You will have to move the footer outside of the .container body-content.
Here is an example - take a look here https://css-tricks.com/snippets/css/sticky-footer/
Hoping someone can help me with this. The following menu items below (Get on Amazon etc) change the information on the page within the browser, but the first menu should change the actual page to my index page. For some reason I cannot get it to work
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-- >
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<title>Painful Words Dot Com</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!--
Painful Words
-->
<!-- Google Web Font Embed -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,600,500,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/painful_main.css">
</head>
<body>
<div id="main-wrapper">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a rel="nofollow" href="http://browsehappy.com">upgrade your raasclaat browser</a> or <a rel="nofollow" href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 affix text-center" style="z-index: 1;">
<h1 class="painful-site-title">
Painful Words
<img src="images/btn-menu.png" alt="main menu" id="m-btn" class="pull-right visible-xs visible-sm" >
</h1>
<ul id="responsive" style="display:none" class="hidden-lg hidden-md"></ul><!-- /.responsive -->
</div>
<div class="menu visible-md visible-lg">
<ul id="menu-list">
<li class="active back-menu">Go Back</li>
<li class="inactive purchase-menu">Purchase</li>
<li class="amazon-menu">Get on Amazon</li>
<li class="google-menu">Get on Google Play</li>
<li class="noble-menu">Get on Barnes & Noble</li>
</ul>
</div><!-- /.menu -->
<div class="image-section">
<div class="image-container">
<img src="images/gone.jpg" id="purchase-img" class="main-img inactive" alt="purchase">
<img src="images/love.jpe" id="amazon-img" class="inactive" alt="amazon">
<img src="images/fam.jpe" id="google-img" class="inactive" alt="google">
<img src="images/fam2.jpe" id="noble-img" class="inactive" alt="noble">
The following code in your http://www.painfulwords.com/js/templatemo_script.js JavaScript file is preventing the link from working.
$("#menu-list a, #responsive a").on('click',function(e){
if(this.className == "external") {
return;
}
// THIS BIT HERE cancels the link's default action
e.preventDefault();
Try giving the link the additional class of external.
So I link twitter to my website. However, I cannot limit the size of the wigget. I want it to be a size of 300px by 300px. I tried to do iframe width = "300" height = "300" but it doesn't work. I want the decrease the size of the twitter wigget. How do I do it? I am trying to make http://i.imgur.com/td214sV.png looks like http://i.imgur.com/UCs7pG6.png.
The html code is posted below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>
MogoTXT is a fun, easy to use celebrity-entertainment platform that allows fans to follow their favorite celebs, read and hear what they are saying, and see what they are doing!
</title>
<!-- Included CSS Files (Uncompressed) -->
<!--
<link rel="stylesheet" href="stylesheets/foundation.min.css">
-->
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="stylesheets/foundationv0000004.css">
<link href="stylesheets/wb-main0000007.min.css" rel="stylesheet" type="text/css">
<script src="javascripts/modernizr.foundation.js"> </script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18132180-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
<meta property="og:description" content="MogoTXT is a fun, easy to use celebrity-entertainment platform that allows fans to follow their favorite celebs, read and hear what they are saying, and see what they are doing!" />
<meta name="Description" content="MogoTXT is a fun, easy to use celebrity-entertainment platform that allows fans to follow their favorite celebs, read and hear what they are saying, and see what they are doing!" />
<meta name="apple-itunes-app" content="app-id=602297014" />
</head>
<body>
<!-- Header and Nav -->
<div id="logonav">
<div class="row">
<div class="four columns">
<h1><img src="images/logo.png" alt="With Buddies" width="157" height="53" /></h1>
</div>
<div class="eight columns">
<ul class="nav-bar right">
<li class="has-flyout" id="games-nav"><a>Games</a>
<span> </span>
<ul class="flyout">
<li>Big Fly Baseball<sup>™</sup></li>
<li>MogoBall<sup>™</sup></li>
<li>Mogo Hoops<sup>™</sup></li>
<!--<li>Bubble Galaxy With Buddies<sup>™</sup></li>-->
</ul>
</li>
<li>Shop</li>
</ul>
</div>
</div>
</div>
<div id="mobilenav">
<nav class="clearfix">
<ul class="nav-bar right clearfix">
<li>Home</li>
<li>Big Fly Baseball<sup>™</sup></li>
<li>MogoBall<sup>™</sup></li>
<li>Mogo Hoops<sup>™</sup></li>
<!--<li>Bubble Galaxy With Buddies<sup>™</sup></li>-->
<li>About Us</li>
<li>Mogo Central/Athletes</li>
<li>Help</li>
</ul>
<img src="images/logo.png" width="157" height="53">
</nav>
</div>
<!-- End Header and Nav -->
<!-- Included JS Files (Compressed) -->
<script src="javascripts/jquery.js"> </script>
<script src="javascripts/foundation.min.js"> </script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"> </script>
<script src="javascripts/jquery.foundation.orbit.js"> </script>
<script type="text/javascript">
$(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 > 720 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
<!-- Featured Region -->.
<center>
<img src="images/big-fly-baseball.png" alt="Smiley face" width="940" height="500" />
</center>
<!-- Three-up Content Blocks -->
<div class="row" id="game-details">
<div class="eight columns main-content">
<h3 style='font-size:29px'>About Us:</h3>
<ul>
<p>MogoTXT is a San Francisco based game development studio that wants to bring back the fun and excitement of early sports games. The sports games industry has become stale and we want to change that by starting from scratch and making games that people can enjoy over and over again with their friends and other gamers. </p>
<p>We are building awesome sports games for iOS, Android, Facebook, and Micro-Consoles!</p>
<p>We build games for you to enjoy, so let us know what you want to see and play by emailing us at info#mogotxt.com</p>
</ul>
<p> </p>
</div>
<div align="right">
<iframe width="300" height="180"
src="http://www.youtube.com/embed/JLZ1_0icv1k">
</iframe>
<a class="twitter-timeline" href="https://twitter.com/gridironthunder" data-widget-id="369622317229301760">Tweets by #gridironthunder</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<div class="row" id="tweet-details">
</div>
</div>
<div class="row" id="our-games"><img src="images/sat.png" alt="Smiley face" width="650" height="300" />
<div class="four columns mini-mogo-hoops"></div>
<div class="four columns mini-bubble-galaxy">
</div>
<script type="text/javascript">
$(window).load(function() {
$('#screenshots').orbit({
animation: 'fade',
fluid: true,
timer: true,
resetTimerOnClick: false,
advanceSpeed: 5000,
pauseOnHover: true,
startClockOnMouseOut: true,
startClockOnMouseOutAfter: 0,
directionalNav: true,
bullets: false,
});
});
</script>
</div>
<script src="http://www.mogotxt.com/Scripts/jquery.fitvids.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function () { $('.fitvid').fitVids(); }); </script>
<div class="drop-shadow lifted">
<!-- Footer -->
<footer class="row">
<div class="twelve columns">
<div class="row">
<div class="four columns" id="footerlogo">
<h1><img src="images/Mogo_logo.png" alt="With Buddies" width="405" height="136" /></h1>
</div>
<div class="four columns sitemap">
<ul class="link-list left">
<li class="header">Games</li>
<li><li>Big Fly Baseball<sup>™</sup></li>
<li>MogoBall<sup>™</sup></li>
<li>Mogo Hoops<sup>™</sup></li>
<!--<li>Bubble Galaxy With Buddies<sup>™</sup></li>-->
</ul>
</div>
<div class="two columns sitemap">
<ul class="link-list left">
<li class="header"></li>
<li class="header"></li></ul>
</div>
<div class="two columns sitemap">
<ul class="link-list left">
<li class="header">Contact Us</li>
<li class="header support"><a href="http://mogotxt.com/privacy">Privacy Policy</li>
<li class="header support"><a href="http://mogotxt.com/terms">Terms of Service</li>
</ul>
</div>
</div>
</div>
<div class="twelve columns">
<div class="row" id="pp-tos">
<div class="six columns sitemap"></div>
<div class="six columns sitemap">
<ul class="link-list left">
<li></li>
</ul>
<ul class="link-list right">
<li></li>
</ul>
</div>
<!--<div class="six columns sitemap">
</div>-->
</div>
</div>
</footer>
</div>
</body>
</html>
You should edit in CSS via Id or class,or put this in your iframe tag:
style="position:absolute;width:300px;height:300px;"
The webpage I made will not allow me to scroll. How can I fix this?
Other than viewing the code you can view the live website at this address
Also, the tabs only view on certain web browsers. How do I make it on all browsers?
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js b1" lang="en"> <!--<![endif]--> <!--[TO PUT THE BACKGROUND BACK, CHANGE "b1" to "bg1"-->
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/i/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css">
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
<!-- All JavaScript at the bottom, except this Modernizr build.
Modernizr enables HTML5 elements & feature detects for optimal performance.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> Upgrade to a different browser or install Google Chrome Frame to experience this site.</p><![endif]-->
<header>
<h1>The Down Syndrome Awareness Foundation (DASF)</h1>
</header>
<div id="image">
<img src="img/zoom.png">
<a href="img/big.JPG" class="MYCLASS" title="DSAF Logo">
<img src="img/small.JPG" title="Our Logo">
</a>
</div>
<div id="back" >
<img src="img/back.png" alt-text="Back" title="Back">
</div>
<div role="main" id="container">
<div id="primary">
<h2>TITLE ONE</h2>
</pre>
<p>TEXT</p>
<p>MORE TEXT, ANOTHTER PARAGRAPH</p>
</div>
<div id="content" class="one-edge-shadow">
<!-- <h2>Main content</h2> -->
<div id="tabContainer">
<div class="tabs">
<ul>
<li id="tabHeader_1">About the Disorder</li>
<li id="tabHeader_2">TAB 2</li>
<li id="tabHeader_3">Commercial</li>
</ul>
</div>
<div class="tabscontent">
<div class="tabpage" id="tabpage_1">
<h2>HEADER ONE</h2>
<p><strong>What is Down Syndrome?:</strong></p>
<p></p>
<p><strong>Quality of Life:</strong></p>
<ul>
<li>A person with Down Syndrome in 1900 could expect to live to about 9-11 years. Now, patients with Down Syndrome live to 50 years old, with a ratio of 1:10 living to 70
<li>About 92% of pregnant women with babies with Down Syndrome elect to terminate the pregnancy
<li>Rate of bullying to children is increased to children with disorders is much higher
<li>Increase risk for Alzheimer’s Disease, Cancers, Celiac Disease, and Vision and Hearing Impairment
</ul>
<p><strong>Severity:</strong></p>
<p></p>
<p><strong>Famous Cases:</strong></p>
<p></p>
<p><strong>Special Olympics:</strong></p>
<p></p>
</div>
<div class="tabpage" id="tabpage_2">
<h2>HEADER 2</h2>
<hr>
<p><strong>Clinical Science</strong></p>
<p></p>
<p><strong>Causes:</strong></p>
<ul>
<li>Having a third copy, or part of a third copy of chromosome 21
<li>1% of cases are hereditary, the other 99% of cases are random or based on the mother’s age being over thirty-five (35) years
</ul>
<p><strong>Symptoms:</strong></p>
<ul>
<li>Delayed physical, social, and intellectual development</li>
<li>Decreased muscle tone</li>
<li>Short neck, excess skin on the back of the neck</li>
<li>Flattened facial profile</li>
<li>Upward slanting eyes</li>
<li>Skin fold that comes out from the upper eyelid and covers the corner of the eye</li>
<li>Wide, short hands and short fingers</li>
<li>A single deep crease in the palm of the hand</li>
<li>White spots on the coloured part of the eye</li>
<li>Deep groove between the first and second toes</li>
</ul>
<p><strong>Treatment</strong></p>
<p>There is no cure for Down Syndrome, however there are treatments to minimalise the symptoms and the conditions associated with them. Speech and coordination can be improved by occupational therapy and special education.</p>
<p><strong>Heart Defects Related to Down Syndome</strong></p>
<p></p>
</div>
<div class="tabpage" id="tabpage_3">
<h2>As Seen on "The Today Show"</h2>
<p>PARAGRAPH ONE BECAUSE I'M SO LAZY AND CAN'T ADD MORE, SORRY</p>
</div>
</div>
<!-- <p>Inner containers can be set using % measurements which are relative to the parent container.</p>
<p>If the outermost container is set in 'em' and the inner containers are set in % everything will ultimately be relative to the font-size.</p>
<p>To create elastic grids you can do the initial math using absolute px measurements and then use the following formula to convert to relative measurements.</p>
<p><strong>target ÷ context = result</strong></p> -->
<div id="button-box">
<a class="button">About Us</a>
</div>
</div>
<div id="secondary" class='visuallyhidden'>
<h2>Seconday Sidebar</h2>
<pre>
#secondary {
float:left;
width:25%;
}
</pre>
<p>One potential gotcha is if you change font-sizes on internal containers. That can change the context of measurements inside the container.</p>
<p>You can mitigate this problem by changing font sizes on elements other than the containers themselves.</p>
</div>
</div>
<div id="remedy" class="one-edge-shadow">
<h2>Meet the Team</h2>
<p>I CAN PUT BULLETS IN LATER</p>
<p>BUT IM JUST SO TIRED</p>
<p>DURRRRR</p>
<p><strong>I CAN EVEN MAKE IT BOLD!</strong></p>
</div>
<footer>
</footer>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> -->
<script src="js/jquery-1.7.2.min.js"></script>
<script type='text/javascript' src='js/jquery.jqzoom-core.js'></script>
<script src="js/acidTabs.js"></script>
<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- end scripts -->
<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Change:
html {
overflow: hidden;
}
to:
html {
overflow: auto;
}