I have added my html code and also my CSS, I am very confused as to how I would go about making this webpage responsive, so when a user is on a different device the webpage auto scales to their device. (Sorry if this is a repeat question, I was not able to find the answer).
footer {
margin: 50px 0;
}
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}
h1 {
margin: .67em 0;
font-size: 2em;
font-family: 'Dosis', sans-serif;
}
body {
font-family: 'Dosis', sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
padding-right: 5px;
}
body {
max-width: 1000px;
margin: 10px auto;
}
body {
font-family: 'Dosis', sans-serif;
}
body {
background: white;
}
.container {
max-width: 100%;
text-align: center;
}
.centre {
position: relative;
display: inline-block;
float: left;
max-width: 100%;
padding: 50px;
}
ul {
max-width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
max-width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.accordion {
width: 895px;
height: 485px;
max-width: 100%;
overflow: hidden;
box-shadow: 0 10px 6px -6px #111;
margin: 20px auto
}
.accordion ul {
width: 200%;
max-width: 100%;
}
.accordion li {
position: relative;
display: block;
width: 160px;
max-width: 100%;
float: left;
box-shadow: 0 0 30px 8px #222;
transition: all 0.4s ease .300ms;
}
.accordion ul:hover li {
width: 40px
}
.accordion ul li:hover {
width: 640px
}
.caption {
background: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
width: 640px
}
.caption a {
display: block;
color: #fff;
text-decoration: none;
font: normal 16px'Lato', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
padding: 10px;
}
.center {
align-content: center;
}
.thumbnail {
display: block;
padding: 4px;
padding-left: 5px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
margin-right: auto;
margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #337ab7;
}
.thumbnail .caption {
padding: 9px;
color: #333;
}
<body>
<nav class="contain">
<div>
<div>
<ul>
<li><a class="active" href="index.html">Home</a>
</li>
<li>Mens Shoes
</li>
<li>Womens Shoes
</li>
<li>Boys Shoes
</li>
<li>Girls Shoes
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div>
<div>
<div class="accordion">
<ul>
<li>
<div class="caption">Slide 1
</div>
<a href="#">
<img src='Slider_Image1.jpg' />
</a>
</li>
<li>
<div class="caption">Slide 2
</div>
<a href="#">
<img src='Slider_Image2.jpg' />
</a>
</li>
<li>
<div class="caption">Slide 3
</div>
<a href="#">
<img src='Slider_Image3.jpg' />
</a>
</li>
</ul>
</div>
</div>
<div>
<div class="centre , fade ,">
<div>
<a href="Nike_Shoes1.html">
<img src="Image1.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div>
<a href="Nike_Trainers.html">
<img src="Image2.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div>
<img src="Image3.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div>
<a href="boys_clothing.html">
<img src="Boys_Clothing.jpg" alt="Boys Clothing">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<!-- Footer -->
<footer>
</footer>
</div>
You make a page responsive by adding media queries to the css file, for example:
#media(max-width: 800px){
/* Add mobile styles here */
}
You can see more about media queries here, as there are many configs available: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
You can make a responsive webpage by using media queries , Flexible grid-based layout for relative sizing and Flexible images.
this book may help you Responsive Web Design by Ethan Marcotte
Related
The screenshot of the error The nav-links in mobile view do not appear but are clickable. New to HTML and CSS. The Ham-burger menu has z-index 1 it appears correctly. But the content of the menu do not appear. This error is in mobile view only. Attached media query code in css. The name of the stylesheet is different from that in my pc so that isn't an issue.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Executive Committee</title>
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="style2.css" rel="stylesheet">
<style>
.our-team{
padding: 30px 0 40px;
background: #fff;
overflow: hidden;
position: relative;
}
.our-team .pic{
width: 130px;
height: 130px;
margin-bottom: 50px;
position: relative;
z-index: 1;
margin: auto;
}
.our-team .pic:before{
content:"";
width: 100%;
background: #004165;
position: absolute;
bottom: 135%;
right: 0;
left: 0;
transform: scale(3);
transition: all 0.3s linear 0s;
}
.our-team:hover .pic:before{
height: 100%;
}
.our-team .pic:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background: #004165;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.our-team .pic img{
width: 100%;
height: auto;
border-radius: 50%;
transform: scale(1);
transition: all 0.9s ease 0s;
}
.our-team:hover .pic img{
box-shadow: 0 0 0 14px #f7f5ec;
transform: scale(0.7);
}
.our-team .team-content{
padding-top: 30px;
margin-bottom: 30px;
}
.our-team .title{
font-size: 22px;
font-weight: 700;
color: #4e5052;
letter-spacing: 1px;
text-transform: capitalize;
margin-bottom: 5px;
padding: 10px 10px 10px 10px;
}
.our-team .post{
display: block;
font-size: 15px;
color: #4e5052;
text-transform: capitalize;
padding: 10px 10px 10px 10px;
}
.our-team .social{
width: 100%;
padding: 0;
margin: 0;
background: #004165;
position: absolute;
bottom: -100px;
left: 0;
transition: all 0.5s ease;
}
.our-team:hover .social{
bottom: 0;
}
.our-team .social li{
display: inline-block;
}
.our-team .social li a{
display: block;
padding: 10px;
font-size: 17px;
color: #fff;
transition: all 0.3s ease 0s;
}
.our-team .social li a:hover{
color: #eb1768;
background: #f7f5ec;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<div class="logo">
<img src="images/TMxAU.png" alt="">
</div>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li>Home</li>
<li>Club Etiquette</li>
<li>Achievements</li>
<li>Executive Committee</li>
<li>Pathways</li>
<li>Resources</li>
</ul>
</nav>
<section class="landing">
<div>Alone we can do so little, together we can do so much.</div>
</section>
<script src="app.js"></script>
<section class="pathwayarea">
<div class="container">
<!-- Page Heading -->
<h1 class="my-4">Team</h1>
<br><br>
<section class="">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\1.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD/h3>
<span class="post">Role1</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\2.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD</h3>
<span class="post">Role2</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\3.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD</h3>
<span class="post">Role3</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\4.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD</h3>
<span class="post">Role5</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\6.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD</h3>
<span class="post">Role6</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\7.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD</h3>
<span class="post">Role7</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\8.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD</h3>
<span class="post">Role8</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\9.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD</h3>
<span class="post">Role9</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 footer-info">
<h3>Club Name Here</h3>
<p>ABCD</p>
</div>
<div class="col-lg-3 col-md-6 footer-links">
<h4>Useful Links</h4>
<ul>
<li><i class="ion-ios-arrow-right"></i> Home</li>
<li><i class="ion-ios-arrow-right"></i> Club Etiquette</li>
<li><i class="ion-ios-arrow-right"></i> Achievements</li>
<li><i class="ion-ios-arrow-right"></i> Executive Committee</li>
<li><i class="ion-ios-arrow-right"></i> Pathways</li>
<li><i class="ion-ios-arrow-right"></i> Resources</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-contact">
<h4>Contact Us</h4>
<p>Contact Text here/p>
<div class="social-links">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
<div class="col-lg-3 col-md-6 footer-newsletter">
<h4>Interested in learning more?</h4>
<p>Drop us your E-Mail ID and we'll get in touch with you.</p>
<form action="" method="post">
<input type="email" name="email"><input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</footer>
</html>
CSS code
* {
margin: 0;
padding: 0;
box-sizing: border-box;[enter image description here][1]
}
body {
font-family: sans-serif;
}
nav {
height: 10vh;
}
.nav-links {
display: flex;
list-style: none;
width: 50%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-left: auto;
}
.pathwayarea{
background: #a9b2b1;
padding-top: 10px;
}
.nav-links li a {
color: #000;
text-decoration: none;
font-size: 16px;
font-weight: bold;
padding: 5px 20px;
}
.nav-links li a:hover{
background: #772432;
color: #fff;
}
.landing {
height: 90vh;
display: flex;
justify-content: center;
width: inherit;
align-items: center;
background: linear-gradient(0deg, rgba(242,223,116,1) 55%, rgba(255,255,255,1) 100%);
}
.container h1{
text-align: center;
font-weight: bold;
color: #000;
}
.logo img{
width: 300px;
float: left;
height: auto;
margin-top: 10px;
margin-left: 30px;
}
.landing div{
top: 50%;
transform: translateY(-50%);
text-align: center;
font-weight: bold;
font-size: 3rem;
}
#footer {
background: #000;
padding: 0 0 30px 0;
color: #eee;
font-size: 14px;
}
#footer .footer-top {
background: #111;
padding: 60px 0 30px 0;
}
#footer .footer-top .footer-info {
margin-bottom: 30px;
}
#footer .footer-top .footer-info h3 {
font-size: 34px;
margin: 0 0 20px 0;
padding: 2px 0 2px 10px;
line-height: 1;
font-family: "Myriad Pro";
font-weight: 700;
letter-spacing: 3px;
border-left: 4px solid #cd202c;
}
#footer .footer-top .footer-info p {
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
font-family: "Montserrat", sans-serif;
color: #fff;
}
#footer .footer-top .social-links a {
font-size: 18px;
display: inline-block;
background: #333;
color: #eee;
line-height: 1;
padding: 8px 0;
margin-right: 4px;
border-radius: 50%;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
}
#footer .footer-top .social-links a:hover {
background: #fff;
color: #fff;
}
#footer .footer-top h4 {
font-size: 14px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
position: relative;
padding-bottom: 12px;
}
#footer .footer-top h4::before,
#footer .footer-top h4::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
}
#footer .footer-top h4::before {
right: 0;
background: #555;
}
#footer .footer-top h4::after {
background: #cd202c;
width: 60px;
}
#footer .footer-top .footer-links {
margin-bottom: 30px;
}
#footer .footer-top .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
#footer .footer-top .footer-links ul i {
padding-right: 8px;
color: #ddd;
}
#footer .footer-top .footer-links ul li {
border-bottom: 1px solid #333;
padding: 10px 0;
font-family: "Myriad Pro";
}
#footer .footer-top .footer-links ul li:first-child {
padding-top: 0;
}
#footer .footer-top .footer-links ul a {
color: #eee;
}
#footer .footer-top .footer-links ul a:hover {
color: #fff;
}
#footer .footer-top .footer-contact {
margin-bottom: 30px;
font-family: "Myriad Pro";
}
#footer .footer-top .footer-contact p {
line-height: 26px;
font-family: "Myriad Pro";
}
#footer .footer-top .footer-newsletter {
margin-bottom: 30px;
font-family: "Myriad Pro";
}
#footer .footer-top .footer-newsletter input[type="email"] {
border: 0;
padding: 6px 8px;
width: 65%;
font-family: "Myriad Pro";
}
#footer .footer-top .footer-newsletter input[type="submit"] {
background: #cd202c;
border: 0;
width: 35%;
padding: 6px 0;
text-align: center;
color: #fff;
transition: 0.3s;
cursor: pointer;
font-family: "Myriad Pro";
}
#media screen and (max-width: 768px) {
.landing div{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.landing {
position: relative;
width: 100%;
}
.landing img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.line {
width: 30px;
height: 3px;
background: #000;
margin: 5px;
padding-left: 5px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 3;
}
.nav-links {
position: fixed;
background: #f2df74;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(100px at 90% -10%);
-webkit-clip-path: circle(100px at 90% -19%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
z-index: 2;
}
.landing {
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
.nav-links li:nth-child(4) {
transition: all 0.5s ease 0.6s;
}
.nav-links li:nth-child(5) {
transition: all 0.5s ease 0.6s;
}
.nav-links li:nth-child(6) {
transition: all 0.5s ease 0.6s;
}
li.fade {
opacity: 1;
}
}
First, a few observations:
You are using different versions of Bootstrap: in CSS: 4.3.1 and JS: 3.3.7.
The footer is in the wrong place, you need to place it before closing the </body> tag.
As you are using Bootstrap why not use the navbar?
To fix your problem just remove the opacity from .nav-links li or set to 1:
.nav-links li {
opacity: 1;
}
EDIT:
Add this to the respective classes:
.nav-links {
visibility: hidden;
opacity: 0;
z-index: 1;
}
.nav-links.open {
opacity: 1;
visibility: visible;
}
And remove this:
.nav-links li {
opacity: 0;
}
li.fade {
opacity: 1;
}
Now it should work as expected.
Working example: Codepen.
everyone!! I am building a very simple page in codepen and I am pretty new to these stuff. I want to align all the options on my navigation bar in the same row. I don't even know why they looked like this in the first place. I want to do the same for the social media icons at the end of the page, too. Here's my pen https://codepen.io/maria_punchio/pen/mWggYO/.
.topnav {
background-color: #586882;
overflow: hidden;}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: px 16px;
text-decoration: none;
font-size: 17px;}
<div class="container-fluid">
<div class="topnav">
ABOUT
PORTFOLIO
CONTACT ME
</div>
Thanks
Is this what you're looking for?
.topnav {
background-color: #586882;
overflow: hidden;}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 16px 16px;
text-decoration: none;
font-size: 17px;}
<div class="container-fluid">
<div class="topnav">
ABOUT
PORTFOLIO
CONTACT ME
</div>
</div>
.topnav {
background-color: #586882;
overflow: hidden;}
.topnav a {
float: left;
display:block; margin-left: 5px;;
color: #f2f2f2;
text-align: center;
padding:16px;
text-decoration: none;
font-size: 17px;}
<div class="container-fluid">
<div class="topnav">
ABOUT
PORTFOLIO
CONTACT ME
</div>
here is code...
<style>.topnav {
background-color: #586882;
overflow: hidden;}
.topnav a {
float: left;
display:block; margin-left: 5px;;
color: #f2f2f2;
text-align: center;
padding:16px;
text-decoration: none;
font-size: 17px;}</style>
THIS IS OUTPUT PICTURE CLICK ON IT
A quick fix is to add
width: 33%;
margin: 0;
to .topnav a in your css.
But I would advise you to take a look at how flexbox works as this will be more responsive.
I personally really like this guide.
Change this:
a {
overflow: hidden;
display: inline-block;
margin-bottom: px;
width: calc(50% - 4px);
margin-right: 8px;
}
To this:
a {
overflow: hidden;
display: inline-block;
margin-bottom: px;
width: calc(33% - 4px);
margin-right: 8px;
}
And change this:
#media screen and (min-width: 80em) {
a {
width: calc(40% - 6px);
}
a:nth-of-type(2n) {
margin-right: 8px;
}
a:nth-of-type(4n) {
margin-right: 0;
}
}
to this:
#media screen and (min-width: 80em) {
a {
width: calc(33% - 6px);
}
a:nth-of-type(2n) {
margin-right: 8px;
}
a:nth-of-type(4n) {
margin-right: 0;
}
}
HTML
<body style="background-color:#d1ffe3">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Heebo" rel="stylesheet">
<div class="container-fluid">
<ul class="topnav">
<li style="width:100%">ABOUT</li>
<li style="width:100%">PORTFOLIO</li>
<li style="width:90%">CONTACT ME</li>
</ul>
<center>
<div id="div_id">
<h1>ABOUT</h1></center>
</div>
<div class="row">
<div class="col-md-6">
<center>
<h2>Hello, I am Maria Pantsiou</h2>
<h1>Former musician, 3D graphics design hobbyist, physicist and potential web developer.<h1>
</center></div>
</div>
</div>
<div id="div_id2"><center><h1>PORTFOLIO</h1></center>
</div>
<center>
<div>
<a href="http://i.imgsafe.org/56bfd0da30.png">
<figure>
<img src="http://i.imgsafe.org/56bfd0da30.png" alt="">
</figure>
</a>
<a href="http://i.imgsafe.org/56be3db222.png">
<figure>
<img src="http://i.imgsafe.org/56be3db222.png" alt="">
</figure>
</a>
<a href="http://i.imgsafe.org/5649eb799c.png">
<figure>
<img src="http://i.imgsafe.org/5649eb799c.png" alt="">
</figure>
</a>
<a href="http://i.imgsafe.org/56ae6b85ac.png">
<figure>
<img src="http://i.imgsafe.org/56ae6b85ac.png" alt="">
</figure>
</a>
</center>
<section id="contact">
<div id="div_id3">
<center>
<h1>CONTACT ME</h1></center>
</div>
<section id="contact">
<center>
<div class="container">
<form name="htmlform" method="post" action="toyousender.php">
<input type="text" name="first_name" placeholder="NAME" required>
<input type="email" name="email" placeholder="MAIL" required>
<textarea name="comments" placeholder="MESSAGE" required></textarea>
<button name="send" type="submit" class="submit">SEND</button>
</form>
</div>
</center>
</section>
</div>
CSS
body { background-image: url('http://i.imgsafe.org/7d2cbd7925.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } .topnav {
background-color: #586882;
overflow: hidden; width:100%; display:inline-flex;
}
/* Style the links inside the navigation bar */ .topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: px 16px;
text-decoration: none;
font-size: 17px; }
/* Change the color of links on hover */ .topnav a:hover {
background-color: #ddd;
color: black; }
/* Add a color to the active/current link */ .topnav a.active {
background-color: #4CAF50;
color: white; }
h1 { font-size: 30px; font-family: 'Josefin Sans', sans-serif;
}
h2 { font-size: 25px; font-family: 'Heebo', sans-serif; }
.photo-border { border-radius: 50%; }
.smaller_image { width: 170px; }
body { width: 90%; margin: 30px auto; font-family: sans-serif; }
div { font-size: 0; }
a { overflow: hidden; display: inline-block; margin-bottom: px; width: calc(50% - 4px); margin-right: 8px; }
a:nth-of-type(2n) { margin-right: 0; }
#media screen and (min-width: 80em) { a {
width: calc(40% - 6px); } a:nth-of-type(2n) {
margin-right: 8px; } a:nth-of-type(4n) {
margin-right: 0; } }
a:hover img { transform: scale(1.15); }
figure { margin: 5; }
img { border: none; max-width: 100%; height: ; display: block; background: #ccc; transition: transform .2s ease-in-out; }
#contact { width: 100%; height: 100%; margin 0 auto; background: ; }
.container { width: 960px; height: auto; margin: 0 auto; padding: 50px 0; }
#contact .container form input,
#contact .container form textarea { width: 97.4%; height: 30px; padding: 5px 10px; font-size: 12px; color: #999; letter-spacing: 1px; background: #cbd9ef; border: 2px solid #586882; margin-bottom: 5px; -webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
#contact .container form input:focus,
#contact .container form textarea:focus { border: 2px solid #3b4759; color: #999; }
#contact .container form textarea { height: 150px; }
#contact .container form .submit { width: 97.5%; padding: 5px 10px; font-size: 12px; letter-spacing: 1px; background: #586882; height: 40px; text-transform: uppercase; letter-spacing: 1px; color: #FFF; border: 2px solid #3b4759; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
#contact .container form .submit:hover { color: #FFF; border: 2px solid #586882; background: #343f4f; cursor: pointer; }
#contact .container form .required { color: #586882; }
.fb_photo { border-radius: 70%; }
.smaller-image { width: 30px; }
I cannot seem to keep the image inside my div element. The image is stretching outside of it.
I cannot seem to find the source of the error and have researched a lot, and still cannot find the source. Some help would be awesome!
Here is my HTML/CSS...
.navigation {
padding-top: 70px;
padding-bottom: 70px;
position: relative;
text-transform: uppercase;
}
.container {
}
.brand-text {
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 40px;
font-weight: 700px;
color: black;
-webkit-transition: color 700ms ease;
text-align: center;
}
.brand-text:hover {
color: grey;
}
.nav-brand {
text-decoration:none;
}
.nav-menu {
text-align: center;
}
.nav-link {
padding-top: 7px;
padding-bottom: 7px;
margin-right: 20px;
margin-left: 20px;
text-decoration: none;
color: black;
font-family: Georgia, Times, 'Times New Roman', serif;
-webkit-transition: color 700ms ease;
position: relative;
}
.nav-link:hover {
color: grey;
}
/*Gallery*/
a {
text-decoration: none;
}
div.img {
margin: 5px;
float: left;
width: 180px;
-webkit-transition: opacity 400ms ease, box-shadow 400ms ease;
transition: opacity 400ms ease, box-shadow 400ms ease;
background-color: #fff;
}
div.img:hover {
background-color: transparent;
box-shadow: 0 0 50px -14px #000;
opacity: 0.8;
}
div.img img {
width: 100%
height: auto;
}
div.desc {
text-align: center;
color: black;
padding: 15px;
}
* {
box-sizing: border-box;
}
#media only screen and (max-width: 700px){
.reponsive {
width: 49.999999%;
margin: 6px;
}
}
#media only screen and (max-width: 500px){
.responsive {
width: 100%
}
}
.clearfix:after {
content: "";
display: table;
}
<!DOCTYPE html>
<html>
<head>
<title>Josh Corbett</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="navigation">
<div class="container">
<a class="nav-brand" href="#"><h1 class="brand-text">Josh Corbett</h1></a>
<nav class="nav-menu" role="navigation">
<a class="nav-link" href="#">Portfolio</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Blog</a>
</nav>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">
<div class="desc">Beautiful Montain</div>
</a>
</div>
</div>
</body>
try
img{
max-width: 100%;
height: auto;
}
this will keep ur img inside its container
You just forgot the ; in your div.img img definition :
div.img img {
width: 100%;
height: auto;
}
.navigation {
padding-top: 70px;
padding-bottom: 70px;
position: relative;
text-transform: uppercase;
}
.container {
}
.brand-text {
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 40px;
font-weight: 700px;
color: black;
-webkit-transition: color 700ms ease;
text-align: center;
}
.brand-text:hover {
color: grey;
}
.nav-brand {
text-decoration:none;
}
.nav-menu {
text-align: center;
}
.nav-link {
padding-top: 7px;
padding-bottom: 7px;
margin-right: 20px;
margin-left: 20px;
text-decoration: none;
color: black;
font-family: Georgia, Times, 'Times New Roman', serif;
-webkit-transition: color 700ms ease;
position: relative;
}
.nav-link:hover {
color: grey;
}
/*Gallery*/
a {
text-decoration: none;
}
div.img {
margin: 5px;
float: left;
width: 180px;
-webkit-transition: opacity 400ms ease, box-shadow 400ms ease;
transition: opacity 400ms ease, box-shadow 400ms ease;
background-color: #fff;
}
div.img:hover {
background-color: transparent;
box-shadow: 0 0 50px -14px #000;
opacity: 0.8;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
text-align: center;
color: black;
padding: 15px;
}
* {
box-sizing: border-box;
}
#media only screen and (max-width: 700px){
.reponsive {
width: 49.999999%;
margin: 6px;
}
}
#media only screen and (max-width: 500px){
.responsive {
width: 100%
}
}
.clearfix:after {
content: "";
display: table;
}
<!DOCTYPE html>
<html>
<head>
<title>Josh Corbett</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="navigation">
<div class="container">
<a class="nav-brand" href="#"><h1 class="brand-text">Josh Corbett</h1></a>
<nav class="nav-menu" role="navigation">
<a class="nav-link" href="#">Portfolio</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Blog</a>
</nav>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">
<div class="desc">Beautiful Montain</div>
</a>
</div>
</div>
</body>
you are explicitly setting the image width and heigth to width="300" height="200"
So since you already specify the image width on your CSS.
Change this:
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">
To this
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain">
(remove width and height attributes)
You are missing ; at end of the image width propery.
div.img img {
width: 100%;
height: auto;
}
I am not sure if this is what your looking for but you can try to change the picture elements size properties to 100%.
So change this line:
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">
To this:
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="100%" height="100%">
My nav bar is behind my images when i try and scroll but i don't want to use z index because i have a lightbox that when you click the image it opens to a bigger image and when the bigger image opens if i have a zindex of 2 then it overlaps the big image in my lightbox. Any help would be great!
Edit: I tried putting the lightbox to an index of 9000 when my nav bar is zindex 1 but this happens:
Nav bar above lightbox:
I would like my nav bar to be behind my lightbox but when i scroll the images don't go over my nav bar.
/** LIGHTBOX MARKUP **/
.lightbox {
/** Default lightbox to hidden */
display: none;
/** Position and style */
position: fixed;
z-index: 2;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox img {
/** Pad the lightbox image */
max-width: 100%;
max-height: 95%;
margin-top: 2%;
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
/** Unhide lightbox **/
display: block;
}
#wrapper {
width: 90%;
height: 950px;
background-color: rgba(155,155,155,0.05);
margin: auto;
}
#nav-bar {
width: 90%;
height: 60px;
background-color: white;
opacity: 0.8;
position: fixed;
box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1);
z-index: 0;
}
#nav-bar-portfolio {
width: 90%;
height: 60px;
background-color: white;
opacity: 0.8;
position: fixed;
box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1);
}
#main-content-index {
height: 900px;
padding-top: 80px;
padding-left: 20px;
padding-right: 20px;
}
#main-content-portfolio {
height: 100%;
padding-top: 80px;
padding-left: 20px;
padding-right: 20px;
}
.nav-text {
float:left;
padding-top: 10px;
padding-left: 20px;
}
h3 {
font-size: 25px;
font-family: helvetica, sans-serif;
display: inline;
text-align: left;
}
h4 {
display: inline-block;
font-family: helvetica, sans-serif;
font-size: 13px;
}
nav {
padding-right: 20px;
float: right;
box-shadow: solid black 100px;
}
nav li {
display: inline-block;
padding: 15px;
}
nav a {
font-family: helvetica, sans-serif;
font-size: 14px;
color: black;
transition: opacity .5s ease-in-out;
}
nav a:hover {
text-decoration: none;
opacity: 0.2;
}
/* __________________________________________
Main Area
__________________________________________ */
.welcome-banner {
display: block;
margin-left: auto;
margin-right: auto;
}
#portfolio-button {
width: 150px;
height: 50px;
padding-top: 15px;
padding-left: 30px;
background-color: rgba(0, 0, 0, 1);
color: white;
border-radius: 10px;
display: block;
text-decoration: none;
font-family: helvetica, sans-serif;
margin: 40px auto;
transition: opacity .5s ease-in-out;
}
#portfolio-button:hover {
opacity: 0.3;
}
/* __________________________________________
Footer
__________________________________________ */
#footer {
width: 100%;
height: 50px;
text-align: center;
background-color: black;
clear: both;
padding-top: 15px;
}
.div-left {
float: left;
}
.div-left p {
color: white;
font-family: helvetica, sans-serif;
font-size: 13px;
padding-left: 20px;
}
.div-center {
margin: 0 auto;
width: 100%;
}
.div-center p {
color: white;
font-family: helvetica, sans-serif;
font-size: 13px;
}
.div-center a {
color: white;
font-family: helvetica, sans-serif;
font-size: 13px;
padding-left: 10px;
text-decoration: none;
transition: opacity 0.5s ease-in-out;
}
.div-center a:hover {
opacity: 0.3;
}
.div-right {
float: right;
}
.div-right ul li {
display: inline-block;
}
.div-right ul li a {
color: white;
font-family: helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
padding-right: 20px;
transition: opacity 0.5s ease-in-out;
}
.div-right ul li a:hover {
opacity: 0.3
}
/* Portfolio */
.main-box {
background-color: rgba(0, 0,0, 0.05);
width: 300px;
height: 400px;
text-align: center;
float: left;
margin-left: 50px;
margin-top: 10px;
margin-bottom: 20px;
}
.project-icons {
padding: 10px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition: filter 0.6s ease;
-webkit-transition: -webkit-filter 0.6s ease;
}
.project-icons:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
.project-text {
padding: 10px;
font-family: helvetica, sans-serif;
font-size: 16px;
}
.project-text-caption{
font-size: 10px;
font-family: helvetica, sans-serif;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="wrapper">
<div id="nav-bar">
<div class="nav-text animated">
<h3>Kyle Du Preez</h3>
<h4>| PORTFOLIO</h4>
</div>
<nav>
<ul>
<li> Home </li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
<main>
<div id="main-content-portfolio" class="animated fadeIn">
<!-- thumbnail image wrapped in a link
<a href="#img1">
<img src="http://insomnia.rest/images/screens/main.png" class="thumbnail">
</a>
<!-- lightbox container hidden with CSS
<a href="#_" class="lightbox" id="img1">
<img src="http://insomnia.rest/images/screens/main.png">
</a>
-->
<!-- Portfolio 1 -->
<div class="main-box">
<a class="thumbnail" href="#img1"><img class="project-icons" src="images/projects/greek-icon.jpg"></a>
<p class="project-text">Greek Alphabet Poster</p>
<p class="project-text-caption">Typography</p>
</div>
<a href="#_" class="lightbox" id="img1">
<img src="images/projects/greek.jpg">
</a>
<!-- Portfolio 2 -->
<div class="main-box">
<img class="project-icons" src="images/projects/premedia-icon.jpg">
<p class="project-text">Pre Media Poster</p>
<p class="project-text-caption">Large Format</p>
</div>
<!-- Portfolio 3 -->
<div class="main-box">
<img class="project-icons" src="images/projects/mohawkposter-icon.jpg">
<p class="project-text">Hamilton Marathon Poster</p>
<p class="project-text-caption">Typography</p>
</div>
<!-- Portfolio 4 -->
<div class="main-box">
<img class="project-icons" src="images/projects/movieposter-icon.jpg">
<p class="project-text">Movie Poster</p>
<p class="project-text-caption">Large Format</p>
</div>
<!-- Portfolio 5 -->
<div class="main-box">
<img class="project-icons" src="images/projects/crayola-icon.jpg">
<p class="project-text">Crayola Packaging</p>
<p class="project-text-caption">Packaging Design</p>
</div>
<!-- Portfolio 6 -->
<div class="main-box">
<img class="project-icons" src="images/projects/housebooklet-icon.jpg">
<p class="project-text">Laing Homes</p>
<p class="project-text-caption">Brochure Design</p>
</div>
</div>
</main>
<footer>
<div id="footer">
<div class="footer-elements">
<div class="div-left"> <p> 2016 - Kyle Du Preez </p> </div>
<div class="div-right">
<ul>
<li><a class="footer-links" href="#">Home</a></li>
<li><a class="footer-links" href="#">About</a></li>
<li><a class="footer-links" href="#">Portfolio</a></li>
<li><a class="footer-links" href="#">Contact</a></li>
</ul>
</div>
<div class="div-center"> <p> LinkedIn: https://ca.linkedin.com/in/kyledupreez </p> </div>
</div>
</div>
</footer>
</div>
</body>
</html>
If you don't want to use z-index,
I think you need to re-order the sequence of DOM. Thus, move your navigation to the bottom, and add top: 0
http://plnkr.co/edit/53wQYQmvPR3fcdKfoZjI?p=preview
#nav-bar {
width: 90%;
height: 60px;
background-color: white;
opacity: 0.8;
position: fixed;
top: 0;
box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1);
z-index: 0;
}
I have a product page on a website.
I have a top menu with like home, about etc....
then I'm trying to have a menu on the left that stays fixed with the product list.
See the image:
With my current code however the menu on the left follows the scrolling here is the code:
<div id="product-list">
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
#product-list{
position:fixed;
}
#product-list ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 12%;
background-color: #FFF;
position:fixed;
height: 100%;
overflow: hidden;
text-overflow: ellipsis;
padding-top:10%;
}
#product-list li{
overflow: hidden;
text-overflow: ellipsis;
}
#product-list li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
#product-list li a:hover:not(.active) {
background-color: #555;
color: white;
}
Plunkr Example
Changes I made
There's a few things I did on your code.
In your style definition, I removed some repetitive code. You had a few places for the #product-list that made it a fixed element, which got annoying.
I added a "special case" class, #product-list.fixed which removes the padding on the top of the list and changes it's position to fixed, with a top offset of 0.
I changed your HTML a little bit. I removed the wrapper div for the product list ul and added the #product-list id to the ul instead.
I also added in some javacript to add in/remove the .fixed class to your #product-list element if the scroll is greater than your item's original position.
I added a transition:all linear 0.3 element to smooth out the change from when we add in the fixed class
in the code below I just changed the images that popup to placehold.it images so that I wouldn't be using your bandwidth.
Edit Changed the z-index to allow the side menu to slip under the footer.
Code
The order for the code below is
Javascript (I used jQuery, which is a super popular framework)
CSS (you may want to look into a CSS framework like Bootstrap which could cut down your development times)
HTML
$(document).ready(function() {
var side_offset = $('#product-list').offset();
//Initial offset.
$(document).on('scroll', function() {
$('#product-list').toggleClass('fixed', $(document).scrollTop() > side_offset.top);
});
})
#charset "utf-8";
/* CSS Document */
html * {
font-family: verdana;
!important;
}
#header {
background-color: #565656;
color: white;
text-align: center;
height: 10%;
position: relative;
z-index: 999;
}
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
#header li {
display: inline;
}
#header li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 30px;
text-decoration: none;
vertical-align: middle;
}
#header li a.active {
text-decoration: underline;
}
#header li a:hover {
background-color: #111;
}
#header li a.a-no-hover:hover {
background-color: transparent;
}
#product-list {
list-style-type: none;
margin: 0;
padding: 0;
width: 12%;
background-color: #FFF;
position: absolute;
height: 100%;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 10%;
z-index: 100;
transition: all linear 0.3s;
}
#product-list.fixed {
position: fixed !important;
padding-top: 0;
top: 0;
}
#product-list li {
overflow: hidden;
text-overflow: ellipsis;
}
#product-list li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
#product-list li a:hover:not(.active) {
background-color: #555;
color: white;
}
#nav {
line-height: 30px;
background-color: #eeeeee;
height: 300px;
width: 100px;
float: left;
padding: 5px;
}
#section1 {
width: 90%;
height: auto;
overflow: hidden;
margin: 0 auto;
text-align: center;
}
#section1 img {
width: 100%;
height: auto;
opacity: 1;
transition: opacity 0.5s linear;
}
#section3 {
width: 90%;
margin: 0 auto;
text-align: center;
/*float:left;
padding:10px;*/
margin-bottom: 2%;
}
#section2 {
width: 50%;
height: auto;
margin-top: 5%;
margin-bottom: 5%;
margin-left: auto;
margin-right: auto;
text-align: left;
/*float:left;*/
text-align: justify;
text-justify: inter-word;
}
.centerer {
text-align: center;
}
#section5 {
width: 90%;
height: auto;
margin-top: 5%;
margin-bottom: 5%;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: middle;
margin-left: 10%;
}
img {
max-width: 100%;
max-height: 100%;
}
.container {
width: 70%;
margin: 10px auto;
position: relative;
text-align: center;
}
.block {
height: auto;
width: auto;
display: inline-block;
margin: 2%;
vertical-align: middle;
padding-left: 2%;
padding-right: 2%;
font-size: 1.2em;
}
.floating-product {
display: inline-block;
width: 20%;
height: 20%;
/*border: 3px solid #565656;*/
padding: 1%;
margin: 0 auto;
margin-top: 2%;
margin-bottom: 2%;
text-align: center;
vertical-align: middle;
}
.floating-product img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display: block;
}
.floating-product a {
color: #000;
}
.floating-product a:hover {
color: #565656;
}
.block a {
color: #000;
}
.block a:hover {
color: #565656;
}
#footer {
background-color: #565656;
color: white;
overflow: auto;
/*clear: both;*/
text-align: left;
padding: 1% 5%;
height: 10%;
vertical-align: middle;
position: relative;
z-index: 999;
}
hr {
width: 70%;
}
h1 {
text-align: left;
font-size: 1.5em;
margin-left: 11%;
}
.margin {
margin-left: 11%;
}
span {
background: transparent;
}
table {
margin-top: 5%;
}
.tg {
border-collapse: collapse;
border-spacing: 0;
width: 99%;
margin: 0 auto;
font-size: 1.1em;
font-weight: 100;
}
.tg td {
padding: 5px 10px;
border-style: none;
border-width: 1px;
overflow: hidden;
word-break: normal;
font-weight: 100;
}
.tg th {
font-weight: 100;
padding: 5px 10px;
border-style: none;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
.tg .tg-lqy6 {
text-align: right;
vertical-align: top;
padding-right: 3%;
}
.tg .tg-yw4l {
vertical-align: top;
text-align: left;
padding-left: 3%;
}
a.fancybox img {
border: none;
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.6);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.fancybox:hover img {
position: relative;
z-index: 999;
-o-transform: scale(1.03, 1.03);
-ms-transform: scale(1.03, 1.03);
-moz-transform: scale(1.03, 1.03);
-webkit-transform: scale(1.03, 1.03);
transform: scale(1.03, 1.03);
}
.imager {
display: inline-block;
width: 15%;
height: 10%;
padding: 1%;
margin: 0 auto;
margin-top: 2%;
margin-bottom: 2%;
text-align: center;
vertical-align: middle;
}
.imager img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display: block;
}
.black a {
float: right;
color: #000
}
.black a:hover {
color: #565656;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<ul>
<li>
<a class="a-no-hover" href="index.html">
<img src="placehold.it/300x300" />
</a>
</li>
<li>
HOME
</li>
<li>
<a class="active" href="product.html">PRODUCTS</a>
</li>
<li>
ORDER
</li>
<li>
ABOUT US
</li>
<li>
CONTACT US
</li>
</ul>
</div>
<ul id="product-list">
<li>
Composite Bag Filter Media
</li>
<li>
High Dust-Loading Bag Filter Media
</li>
<li>
Laminated Composite Filter Media
</li>
<li>
Polyester Synthetic Fibre Filter Media
</li>
<li>
Polypropylene Melt-Blown Filter Media
</li>
<li>
Wire Mesh Backed Composite Filter Media
</li>
</ul>
<div id="section5">
<h1>Product Listing</h1>
<div class="floating-product">
<a href="bfm.html">
<img class="displayed" src="//placehold.it/300x300" />
<br />
<h4>Composite Bag Filter Media</h4>
</a>
<p>
<a style="color:#06F" href="bfm.html">Read more...</a>
</p>
</div>
<div class="floating-product">
<a href="hbm.html">
<img class="displayed" src="//placehold.it/300x300" />
<br />
<h4>High Dust-Loading Bag Filter Media</h4>
</a>
<p>
<a style="color:#06F" href="hbm.html">Read more...</a>
</p>
</div>
<div class="floating-product">
<a href="laminated.html">
<img class="displayed" src="//placehold.it/300x300" />
<br />
<h4>Laminated Composite Filter Media</h4>
</a>
<p>
<a style="color:#06F" href="laminated.html">Read more...</a>
</p>
</div>
<div class="floating-product">
<a href="ps.html">
<img class="displayed" src="//placehold.it/300x300" />
<br />
<h4>Polyester Synthetic Fibre Filter Media</h4>
</a>
<p>
<a style="color:#06F" href="ps.html">Read more...</a>
</p>
</div>
<div class="floating-product">
<a href="pm.html">
<img class="displayed" src="//placehold.it/300x300" />
<br />
<h4>Polypropylene Melt-Blown Filter Media</h4>
</a>
<p>
<a style="color:#06F" href="pm.html">Read more...</a>
</p>
</div>
<div class="floating-product">
<a href="wm.html">
<img class="displayed" src="//placehold.it/300x300" />
<br />
<h4>Wire Mesh Backed Composite Filter Media</h4>
</a>
<p>
<a style="color:#06F" href="wm.html">Read more...</a>
</p>
</div>
</div>
<div id="footer">
<span style="float:left;">
<b>Contact Us</b>
<br />
Email: contact#dongguanhy.com <br />
Contact Phone: +86-769-23150100 <br />
Contact Fax: +86-769-23152700 <br />
Company Address: Liu Yong Wei Industry Area, DongGuan, GuandDong Province, China <br />
</span>
<span style="float:right;">
<b>Follow Us</b>
<br />
<br />
<a href="http://facebook.com/dongguanhy/" target="_blank">
<img src="placehold.it/300x300" />
</a>
<!--<img src="http://mmo-stream.net/dong/images/linkedin.png"/>-->
</span>
</div>