After uploading to server images not showing in web browser in html - html

Hi Localhost working fine after uploading all the files to server it's not showing images in web browser in html and layout design also got changes.I want exactly localhost how it's working same I want.
can any one please help me
html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Kozuka_Gothic_Pro_OpenType_300.font.js" type="text/javascript"></script>
<script src="js/Kozuka_Gothic_Pro_OpenType_500.font.js" type="text/javascript"></script>
<script src="js/FF-cash.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/tms-0.3.js"></script>
<script type="text/javascript" src="js/tms_presets.js"></script>
<script src="js/jcarousellite_1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel .jCarouselLite').jCarouselLite({
btnNext: '.carousel .next',
btnPrev: '.carousel .prev',
speed: 600,
easing: 'easeOutQuart',
vertical: false,
circular: false,
visible: 4,
start: 0,
scroll: 1
});
});
</script>
<!--[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" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
</head>
<body id="page1">
<!--==============================header=================================-->
<header>
<div class="row-bot">
<div class="row-bot-bg">
<div class="main">
<div class="wrapper p6">
<img src="images/logo.png" align="right"/>
<div class="wrapper">
<figure class="img-indent2"><img src="images/page1-img1.png" alt=""></figure>
<div class="extra-wrap">
<strong class="text-1">There is no doubt that education is in the eye of the storm that is sweeping the world's economies,Innovation ,Creativity, Collaborative Leadership,Global Connection, and trans-disciplinary skills are among a few of the major drives of success today's professional.The only educational institutions are unique position of being able to lead the changes required by the entire education system to accommodate a new kind of thinking for a new kind of world. </strong><br>
<strong class="text-1">This makes there technologies readily accessible to you, at easily affordable prices and offers plans that suits academic institutes of all sizes and budgets.</strong>
</div>
</div>
</div>
</div>
</div>
</header>
<!--==============================aside================================-->
<aside>
<div class="carousel">
<div class="carousel-container">
<h3>Popular Design Projects</h3>
<div class="jCarouselLite">
<ul class="carousel-list">
<li>
<div class="img-border">
<img src="images/page1-img2.jpg" alt="" />
</div>
</li>
<li>
<div class="img-border">
<img src="images/page1-img3.jpg" alt="" />
</div>
</li>
<li>
<div class="img-border">
<img src="images/page1-img4.jpg" alt="" />
</div>
</li>
</ul>
</div>
</div>
</div>
</aside>
<!--==============================content================================-->
<section id="content"><div class="ic"></div>
<div class="main">
<div class="container_12">
<div class="wrapper">
<article class="grid_4">
<div class="indent-left">
<div style="color:#0000FF">
<h3 class="p0">Academic Institutions Benefits:</h3></div>
<ul class="list-1" >
<li>Admission & Financial Aid</li>
<li>Quick Registration & Scheduling</li>
<li>Parents Portal/ Student Portal & Teachers Portal</li>
<li>More Trust From Parents</li>
<li>Quicker Response Time</li>
<li>Better Services, at a Lower Cost</li>
<li>Complete Online Package</li>
</ul>
</div>
</article>
<article class="grid_4">
<div class="indent-left">
<div style="color:#0000FF">
<h3 class="p1">Top Users:</h3></div>
<ul class="list-1">
<li>Instant Attendance Alerts(SMS,Email)</li>
<li>Progress Reports And Hall Ticket</li>
<li>Automatic Backup Technology</li>
<li>Exam Time Tables And Results</li>
<li>Online Surveillance System</li>
<li>Online Fees Payment Facility</li>
</ul>
</div>
</article>
<article class="grid_4">
<div class="indent-left2">
<div style="color:#0000FF">
<h3 class="p1">We Can Manage Which Helps In The Following:</h3></div>
<ul class="list-1">
<li>Customised And Self Branded Message(SMS,Email & Web)</li>
<li>No More Laborious And Time Consuming Paper Work</li>
<li>Online/Onsite Training Sessions </li>
<li>24x7 Customer Services</li>
<li>User Friendly System</li>
<li>Low Maintenance Cost</li>
</ul>
</div>
</article>
</div>
<div class="wrapper">
<article class="grid_4">
<div class="indent-left">
<div style="color:#0000FF">
<h3 class="p1">Management:</h3></div>
<ul class="list-1">
<li>Manage Communication flow among stake holders</li>
<li>Integration of all activities performed in the school</li>
<li>To maintain transparency in the system</li>
<li>To fight stiff competition</li>
<li>To take care of pillars of school academic,administrative and finance</li>
</ul>
</div>
</article>
<article class="grid_4">
<div class="indent-left">
<div style="color:#0000FF">
<h3 class="p1">Students/parents:</h3></div>
<ul class="list-1">
<li>Every student is not able to get personal attention from teacher</li>
<li>Students are always overburdened</li>
<li>Only academic performance is considered while grading</li>
<li>Lateral thinking, life skills and thinking skills are not measured.</li>
<li>Online Surveillance System</li>
<li>Online Fees Payment Facility</li>
</ul>
</div>
</article>
<article class="grid_4">
<div class="indent-left2">
<div style="color:#0000FF">
<h3 class="p1">Teachers:</h3></div>
<ul class="list-1">
<li>Teachers have to manage large amount of data.</li>
<li>There are large numbers of students who are needed to be taken care of </li>
<li>Teachers have to deal with the repetitive administrative work.</li>
<li>The process of continuous comprehensive evaluation need to be followed.</li>
<li>Manage time table and proxy scheduling</li>
</ul>
</div>
</article>
</div>
</div>
</div>
</section>
<!--==============================footer=================================-->
<footer>
<div class="main">
<div class="aligncenter">
<p class="p0">Rushda Infotech ©2014 School, all rights reserved. </p>
<a rel="nofollow" href="http://www.templatemonster.com/" target="_blank">Website </a> by rushdainfotech.in
</div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
<script type="text/javascript">
$(window).load(function(){
$('.slider')._TMS({
duration:800,
easing:'easeOutQuad',
preset:'diagonalExpand',
slideshow:5000
})
})
</script>
</body>
</html>

Try to get image path from unloaded images by right click and properties. That will show image actual path. Try to validate that path. Its mostly when you deploy on different servers image path would change.

Related

Why are the closing body and html tags on my page showing in red in Brackets?

I downloaded the exercise files for a tutorial on responsive animated websites and in my code editor (Brackets) at the end of the page the body and html tags are showing in red as if there is an error and I have no idea why. Can anyone tell me?
Also, what's the best way to find out myself? I clicked on "Debug" in the Brackets toolbar but it just gave me the lines where the errors were - 167 and 168 on the page, nothing more. Not much help. Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Gym - Personal Training</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/waypoints.css">
<script src="js/query.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.min.js" type="text/javascript"></script>
</head>
<body>
<header>
<div id="header-inner">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Facility</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!--- Start Slider -->
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
<div class="slide-wrap">
<section class="slider">
<ul class="slider1">
<li><img src="https://www.w3newbie.com/wp-content/uploads/chest-fly.png"></li>
<li><img src="https://www.w3newbie.com/wp-content/uploads/push-ups.png"></li>
<li><img src="https://www.w3newbie.com/wp-content/uploads/inside-gym.png"></li>
<li><img src="https://www.w3newbie.com/wp-content/uploads/training.png"></li>
</ul>
</section>
</div>
<script type="text/javascript">
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
});
$('.slider2').bxSlider({
pager:false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
controls:false,
});
</script>
<!--- End Slider -->
<div class="clearfix"></div>
<div id="inner-wrapper">
<!---Start Waypoints Delayd Animation --->
<section class="staggered-animation-container">
<section class="os-animation" data-os-animation="fadeInLeftBig" data-os-animation-delay=".3s">
<section class="one-third">
<div class="circle">
<td><i class="fa fa-users"></i></td>
</div>
<h3>Grade A Staff</h3>
<p>Here at The Gym we have the best trainsing staff in the tri-state area as we seek out and recruit talented trainers with all the right cetifications. Come in today and have a sit down with one of our trainers so we can help you meet your golas in the fastest way possible!</p>
</section>
</section>
<section class="one-third">
<div class="circle">
<td><i class="fa fa-map-marker"></i></td>
</div>
<h3>A Convenient Location</h3>
<p>Here at The Gym we have the best trainsing staff in the tri-state area as we seek out and recruit talented trainers with all the right cetifications. Come in today and have a sit down with one of our trainers so we can help you meet your golas in the fastest way possible!</p>
</section>
<section class="one-third">
<div class="circle">
<td><i class="fa fa-check-square-o"></i></td>
</div>
<h3>Check us out - free!</h3>
<p>Here at The Gym we have the best trainsing staff in the tri-state area as we seek out and recruit talented trainers with all the right cetifications. Come in today and have a sit down with one of our trainers so we can help you meet your golas in the fastest way possible!</p>
</section>
<div class="clearfix"></div>
<article>
<img src="https://www.w3newbie.com/wp-content/uploads/gym-classes.png" class="circle-image">
</article>
<aside>
<h3>Our Facility</h3>
<br>
<ul class="gym">
<li><h4>Unlimited wifi Connection</h4></li>
<li><h4>member music requests & voting</h4></li>
<li><h4>open 24 hours / 7 days a week</h4></li>
<li><h4>cardio machine movie theater</h4></li>
</ul>
</aside>
<div class="clearfix"></div>
<section class="one-third">
<h3>Ladies Section</h3>
<img src="https://www.w3newbie.com/wp-content/uploads/ladies-gym.jpg">
<p>Included in our facility is a "ladies only" section of the gym where women can work out by themselves.</p>
</section>
<section class="one-third">
<h3>the gym floor</h3>
<img src="https://www.w3newbie.com/wp-content/uploads/gym-floor.jpg">
<p>Our gym is as spacious as they come. Enjoy scenic views from the cardio equipment on the third floor.</p>
</section>
<section class="one-third">
<h3>free weights</h3>
<img src="https://www.w3newbie.com/wp-content/uploads/free-weights.jpg">
<p>Our free weights section has an extensive collection of dumbbels and Olympic plates for body building.</p>
</section>
<!---End Inner Wrapper--->
<div class="clearfix"></div>
<footer>
<div id="footer-inner">
<section class="one-third" id="footer-third">
<h3>Contact</h3>
<p class="footer-contact">The Gym<br>
<b class="phone">555-555-5555</b><br><br>500 Washington Road<br>Seattle, WA 98101</p></section>
<section class="one-third" id="footer-third">
<h3>Social</h3>
<br>
<ul class="social">
<li><i class="fa fa-facebook"></i></li><li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
</ul>
</section>
<section class="one-third" id="footer-third-last">
<h3>Pages</h3>
<br>
<h5>
home about facility pricing
contact
</h5>
</section>
</div>
</footer>
<footer class="second">
<p>© The Gym, 2017</p></footer>
<!---End Waypoints Delayed Animation --->
</section>
</body>
</html>
Try collapsing all the nested tags and see if you're left with any that are not properly closed.
You have all the comments wrong, its: <!-- COMMENT -->, not <!--- --->

