I am working on setting up my website - it still has a long way to go, and I'm new at this. I have a page with a series of clickable boxes representing my portfolio. However, the images I want to be displayed in these boxes are orienting themselves to the left rather than the center of the box. Any advice?
Website where problem is: http://corey-dickinson.com/portfolio.html
Code:
<!doctype html>
<html lang="en">
<head>
<title>CoreyDickinson.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800|Playfair+Display:,300, 400, 700" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement#4.2.7/build/mediaelementplayer.min.css">
<link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">
<!-- Theme Style -->
<link rel="stylesheet" href="css/style.css">
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAq6urACkpKQD19fUA4ODgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACEwAAADEgAAIhMAADEiAAASITADEiEAAEIiEzEiJAAAMiIhEiIjAAABIiIiIhAAAAQiIiIiQAAAAyIiIiIwAAAAEiIiIQAAAABCIiIkAAAAADIiIiMAAAAAASIiEAAAAAAEIiJAAAAAAAMiIjAAAAAAABIhAAAAAAAAQiQAAADH4wAAw8MAAMGDAADAAwAAwAMAAOAHAADgBwAA4AcAAPAPAADwDwAA8A8AAPgfAAD4HwAA+B8AAPw/AAD8PwAA" rel="icon" type="image/x-icon" />
</head>
<body>
<div class="site-wrap">
Menu
<div class="offcanvas_menu" id="offcanvas_menu">
<ul class="mb-5">
<li>Bio</li>
<li class="active">Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
<ul class="social">
<li></li>
<li></li>
<li></li>
</ul>
</br><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib and coded in Brackets by CD
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</div>
<px-2 class="fa fa-home">
<div class="mx-auto" style="width: 200px;">
<h1>Portfolio</h1>
</div>
<hr><hr>
<div class = "container">
<ul class="portfolio-list">
<li>
<a href="https://redcross.carto.com/viz/3ea45828-7769-4f92-9170-bec6c63dfc9a/public_map">
<img src="img/arcban2.jpg" alt="" style="image-orientation: center">
<div class="text">
<h3>Diaspora Mapping RC</h3>
<span>A project for the Red Cross that designed maps of the distribution of selected diaspora populations across the United States. The map was used by large numbers of volunteers to coordinate outreach programs.</span>
</div>
</a>
</li>
<li>
<a href="index_search.html">
<img src="img/qcwide.png" alt="">
<div class="text">
<h3>Quiet Contractors Directory</h3>
<span>Project for small non-profit focused on noise polution to create a directory/webmap of environmentally friendly contractors across the US.</span>
</div>
</a>
</li>
<li>
<a href="MukigavMutooroMap-July2017.pdf">
<img src="img/kasiisibanner2.png" alt="">
<div class="text">
<h3>Tribal Map Western Uganda</h3>
<span>A map produced for the Kasiisi project, a small NGO in Uganda. This map outlines the spatial patterns in different tribes in the region. This data was derived from a survey I oversaw that was distributed using XML forms in ODK. </span>
</div>
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=u7Cuy5AO88Y">
<img src="img/TED_banner-resized.png" alt="">
<div class="text">
<h3>TED Talk Nauru</h3>
<span>A TED talk outlining the results and reflections from a project I created. The project was focused on mapping the environmental degredation on Nauru, a small island nation in the South Pacific.</span>
</div>
</a>
</li>
<li>
<a href="A)%20Report_Living_Situation_Refugee_Camps_2017.pdf">
<img src="img/UNHCR_banner2.png" alt="">
<div class="text">
<h3>Refugee Camp Report</h3>
<span>An analysis of quality of life patterns in Syrian refugee camps, developed for a class at Clark University. The results of this project were submitted to UNHCR.</span>
</div>
</a>
</li>
<li>
<a href="Cape_Cod_Sand.mp4">
<img src="img/nps-banner-2.png" alt="">
<div class="text">
<h3>Analysis of changing seashore patterns</h3>
<span> Analyzed the effects of sea level rise on Nauset Spit for the North Atlantic Coastal Lab for Cape Cod National Seashore. The project involved exstensive research of historical maps and arial imagary.</span>
</div>
</a>
</li>
</ul>
<div class = "container">
<h1 class="mb-5">Download Zip</h1>
</div>
<!-- loader -->
<div id="loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214"/></svg></div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Add a class for the tag like so
<img class="center_img" ..... />
and then in your css have:
img.center_img{
margin: y_margin_values auto;
}
Setting two values for margin sets first value as top and bottom, second as left and right. Setting the left and right values to auto will center the <img> within its container. If that still doesn't work, set it's parent <a> or parent <li>' to havewidth: 100% ' or whatever width you desire.
There are few possible way to get the desired result. lets discuss few of them
Pulling the Image in center
Here we will just pull the image to center, although image size will be the same as it is now. so your li width is full width, but image will be in center may be if size(width) of image if less.
apply the below css to the image inside your li
.portfolio-list li a img
{
display: block;
margin: 0px auto;
}
setting image as background to your li > a
And another when you want the size of the image same as your li its better to set the image as background rather than showing it as html element inside your li.
So you can apply the below css, make it sure we need to set the background-image separately for each of your li. and can remove the img element side your li a.
.portfolio-list li a
{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 230px;
}
.portfolio-list li a.first
{
background-image: url('http://corey-dickinson.com/img/arcban2.jpg');
}
.portfolio-list li a.second
{
background-image: url('http://corey-dickinson.com/img/qcwide.png');
}
...
...
//And so on for other li.
Add this to your CSS
.portfolio-list li a {
text-align: center;
}
Related
I want that the div panel_pricing-table becomes an flexbox so that all elements in it stay in this box also when i make my window smaller. My problem is that the elements in the flexbox wont shrink, if i make my browser window smaller. The mistake is in CSS but i dont find it. Can you help me pls?
Screenshot of the problem
Here is my HTML:
html {
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body{
background-color: #3a86ff;
}
.panel_pricing-table{
width:80%;
margin: 0 auto;
display :flex;
transform: translateY(70%);
background-color: aliceblue;
min-width: 40px;
max-width: 34200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Price Tiers</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="panel_pricing-table">
<div class="pricing-plan">
<img src="icons/icon1.png" alt="" class="pricing-img">
<h2 class="pricing-header">Personal</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Custom domains</li>
<li class="pricing-features-item">Sleeps after 30 mins of inactivity</li>
</ul>
<span class="pricing-price">Free</span>
Sign up
</div>
<div class="pricing-plan">
<img src="icons/icon2.png" alt="" class="pricing-img">
<h2 class="pricing-header">Small team</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Never sleeps</li>
<li class="pricing-features-item">Multiple workers for more powerful apps</li>
</ul>
<span class="pricing-price">$150</span>
Free trial
</div>
<div class="pricing-plan">
<img src="icons/icon3.png" alt="" class="pricing-img">
<h2 class="pricing-header">Enterprise</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Dedicated</li>
<li class="pricing-features-item">Simple horizontal scalability</li>
</ul>
<span class="pricing-price">$400</span>
Free trial
</div>
</div>
</body>
</html>
you should learn responsive_html, it will solve the problem
A (in my opinion quite dirty) way to shrink the elements would be to use transform: scale(x) with x being smaller than 1.
What you probably want to do is use smaller font-sizes on smaller viewports.
A good starting point to learn more about responsiveness in css would be to read about media queries: mdn docs
Add this in your css file. You have to make your image size small
For my reference, i have kept the width 80 you can keep whatever you want
.pricing-img{
width:80%
}
I am building a website and I came across an issue. The footer of this page doesn't stretch to the edge of the website, like it does on this page.
Here is the HTML of the first page where the footer is displaying incorrectly.
<!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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<title>ItsBabylicious.com - cute soft embroidered baby blankets & other embroidery</title>
</head>
<body>
<div class="wrap">
<h1 id="logo">Itsbabylicios.com<br /></h1>
<ul id="menu">
<li>Home</li>
<li>Gallery</li>
<li>Products</li>
<li>Store</li>
<li>Contact</li>
</ul>
<div class="row">
<div id="text" class ="column" style ="width:%100">
<h2>Baby gifts and embroidery </h2>
<p>Here at Babylicous.com we sell baby blankets. The Yummy type that babys just want to rub on their face.</p>
<p>Babylicious blankets are special. Each balnket is embroidered to your custom order. in over 40 colors if you want a blanket truly special contact us as we are a fully custom embroidery shop that aims to please</p>
</div>
<div class="column" style="width:%100">
<img src="custom name on baby blanket.jpg" alt="Cutest Baby blanket pic ever!" style="max-width: 100%;border-radius: 8px">
</div>
<div id="green_bubble">
<p>check out our new etsy shop
</div>
</div>
<!-- Generated by https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections -->
<div style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M0.00,49.98 C149.99,150.00 349.20,-49.98 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #FF99CB;"></path></svg></div>
<div id="footer">
<div class="wrap">
<div id="bubble"><p>We are located in Lakewood NJ 08701 just give us a call 732 305 0260</p></div>
<div id="copyright">
<p>Copyright © 2008 − Happy Template − Design: Luka Cvrk, <a title="Awsome Web Templates" href="http://www.solucija.com/">Solucija</a></p>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
In the links you provided, on the second page's source, if you check your div with id="footer" is wrapped in a div with class="wrap" while on the gallery page its not.
and since the wrap class has a fixed width of 900px, so the footer is also of the same width, just move the footer outside the wrap and it will become full width.
Hope it helps.
Hello I'm having trouble centering my ul list to my title and main image using css. If you run the code the ul list is a bit to the left of the centered image and title. Also if I type in text-align: center; to the ul list it looks unorganized and the bullets aren't aligned to the left. Here is the code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>McDonalds Tribute Page</title>
<link rel="stylesheet" type="text/css" href="tribute.css">
</head>
<body>
<div id="main">
<header id="title">
<h1>
McDonalds Tribute Page
</h1>
</header>
<div id="main-image">
<!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds Golden Arches" /> -->
</div>
<div id="tribute-info">
<body>
<h3 class="color-text">A timeline of all things McDonalds</h3>
<ul id=list-info>
<li>
<strong>1953</strong> - McDonalds opens first franchise in Phoenix
</li>
<li>
<strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
</li>
<li>
<strong>1958</strong> - McDonalds has sold 100 million burgers
</li>
<li>
<strong>1958</strong> - McDonalds spreads to the East Coast
</li>
<li>
<strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
</li>
<li>
<strong>1963</strong> - 1 Billion burgers sold
</li>
<li>
<strong>1968</strong> - The Big Mac was introduced to McDonalds
</li>
<li>
<strong>1980</strong> - Chicken McNuggets are introduced
</li>
<li>
<strong>2015</strong> - All day breakfast introduced
</li>
</ul>
</body>
</div>
<!-- <div class="img-gallery">
<section>
<img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
<img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
<img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
<img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
<img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
<img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
</section>
</div> -->
<body>
</body>
</div>
</body>
</html>
and my css
#main {
display: grid;
}
#title {
text-align: center;
}
#main-image {
display: block;
margin-left: auto;
margin-right: auto;
}
#tribute-info {
margin-left: auto;
margin-right: auto;
}
I can't post images so I commented out the picture
Your UL is being centered, but you just need to give the wrapping div a width else it takes up 100%:
#main {
display: grid;
}
#title {
text-align: center;
}
#main-image {
display: block;
margin-left: auto;
margin-right: auto;
}
#tribute-info {
margin-left: auto;
margin-right: auto;
width: 300px;
}
ul {
padding: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>McDonalds Tribute Page</title>
<link rel="stylesheet" type="text/css" href="tribute.css">
</head>
<body>
<div id="main">
<header id="title">
<h1>
McDonalds Tribute Page
</h1>
</header>
<div id="main-image">
<!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds Golden Arches" /> -->
</div>
<div id="tribute-info">
<h3 class="color-text">A timeline of all things McDonalds</h3>
<ul id=list-info>
<li>
<strong>1953</strong> - McDonalds opens first franchise in Phoenix
</li>
<li>
<strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
</li>
<li>
<strong>1958</strong> - McDonalds has sold 100 million burgers
</li>
<li>
<strong>1958</strong> - McDonalds spreads to the East Coast
</li>
<li>
<strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
</li>
<li>
<strong>1963</strong> - 1 Billion burgers sold
</li>
<li>
<strong>1968</strong> - The Big Mac was introduced to McDonalds
</li>
<li>
<strong>1980</strong> - Chicken McNuggets are introduced
</li>
<li>
<strong>2015</strong> - All day breakfast introduced
</li>
</ul>
</div>
<!-- <div class="img-gallery">
<section>
<img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
<img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
<img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
<img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
<img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
<img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
</section>
</div> -->
<body>
</body>
</div>
</body>
</html>
I am relatively new to Front-end development and am trying to make a webpage. I am using Materialize.css as my framework. Problems I am facing:
I have placed four custom logos on top of each other to crossfade them. However, the menu that is supposed to appear below them is placed from the beginning of the webpage. I can use margin-top on the menu, but, I want to know an alternate solution that automatically places the menu (id="menu1") just after the images. Please see the images to see what I'm trying to achieve.
Current layout:
What I am trying to achieve:
Also, is there a wrapper class for side-navigation bar in materialize.css
The one I'm using is without any wrapper class (id="menu1") and the second one is hidden and has to be shown using jquery (id="mobnav"). I want a side navigation bar that is always shown. Any help will be greatly appreciated.
The font icons and the text are not vertically aligned. Meaning the home icon and the text "Home" are at different heights. Same goes for all the menu items. How best to address this?
Lastly, I want to center my menu (id="menu1") to the center of the class="col s4 m4 l2". For this, I change the height of the div to 100vh and use the class "valign-center" on the menu (id="menu1"). But, it is not working. Why won't it work?
Am I missing anything?
Jquery code (js.script):
$(window).on("load", function(e) {
$(".pre-loader").fadeOut("slow");
});
$(function() {
$(".button-collapse").sideNav();
});
CSS code(style.css):
.logo img {
position: absolute;
}
.nav1 li {
background-color: yellow;
margin-top: 10px;
padding: 5px;
border-radius: 5px;
}
.flarge {
font-size: 36px !important;
}
HTML Code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<link rel="stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="css/materialize.min.css" media="screen,projection">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Test</title>
</head>
<body>
<div class="pre-loader"></div>
<section id="home" class="page-section">
<div class="row">
<div class="col s4 m4 l2" style="background-color: teal;">
<div style="position: relative;" class="logo">
<img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
<img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
<img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
<img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
</div>
<div id="menu1" class="hide-on-med-and-down">
<ul class="nav1">
<li><i class="material-icons flarge valign" aria-hidden="true">home</i> Home</li>
<li><i class="material-icons flarge" aria-hidden="true">help</i> About</li>
<li><i class="material-icons flarge" aria-hidden="true">event</i> Events</li>
<li><i class="material-icons flarge" aria-hidden="true">people</i> Our Team</li>
<li><i class="material-icons flarge" aria-hidden="true">account_box</i> Contacts</li>
</ul>
</div>
<nav style="background-color: transparent; box-shadow: 0px 0px 0px 0px;">
<i class="material-icons flarge">menu</i>
<ul class="side-nav" id="mobnav">
<li><i class="material-icons flarge" aria-hidden="true">home</i> Home</li>
<li><i class="material-icons flarge" aria-hidden="true">help</i> About</li>
<li><i class="material-icons flarge" aria-hidden="true">event</i> Events</li>
<li><i class="material-icons flarge" aria-hidden="true">people</i> Our Team</li>
<li><i class="material-icons flarge" aria-hidden="true">account_box</i> Contacts</li>
</ul>
</nav>
</div>
</div>
</section> <!--end of home -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
<!-- end snippet -->
try to add a class divider underneath it asw shown on the website of materialize.css , i think it might be able to create a large enough spacer underneath the "logo" for your goal that your trying to achieve here. :)
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!