Why is my body being shoved under my side bar? - html
I have an issue with my renderbody content disappearing beneath my left floated side bar. I tried to figure out what exactly is going wrong in my css by opening the default internet web template provided by visual studio and I can see that they use media queries to change the style on smaller sized screens. I am trying to do the same but see absolutely NO changes :(
To see the problem in action you can definitely visit my dev site. If you make the window width smaller you will see the problem. (problem seen here)
This is the markup for my layout view
#model gcaMusicExchange.ViewModels.ViewModelBase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/themes/base/chosen.css" rel="stylesheet" />
#Scripts.Render("~/bundles/jquery")
#*<script src="~/Scripts/jquery.min.js"></script>*#
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/chosen.jquery.js"></script>
<script src="~/Scripts/jquery.slider.min.js"></script>
#Scripts.Render("~/bundles/modernizr")
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<img height="70px" style="margin-left:-300px; margin-top:-10px" src="~/Images/jdmxchange.jpg" /></p>
</div>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="sidebar ">
<div id="commandControls" class="navbar-leftside-content">
<div id="firstBlock" style="background-color:#FFFFFF; padding:10px; border-radius:3px;margin-top:15px">
<h1 style="color:#1C75B8">Performance Parts</h1>
#Html.ActionLink("Browse all parts", "Index", "ResultsList")
<br />
<br />
#Html.ActionLink("Browse by vehicle application", "PerformancePartsByVehicle", "Browse")
<br />
<br />
#Html.ActionLink("Browse by part category", "PerformancePartsByCategory", "Browse", null, null)
<br />
<br />
#Html.ActionLink("Browse by part manufacturer", "PerformancePartsByManufacturerLetter", "Browse", null, null)
</div>
<div id="secondBlock" style="background-color:#FFFFFF; padding:10px; border-radius:3px;margin-top:15px">
<h1 >Vehicle Listings</h1>
#Html.ActionLink("Browse all vehicles", "Index", "VehicleListings", null, null)
<br />
<br />
#Html.ActionLink("Browse custom builds", "Index", "VehicleListings", null, null)
<br />
<br />
#Html.ActionLink("Browse shells", "Index", "VehicleListings", null, null)
</div>
<div id="thirdsBlock" style="background-color:#FFFFFF; padding:10px; border-radius:3px;margin-top:15px">
<h1>Account</h1>
#* #Html.ActionLink("Mechanical", "ShellBuilds", "Browse", null, null)
<br />
<br />
#Html.ActionLink("Cosmetic", "ShellBuilds", "Browse", null, null)
<br />
<br />
#Html.ActionLink("Electrical", "ShellBuilds", "Browse", null, null)
<br />
<br />
#Html.ActionLink("Computer", "ShellBuilds", "Browse", null, null)
<br />
<br />
#Html.ActionLink("Driving", "ShellBuilds", "Browse", null, null)
<br />
<br />
#Html.ActionLink("Misc", "ShellBuilds", "Browse", null, null)
<br />
<br />*#
#Html.ActionLink("Post a part for sale", "Index", "VehicleSelect", null, null)
<br />
<br />
Post a vehicle for sale
#*#Html.ActionLink("Post a vehicle for sale", "Create", "ItemPost", null, null)*#
<br />
<br />
#*If the user is currently logged on*#
#if (User.Identity.IsAuthenticated)
{
#Html.ActionLink("View your posts", "DisplayMyPosts", "Account", null, null)
<br />
<br />
#Html.ActionLink("View your purchases", "MyPurchases", "Account", null, null)
<br />
<br />
#Html.ActionLink("Messages", "Index", "Message", null,null)
<br />
<br />
<span>Favorites</span>
#*#Html.ActionLink("Notables", "NotablesMain")*#
<br />
<br />
<span>Notifier</span>#*
#Html.ActionLink("Agent", "AgentConfig")
*#<br />
<br />
<span>Account Settings</span>
#*#Html.ActionLink("Account Settings", "Settings")*#
}
else
{
<br />
<br />
}
</div>
<div id="fourthBlock" style="background-color:#FFFFFF; padding:10px; border-radius:3px;margin-top:15px">
<h1>Events and Meets</h1>
</div>
</div>
</div>
<div>
#RenderSection("featured", required: false)
</div>
<div id="body">
<section class="content-wrapper clear-fix">
#RenderBody()
</section>
</div>
#RenderSection("scripts", required: false)
Rather than post my css (it is huge) I think you can see the css in source code in your browser.
Related
Flexbox full height and width with side panels
I started with reading Flexbox and vertical scroll in a full-height app using NEWER flexbox api. And the following works pretty well:
html,body{
overflow: hidden;
width: 100%; height: 100%;
max-height: 100%; max-width: 100%;
margin: 0; padding: 0;
}
.site-container {
height: 100%; width: 100%;
display: flex;
flex-direction: column;
}
.site-container .site-header,
.site-container .site-footer{
flex: 0 0 auto;
overflow: visible;
}
.site-container .site-body {
position: relative;
overflow: auto;
min-height: 0px;
flex: 0 1 auto;
}
<div class="site-container">
<div class="site-header">
<div style="height: 40px;background-color:YellowGreen">My Header Test </div>
</div>
<div class="site-body">
blah1<br />
blah2<br />
blah3<br />
blah4<br />
blah5<br />
blah6<br />
blah7<br />
blah8<br />
blah9<br />
blah10<br />
blah11<br />
blah12<br />
blah13<br />
blah14<br />
blah15<br />
blah16<br />
blah17<br />
blah18<br />
blah19<br />
blah20<br />
blah21<br />
blah22<br />
blah23<br />
blah24<br />
blah25<br />
blah26<br />
blah27<br />
blah28<br />
blah29<br />
blah30<br />
blah31<br />
blah32<br />
blah33<br />
blah34<br />
blah35<br />
blah36<br />
blah37<br />
blah38<br />
blah39<br />
blah40<br />
blah41<br />
blah42<br />
blah43<br />
blah44<br />
blah45<br />
blah46<br />
blah47<br />
blah48<br />
blah49<br />
blah50<br />
blah51<br />
blah52<br />
blah53<br />
blah54<br />
blah55<br />
blah56<br />
blah57<br />
blah58<br />
blah59<br />
blah60<br />
blah61<br />
blah62<br />
blah63<br />
blah64<br />
blah65<br />
blah66<br />
blah67<br />
blah68<br />
blah69<br />
</div>
<div class="site-footer">
<div style="height: 40px;background-color:YellowGreen">My Footer Test </div>
</div>
</div>
In the above snippet, the body scrolls quite well.
Now I'm attempting to Flex the Body into Row and create non-scrolling side-bars but keep a the center content scrolling. I have the following, but the content isn't scrolling. What am I missing?
html,body{
overflow: hidden;
width: 100%; height: 100%;
max-height: 100%; max-width: 100%;
margin: 0; padding: 0;
}
.site-container {
height: 100%; width: 100%;
display: flex;
flex-direction: column;
}
.site-container .site-header,
.site-container .site-footer{
flex: 0 0 auto;
overflow: visible;
}
.site-container .site-body {
position: relative;
min-height: 0px;
flex: 0 1 auto;
}
.body-container{
display: flex;
height: 100%;
width: 100%;
flex-direction: row;
}
.body-container .body-left,
.body-container .body-right{
flex: 0 0 auto;
overflow: visible;
}
.body-container .site-content{
position: relative;
overflow: auto;
min-width: 0px;
flex: 1 0 auto;
}
<div class="site-container">
<div class="site-header">
<div style="height: 40px;background-color:YellowGreen">My Header Test </div>
</div>
<div class="site-body">
<div class="body-container">
<div class="site-sidebar-left">
<div style="background-color:lightgray;">
left1<br />
left2<br />
left3<br />
left4<br />
left5<br />
left6<br />
left7<br />
left8<br />
left9<br />
left10<br />
</div>
</div>
<div class="site-content">
blah1<br />
blah2<br />
blah3<br />
blah4<br />
blah5<br />
blah6<br />
blah7<br />
blah8<br />
blah9<br />
blah10<br />
blah11<br />
blah12<br />
blah13<br />
blah14<br />
blah15<br />
blah16<br />
blah17<br />
blah18<br />
blah19<br />
blah20<br />
blah21<br />
blah22<br />
blah23<br />
blah24<br />
blah25<br />
blah26<br />
blah27<br />
blah28<br />
blah29<br />
blah30<br />
blah31<br />
blah32<br />
blah33<br />
blah34<br />
blah35<br />
blah36<br />
blah37<br />
blah38<br />
blah39<br />
blah40<br />
blah41<br />
blah42<br />
blah43<br />
blah44<br />
blah45<br />
blah46<br />
blah47<br />
blah48<br />
blah49<br />
blah50<br />
blah51<br />
blah52<br />
blah53<br />
blah54<br />
blah55<br />
blah56<br />
blah57<br />
blah58<br />
blah59<br />
blah60<br />
blah61<br />
blah62<br />
blah63<br />
blah64<br />
blah65<br />
blah66<br />
blah67<br />
blah68<br />
blah69<br />
</div>
<div class="site-sidebar-right">
<div style="background-color:lightgray;">
right1<br />
right2<br />
right3<br />
right4<br />
right5<br />
right6<br />
right7<br />
right8<br />
right9<br />
right10<br />
</div>
</div>
</div>
</div>
<div class="site-footer">
<div style="height: 40px;background-color:YellowGreen">My Footer Test </div>
</div>
</div>
Eventually it would look like:
Unlike the site-header, which is a flex item of the site-container, the site-footer was nested inside the site-body. Either that was intentional or you were missing a closing div. For the purposes of this answer, I assumed the latter.
Now the site-header, site-body and site-footer are siblings.
Then I added overflow: auto and flex: 1 to .site-content. The first to enable scrollbars and the second to consume free space on the row.
.site-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.site-body {
min-height: 0px;
height: 100%;
}
.body-container {
display: flex;
height: 100%;
}
.site-content {
flex: 1;
overflow: auto;
}
body {
margin: 0;
}
<div class="site-container">
<div class="site-header">
<div style="height: 40px;background-color:YellowGreen">My Header Test </div>
</div>
<div class="site-body">
<div class="body-container">
<div class="site-sidebar-left">
<div style="background-color:lightgray;">
left1
<br /> left2
<br /> left3
<br /> left4
<br /> left5
<br /> left6
<br /> left7
<br /> left8
<br /> left9
<br /> left10
<br />
</div>
</div>
<div class="site-content">
blah1
<br /> blah2
<br /> blah3
<br /> blah4
<br /> blah5
<br /> blah6
<br /> blah7
<br /> blah8
<br /> blah9
<br /> blah10
<br /> blah11
<br /> blah12
<br /> blah13
<br /> blah14
<br /> blah15
<br /> blah16
<br /> blah17
<br /> blah18
<br /> blah19
<br /> blah20
<br /> blah21
<br /> blah22
<br /> blah23
<br /> blah24
<br /> blah25
<br /> blah26
<br /> blah27
<br /> blah28
<br /> blah29
<br /> blah30
<br /> blah31
<br /> blah32
<br /> blah33
<br /> blah34
<br /> blah35
<br /> blah36
<br /> blah37
<br /> blah38
<br /> blah39
<br /> blah40
<br /> blah41
<br /> blah42
<br /> blah43
<br /> blah44
<br /> blah45
<br /> blah46
<br /> blah47
<br /> blah48
<br /> blah49
<br /> blah50
<br /> blah51
<br /> blah52
<br /> blah53
<br /> blah54
<br /> blah55
<br /> blah56
<br /> blah57
<br /> blah58
<br /> blah59
<br /> blah60
<br /> blah61
<br /> blah62
<br /> blah63
<br /> blah64
<br /> blah65
<br /> blah66
<br /> blah67
<br /> blah68
<br /> blah69
<br />
</div>
<div class="site-sidebar-right">
<div style="background-color:lightgray;">
right1
<br /> right2
<br /> right3
<br /> right4
<br /> right5
<br /> right6
<br /> right7
<br /> right8
<br /> right9
<br /> right10
<br />
</div>
</div>
</div>
</div>
<div class="site-footer">
<div style="height: 40px;background-color:YellowGreen">My Footer Test </div>
</div>
</div>
https://jsfiddle.net/9mqxytv4/2/
Bootstrap page responsive
I try to create this type of sign in page in bootstrap http://v4-alpha.getbootstrap.com/examples/signin/ but before this i already create page but this is not bootstrap code <%# Page Language="C#" AutoEventWireup="true" CodeBehind="Mainpage.aspx.cs" Inherits="project.Mainpage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>System</title> <link href="Styles/login.css" rel="stylesheet" /> <link href="Styles/main.css" rel="stylesheet" /> <link href="Content/bootstrap.css" rel="stylesheet" /> <!-- Google Web fonts --> <link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,800,700,600' rel='stylesheet' type='text/css'/> </head> <body style="background-image:url(images/slide07.jpg);background-repeat:no-repeat"> <img class="logo" alt="LOGO" src="images/logomain.png" /> <br /><br /> <form id="form1" runat="server" class="fordiv"> <div id="box"> <span> <img src="images/none.png" id="avtar" /> </span> <div style="margin-left: 190px;margin-top: -170px";> <span> <asp:TextBox CssClass="textbx" ID="txt_us" runat="server" placeholder="Enter UserName"></asp:TextBox><br /><br /> </span> <span> <asp:TextBox CssClass="textbx" ID="txt_pwd" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox><br /><br /> </span> <span> <asp:Button ID="Button1" CssClass="button" runat="server" Text="LOGIN" OnClick="Button1_Click" /> </span> </div> </div><br /><br /> <asp:Label ID="Label1" CssClass="info" visible="false" runat ="server" Text="" BorderColor="Black"></asp:Label> </form> <table class="table" style="border: medium groove #FFFFFF; width: 100%; margin-top: 200px; "> <tr> <td> <img style="margin-left: 10px;" src="images/passd.jpg" /> </td> <td> <img src="images/1.jpg" /> </td> <td> <img src="images/2.jpg" /> </td> <td> <img src="images/3.jpg" /> </td> <td> <img src="images/4.jpg" /> </td> </tr> </table> <br /><br /><br /> </body> </html> now i try to create bootstrap responsive and i tried this <div class="container"> <img class="logo" alt="LOGO" src="images/logomain.png" /><br /><br /> <form class="form-signin" runat="server" > <h2 class="form-signin-heading">Please sign in</h2><br /><br /> <label for="inputEmail" class="sr-only">Email address</label> <asp:TextBox CssClass="textbx" ID="txt_us" runat="server" placeholder="Enter UserName"></asp:TextBox><br /><br /> <label for="inputPassword" class="sr-only">Password</label> <asp:TextBox CssClass="textbx" ID="txt_pwd" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox> <br /><br /> <asp:Button ID="Button1" CssClass="button" runat="server" Text="LOGIN" OnClick="Button1_Click" /> <asp:Label ID="Label1" CssClass="info" visible="false" runat ="server" Text="" BorderColor="Black"></asp:Label> </form> </div> but this shows awkward display any solution?
Well, for responsive design you should be using using bootstraps's grid system. I think you should read a bit about about responsive design here and the bootstrap grid system here.
HTML5 Video Causes Page to Jump on Safari 10
When my page loads, after about 5 seconds, the window scrolls to an html video which is a significant ways down the page (which is on autoplay). This has been an issue following the Safari 10 release. Anyone know why this may be the case?
I'm having the same issue - if I remove the autoplay attribute it doesn't happen. Initiating autoplay via JS (ou even starting the video from the console) makes the page jump as well.
it's the "controls" attribute on the HTML, i've found that the new update on Safari is giving few issues, have a look at this: https://stackoverflow.com/questions/42692679/video-tag-on-safari-10-goes-up-after-few-seconds i did reproduce your issue (mixing it with mine on that question) on Jsfiddle: https://jsfiddle.net/antonino_R/d9tf0va3/15/ (scroll down and run again to reproduce the issue, you may need to run and scroll quickly down again) and removing "controls" does fix the issue https://jsfiddle.net/antonino_R/d9tf0va3/16/ <div class="wrapper"> <div class="wrapper-inner"> <div class="wrapper-video"> <video autoplay loop muted > <source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/> </video> </div> <div class="site-centered clearfix"> <header class="entry-header"> <h1 class="entry-title">this is a title</h1> <h2 class="entry-subtitle">this is some text</h2> </header> </div> </div> </div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h4>this is to scroll down the page and test that it goes up after few seconds</h4> obviously if the controls are needed this fix isn't good enough
At first, you have to add this piece of code in footer:
<script>
var myVideo = document.getElementsByTagName("video")[0];
myVideo.controls = "";
</script>
This worked for me. Before i had problem that after 5 sec when website loaded, just jumped to section with video background. I had there overlay image and without value min-height: ___px; overlay was shorter than video height.
Pop up window automatically on page load
I'm trying to allow a pop up to display always when a user is basically unregistered and wishes to view the certain page. I saw an example of how to do it but I am completely stuck it's not appearing on my page. Any ideas?
Thanks!
Image: http://puu.sh/cr1Zz/1b5da28635.png
My code on that page(CSS is listed in the image above)
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Honda | </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--start lightbox -->
<link rel="stylesheet" type="text/css" href="../css/jquery.lightbox.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.lightbox.js"></script>
<script>
// Initiate Lightbox
$(function() {
$('.gallery1 a').lightbox();
});
</script>
</head>
<body>
<div class='modalDialog'>You cannot view this page! Please register</div>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<img src="../images/logo.png">
</div>
<div class="cssmenu">
<ul>
<li><span>Home</span></li>
<li><span>About</span></li>
<li class="active" class="has-sub"><span>Gallery</span>
</li>
<li class="last"><span>Contact</span></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['user']) && !empty($_POST['pass'])) {
$user=$_POST['user'];
$pass=$_POST['pass'];
$pass = strip_tags($pass);
$pass = md5($pass); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$user."' AND password='".$pass."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($user == $dbusername && $pass == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$user;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "<div class='results'>Invalid username or password!</div>";
}
} else {
echo "All fields are required!";
}
}
?>
<div class="search1">
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" name="user" required />
<label>Password:</label>
<input type="password" name="pass" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p>Register</p></h2>
</center>
</form>
</div>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer2">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li>Skype</li>
<li>Linked in</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Although you include jQuery, the modal dialog is part of the jQueryUI. But that on its own won't solve your problem. You have declared a div with the class modalDialog, so I suppose this is the line to be shown in the dialog. I would suggest you to use id's instead of classes because a class covers multiple document objects, and you really want to show one dialog here. From the jQueryUI docs:
<div id="dialog" title="Please register">
<p>You cannot view this page! Please register</p>
</div>
Add the jQuery call:
$(function() {
$( "#dialog" ).dialog();
});
And that should work just fine
If you decide to go with the lightbox modal dialog your code should look like:
<div id="test-modal" class="white-popup-block mfp-hide">
<h1>lease register</h1>
<p>You cannot view this page! Please register</p>
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
To call the code use:
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
List of html elements that support the CSS :before and :after pseudo elements
I know that the :before, and :after pseudo elements are not supported in empty elements, but what about these: <select> <option> <textarea> <button> A list would be nice! Thanks guys!
I put together a list of every HTML element. Some aren't even legal where they're used... but it still seems to work.
If it says "it works" in green letters, that element is supported.
*:not(br):after {
content: 'it works';
font-weight: bold;
padding: 5px;
color: green;
}
<a>Name: a</a> <br />
<abbr>Name: abbr</abbr> <br />
<address>Name: address</address> <br />
<area>Name: area</area> <br />
<article>Name: article</article> <br />
<aside>Name: aside</aside> <br />
<audio>Name: audio</audio> <br />
<b>Name: b</b> <br />
<base>Name: base</base> <br />
<bdo>Name: bdo</bdo> <br />
<blockquote>Name: blockquote</blockquote> <br />
<body>Name: body</body> <br />
<br>Name: br</br> <br />
<button>Name: button</button> <br />
<canvas>Name: canvas</canvas> <br />
<caption>Name: caption</caption> <br />
<cite>Name: cite</cite> <br />
<code>Name: code</code> <br />
<col>Name: col</col> <br />
<colgroup>Name: colgroup</colgroup> <br />
<command>Name: command</command> <br />
<datalist>Name: datalist</datalist> <br />
<dd>Name: dd</dd> <br />
<del>Name: del</del> <br />
<details>Name: details</details> <br />
<dfn>Name: dfn</dfn> <br />
<div>Name: div</div> <br />
<dl>Name: dl</dl> <br />
<dt>Name: dt</dt> <br />
<em>Name: em</em> <br />
<embed>Name: embed</embed> <br />
<eventsource>Name: eventsource</eventsource> <br />
<fieldset>Name: fieldset</fieldset> <br />
<figcaption>Name: figcaption</figcaption> <br />
<figure>Name: figure</figure> <br />
<footer>Name: footer</footer> <br />
<form>Name: form</form> <br />
<h1>Name: h1</h1> <br />
<h2>Name: h2</h2> <br />
<h3>Name: h3</h3> <br />
<h4>Name: h4</h4> <br />
<h5>Name: h5</h5> <br />
<h6>Name: h6</h6> <br />
<head>Name: head</head> <br />
<header>Name: header</header> <br />
<hgroup>Name: hgroup</hgroup> <br />
<hr>Name: hr</hr> <br />
<html>Name: html</html> <br />
<i>Name: i</i> <br />
<iframe>Name: iframe</iframe> <br />
<img>Name: img</img> <br />
<input>Name: input</input> <br />
<ins>Name: ins</ins> <br />
<kbd>Name: kbd</kbd> <br />
<keygen>Name: keygen</keygen> <br />
<label>Name: label</label> <br />
<legend>Name: legend</legend> <br />
<li>Name: li</li> <br />
<link>Name: link</link> <br />
<mark>Name: mark</mark> <br />
<map>Name: map</map> <br />
<menu>Name: menu</menu> <br />
<meta>Name: meta</meta> <br />
<meter>Name: meter</meter> <br />
<nav>Name: nav</nav> <br />
<noscript>Name: noscript</noscript> <br />
<object>Name: object</object> <br />
<ol>Name: ol</ol> <br />
<optgroup>Name: optgroup</optgroup> <br />
<option>Name: option</option> <br />
<output>Name: output</output> <br />
<p>Name: p</p> <br />
<param>Name: param</param> <br />
<pre>Name: pre</pre> <br />
<progress>Name: progress</progress> <br />
<q>Name: q</q> <br />
<ruby>Name: ruby</ruby> <br />
<rp>Name: rp</rp> <br />
<rt>Name: rt</rt> <br />
<samp>Name: samp</samp> <br />
<script type="application/json">Name: script</script> <br />
<section>Name: section</section> <br />
<select>Name: select</select> <br />
<small>Name: small</small> <br />
<source>Name: source</source> <br />
<span>Name: span</span> <br />
<strong>Name: strong</strong> <br />
<style>Name: style</style> <br />
<sub>Name: sub</sub> <br />
<summary>Name: summary</summary> <br />
<details>Name: details</details> <br />
<sup>Name: sup</sup> <br />
<table>Name: table</table> <br />
<tbody>Name: tbody</tbody> <br />
<td>Name: td</td> <br />
<textarea>Name: textarea</textarea> <br />
<tfoot>Name: tfoot</tfoot> <br />
<th>Name: th</th> <br />
<thead>Name: thead</thead> <br />
<time>Name: time</time> <br />
<title>Name: title</title> <br />
<tr>Name: tr</tr> <br />
<ul>Name: ul</ul> <br />
<var>Name: var</var> <br />
<video>Name: video</video> <br />
<wbr>Name: wbr</wbr> <br />