White bar at the bottom of my website

On the bottom of my website, BJBGaming1.com, there is a weird white bar, please help me get rid of it. and my coding is
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BJBGaming1</title>
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li>Home</li>
<li>Minecraft</li>
<li>CS:GO</li>
<li>Smite</li>
</ul>
</div>
</div>
<div class="callout large primary">
<div class="row column text-center">
<h1 style="color:green">BJBGaming1</h1>
<h2 class="subheader">Happy Thanksgiving!</h2>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Minecraft <small>11/25/2015</small></h3>
<img class="thumbnail" src="Minecraft.png">
<p style="color:white">Minecraft is a very popular game, on PC, Xbox, and Smart Phones, played by millions of people every day. For more information go to www.bjbgaming1.com/minecraft</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>CS:GO <small>11/25/2015</small></h3>
<img class="thumbnail" src="CS.GO.png">
<p style="color:white">CS:GO stand for, Counter-Strike: Global Offensive, and is a FPS game that is assosiated with E-Sports, and played by millions of people everyday. For more information go to www.bjbgaming1.com/cs_go</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Smite <small>11/25/2015</small></h3>
<img class="thumbnail" src="Smite.png">
<p style="color:white">Smite is a game just like LoL (League of Legends). In Smite you can pick from over 50 gods that ou unlock with Favor, favor is basically the currency to buy gods, but in Smite there are tons of different game modes, and every day they feature a community made gamemode. Also, Smite is always coming out with new gamemodes to try. For more information go to www.bjbgaming1.com/smite</p>
</ul>
</div>
</div>
</div>
<!-- begin wwww.htmlcommentbox.com -->
<div style="color:white" id="HCB_comment_box">Comment Form is loading comments... </div>
<link rel="stylesheet" type="text/css" href="//www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
<script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user) {hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="//www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttri bute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24nHgonDoa 62nAhjUsN9BAt%2F"+"&opts=16862&num=10&ts=1448559904895");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end www.htmlcommentbox.com -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> </script>
<script>
$(document).foundation();
</script>
</body>
</html>
Im probably missing some code so its probably best that you look at it from bjbgaming1.com
Add background color to the "body" tag of this website by using CSS:
body {
background-color: #000;
}
The bottom of your background image is black so add black background to 'extend' the background image.

