I'm looking to display a thumbnail of an image and then onclick show a different image, can't seem to get this to work but I am sure there is probably an easy solution. Currently it shows the full image then enlarges on click. I just want to show a thumbnail and then on click show this full image.
My site is http://www.creativewilderness.co.uk and code is below...
<!DOCTYPE html>
<html>
<title>Creative Wilderness: Branding & Graphic Design for Independent Businesses. Stockport.</title>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Graphic Design & Brand Identity for Independent Businesses. We create strong brand identities for businesses providing web design, logo design, branding, social media design, marketing campaigns and more. Based in Stockport.">
<meta name="keywords" content="Graphic Design, Branding, Brand Identity, Logo Design, Stockport, Small business design, web design, independent design, ethical design, cheshire, indie design">
<meta name="author" content="Creative Wilderness LTD, Stockport">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Analytics creative wilderness.co.uk -->
<!--
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-', 'auto');
ga('send', 'pageview');
</script>
-->
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Abel", sans-serif}
h3 { letter-spacing: 5px;
font-size: large;
}
h2 {
letter-spacing: 5px;
}
body, html {
height: 100%;
color: #black;
line-height: 1.8;
max-width:;
}
xw {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
x
footer {
background-image: url('images/graphic-design-stockport.jpg');
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4{
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* First image (Logo. Full height) */
.bgimg-1 {
background-image: url('images/graphic-design-stockport.jpg');
min-height: 100%;
}
/* Second image (Portfolio) */
.bgimg-2 {
background-image: url('images/ethical-branding-design.jpg');
min-height: 400px;
}
/* Third image (Contact) */
.bgimg-3 {
background-image: url("images/stockport-business-design-branding.jpg");
min-height: 400px;
}
/* Fourth image (Contact) */
.bgimg-4 {
background-image: url("images/design-small-business.jpg");
min-height: 400px;
}
.w3-wide {letter-spacing: 10px; padding: 50px;}
.w3-hover-opacity {cursor: pointer;}
/* Turn off parallax scrolling for tablets and phones */
#media only screen and (max-device-width: 1024px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
}
}
</style>
<body>
<!-- Navbar on small screens -->
<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container" id="home">
<!-- Navbar (sit on top) -->
<div class="w3-center">
HOME
ABOUT
OUR WORK
PRICES
CONTACT
</a>
</div>
<div class=style="white-space:nowrap;">
<span class="w3-padding-large w3-xlarge w3-wide w3-animate-opacity"><img src="images/creative-wilderness-design.png" alt="branding graphic design stockport" class="w3-display-middle" width="25%" w3-padding-large w3-animate-opacity")</span>
</div>
</div>
<!-- Container (About Section) -->
<div class="w3-content w3-#FFFDF1 w3-container w3-padding-64" id="about">
<h3 class="w3-center">INDEPENDENT DESIGN & BRANDING <br>FOR FREE THINKING BUSINESSES</h3>
<p class="w3-center">We are an indie design company who love working with free thinking businesses. We like to go a little wild with our initial ideas and concepts and delighting our clients with off-the-wall suggestions that get customers talking.
We can take hold of all your design and brand strategy from email marketing to print work. We can re-design your website to ensure it is responsive and hits all those user experience recommendations. We can tutor you on social media marketing and formulate a brand personality that works really hard to bring in new customers and make your business pop!
<br><br>
Being a small indie business means we have no constraints, no red tape, no unnecessary management jargon and the freedom to work with companies we believe in.
</div>
<!-- Second Parallax Image with Portfolio Text -->
<div class="bgimg-2 w3-display-container ">
<div class="w3-display-middle w3-center">
<h2><span class="w3-large w3-text-sand">CLEVER DESIGN</span></h2>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div class="w3-content w3-container w3-padding-64" id="portfolio">
<p class="w3-center">Here is a selection of our latest branding, logo design and identity projects for independent businesses.<br> Click on the images to make them bigger.</p><br>
<!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) -->
<div class="w3-row-padding w3-center">
<div class="w3-col m3">
<img src="images/soul.jpg" class="portfolio" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Soul Cafe is an independent cafe in Congleton who wanted a new style to match their move into a larger premise. We created bespoke 60s inspired patterns and applied them to signage, menus and posters. We also created a clever poster and social campaign using soul song lyrics talking about the great food and drink the soul cafe serves.">
</div>
<div class="w3-col m3">
<img src="images/midnight.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Midnight Alchemy is a concept created for a Masquerade Ball at Tatton Park for THG. We art directed a bespoke photo shoot using employees from THG and created posters, emails, drinks menus and mood boards to inspire the theme of the event.">
</div>
<div class="w3-col m3">
<img src="images/fika.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Fika is a pop-up cafe based on a business park in Stockport. They wanted a scandi influenced design so we drew inspiration from our favourite Northern Quarter haunts and created a minimal menu and logo. We added breaks to to the font to tie in with the idea of taking a break and carried this through to bespoke eco friendly coffee cups">
</div>
<div class="w3-col m3">
<img src="images/ginspiration.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Ginspiration is a one-off gin tasting event celebrating local Gins around Cheshire. Using the natural Juniper berries found in Gin we produced a bespoke bottle box, menu, logo and social media assets">
</div>
</div>
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-white" onclick="this.style.display='none'">
<span class="w3-button w3-large w3-black w3-display-topright" title="Close Modal Image"><i class="fa fa-remove"></i></span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img01" class="w3-image">
<p id="caption" class="w3-opacity w3-large"></p>
</div>
</div>
<!-- <div class="w3-row-padding w3-center w3-section">
<div class="w3-col m3">
<img src="/w3images/p5.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="The mist">
</div>
<div class="w3-col m3">
<img src="/w3images/p6.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="My beloved typewriter">
</div>
<div class="w3-col m3">
<img src="/w3images/p7.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Empty ghost train">
</div>
<div class="w3-col m3">
<img src="/w3images/p8.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Sailing">
</div>
<button class="w3-button w3-padding-large w3-light-grey" style="margin-top:64px">LOAD MORE</button>
</div>
-->
</div>
<!-- Modal for full size images on click-->
</div>
<!-- Third Parallax Image with Portfolio Text -->
<div class="bgimg-3 w3-display-container">
<div class="w3-display-middle w3-center">
<h2><span class="w3-large w3-text-sand w3-center">STRONG & BRAVE BRANDING</span></h2>
</div>
</div>
<!-- Pricing Section -->
<div class="w3-padding-64 w3-center" id="prices">
<h3 class="w3-large"><b>OUR DESIGN PACKAGES</b></h3>
<p>We keep it simple with two starter packages for you to choose from. We also offer bespoke design services too so get in touch if you'd like a quote for this.</p>
</div>
<div class="w3-row-padding w3-center">
<div class="w3-quarter w3-section w3-center">
<ul class="w3-ul w3-card w3-center" >
<li class="w3-#FFFDF1 w3-large w3-padding-32">THE FOX</li>
<li class="w3-padding-16">Defining your brand ethos</li>
<li class="w3-padding-16">Logo Design</li>
<li class="w3-padding-16">Mood Board</li>
<li class="w3-padding-16">Brand Colours & Fonts</li>
<li class="w3-padding-16">2 marketing assets (flyer, email, poster, business card etc)</li>
<li class="w3-padding-16">
<h3 class="w3-opacity">£650</h3>
</li>
<li class="w3-light-grey w3-padding-24">
<a href="mailto:enquiry2018#creativewilderness.co.uk?Subject=I'm interested in THE FOX package" target="_top">
<button class="w3-button w3-black w3-padding-large" onclick="document.getElementById('download').style.display='block'"></i> BOOK NOW</button></a>
</li>
</ul>
</div>
<div class="w3-quarter w3-padding w3-section w3-center" >
<ul class="w3-ul w3-card">
<li class="w3-white w3-large w3-padding-32">THE BEAR</li>
<li class="w3-padding-16"><b>Full brand exploration</li>
<li class="w3-padding-16"><b>Mood Board</li>
<li class="w3-padding-16"><b>Logo Design</li>
<li class="w3-padding-16"><b>Copywriting & Tone of Voice</li>
<li class="w3-padding-16"><b>Social Media Assets</li>
<li class="w3-padding-16"><b>Poster Campaign</li>
<li class="w3-padding-16"><b>Business Stationary</li>
<li class="w3-padding-16"><b>Website</li>
<li class="w3-padding-16">
<h3 class="w3-opacity">£1,500</h3>
</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-black w3-padding-large" onclick="document.getElementById('download').style.display='block'"> BOOK NOW</button>
</li>
</ul>
</div>
</div>
<br>
</div></b>
<!-- Fourth Image with Portfolio Text -->
<div class="bgimg-4 w3-display-container">
<div class="w3-display-middle w3-center">
<h2><span class="w3-large w3-text-sand">LETS TALK DESIGN</span></h2>
</div>
</div>
<!-- Footer -->
<!-- Contact Topic -->
<div class="w3-container" id="contact">
<p class="w3-center" padding="15px" >Please get in touch to get the ball rolling on your surveying projects TODAY!<br><br>Ask us for advice or more information, book an online demonstration, or join our surveyors mailing list for ongoing information.</p>
<div class="w3-row-padding" xstyle="margin-top:64px">
<div class="w3-half w3-padding">
<h3>SEND MESSAGE</h3>
<!-- Form Start -->
<form name=contactform method="POST" action="/php/general-enquiry.php">
<input name="redirect" value="http://www.creativewilderness.co.uk/thanks.htm" type=hidden>
<input name="subject" value="Web Site Enquiry" type=hidden>
<input name="user" value="enquiries" type=hidden>
<input name="usercc" value="" type=hidden>
<input name="response" value="yes" type=hidden>
<p><input class="w3-input w3-border" type="text" placeholder="Name" required name="realname"></p>
<p><input class="w3-input w3-border" type="text" placeholder="Email" required name="email"></p>
<textarea class="w3-input w3-border" type="text" placeholder="Enquiry Details" required name="comments"></textarea>
<p><button class="w3-button w3-hover-opacity w3-black" type="submit"><i class="fa fa-paper-plane"></i> Make Enquiry</button>
</p>
</form>
</div>
</div>
</div>
</div>
<!-- Form End -->
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-center">
<i class="fa fa-arrow-up w3-margin-right"></i>To the top
<div class="w3-xlarge w3-section w3-text-sand " >
</i>  
<i class="fa fa-twitter w3-hover-opacity"></i> 
</i>  
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
</div>
<p class="w3-text-sand">Creative Wilderness: Creating strong brand identities for independent businesses</p>
</footer>
<!-- Add Google Maps -->
<script>
function myMap()
{
myCenter=new google.maps.LatLng(41.878114, -87.629798);
var mapOptions= {
center:myCenter,
zoom:12, scrollwheel: false, draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
var navbar = document.getElementById("myNavbar");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
} else {
navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", "");
}
}
// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://protect-eu.mimecast.com/s/zKR6BI0YwRAtW?domain=w3schools.com
-->
</body>
</html>
Add the path to the alternative image you want as a data attribute:
<img src="images/soul.jpg" data-modal-image="images/modal-image.jpg" class="portfolio" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="">
And change this javascript line:
document.getElementById("img01").src = element.src;
to:
document.getElementById("img01").src = element.dataset.modal-image;
Related
I'm building a landing page and I encounter a problem. I have an image of a project that when is clicked will zoom in a gallery mode and on top of that image it is a link towards the Behance page of the project. But what ever I do when I click the project link is opening still the image gallery. This is my code:
<div class="row masonry-wrap">
<div class="masonry">
<div class="masonry__brick" data-aos="fade-up">
<div class="item-folio">
<div class="item-folio__thumb">
<a href="images/portfolio/gallery/LiveStreaming.png" class="thumb-link" title="Live" data-size="1617x1440">
<img src="images/portfolio/LiveStream500x625.jpg" srcset="images/portfolio/LiveStream500x625.jpg 1x, images/portfolio/LiveStream1000x1250.jpg 2x" alt=""></a>
</div>
<a href="https://www.behance.net/gallery/77261419/Live-Streaming-Landing-Page-Design" class="item-folio__project-link" title="Project link">
Project Link
</a>
<div class="item-folio__text">
<h3 class="item-folio__title">
Live Streaming Landing Page
</h3>
<p class="item-folio__cat">
UI Design
</p>
</div>
<div class="item-folio__caption">
<p>A modern touch to a simple service. UI design made in Sketch for a Live Streaming Landing Page.</p>
</div>
</div>
<!-- end item-folio -->
</div>
<!-- end masonry__brick -->
</div>
<!-- end masonry -->
</div>
<!-- end masonry-wrap -->
What do I do wrong?
I have problem: first section - header is attachment fixed, and when I reduce the browser window, the background only covers a small portion of the section, the rest of the content is under another section, or completely out of the background. As you will see, only opening this page to the full screen resolves the problem and the sections look correct. By contrast, reducing the window causes the section to fall apart and jump one over the other. Can the cause be lack of clearfixes, or the problem is due to lack of positioning of each section?
https://codepen.io/tubaris/pen/YQQewB/
`<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="description" content="Omnifood">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Omnifood</title>
<link rel="stylesheet" type="text/css" href="vendors/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400&subset=latin-ext" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="row">
<img src="https://image.ibb.co/bY2jyQ/logo_white.png" alt="Omnifood logo" class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="header-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
I’m hungry
Show me more
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast – not fast food.</h2>
<p class="text-about">Hello, we're Omnifood, your new premium food delivery service. We know you're always busy. No time for cooking. So let us take care of that, we're really good at it, we promise!</p>
</div>
<div class="row">
<div class="feature-col">
<i class="ion-clock icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p>
</div>
<div class="feature-col">
<i class="ion-jet icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class="feature-col">
<i class="ion-ios-nutrition icon-big"></i>
<h3>100% Organic</h3>
<p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!</p>
</div>
<div class="feature-col">
<i class="ion-card icon-big"></i>
<h3>Order anything</h3>
<p>We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!</p>
</div>
</div>
</section>
<section class="section-meals">
<div class="row">
<h2>Omnifood meals showcase</h2>
<p class="text-about">Selected Omnifood meals offered by our company</p>
</div>
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/eTtwCk/1.jpg" alt="egg with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://image.ibb.co/iFpgdQ/2.jpg" alt="california rolls sushi">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/igwGCk/3.jpg" alt="asparagus with carrots and meat">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/h74sk5/4.jpg" alt="carrot soup with nuts">
</figure>
</li>
</ul>
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/j4MuyQ/5.jpg" alt="steak with green beans">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://image.ibb.co/m8twCk/6.jpg" alt="roll with egg, rucola and radish">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/bBjEyQ/7.jpg" alt="healthy burger">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/fNWisk/8.jpg" alt="oatmeal with strawberries and cherries">
</figure>
</li>
</ul>
</section>
<section class="section-steps">
<div class="row">
<h2>How it works – Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="steps-col1">
<img src="https://image.ibb.co/hHoeXk/app_i_Phone.png" alt="Omnifood app on iPhone" class="app-screen">
</div>
<div class="steps-col2">
<div class="works-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="works-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="works-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<img src="https://image.ibb.co/gyPxJQ/download_app.png" alt="app store button">
<img src="https://image.ibb.co/jZWYsk/download_app_android.png" alt="play store button">
</div>
</div>
</section>
</body>
`
I assume what you are asking is why your .features-col div's are cut off.
The reason is, the .features-col divs are taken out of the main flow of the document and are not expanding .section-features div. This is due to the float: left property. When you remove that property, you can instantly see that those columns expand the parent div.
Another way to have the columns aligned to the left side of the page is to have the .row class set to 100% of the window width, then set text-align: left.
Make the .meal-photo class float left.
i.e add float:left to the .meal-photo class in your CSS code.
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!
This question already has answers here:
What is XHTML role attribute? What do you use it for?
(3 answers)
Closed 8 years ago.
I have created a web page using html5.
I used source code from bootstrap.
For example: role="main", role ="navigation", role = "document" etc.
If I remove these attribute from my code, page didn't any change.
So I want to know: what is the purpose of "role" attribute?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Raleway:900,500,600,200,400,700' rel='stylesheet' type='text/css'>
<title>Layout</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body role="document">
<!-- Fixed navbar -->
<div class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<h1><img src="img/logo.png" /></h1>
</div>
</div>
</div>
<div class="container theme-showcase" role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="container">
<div class="banner-div">
<img src="img/banner.png" class="banner"/>
<img src="img/issue-no-img.png" class="issue-badge"/>
<span class="issue">Issue No.<br /><b>376</b></span>
</div>
<div class="row">
<div class="col-md-4">
<img src="img/left-note-img.png"/>
</div>
<div class="col-md-4 align-center">
<p><span class="new-radius"> NEW! </span> <span class="new">JUN 07, 2003</span></p>
<p><i>Get your breaks points on.</i></p>
<span>
<h1>DOT NET ARTICLES</h1>
</span>
<span class="comments"><i>by</i> <a>JOHN WOO</a> <i> - 10 Commments</i></span><br/>
</div>
<div class="col-md-4 pull-right">
<div class="input-group">
<input type="text" class="form-control search-input-box" placeholder="Search..." />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<hr class="hr-style"/>
<p class = "header-pgf">
Text, navigation, and tables, oh, my! What's a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketching? Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay's new book, available now from New Riders.
</p>
<hr class="hr-style">
<h1 class="more-apart">More from A List Apart</h1>
<hr class="hr-style">
<div class="row">
<div class="col-md-3">
<h2>Columnists</h2>
<p>JACK MCGRANE <i>on</i> CONTENT</p>
<p class="pgf-header">The Alternative is Nothing</p>
<img src="img/thumb1.jpg" class="float-left" />
<p>We're witnessing one of thr latest waves of technological disruption, as mobile devices put access to the internet in the hands of people who previously never had that power.</p>
</div>
<div class="col-md-3">
<h2>From the Blog</h2>
<p class="pgf-header">Maps Should Be Crafted.Not "Plugged In"></p>
<p>Web designers: erase the line between "the map" and "the content" by harnessing the power of open-source Leafler and your own fresh creative thinking. In the tradition of ALA's recent "Hack Your Maps." Happy Cog's Brandon Rosage shares how to make location a central aspect of the content experience-not just a visual aid.</p>
</div>
<div class="col-md-3">
<p class="md-3">Amazon Web Services Introduces a New API</p>
<p>Amazon Web Services Identity and Access Management(IAM) is expanding to support web identity federation. Developers can integrate Amazon.com, Facebook, or Google odentity into their app by using the new AWS Security Token Services(STS) API, AssumeRoleWithWebIdentity. to request temporary security credentials.</p>
</div>
<div class="col-md-3">
<h5>Gratitude</h5>
<p>Thanks to our RSS sponser Typekit-offering desktop and web fonts in a single subscription starting June 17</p>
<div class="well align-center">
<img src="img/mothers-day.jpg" /> <br/>
<p class="font-10">Two special Mothers' Say Kits are available from Field Notes Brand. Ad via The Deck </p>
</div>
<div class="job-board">
<h5>Job Board</h5>
<a href="#" >New York Times is looking for a <br />Ruby on Rails Web Developer.</a>
More on the Job Board >
</div>
</div>
</div>
<br />
</div>
</div>
<!-- /container -->
<div class="footer" style="">
<div class="container">
<div class="list-footer" style="font-size:13px;">
<span class="padding-10"><img src="img/article-logo.png" /></span>
<span class="padding-10">ARTICLES</span>
<span class="padding-10">COLUMNS</span>
<span class="padding-10">BLOG</span>
<span class="padding-10">TOPICS</span>
</div>
<div class = "list-footer" style="font-size:12px;">
<span class="padding-10">ABOUT</span>
<span class="padding-10">AUTHORS</span>
<span class="padding-10">MASTHEAD</span>
<span class="padding-10">CONTRIBUTE</span>
<span class="padding-10">STYLE GUIDE</span>
<span class="padding-10">CONTACT</span>
<span class="padding-10">SPONSORSHIPS</span>
</div>
<hr class="hr-style"/>
<div class="row">
<div class="col-md-6">
<img src="img/dot-net-ad.jpg" class="footer-image"/>
<h3>.NET Training</h3>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<a class="footer-link" href="#">ask here. ></a>
</div>
<div class="col-md-6">
<img src="img/shopify-expert-ad.jpg" class="footer-image"/>
<h3>Shopify Expert</h3>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<a class="footer-link" href="#">click to view</a>
</div>
</div>
<hr class="hr-style" />
<div style="text-align:center">
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</div>
</div>
</body>
</html>
It provides support for ARIA (Accessible Rich Internet Applications) which allows to specify even more semantic richness in documents.
You can add role="search" to your search form, role="banner" to your
masthead, and role="contentinfo" to your page footer. There’s a full
list of values in the ARIA specification at
http://www.w3.org/TR/wai-aria/roles#role_definitions.
Basically you don't have to add them, but its better if you do as it provides more context for your page. More discussed at A List Apart.
The new structural elements in HTML5 will be very useful to assistive technology. Instead of creating “skip navigation” links, all we need to do is use the nav element correctly. This will allow screen reader users to skip past navigation without us having to provide an explicit link.
Twitter Bootstrap uses like <nav role="navigation">. So Bootstrap take consider not only normal browser but also take care of screen reader browsers.
Note: By including Role attribute you are making your website more accessible and its good practice to use this Role attribute.
I'm having a very strange problem with IE8 where the paragraph text is cropping up strange angular symbols seemingly at random. Here is a sample of the source code:
<!DOCTYPE html>
<html class="html">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="generator" content="7.1.329.244"/>
<title>Friends of Hartpury School Promises Auction 2014</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/site_global.css?4151054444"/>
<link rel="stylesheet" type="text/css" href="css/master_a-master.css?428943956"/>
<link rel="stylesheet" type="text/css" href="css/index.css?308194328" id="pagesheet"/>
<!-- Other scripts -->
<script type="text/javascript">
document.documentElement.className += ' js';
</script>
</head>
<body>
<div class="clearfix" id="page"><!-- column -->
<div class="position_content" id="page_position_content">
<div class="clearfix colelem" id="pu196"><!-- group -->
<div class="browser_width grpelem" id="u196"><!-- group -->
<div class="clearfix" id="u196_align_to_page">
<div class="clip_frame grpelem" id="u203"><!-- image -->
<img class="block" id="u203_img" src="images/friends-of.png" alt="" width="126" height="122"/>
</div>
</div>
</div>
<div class="clip_frame grpelem" id="u197"><!-- image -->
<img class="block" id="u197_img" src="images/banners.png" alt="" width="214" height="64"/>
</div>
<div class="clip_frame grpelem" id="u199"><!-- image -->
<img class="block" id="u199_img" src="images/banners.png" alt="" width="214" height="64"/>
</div>
<div class="clip_frame grpelem" id="u277"><!-- image -->
<img class="block" id="u277_img" src="images/header.png" alt="" width="604" height="248"/>
</div>
</div>
<div class="clearfix colelem" id="u276-11"><!-- content -->
<p><a class="nonblock" href="index.html">THE AUCTION</a> | <a class="nonblock" href="tickets.html">TICKETS</a> | <a class="nonblock" href="rules---submit-bid.html">RULES & SUBMIT BID</a></p>
</div>
<div class="rounded-corners clearfix colelem" id="u375"><!-- group -->
<div class="clearfix grpelem" id="u376-8"><!-- content -->
<p id="u376-2">Welcome to our Promises Auction website where you can see the fabulous promises that have been donated by friends, family, local and national businesses to support our school.</p>
<p id="u376-4">A huge thank you to all our sponsors!</p>
<p id="u376-6">All funds raised will go towards our Hartpury IT 21st Century appeal. In this age of technology our server is creaking, our few laptops are old and slow and all four classes in school have access to just one central printer. We need to raise £10,000 over the school year to help purchase a new server, new laptops, upgraded interactive whiteboards and printers for each classroom. If possible we would also like to provide e-readers too.</p>
</div>
</div>
<div class="clearfix colelem" id="u526"><!-- group -->
<div class="pointer_cursor rounded-corners clearfix grpelem" id="u517"><!-- group -->
<a class="block" href="http://#"></a>
<a class="nonblock nontext clearfix grpelem" id="u520-4" href="http://#"><!-- content --><p>PROMISES SO FAR</p></a>
<a class="nonblock nontext clip_frame grpelem" id="u521" href="http://#"><!-- image --><img class="block" id="u521_img" src="images/forward.png" alt="" width="38" height="38"/></a>
</div>
</div>
<div class="clearfix colelem" id="pu527"><!-- group -->
<div class="rounded-corners clearfix grpelem" id="u527"><!-- group -->
<div class="clearfix grpelem" id="u533-11"><!-- content -->
<p id="u533-2">How to donate</p>
<p class="ts-Default-Link-Style--copy" id="u533-7">If our catalogue inspires you to donate a promise, please use this <a class="nonblock" href="rules---submit-bid.html"><span id="u533-4">donor form</span></a> and someone from the auction team will contact you.</p>
<p id="u533-9">Thank you so much for your support.</p>
</div>
</div>
<div class="rounded-corners clearfix grpelem" id="u528"><!-- group -->
<div class="clearfix grpelem" id="u529-17"><!-- content -->
<p id="u529-2">What if I can’t make the Auction?</p>
<p id="u529-4">Hopefully the catalogue will tempt you to come along to the Auction on 29th can’t make it then advance bids can be submitted by:</p>
<p class="Paragraph-Style" id="u529-8">Submitting an <a class="nonblock" href="rules---submit-bid.html"><span id="u529-6">on-line bid</span></a></p>
<p class="Paragraph-Style" id="u529-13">Completing <a class="nonblock" href="http://www.hartpuryauction.co.uk/formdownload/PreAuctionBidForm.doc"><span id="u529-10">this pre-auction bid form</span></a> and placing it in a sealed envelope addressed to FOHS Promises Auction c/o the school office.</p>
<p id="u529-15">Please read our very simple rules before submitting your bid.</p>
</div>
</div>
<div class="rounded-corners grpelem" id="u872"><!-- simple frame --></div>
<div class="rounded-corners grpelem" id="u873"><!-- simple frame --></div>
</div>
<div class="verticalspacer"></div>
<div class="browser_width colelem" id="u356"><!-- column -->
<div class="clearfix" id="u356_align_to_page">
<div class="position_content" id="u356_position_content">
<div class="clip_frame colelem" id="u362"><!-- image -->
<img class="block" id="u362_img" src="images/footer-banner.png" alt="" width="604" height="125"/>
</div>
<div class="clearfix colelem" id="u368-4"><!-- content -->
<p>Suas appareat pro eu. Te sea liber senserit maluisset, diam moderatius ea quo. Qui at purto docendi placerat, pertinax efficiendi mea ei. Adhuc fugit eloquentiam ut usu.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JS includes -->
<script type="text/javascript">
if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script type="text/javascript">
window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script src="scripts/museutils.js?117816282" type="text/javascript"></script>
<script src="scripts/jquery.tobrowserwidth.js?152985095" type="text/javascript"></script>
<script src="scripts/jquery.watch.js?4199601726" type="text/javascript"></script>
<!-- Other scripts -->
<script type="text/javascript">
$(document).ready(function() { try {
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
$('.browser_width').toBrowserWidth();/* browser width elements */
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.fullPage('#page');/* 100% height page */
Muse.Utils.showWidgetsWhenReady();/* body */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
} catch(e) { Muse.Assert.fail('Error calling selector function:' + e); }});
</script>
</body>
</html>
If you copy your code and paste it into another editor (I'm using Notepad++), you will see the weird symbols in your text.
You will need to go back and erase these characters and paste it back into your website. And then when inserting new content into your site, you need to make sure the text is written in/or saved as charset=UTF-8, which is what your site specifies.
I was able to find a similar report in an Adobe post.
http://forums.adobe.com/thread/1073776
It wasn't really 'solved' but you may try deleting characters that seem like spaces and putting them back in. There could be characters that appear to be spaces to your editor (and other browsers) that are actually a different char.