It seems that I have no missing DIVs or at least I see it. It seems to be off and overlap Any suggestions? I am unable to see the problems. The top and bottom one works well but the one with the Build Release notes and Supplemental Release Notes are off quite a bit.
<h2 class="Billboard">
System Knowledge Base</h2>
<div class="Billboard">
<p align="center">
Home I Customer Care
I Field Customer Care
I Logout
</p>
</div>
<h2 class="Billboard">
General System Information</h2>
<div class="Billboard">
<p>
80 Links and Documents
</p>
</div>
**<h2 class="QuickLinks">
Build Release Notes</h2>
<div class="QuickLinks">
<p>
120 Links and Documents
</p>
</div>
</div>
<h2 class="QuickLinks">
Supplemental Release Notes</h2>
<div style="float:right">
<p>
10 Link and Documents
</p>
</div>**
<h2 class="Billboard">
TFACTS Customer Care</h2>
<div class="Billboard">
<p>
10 Link and Documents
</p>
</div>
<h2 class="Billboard">
Reference Materials and Storyboards
</h2>
<div class="Billboard">
<p>
250 Links and documents
</p>
</div>
<!-- InstanceEndEditable -->
</div>
<!-- CLOSES THE MAIN CONTENT DIV -->
You do in fact close a <DIV> prematurely. See the line below that I've commented out.
<h2 class="Billboard">
System Knowledge Base</h2>
<div class="Billboard">
<p align="center">
Home I Customer Care
I Field Customer Care
I Logout
</p>
</div>
<h2 class="Billboard">
General System Information</h2>
<div class="Billboard">
<p>
80 Links and Documents
</p>
</div>
**<h2 class="QuickLinks">
Build Release Notes</h2>
<div class="QuickLinks">
<p>
120 Links and Documents
</p>
<!--- ** </div> RIGHT HERE ** --->
</div>
<h2 class="QuickLinks">
Supplemental Release Notes</h2>
<div style="float:right">
<p>
10 Link and Documents
</p>
</div>**
<h2 class="Billboard">
TFACTS Customer Care</h2>
<div class="Billboard">
<p>
10 Link and Documents
</p>
</div>
<h2 class="Billboard">
Reference Materials and Storyboards
</h2>
<div class="Billboard">
<p>
250 Links and documents
</p>
</div>
<!-- InstanceEndEditable -->
</div>
<!-- CLOSES THE MAIN CONTENT DIV -->
Looks like you have an extra closing div tag. I am going to mark this question on hold because it is too localized. Please use the W3C Validator for things like this: http://validator.w3.org/check
See the closed div tag below marked with a comment:
<h2 class="Billboard">
System Knowledge Base</h2>
<div class="Billboard">
<p align="center">
Home I Customer Care
I Field Customer Care
I Logout
</p>
</div>
<h2 class="Billboard">
General System Information</h2>
<div class="Billboard">
<p>
80 Links and Documents
</p>
</div>
**<h2 class="QuickLinks">
Build Release Notes</h2>
<div class="QuickLinks">
<p>
120 Links and Documents
</p>
</div> <!-- EXTRA CLOSING TAG IS HERE -->
</div>
<h2 class="QuickLinks">
Supplemental Release Notes</h2>
<div style="float:right">
<p>
10 Link and Documents
</p>
</div>**
<h2 class="Billboard">
TFACTS Customer Care</h2>
<div class="Billboard">
<p>
10 Link and Documents
</p>
</div>
<h2 class="Billboard">
Reference Materials and Storyboards
</h2>
<div class="Billboard">
<p>
250 Links and documents
</p>
</div>
<!-- InstanceEndEditable -->
</div>
<!-- CLOSES THE MAIN CONTENT DIV -->
Related
I'm having trouble trying to push the containers inside my two columns layout. Right now it aligns which means that there are gaps between a container if it happens to be longer than other containers.
Here is the picture that hopefully explains it further
Below is the code of this part:
<section class="maincontent container container-fluid">
<!-- BOX 1 -->
<article class="servicestatus container container-fluid col-xs-12 col-md-6 float-md-left">
<a id="aservicestatus"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Service Status Notifications</h3>
<j:while test="${ou.next()}">
<j:if test="${ou.type!='planned'}">
<div class="statusitem">
<j:if test="${ou.type=='outage'}">
<span class="status red">Outage</span>
</j:if>
<j:if test="${ou.type=='degradation'}">
<span class="status yellow">Degradation</span>
</j:if>
<j:if test="${ou.type=='informational'}">
<span class="status green">Informational</span>
</j:if>
<h5>${ou.short_description}</h5>
<p class="subheader"><strong>Start Date</strong> <em>- ${ou.begin.getDisplayValue()}</em></p>
<p class="subheader">${ou.u_outage_details}</p>
</div>
</j:if>
</j:while>
</div>
</article>
<!-- BOX 2 -->
<article class="plannedoutages container container-fluid col-xs-12 col-md-6 float-md-right">
<a id="aplannedoutages"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Scheduled Maintenance</h3>
<j:while test="${mn.next()}">
<j:if test="${mn.type=='planned'}">
<div class="outageitem">
<p class="subheader"><strong>${mn.cmdb_ci.name}</strong></p>
<p class="subheader">From: <em>${mn.begin.getDisplayValue()} - ${mn.end.getDisplayValue()} </em> </p>
<p class="subheader">${mn.u_outage_details}</p>
</div>
</j:if>
</j:while>
</div>
</article>
<article class="wifi container container-fluid col-xs-12 col-md-6 pull-md-right">
<a id="awifi"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Wifi Information</h3>
<div class="container">
<j:if test="${bt.next() || bt.getRowCount() > 0}">
<j:if test="${bt.u_omers_company=='oxford'}">
<p class="subheader">Please follow these Instructions</p>
</j:if>
<j:if test="${bt.u_omers_company!='oxford'}">
<p class="subheader">Please follow these Instructions</p>
</j:if>
</j:if>
</div>
</div>
</article>
<!-- BOX 3 -->
<article class="windows10 container container-fluid col-xs-12 col-md-6 pull-md-right">
<a id="awindows10"></a>
<div class="container">
<!--<span class="sprite icon"></span> -->
<img src="win10icon.png" width="62" height="63"/>
<h3>Exchange/Win 10 Information</h3>
<div class="container">
<p class="subheader">IT Team is pleased to announce the deployment of Windows 10 with Office Professional Plus and Outlook Exchange Online (part of the Microsoft Office 365 platform). You can get regular updates here.</p>
<p></p>
<!--<p class="subheader">For those who would like to preview it prior to receiving the Windows 10 upgrade, please click here.</p> -->
<p class="subheader">We are pleased to inform you that your Office suite has been updated to a new version (1808).</p>
<p class="subheader">This will enable new collaboration features like <B>Document collaboration and co-authoring, AutoSave for Teams and OneDrive files, Improved cell and formula bar editing</B>, etc.</p>
<p></p>
<p class="subheader">To ensure your upgrade is complete:</p>
<p class="subheader">1. <B>Close</B> all open Microsoft apps. </p>
<p class="subheader">2. <B> Relaunch</B> any Microsoft Office desktop app (e.g. Word, PowerPoint, Excel, Outlook) </p>
<p class="subheader">3. <B> Check</B> that you have the right version. Go to <B>File > Account</B>, and look under Product Information for <B>"Version 1808"</B> </p>
<p></p>
<p class="subheader">Please see full release notes here.</p>
</div>
</div>
</article>
<!-- BOX 4 -->
<article class="hoursofoperation container container-fluid col-xs-12 col-md-6 float-md-right">
<a id="ahoursofoperation"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Hours of Operation</h3>
<j:if test="${be.next()}">
<j:if test="${be.u_omers_company=='oxford'}">
<p class="subheader"><B>Regular Operating Hours: </B> <em>Monday to Friday – 8AM to 8PM ET</em></p>
<p class="subheader"><B>After-Hours Emergency Support: </B> <em>Monday to Friday – 8PM to 11PM ET Saturday to Sunday – 10AM to 7PM ET</em></p>
<p class="subheader"><B>Telephone: </B> <em>416-865-8349</em></p>
<p class="subheader"><B>Email:</B> Service Desk</p>
</j:if>
<j:if test="${be.u_omers_company=='omers'}">
<p class="subheader"><B>Regular Operating Hours: </B> <em>Monday – Friday 7am to 7pm ET</em></p>
<p class="subheader"><B>24/7 on call support: </B> <em>available outside of business hours (by phone only). For urgent issues requiring immediate attention, please call the Service Desk instead of emailing. Depending on volumes being handled by the team, it may take up to 24 business hours for the Service Desk to respond to emails. Outside of normal business hours, the Service Desk phone line is automatically redirected to 24/7 on call support.</em></p>
<p class="subheader"><B>Telephone: </B> <em>416-814-6555, option 1 </em></p>
<p class="subheader"><B>Email:</B> Service Desk</p>
</j:if>
</j:if>
</div>
</article>
<!-- BOX 5 -->
<article class="ITsupport container container-fluid col-xs-12 col-md-6">
<a id="ITsupport"></a>
<div class="container">
<img src="/Facility_logoMobile.png" height="45px"/>
<h3>Facilities Portal</h3>
<p class="content"> From here you can submit a request relating to new office furniture, security cards, confidential shredding services or to request an ergonomic consultation.</p>
Go >
</div>
</article>
</section>
The top third of my page, including a graphic and headline, shows up just fine in Firefox and Explorer, but does not appear in Chrome when accessed from my server. It does appear in Chrome when viewing the page as a file.
The graphic is defined in the CSS file as:
/** adbox **/
#adbox {
background: #020a13 url(../images/bg-adbox.jpg) no-repeat center top;
font-family: Georgia, "Times New Roman", Times, serif;
min-height: 433px;
margin: -56px 0 22px;
And the HTML file is:
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<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>donfiler.net - web design </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div class="wrapper clearfix">
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Blog
</li>
<li>
Gallery
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="contents">
<div id="adbox">
<div class="wrapper clearfix"><p></p><p></p>
<div class="info">
<h1>Web Design & Social Media Marketing</h1>
<p>
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality.
</p>
</div>
</div>
<div class="highlight">
<h2>707-217-8457 if you want a mobile friendly web site.</h2>
</div>
</div>
<div class="body clearfix">
<div class="click-here">
<h1>Impact Marketing</h1>
Click Here!
</div>
<p style="font-size:12px;">
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality. We design web sites with dynamic database interaction; deliver computer based training; create comprehensive marketing campaigns; specialize in hand coding HTML, CSS, PHP, Mysql and JavaScript to customize web design and user interface.
</p>
</div>
</div>
<div id="footer">
<ul id="featured" class="wrapper clearfix">
<li>
<img src="images/THUMBNAIL_IMAGE4.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Memories of growing up in Europe during the Cold War. The first book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE3.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
A catchy tune by the Beach Boys in the mid-sixties, the lyrics of "Be True to Your School" hit many highlights of high school in that era.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE2.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
College Years and Rock Band Entrepreneur. The third book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE1.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Contributing to others is the highest form of success you can achieve and I wanted to impart what I have learned over the years working for a living.
</p>
</li>
</ul>
<div class="body">
<div class="wrapper clearfix">
<div id="links">
<div>
<h4>Social</h4>
<ul>
<li>
Google +
</li>
<li>
Facebook
</li>
<li>
Youtube
</li>
</ul>
</div>
<div>
<h4>Blogs</h4>
<ul>
<li>
Blogspot
</li>
<li>
Marketing Blog
</li>
<li>
Web Design Blog
</li>
</ul>
</div>
</div>
<div id="newsletter">
<h4>Newsletter</h4>
<p>
Sign up for Our Newsletter
</p>
<form action="https://donfiler.us/newsletter" method="post">
<!--<input type="text" value="">-->
<input type="submit" value="Sign Up!">
</form>
</div>
<p class="footnote">
© Copyright © 2016 Don Filer all rights reserved.
</p>
</div>
</div>
</div>
</body>
</html>
The Google Chrome extension AdBlock is blocking that element for me, because its ID is adbox. Check if you have that extension enabled, as well.
In general, try avoiding the word "ad" when naming HTML elements.
From the start, I can see a major flaw in the code- you named an element adbox. Most ad-blocking extensions work this way- they scan for ads, and that element will be perceived as an ad, simply because of it's name.
To quote CapitalQ,
In general, try avoiding the word "ad" when naming HTML elements.
Check if you have an ad-blocking extension turned on, and if so, try the site without that extension. Also, rename that element ASAP!
I've recently designed a website and have realised that some of the background of the content, when you scroll down is transparent and so the fixed div that is beneath the content displays on IE and Firefox. Please see my website for a live view of the problem. The HTML is below. Please see below an image of my problem as you can see the text "Get In Touch" is being displayed. I want the background of the content to be above this. Please find attached the fiddle.
<body>
<div class="overlay overlay-hugeinc">
<button type=button class=overlay-close></button>
<img src=http://kadeem.london/Image/Transparent-Kadeem-min.png class="fixed-Me scaling">
<nav>
<ul>
<li><a href=http://kadeem.london>Home</a></li>
<li><a href=papers.html>Papers</a></li>
<li><a href=events.html>Events</a></li>
<li><a href=designs.html>Designs</a></li>
</ul>
</nav>
</div>
<div id=trigger-overlay>
<div class=menubutton>
<h3 class=menubuttontext>MENU</h3></div></div>
<div class=high-container>
<div class=global-container>
<div class=Intro-Video>
<div class=video-box>
<div id=video-container>
<video autoplay class=fillWidth>
<source src=Video/Trailer.mp4 type="video/mp4"/>
</video>
<div class=Kadeem-Logo>
<img src=http://kadeem.london/Image/KL-LOGO.png>
</div>
</div>
</div>
</div>
<div class=content-container>
<div class=row>
<div class="border red"></div>
<h1 class=title-role>
I'm Kadeem
</h1>
</div>
<div class=post-container>
<div class=Biographical-Content>
<div class="step out-view"></div>
<br>
<p>I go by the name of <a href=https://www.linkedin.com/pub/kadeem-laurie/57/277/9b5>Kadeem Laurie</a>. I am an events graduate currently developing an events marketing start-up. This website was created from scratch using HTML5, CSS3,jQuery & responsive design. I specialise in event management, digital content, SEO, marketing strategy, branding and front-end web design. <p> Freedom of thought inspires me. I love conceptualising and seeing ideas evolve. I see myself as a marketeer who simply likes to make things look good, branding has thus always been my most favourable aspect of marketing. I studied event management in university and have organised a <a href=events.html> few events</a> of my own. I am currently working as an event organiser at <a href=https://en.wikipedia.org/wiki/Spire_Healthcare>Spire Healthcare</a>. I hope to integrate events within marketing strategy more. I like to ask the <a href=http://stackoverflow.com/users/1923610/kadeem-laurie target=_blank>right questions</a> and find solutions from different perspectives. My academic interests lie in the regions of city branding and <a href=https://www.academia.edu/14690454/The_Commercial_and_Political_Implications_of_Events>events management.</a> <p>My favourite book is <a href=https://en.wikipedia.org/wiki/The_Prince>The Prince</a> by Nicolo Machievelli. My favourite dish is <a href=http://lifestyle.sapo.pt/sabores/receitas/arroz-de-marisco>Arroz De Marisco.</a> This website has been recently created so content is being added concurrently.
<p>
</p>
</div>
</div>
</div>
<div class=other-contain>
<div class=My-Gems>
<div id=effect-6 class="effects clearfix">
<div class=img>
<img src=https://alchetron.com/cdn/zeebra-5e766eb1-964a-49c5-b888-c05effa9354-resize-750.jpeg style=height:100% alt>
<div class=overlay5>
<a class=expand>Bone & Joint Launch</a>
</div>
</div>
<div class=img>
<img src=http://kadeem.london/Image/Money-Matters-Logo.png alt>
<div class=overlay5>
<a href=designs.html class=expand>Money Matters</a>
</div>
</div></div>
</div>
</div>
<div class=eee>
<div class=row>
<section id=activities class=pane>
<div class=pane-content>
<div class=pane-row>
<div class=summary>
<p>POSTS</p>
</div>
</div>
<div class="pane-row d">
<div class=activity-col>
<h4>city branding</h4>
<ul>
<li><a>The Impact of City Branding in The Perceived Image of Cities: The Case of New York City</a></li>
</ul>
<h4>Urban Regeneration</h4>
<ul>
<li>The Role of Events in Urban Regeneration</li>
<li>Hacknified</li>
</ul>
</div>
<div class=activity-col>
<h4>Marketing Strategy</h4>
<ul>
<li>Marketing Strategy: British Airways vs. Air France</li>
<li>The Marketing Strategies of Startup Brands</li>
</ul>
<h4>Events Management</h4>
<ul>
<li>The Political & Commerical Implications of Events</li>
</ul>
</div>
<div class=activity-col>
<h4>Events Marketing</h4>
<ul>
<li>Marketing Events Online</li>
<li>The Role of City Branding in Urban Tourism</li>
</ul>
<h4>Digital Marketing</h4>
<ul>
<li>Digital Content</li>
<li>Post Purchase Behaviour of Hotel Guests</li>
</ul>
</div>
</div>
</div>
</section>
<footer class=goodbye>
<div class="border red4"></div>
<div class=block>
<div class=centered>
<h2 class=text-go>GET IN TOUCH</h2>
</div>
</div>
</footer>
<footer class=goodbye4>
<div class=block6>
<div class=centered6>
If you would like to find out more about me you can <a href=mailto:kadeemlaurie#gmail.com>message me</a>.
</div>
</div>
</footer>
<footer class=goodbye5>
<div class=container1>
<footer class=footer>
<div class=container1>
<div class=flex-item>© 2015 KADEEM</div>
</div>
</footer>
</div>
</div>
You have an empty P tag inside your post-container that is causing this gap. Remove it and it will fix everything accross all browsers. Also, once the empty tag is removed, you could give the last P element (with the "My favourite book" text) a padding-bottom of 45px to push the container down correctly.
<div class="post-container">
<div class="Biographical-Content hidden visible animated fadeInUpBig">
<div style="height: 407px;" class="step out-view active"></div>
<br>
<p>I go by the name of [...]</p>
<p> Freedom of thought [...]</p>
<p>My favourite book [...]</p>
<p></p> --> Empty P tag
</div>
</div>
If for any reason you can't avoid having that "extra" <p> in your html; add this to your css
p:last-child {
display: none;
}
I'm a little confused about article VS Section in HTML 5.
My web page is divided into different types of foods.
Each row is a different type of food - (Meat, veg and desserts). Each row is subdivided into three columns / recipes
Should I enclose everything in a section tag AND then each type of food (row) in and article tag?
<h2> Vegetable recipes </h2>
<div class="row_divider clearfix>
<div class="span1_of_3>
<p> a veg recipie1 </p>
</div>
<div class="span1_of_3>
<p> a veg recipie2 </p>
</div>
<div class="span1_of_3>
<p> a veg recipie1 </p>
</div>
</div> <!-- end row-->
<h2> Meat recipes </h2>
<div class="row_divider clearfix>
<div class="span1_of_3>
<p> a Meat recipe 1 </p>
</div>
<div class="span1_of_3>
<p> a Meat recipe 2 </p>
</div>
<div class="span1_of_3>
<p> a Meat recipe 3 </p>
</div>
</div> <!-- end row -->
<h2> Dessert recipes</h2>
<div class="row_divider clearfix>
<div class="span1_of_3>
<p> a Dessert recipe 1 </p>
</div>
<div class="span1_of_3>
<p> a Dessert recipe 2 </p>
</div>
<div class="span1_of_3>
<p> a Dessert recipe 3 </p>
</div>
</div> <!-- end row -->
No you should not wrap each item in <article> see on w3c specs
In case you have a list of items you should wrap each one in <li> - list item and wrap all of those with <ol> or <ul> depends if the order of the items is important.
In the Visual Studio the CSS file has this. I am trying to use an inline code to float these 2 boxes side by side and not alter the actual CSS file if possible. In the ASCX file I have the code as:-
<h2 class="QuickLinks">
Build Release Notes</h2>
<div class="QuickLinks">
<p> There is a list of very long law statutory codes but putting this as a test only </p>
<div>
<h2 class="QuickLinks">
Supplemental Release Notes</h2>
<div class="QuickLinks">
<p> here is a list of very long law statutory codes/ links and pdf links but putting this as a test only </p>
</div>
css file (sample) there are 100s of settings but I found this:
div#MainContent h2.QuickLinks, div#MainContent h2.QuickLinks a:link, div#MainContent h2.QuickLinks a:visited, div#MainContent h2.QuickLinks a:hover, div#MainContent h2.QuickLinks a:visited, div#MainContent h2.QuickLinks a:hover {
background-image: url(images/mc/mc_03.jpg);
background-color: #b0b0b0;
color: #000;
}
div#MainContent div.QuickLinks {
border: 2px solid #b0b0b0;
border-top: none;
}
You'll need to wrap each section in a container, and then either float the containers or give them display of inline-block to get them to sit side-by-side.
HTML:
<div class="QuickLinks-Container" style="float:left;width:48%;">
<h2 class="QuickLinks">Build Release Notes</h2>
<div class="QuickLinks">
<p>There is a list of very long law statutory codes but putting this as a test only</p>
</div>
</div>
<div class="QuickLinks-Container" style="float:left;width:48%;">
<h2 class="QuickLinks">Supplemental Release Notes</h2>
<div class="QuickLinks">
<p>here is a list of very long law statutory codes/ links and pdf links but putting this as a test only</p>
</div>
</div>
fiddle: http://jsfiddle.net/xupxf3um/
This is the actual Code. I did not reference all those links and docs. I am unable to see why it does not float as 2 separate boxes on the top.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="KnowledgeBase.ascx.cs" Inherits="Control_KnowledgeBase" %>
System Knowledge Base
Home I Customer Care
I Field Customer Care
I Logout
<h2 class="Billboard">
General System Information</h2>
<div class="Billboard">
<p>
80 Links and Documents
</p>
</div>
<h2 class="QuickLinks">
Build Release Notes</h2>
<div class="QuickLinks"style="float:left;width:48%;">
<p>
120 Links and Documents
</p>
</div>
</div>
<h2 class="QuickLinks">
Supplemental Release Notes</h2>
<div class="QuickLinks"style="float:left;width:48%;">
<p>
10 Link and Documents
</p>
</div>
<h2 class="Billboard">
TFACTS Customer Care</h2>
<div class="Billboard">
<p>
10 Link and Documents
</p>
</div>
<h2 class="Billboard">
Reference Materials and Storyboards
</h2>
<div class="Billboard">
<p>
250 Links and documents
</p>
</div>
<!-- InstanceEndEditable -->
</div>
<!-- CLOSES THE MAIN CONTENT DIV -->