Background video won't play once live, only locally

UPDATE: By locally when I preview my work in the browser. My files are stored in the same folder structure on one of our severs.
UPDATE: Which jpeg reference do you mean? Is this before I try your way of doing it?
UPDATE: this page doesn't load comments or answers so I'll be posting my answers here.
UPDATE: the console does say that the files are missing, but they're not. The site files in their entirety have been uploaded several times. I can provide a screenshot of the folder within the sever if need be.
I have a background video inserted into my index page but it doesn't play once the site is live. I believe it uses the image fallback. It works fine locally but having problems with absolute urls. I downloaded this from github and the update for this problem is below but the package I downloaded was a newer version anyways. Test link is below the github link.
https://github.com/VodkaBears/Vide/archive/0.1.1.zip#
http://bit.ly/1xLpFiu
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Pragma" content="no_cache" />
<title>M&T Printing Group</title>
<link rel=”author” href=”https://plus.google.com/+MTPrintingGroupKitchener“/>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/content.css" />
<link rel="stylesheet" type="text/css" href="css/font.css" />
<link rel="stylesheet" type="text/css" href="QuotesRotator/css/default.css" />
<link rel="stylesheet" type="text/css" href="QuotesRotator/css/component.css" />
<script src="QuotesRotator/js/modernizr.custom.js" type="text/javascript"></script>
<!-- github.com/scottjehl/Respond - for IE 8, 7.... -->
<script src="Respond-master/dest/respond.min.js" type="text/javascript"></script>
<!--<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".subnav").prev().mouseover(function(){
var sub_menu_shift = parseInt($(this).next().css("height")) + 100;
$(this).next().css({'position':'relative','bottom':sub_menu_shift});
});
});
</script>-->
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-vide-bg="Vide-0.1.2/examples/video/videoMain">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Vide-0.1.2/src/jquery.vide.js"></script>
<script>window.jQuery || document.write('<script src="Vide-0.1.2/libs/jquery/jquery-1.11.1.min.js"><\/script>')</script>
<script src="Vide-0.1.2/src/jquery.vide.js"></script>
<script>
// $(document).ready(function () {
// $(document.body).vide("Vide-0.1.2/examples/video/videoMain"); // Non declarative initialization
//
// var instance = $(document.body).data("vide"); // Get instance
// var video = instance.getVideoObject(); // Get video object
// instance.destroy(); // Destroy instance
// });
</script>
<div id="indexBG">
<div id="colour-bar-black"></div> <!-- colour-bar-black -->
<div id="nav-wrap">
<ul>
<li id="link-one" class="orange">
<span>Printing</span>
<div class="subnav" id="subnav">
<ul>
<li>Digital Printing</li>
<li>Offset Printing</li>
<li>Business Cards & Stationery</li>
<li>Manuals, Reports & Catalogues</li>
<li>Bindery Services</li>
<li>Canada Post</li>
<li>Graphic Design & Typesetting</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="red"><span class="doubleLine">Promotional Products</span>
<div class="subnav">
<ul>
<li>Awards & Mounting</li>
<li>Binders</li>
<li>Clothing & Apparel</li>
<li>Bags</li>
<li>Drinkware</li>
<li>Lanyards</li>
<li>Magnets</li>
<li>Pens & Writing Instruments</li>
<li>Presentation Folders</li>
<li>USB Flash Drives</li>
<li>Umbrellas</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="pink"><span class="doubleLine">Banners & Signage</span>
<div class="subnav">
<ul>
<li>Drafting & CAD services</li>
<li>Coroplast & FoamCore</li>
<li>Retractable Banners</li>
<li>Posters & Banners</li>
<li>Wraps & PVC</li>
<li>Displays & Canvas</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="purple"><span>POOL</span></li>
<li class="blue"><span>Volumes</span></li>
<li class="green"><span>Contact</span>
<div class="subnav">
<ul>
<li>Locations</li>
<li>Media</li>
<li>Digital Link</li>
<li>FTP site</li>
<li>Client Login</li>
<li>Estimate Request</li>
<li>Submit A File</li>
<li>Recognition</li>
<li>Graphics Factory</li>
<li>Careers</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="yellow-facebook"><span></span></li>
</ul>
</div> <!-- nav-wrap -->
<div id="logo"><img src="images/logo-main.png" alt="M&T Printing Group" title="M&T Printing Group" /></div> <!-- logo -->
<!-- used for mobile -->
<div id="logo-mobile"><img src="images/M&T-Printing-Group-Logo-moble.jpg" alt="M&T Printing Group" title="M&T Printing Group" /></div> <!-- logo-mobile -->
<h1>“Your Partners In Print”</h1>
<div id="footer">
<ul class="footer-left">
<li>M&T Printing Group - © 2014</li>
</ul>
<ul class="footer-right">
<li>Client Login</li>
<li>Locations</li>
<li>Pool</li>
</ul>
</div> <!-- footer -->
</div> <!-- indexBG -->
</body>
</html>
I would just do something like this, using jquery. You can have the videoURL go to whichever you like and it will load right up. I have done this in the past for several websites and it works wonderfully. The below is just html and JQUERY. Your issue seems to me seems to be were you have the video stored. You said it works fine "locally" Well where are you hosting your webpage? Your video should be stored in the same venue.
<section class="content-section video-section">
<div class="pattern-overlay">
<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=sd4bqmP_460',containment:'', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a>
</div>
</section>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
I see the edit you added. Remove the jpeg or reference the mp4 file.
--Sorry for editing your comment but it's the only way I can respond.Which jpeg reference do you mean?

