I am currently working on a school project. As of this moment I am in the first steps of creating a product page. I am using an image overlay to show a description of the product while hover. My issue is the text does not wrap, it continues outside of the container. I would appreciate any feedback. Thanks!
.container2 {
position: relative;
width: 15%;
height: 15%;
margin-left: 50px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #4CAF50;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container2:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.container {
overflow: hidden;
}
.column2 {
float: center;
margin: 20px;
background-color: #333;
padding-bottom: 100%;
margin-bottom: -100%;
color: aliceblue;
font-family: roboto;
}
.column1 {
text-align: center;
float: center;
margin: 20px;
background-color: #333;
padding-bottom: 100%;
margin-bottom: -100%;
color:aliceblue;
font-family: roboto;
}
br {
text-align: center;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
li {
color: darkgreen;
font-size: 20px;
font-weight: bold;
}
.active {
background-color: #4CAF50;
}
<!DOCTYPE html>
<html>
<head>
<title>Shopping Page</title>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" type="image/png" href="images/favicongreen.png" />
</head>
<body>
<ul>
<li>
Home
</li>
<li>
<a class="active" href="products.html">Products</a>
</li>
<li>
Contact
</li>
<li>
About
</li>
<li>
Shopping Cart
</li>
<li>
<img src="images/bolt2.png" width="40px" height="40px" />
</li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Products</h1>
<div class="container">
<div class="column1">
<br>
<br>
<p>
<b>Electric Energy Electronics Product Index</b>
</p>
<br>
<div class="container2">
<img src="images/solar.jpg" alt="Avatar" class="image" height="50px" width="50px">
<div class="overlay">
<div class="text">250PX Solar Panel
<br> This solar panel is a great way to harness clean energy from the sun.</div>
</div>
</div>
<div class="column2">
Shopping cart Div
</div>
</div>
</div>
</body>
</html>
Replace your css .text class with this.
.text {
width: 80%;
text-align: center;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Related
I have some issues, when I put some paragraph or anything like that... the navbar covered up. can someone help me what actually wrong with my code? thanks...
this is my html Code
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
</script>
<!-- Navbar -->
</body>
</html>
this my CSS code.
body {
margin: 0;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover{
background-color: #009cff;
}
.wrap{
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox{
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px){
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu{
display: none;
}
.tblmenubox{
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
I have been try to add some padding top to 65px like another but, i doesn't work. i hope i can found the solution, thanks guys...
The problem is that position: fixed, just like position: absolute, pulls the element out of the document flow, so the area it takes up no longer occupies any space. You can see this in the example below, where the first paragraph is occluded by the <nav />:
$(".togel.tblmenu").click(function() {
$(".menu").toggleClass("sh");
});
body {
margin: 0;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<div>
<p>ONE: The quick brown fox jumped over the lazy dog.</p>
<p>TWO: Mary's violet eyes made John stay up nights proposing.</p>
<p>THREE: Roy G Biv</p>
<p>FOUR: Please Excuse My Dear Aunt Sally</p>
</div>
</body>
</html>
If the position: fixed approach is your desired approach, you could put a wrapper around all content that follows it, and give it a margin-top that is the same height of the <nav /> (if this is a known, fixed quantity):
$(".togel.tblmenu").click(function() {
$(".menu").toggleClass("sh");
});
body {
margin: 0;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<div class="content-wrapper">
<p>ONE: The quick brown fox jumped over the lazy dog.</p>
<p>TWO: Mary's violet eyes made John stay up nights proposing.</p>
<p>THREE: Roy G Biv</p>
<p>FOUR: Please Excuse My Dear Aunt Sally</p>
<p>FIVE</p>
<p>SIX</p>
<p>SEVEN</p>
<p>EIGHT</p>
<p>NINE</p>
<p>TEN</p>
<p>ELEVEN</p>
<p>TWELVE</p>
<p>FOURTEEN (FOR LUCK)</p>
</div>
</body>
</html>
As you can see, the content still scrolls fine behind the <nav />. There are other ways to achieve this, using flex or grid, but for the position: fixed approach this will work.
I have any issue, i have been make some footer and when i test my new footer, the Footer covered the content and navbar. i still figure it out how to solve this problem. hope i can get some answer at here...
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
/*navbar code*/
.footer-bottom {
text-align: center;
background-color: #1e77b0;
width: 100%;
position: relative;
bottom: 50%;
}
.Footer-header h3 {
font-family: 'Roboto Condensed', sans-serif;
color: white;
margin: 20px;
text-align: left;
}
.Footer-Sponsored img {
height: 128px;
margin: 10px;
}
hr {
margin: 20px;
border: 0.5px solid lightblue;
}
.hr1 {
margin: 40px;
}
.Footer-deep {
margin: 30px;
}
.Footer-deep img {
height: 30px;
margin: 10px;
}
.Footer-deep h3 {
color: white;
font-family: 'Garamond', sans-serif;
font-size: 100%;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
padding: 30px;
}
.content-wrapper h1 {
font-family: Palatino Linotype;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght#1,300&display=swap" rel="stylesheet">
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<div class="content-wrapper">
<h1>San Andreas Motor Racing Grand Prix</h1>
</div>
<!-- content stop here -->
<footer class="footer-bottom">
<div class="Footer-header">
<h2>San Andreas Motor Racing</h2>
<hr class="Light-line">
<h3>Sponsored By</h3>
</div>
<div class="Footer-Sponsored">
<img src="Sponsored/1.jpg">
<img src="Sponsored/2.png">
<img src="Sponsored/3.jpg">
</div>
<hr class="hr1">
<div class="Footer-deep">
<img src="img/logo.png" align="left">
<h3 align="right">San Andreas Motor Racing Championship</h3>
</div>
</footer>
i have tried to change the position to relative absolute or whatever but it make me found another problem. maybee some one can help me to fix this problem, please.... i have been try to solve his problem by googling for a day and still doesn't have any clue about this problem...
Just add z-index:10 to nav css style
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
z-index:10;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
/*navbar code*/
.footer-bottom {
text-align: center;
background-color: #1e77b0;
width: 100%;
position: relative;
bottom: 50%;
}
.Footer-header h3 {
font-family: 'Roboto Condensed', sans-serif;
color: white;
margin: 20px;
text-align: left;
}
.Footer-Sponsored img {
height: 128px;
margin: 10px;
}
hr {
margin: 20px;
border: 0.5px solid lightblue;
}
.hr1 {
margin: 40px;
}
.Footer-deep {
margin: 30px;
}
.Footer-deep img {
height: 30px;
margin: 10px;
}
.Footer-deep h3 {
color: white;
font-family: 'Garamond', sans-serif;
font-size: 100%;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
padding: 30px;
}
.content-wrapper h1 {
font-family: Palatino Linotype;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS document -->
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght#1,300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
</script>
<!-- Navbar -->
<div class="content-wrapper">
<h1>San Andreas Motor Racing Grand Prix</h1>
</div>
<!-- content stop here -->
<footer class="footer-bottom">
<div class="Footer-header">
<h2>San Andreas Motor Racing</h2>
<hr class="Light-line">
<h3>Sponsored By</h3>
</div>
<div class="Footer-Sponsored">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
</div>
<hr class="hr1">
<div class="Footer-deep">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" align="left">
<h3 align="right">San Andreas Motor Racing Championship</h3>
</div>
</footer>
</body>
</html>
This can be resolved by adding 'z-index: -1;' to your footer-bottom class.
Learn more about z-indexing here
In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The z-index attribute lets you adjust the order of the layering of objects when rendering content.
In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index
You should change the z-order of your elements.
Set z-index of footer less than z-index of the navbar (enough set z-index: -1 for footer)
More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Hi there I've built a portfolio website but for the life of me for the past 3 days I haven't been able to added full-width sections after my portfolio grid.
I'm really at this point not sure what more I can do and would really love to hear from you how can I possibly add further full-width sections below my portfolio grid!
Here's the website:
http://hghazni.com/v2/index.html
And the code:
body {
margin: 0;
padding: 0;
}
body, html {
margin: 0;
font: 1em "Open Sans", Sans-serif;
}
.nav-main {
position: fixed;
z-index: 9999;
width: 100%;
background-color: #222;
height: 5em;
color: #fff;
}
.nav-main .logo {
float: left;
font-weight: bolder;
height: 40px;
padding: 15px 30px;
font-size: 3.0em;
line-height:35px
}
.under-logo {
font-size: 1em;
color: #fff;
float: left;
margin-top: 45px;
margin-left: 55px;
line-height:40px;
position: absolute;
}
.nav-main > ul {
margin: 0;
padding: 0;
float: right;
font-size: 3em;
font-weight: bold;
list-style-type: none;
padding-right: 30px;
}
.nav-main > ul > li {
float: left;
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
color: #fff;
text-decoration: none;
}
.nav-item:hover {
background-color: #444;
}
.title {
height: 50em;
position: relative;
text-align: center;
color: #fff;
font-family: Open sans, Tahoma, Arial;
background: url(http://hghazni.com/v2/img/flat_mountain_bg.jpg) no-repeat center center fixed;
/*background-color: #ee712b;*/
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
overflow: visible;
/*position: absolute;
top: 20%;
left: 30%;
right: 30%*/
}
.title img {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
/*margin: auto;*/
/*width: 100%;*/
}
.title h1 {
position: absolute;
top:70%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color:#000;
font-size: 4em;
/*position: static;
text-align: center;
margin: auto;
width: 70%;*/
}
.title h2 {
/*background-color:#000;
position: static;
text-align: center;
margin: auto;
width: 80%;*/
position: absolute;
top:82.5%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color:#000;
font-size: 2.5em;
}
.content {
padding: 20px;
top: 100%;
left: 0;
background-color: #fff;
align-items: center;
padding-bottom: 40px;
}
.content h1 {
text-align: center;
font-size: 8em;
margin: auto;
margin-top: 50px;
}
.content h3 {
padding: 10px;
font-size: 2.2em;
font-weight: normal;
width:80%;
margin: auto;
}
.work-header {
padding-top: 40px;
padding-bottom: 40px;
width: 100%;
height: 100%;
left: 0;
text-align: center;
background-color: #343436;
}
/*Portfolio Header*/
.work-header h1 {
font-size: 4.2em;
color: #fff;
}
#brain {
color: #e4c027;
}
#heart {
color: #f90446
}
#soul {
color: #6442e9
}
/*Portfolio Grid Section baby*/
.work {
background-color: #fff;
position: relative;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 8%;
margin: 0;
width: 92%;
height: 100%;
text-align: center;
}
.work h1 {
padding-bottom: 2em;
padding-right: 6em;
}
.box {
float:left;
position: relative;
width: 28%;
padding-left: 1%;
padding-bottom: 1%;
background-color: #fff;
}
.boxInner {
position: relative;
left: 20px;
right: 10px;
top: 10px;
bottom: 10px;
overflow: hidden;
}
.boxInner img {
width: 100%;
overflow: auto;
}
.boxInner .titleBox {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: -50px;
background: #000;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
padding: 10px;
text-align: center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 1em;
height: 3em;
padding-top: 1em;
font-size: 2em;
font-weight: bold;
}
/*contact page*/
.work .parent {
position: relative;
padding-top: 50px;
}
.work .parent .contact {}
.work .parent .contact h1 {
text-align: center;
}
.work .parent .contact h4 {
color: #000;
text-align: center;
font-size: 50px;
}
/*contact form*/
#media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.box {
width: 100%;
padding-bottom: 100%;
}
}
#media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.box {
width: 50%;
padding-bottom: 50%;
}
}
#media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 33.3%;
padding-bottom: 33.3%;
}
}
#media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 25%;
padding-bottom: 25%;
}
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
.footer {
background-color: #2d2c2c;
width: 100%;
height: 100%;
position: relative;
padding-left: 20em;
text-align: center;
font-size: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Haroon Ghazni</title>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
</head>
<body class="no-touch">
<nav class="nav-main">
<div class="logo">HGHAZNI</div>
<div class="under-logo">WEB/UI/UX/GRAPHIC</div>
<ul>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="title" >
<img src="img/hg_avatar.png" alt="Haroon Ghazni" />
<h1>I’m Haroon Ghazni.</h1>
<h2>A Web Designer from the little big city of Nottingham.</h2>
</div>
<div class="content" id="about">
<h1>Who?</h1>
<h3>I am a dynamic and creative web designer with experience of working on international brands in a fast paced collaborative environment.</h3>
<h3>As a hands on individual who isn’t afraid of a pen and paper I work through the full UX lifecycle from research to design and testing utilising all elements of a user centred design process to create innovative cross platform experiences.</h3>
<h3>I enjoy learning new skills as well as playing an active part in the design community.</h3>
</div>
<div class="work-header" id="work">
<h1>My Work – <span id="brain">Brain</span>,<span id="heart"> Heart</span> and <span id="soul">Soul.</span></h1>
</div>
<div class="work">
<!-- <h1> me wurk </h1> -->
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port1.jpg" />
<div class="titleBox">Butterfly</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port2.jpg" />
<div class="titleBox">La Pura Vida</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port3.jpg" />
<div class="titleBox">Bohemian Purple</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port4.jpg" />
<div class="titleBox">Lost in Innocence</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port5.jpg" />
<div class="titleBox">Cerebral Experience</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port6.jpg" />
<div class="titleBox">Mario Escort</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port7.jpg" />
<div class="titleBox">Restaurant iOS App</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port8.jpg" />
<div class="titleBox">Nottingham Sober Yaught Dragons</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port9.jpg" />
<div class="titleBox">Poet Farmer</div>
</div>
</div>
<div class="parent">
<div class="contact" id="contact">
<h1>Do not hesitate to get in touch</h1>
<h4>hghazni#gmail.com</h4>
<p> HEY HEY HEY asdasdas dasdasda sdad</p>
</div>
</div>
</div>
<div class="footer">
<h1> footer </h1>
</div>
</body>
</html>
I did following changes to your code
Took out the parent div from work div and made it 100% width
Removed the padding-right from the h1.
Moved up the .footer class and added right after the .parent class styles.
Removed padding-left: 20em; and the big font size from .footer class.
And the most important thing is that you have added conditional comment inside css file which is not valid. This should be added in Html page. inside head tag
I think this solves all of your problems :)
body {
margin: 0;
padding: 0;
}
body, html {
margin: 0;
font: 1em "Open Sans", Sans-serif;
}
.nav-main {
position: fixed;
z-index: 9999;
width: 100%;
background-color: #222;
height: 5em;
color: #fff;
}
.nav-main .logo {
float: left;
font-weight: bolder;
height: 40px;
padding: 15px 30px;
font-size: 3.0em;
line-height:35px
}
.under-logo {
font-size: 1em;
color: #fff;
float: left;
margin-top: 45px;
margin-left: 55px;
line-height:40px;
position: absolute;
}
.nav-main > ul {
margin: 0;
padding: 0;
float: right;
font-size: 3em;
font-weight: bold;
list-style-type: none;
padding-right: 30px;
}
.nav-main > ul > li {
float: left;
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
color: #fff;
text-decoration: none;
}
.nav-item:hover {
background-color: #444;
}
.title {
height: 50em;
position: relative;
text-align: center;
color: #fff;
font-family: Open sans, Tahoma, Arial;
background: url(http://hghazni.com/v2/img/flat_mountain_bg.jpg) no-repeat center center fixed;
/*background-color: #ee712b;*/
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
overflow: visible;
/*position: absolute;
top: 20%;
left: 30%;
right: 30%*/
}
.title img {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
/*margin: auto;*/
/*width: 100%;*/
}
.title h1 {
position: absolute;
top:70%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color:#000;
font-size: 4em;
/*position: static;
text-align: center;
margin: auto;
width: 70%;*/
}
.title h2 {
/*background-color:#000;
position: static;
text-align: center;
margin: auto;
width: 80%;*/
position: absolute;
top:82.5%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color:#000;
font-size: 2.5em;
}
.content {
padding: 20px;
top: 100%;
left: 0;
background-color: #fff;
align-items: center;
padding-bottom: 40px;
}
.content h1 {
text-align: center;
font-size: 8em;
margin: auto;
margin-top: 50px;
}
.content h3 {
padding: 10px;
font-size: 2.2em;
font-weight: normal;
width:80%;
margin: auto;
}
.work-header {
padding-top: 40px;
padding-bottom: 40px;
width: 100%;
height: 100%;
left: 0;
text-align: center;
background-color: #343436;
}
/*Portfolio Header*/
.work-header h1 {
font-size: 4.2em;
color: #fff;
}
#brain {
color: #e4c027;
}
#heart {
color: #f90446
}
#soul {
color: #6442e9
}
/*Portfolio Grid Section baby*/
.work {
background-color: #fff;
position: relative;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 8%;
margin: 0;
width: 92%;
height: 100%;
text-align: center;
}
.work h1 {
padding-bottom: 2em;
padding-right: 6em;
}
.box {
float:left;
position: relative;
width: 28%;
padding-left: 1%;
padding-bottom: 1%;
background-color: #fff;
}
.boxInner {
position: relative;
left: 20px;
right: 10px;
top: 10px;
bottom: 10px;
overflow: hidden;
}
.boxInner img {
width: 100%;
overflow: auto;
}
.boxInner .titleBox {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: -50px;
background: #000;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
padding: 10px;
text-align: center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 1em;
height: 3em;
padding-top: 1em;
font-size: 2em;
font-weight: bold;
}
/*contact page*/
.parent {
position: relative;
padding-top: 50px;
width: 100%;
float: left;
}
.parent .contact {
text-align: center;
}
.parent .contact h1 {
padding: 0;
}
.work .parent .contact h4 {
color: #000;
text-align: center;
font-size: 50px;
}
/*contact form*/
.footer {
background-color: #2d2c2c;
width: 100%;
height: 100%;
position: relative;
text-align: center;
clear: both;
}
#media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.box {
width: 100%;
padding-bottom: 100%;
}
}
#media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.box {
width: 50%;
padding-bottom: 50%;
}
}
#media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 33.3%;
padding-bottom: 33.3%;
}
}
#media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 25%;
padding-bottom: 25%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Haroon Ghazni</title>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body class="no-touch">
<nav class="nav-main">
<div class="logo">HGHAZNI</div>
<div class="under-logo">WEB/UI/UX/GRAPHIC</div>
<ul>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="title" >
<img src="img/hg_avatar.png" alt="Haroon Ghazni" />
<h1>I’m Haroon Ghazni.</h1>
<h2>A Web Designer from the little big city of Nottingham.</h2>
</div>
<div class="content" id="about">
<h1>Who?</h1>
<h3>I am a dynamic and creative web designer with experience of working on international brands in a fast paced collaborative environment.</h3>
<h3>As a hands on individual who isn’t afraid of a pen and paper I work through the full UX lifecycle from research to design and testing utilising all elements of a user centred design process to create innovative cross platform experiences.</h3>
<h3>I enjoy learning new skills as well as playing an active part in the design community.</h3>
</div>
<div class="work-header" id="work">
<h1>My Work – <span id="brain">Brain</span>,<span id="heart"> Heart</span> and <span id="soul">Soul.</span></h1>
</div>
<div class="work">
<!-- <h1> me wurk </h1> -->
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port1.jpg" />
<div class="titleBox">Butterfly</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port2.jpg" />
<div class="titleBox">La Pura Vida</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port3.jpg" />
<div class="titleBox">Bohemian Purple</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port4.jpg" />
<div class="titleBox">Lost in Innocence</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port5.jpg" />
<div class="titleBox">Cerebral Experience</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port6.jpg" />
<div class="titleBox">Mario Escort</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port7.jpg" />
<div class="titleBox">Restaurant iOS App</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port8.jpg" />
<div class="titleBox">Nottingham Sober Yaught Dragons</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port9.jpg" />
<div class="titleBox">Poet Farmer</div>
</div>
</div>
</div>
<div class="parent">
<div class="contact" id="contact">
<h1>Do not hesitate to get in touch</h1>
<h4>hghazni#gmail.com</h4>
<p> HEY HEY HEY asdasdas dasdasda sdad</p>
</div>
</div>
<div class="footer">
<h1> footer </h1>
</div>
</body>
</html>
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>
I'm looking to use auto-center values for two div elements .main_h2 and .first_button, which are the child of div #demo. I tried to use position:relative for parent and position:absolute for child but unable to put elements in center.
The Code:
<!doctype html>
<html>
<head>
<style>
#demo {
width: 1440px;
height: 592px;
border: 0.1px solid #87509c;
background-color: #87509c;
position: relative;
}
.logo {
position: absolute;
top: 50px;
background-image: url("logo.jpg");
width: 117px;
height: 40px;
margin-left: 210;
margin-top: 54;
}
ul {
list-style-type: none;
position: absolute;
top: 47px;
right: 10%;
}
ul, li {
float: right;
margin-left: 30px;
padding: 10px;
font-size: 12pt;
color: white;
font-family: tahoma;
}
.main_h2 {
font-size: 32.16pt;
color: white;
text-align: center;
position: absolute;
top: 235px;
left: 260px;
width: 60%;
}
.first_button {
position: absolute;
top: 381px;
left: 572px;
background-color: #eb7d4b;
color: white;
padding: 10px;
text-align: center;
font-size: 8pt;
height: 60px;
width: 283;
}
</style>
</head>
<body>
<div id="demo">
</div>
<div class="logo">
</div>
<ul>
<li>WORK</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
<li>HOME</li>
</ul>
<div class="main_h2">
Hi there! We are the new kids on the block
and we build awesome websites and mobile apps.
</div>
<button class="first_button">WORK WITH US!</button>
</body>
</html>
Try something like this:
#demo {
width: 100%;
height: 100%;
border: 0.1px solid #87509c;
background-color: #87509c;
}
.header {
display: flex;
}
.logo {
position: relative;
top: 25px;
left: 25px;
background-image: url("logo.jpg");
width: 117px;
height: 40px;
background-color: white;
}
ul {
list-style-type: none;
}
ul, li {
float: right;
margin-left: 30px;
padding: 10px;
font-size: 12pt;
color: white;
font-family: tahoma;
}
.main_h2 {
font-size: 32.16pt;
color: white;
text-align: center;
position: relative;
top: 50%;
left: 50%;
width: 60%;
display: flex;
flex-direction: column;
transform: translate(-50%, -50%);
}
.first_button {
position: relative;
background-color: #eb7d4b;
color: white;
padding: 10px;
text-align: center;
font-size: 8pt;
width: 283px;
transform: translate(-50%);
left: 50%;
margin-top: 10px
}
<body>
<div id="demo">
<div class="header">
<div class="logo">
</div>
<div>
<ul>
<li>WORK</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
<li>HOME</li>
</ul>
</div>
</div>
<div style="height:500px;">
<div class="main_h2">
Hi there! We are the new kids on the block
and we build awesome websites and mobile apps.
<button class="first_button">WORK WITH US!</button>
</div>
</div>
</div>
</body>