Limit a size of an add on in a website. Html

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;"

Validation error for website

I'm having some strange validation errors for my website. I've gone through my html multiple times but I just can't seem to find the culprit. You can view the w3 validation here;
http://validator.w3.org/check?uri=http%3A%2F%2Ftubebackgrounds.co.uk%2Funi%2Fassignment1%2Faustria.html&charset=%28detect+automatically%29&doctype=Inline&outline=1&group=1&No200=1&verbose=1&st=1&user-agent=W3C_Validator%2F1.3
Here is my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if IE 9]>
<style>
li {
}
</style>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/Stylesheets.js"> </script>
<title>CTEC1801: Austria Fact Page</title>
<link rel="stylesheet" type="text/css" href="css/contact.css" />
<link rel="stylesheet" type="text/css" href="css/style_austria.css" title="Style_One" />
<link rel="stylesheet" type="text/css" href="css/style_austria2.css" title="Style_Two" />
<link rel="stylesheet" type="text/css" href="css/style_austria3.css" title="Style_Three"/>
<script type="text/javascript">
//<![CDATA[
var name = ".stylechange";
var menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
//]]>
</script>
</head>
<body>
<div id="wrapper">
<div class="stylechange">
Choose a style:
- Style One
- Style Two
- Style Three
</div>
<div id="nav">
Explanation Page
Austria
Switzerland
</div><br />
<div id="logo"> <img src="images/austrian_logo.jpg" alt="Austrian Logo" width="940" height="350" /></div>
<div id="content-left">
<h1 id="top">Random facts of the day!</h1>
<h2>Capital of Austria</h2>
<ul>
<li>Veanna</li>
</ul>
<h2>Total Area of Austria</h2>
<ul>
<li>Total: 83,870 sq km</li>
<li>Land: 82,444 sq km </li>
<li>Water: 1,426 sq km </li>
</ul>
<h2>Population of Austria</h2>
<ul>
<li>8,419,000 million and counting </li>
</ul>
<h2>Languages of Austria</h2>
<ul>
<li>German (official nationwide) </li>
<li>Slovene (official in Carinthia) </li>
<li> Croatian (official in Burgenland </li>
<li> Hungarian (official in Burgenland) </li>
</ul>
<h2>Life Expectancy in Austria</h2>
<ul>
<li>Total population: 78.92 years </li>
<li>Male: 76.03 years </li>
<li>Female: 81.96 years (2005 est.) </li>
</ul>
<h2 class="right">history and Heritage</h2>
<ul class="right">
<li>The Austrian flag is one of the oldest in the world </li>
<li>They hold the worlds largest emerald </li>
<li>The sewing machine was invented here </li>
</ul> <br /><br />
<h2 class="right">Land and Nature</h2>
<ul class="right">
<li>62% of Austria is covered by the Alps </li>
<li>Holds the tallest waterfall in Europe </li>
<li>One fourth of the population of Austria lives in the Capital </li>
</ul>
<h2 class="right">Business and Economy</h2>
<ul class="right">
<li>Austria has the second lowest unemployement rate </li>
<li>Among Europeans, Austrians work the longest with the average of 45 hours a week </li>
<li>Over 60% of Austria's electricity is supplied by a renewable source </li>
</ul>
</div>
<div id="contact">
<h1>Contact us</h1>
<div id="contact-form" class="clearfix">
<h2>Please fill in the details below as needed.</h2>
<form method="post" action="http://www.elizabethcastro.com/html6ed/examples/forms/showform.php">
<div class="form_name">* Name:</div>
<input type="text" id="name" name="name" value=""/>
<div class="form_name">* Email Address:</div>
<input type="text" id="email" name="email" value="" />
<div class="form_name">* Message:</div>
<textarea id="message" name="message" cols="1" rows="1"></textarea>
<div class="form_required">* indicates a required field </div>
<input type="submit" value="Submit" id="submit-button" />
<input type="reset" value="Reset" id="reset-button" />
</form>
</div>
</div>
</div>
</body>
</html>
In XHTML 1.0 Strict, the form tag cannot contain input and textarea elements as direct children. To be valid XHTML, the input tag must be wrapped by another block-level element, such as <p> or <fieldset>. Is there any reason you can't use XHTML transitional or HTML5 docyptes?
For more info on XHTML strict and the form element, see http://xhtml.com/en/xhtml/reference/form/