This question already has answers here:
What methods of ‘clearfix’ can I use?
(29 answers)
What is a clearfix?
(10 answers)
Closed 2 years ago.
I have a problem with my footer.
I know, that the problem is in float: left in style for div with light-blue borders (.card). I need to set footer in the end of the page.
Result
CSS/HTML code:
body {
font-family: arial;
/*меняем шрифт*/
}
.dropbtn {
text-decoration: none;
/*убираем подчеркивание текста ссылок*/
border: 3px solid #30A8E6;
color: mediumslateblue;
/*меняем цвет ссылок*/
background: white;
padding: 10px;
/*добавляем отступ*/
border-radius: 4px;
/*добавляем скругление*/
-moz-transition: all 0.3s 0.01s ease;
/*делаем плавный переход*/
-o-transition: all 0.3s 0.01s ease;
-webkit-transition: all 0.3s 0.01s;
margin-top: 20px;
margin-right: 10px;
font-size: 18px;
}
button:hover {
background: #1C85BB;
/*добавляем эффект при наведении*/
color: white;
}
#menu {
margin: 0 auto;
width: 100%;
text-align: center;
}
#logo {
width: 250px;
height: 170px;
}
#header {
width: 1000px;
height: 200px;
background: url("img/header.jpg") no-repeat;
margin: 0 auto;
border: 2px solid black;
display: flex;
align-items: center;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.sidenav {
display: inline-block;
width: 150px;
position: fixed;
z-index: 1;
vertical-align: middle;
left: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
text-decoration: underline #2196F3;
}
.main {
margin-left: 200px;
margin-right: 250px;
font-size: 40px;
padding: 0px 10px;
margin-top: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
/*old styles*/
.footer {
background: blue;
height: 250px;
position: fixed;
/* Фиксированное положение */
left: 0;
bottom: 0;
/* Левый нижний угол */
padding: 10px;
/* Поля вокруг текста */
color: #fff;
/* Цвет текста */
width: 100%;
/* Ширина слоя */
}
.menu-footer {
list-style-type: none;
}
.menu-footer a {
text-decoration: underline;
color: white;
}
/*cards from main*/
.card {
float: left;
width: 300px;
height: 300px;
border: 2px solid cornflowerblue;
border-radius: 5%;
margin-right: 20px;
margin-top: 25px;
}
.sideDrop {
-moz-transition: all 0.3s 0.01s ease;
/*делаем плавный переход*/
-o-transition: all 0.3s 0.01s ease;
-webkit-transition: all 0.3s 0.01s;
}
.img-card {
width: 296px;
height: 210px;
border-radius: 5%;
}
.main-footer {
position: absolute;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Авто+</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="form-style.css">
</head>
<body>
<div id="header">
<img id="logo" src="img/logo.png" alt="Логотип">
</div>
<div id="menu">
<button class="dropbtn"><b>Главная</b></button>
<button class="dropbtn"><b>Услуги</b></button>
<button class="dropbtn"><b>Цены</b></button>
</div>
<div class="form" style="">
<form action="" class="ui-form">
<h3>Обратная связь</h3>
<div class="form-row">
<input type="text" id="phone" required autocomplete="off"><label for="phone">Номер телефона</label>
</div>
<p><input type="submit" value="Отправить"></p>
</form>
</div>
<div class="sidenav">
Категории
<div class="dropdown-content">
Все
Легковаые
Грузовые
Мотоциклы
</div>
</div>
<!--Main part cards-->
<div class="main">
<div class="card">
<img class="img-card" src="img/bmw1.jpg">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
</div>
<!--<div class="footer">-->
<!-- <ul style="padding: 70px 0px 0px 70px">-->
<!-- <li class="menu-footer">-->
<!-- <p>Главная</p>-->
<!-- </li>-->
<!-- <li class="menu-footer">-->
<!-- <p>Услуги</p>-->
<!-- </li>-->
<!-- <li class="menu-footer">-->
<!-- <p>Цены</p>-->
<!-- </li>-->
<!-- </ul>-->
<!--</div>-->
<!--footer-->
<footer style="width: 100%; height: 50px; background: darkslategray; bottom: 0;">
</footer>
</div>
</body>
</html>
You can add "clear: both" to the footer css.
Related
My problem is that when I check the page on the internet with Chrome on macOS it doesn't show background-images from CSS stylesheet. However, when I check it in Coda 2 everything works fine. Moreover it works when I open page in Chrome when I open the html file. Can you just tell what the problem might be, cause I've tried nearly everything?
http://avelitest.epizy.com/index.html
P.S.
I think the problem is somewhere in CSS cause at first it was working fine.
CODA 2
CHROME
html, body {
cursor: url(file:///htdocs/img/aperture3.png), auto !important;
}
body {
margin: 0 auto;
max-width: 100%;
}
a:link, a:visited, a:hover, a:active {
}
* {
box-sizing: border-box;
margin: 0%;
padding: 0%;
font-family: "Darker Grotesque" !important;
}
/*--------------- hero section --------------- */
.video-container {
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
}
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
.video-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #1b1b1b;
opacity: 0.8;
}
.header {
position: absolute;
top: 50%;
left: 40%;
transform: translate( -60%, 100%);
}
.header h1 {
color: #d3ae87;
font-size: 80px !important;
display: inline;
transform: translate;
text-align: center !important;
padding-right: -200px;
}
#media(max-width: 900px) {
.header {
left: 50%;
}
.header h1 {
font-size: 34px !important;
text-align: center;
}
}
a:hover {
text-decoration: none;
}
/*--------------- navigation --------------- */
.nav {
width: 100%;
height: 80px;
position: fixed;
z-index: 2;
}
.nav.scrolled {
width:100%;
background-color: #161616 !important;
transition: background-color 500ms linear;
}
.nav #brand {
float: left;
display: block;
margin-left: 1.5%;
line-height: 80px;
font-weight: bold;
text-transform: uppercase;
font-size: 40px;
}
.nav #brand a {
color: #fff;
font-family: Poppins !important;
transition: all 500ms ease-out;
}
.nav #brand a:hover {
text-decoration: none;
}
.nav #menu {
float: left;
right: 40px;
position: fixed;
}
.nav #menu li {
padding-left: 40px;
display: inline-block;
font-weight: lighter !important;
text-transform: uppercase;
font-size: 14px;
line-height: 80px;
position: relative;
transition: all 500ms ease-out;
}
.nav #menu li a {
font-family: sans-serif !important;
color: rgb(156, 156, 156);
transition: all 500ms ease-out;
}
.nav #menu li a:hover {
text-shadow: 0 0 2px #d3bc97, 0 0 5px #d3bc97, 0 0 8px #d3bc97, 0 0 10px #d3bc97, 0 0 12px #d3bc97, 0 0 15px #d3bc97;
color: white;
text-decoration: none;
transition: all 500ms ease-out;
-webkit-filter: drop-shadow(0px 0px 20px #d3bc97) ;
filter: drop-shadow(0px 0px 20px #d3bc97) ;
}
#toggle {
position: absolute;
right: 40px;
top: 20px;
font-weight: 300;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
z-index: 2;
width: 30px;
height: 30px;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
}
.close-btn {
position: absolute;
right: 30px;
font-weight: 300;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
z-index: 2;
top: -2px;
line-height: 80px;
}
.countdown {
text-decoration: none;
font-weight: 400;
filter: drop-shadow (0px 0px 5px #f24333);
-webkit-filter: drop-shadow(0px 0px 5px #f24333) ;
text-shadow: 0 0 2px #f24333, 0 0 5px #f24333, 0 0 8px #f24333, 0 0 10px #f24333;
-webkit-text-shadow:0 0 2px #f24333, 0 0 5px #f24333, 0 0 8px #f24333, 0 0 10px #f24333;
color:white !important;
}
#resize {
z-index: 2;
top: 0px;
position: fixed;
background: #0f0f0f;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
}
#resize #menu {
height: 90px;
position: absolute;
left: 45%;
transform: translateX(-40%);
text-align: center;
display: table-cell;
vertical-align: center;
}
#resize #menu li {
display: block;
text-align: center;
padding: 10px 0;
font-size: 50px;
text-transform: uppercase;
min-height: 50px;
font-weight: bold;
transition: all 0.3s ease-out;
}
#resize li:nth-child(1) {
margin-top: 140px;
}
#resize #menu li a {
color: #fff;
}
#resize #menu li a:hover {
text-decoration: none;
}
#resize.active {
visibility: visible;
opacity: 1;
}
#media(max-width: 900px) {
#toggle {
visibility: visible;
opacity: 1;
margin-top: 6px;
margin-right: 4px;
}
nav #brand {
margin-left: 10px;
}
#resize ul li a {
font-size: 15px;
font-family: "Poppins" !important;
font-weight: lighter !important;
color: rgb(156, 156, 156) !important;
transition: all 500ms ease-out;
}
nav #menu {
display: none;
}
}
#media(min-width: 900px) {
#resize {
visibility: hidden !important;
}
}
/*--------------- about section starts --------------- */
.content {
position: absolute;
margin-top: 100vh;
width: 100%;
}
section {
padding: 140px 0;
}
.section-index {
color: #d3ae87;
font-weight: bolder;
font-size: 20px;
font-family: 'Poppins' !important;
}
.section-heading {
color: grey;
text-transform: uppercase;
letter-spacing: 4px;
font-size: 18px;
}
.section-subheading {
color: grey;
margin: 10px 0;
}
.section-info {
font-size: 24px;
color: grey;
}
.more {
margin: 40px 0;
}
button {
background: none;
border: .3pt solid rgba(184, 140, 93, 0.7);
text-transform: uppercase !important;
font-size: 12px !important;
letter-spacing: 2px;
padding: 18px 36px;
color: black;
}
#btn a {
text-decoration: none !important;
color: black;
}
#btn {
min-height: 50px;
padding: 0 30px;
border-radius: 0;
font-size: 12px;
text-transform: uppercase;
font-family: 'Poppins' !important;
}
/*--------------- services section starts --------------- */
.services {
background: #161616;
}
.service {
margin: 30px 0;
}
.icon ion-icon {
font-size: 36px;
color: #d3ae87;
}
.icon ion-icon:hover {
text-shadow: 0 0 2px #d3bc97, 0 0 5px #d3bc97, 0 0 8px #d3bc97, 0 0 10px #d3bc97, 0 0 12px #d3bc97, 0 0 200px #d3bc97;
filter: drop-shadow (0px 0px 5px #d3bc97);
-webkit-filter: drop-shadow(0px 0px 5px #d3bc97) ;
transition: 1s ease-in-out;
}
.icon-title {
font-size: 28px;
margin-bottom: 4px;
color: rgb(182, 182, 182);
font-weight: lighter;
}
/*--------------- our team section starts --------------- */
#txt {
display: inline !important;
font-size: 15px;
overflow: hidden;
}
.row{
padding-right: 7%;
}
.team-member, .team-img {
position: relative;
}
.team-img {
background: grey;
height: 400px;
width: 300px;
}
.members {
margin: 0% -15%;
}
.team-title {
margin: 20px 0px;
margin-right: -200px;
}
.team-title h5 {
font-size: 28px;
}
.team-title span {
font-size: 20px;
}
.team-member {
overflow: visible;
.team-one {
background: url ("file:///htdocs/img/FEDOR.jpg") no-repeat 50% 50%;
background-size: cover;
}
.team-two {
background: url ("file:///htdocs/img/ANDREI.jpg") no-repeat 50% 50%;
background-size: cover;
}
.team-three {
background: url ("file:///htdocs/img/ILJA.jpg") no-repeat 50% 50%;
background-size: cover;
}
/*--------------- newsletter section starts --------------- */
.newsletter {
padding: 140px 0;
background: #161616;
background: url(file:///htdocs/img/subcribe.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.newsletter input {
text-transform: uppercase;
}
.newsletter .news-data {
max-width: 650px;
margin: 0 auto;
text-align: center;
position: relative;
}
.newsletter h1 {
color: #fff;
float: center;
position: center !important;
margin-bottom: 40px;
}
.newsletter .form-control {
float: center;
position: center !important;
height: 50px;
border-color: #fff;
border-radius: 0 !important;
}
.form-control:focus {
box-shadow: none !important;
border: none !important;
}
::placeholder {
letter-spacing: 4px;
}
.newsletter .btn {
min-height: 50px;
padding: 0 30px;
border-radius: 0;
background: #000;
color: #fff;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
font-family: Poppins !important;
}
/*--------------- contact section starts here --------------- */
#contact-form {
margin: 5% 0;
}
.contact .icon-title {
margin-top: 10px;
color: #000;
}
#contact-form ul {
list-style: none;
margin-bottom: 40px;
border-radius: 0;
}
#contact-form li:last-of-type {
border-bottom: none;
}
#contact-form label {
display: block;
font-size: 22px;
color: rgb(97, 97, 97);
}
#contact-form input, #contact-form textarea {
width: 100%;
padding: 5px;
border: none;
resize: vertical;
background: transparent;
color: #101010;
font-weight: bolder;
}
input:focus {
outline: none !important;
border: none !important;
}
textarea:focus {
outline: none !important;
border: none !important;
}
.textarea {
border-bottom: 1px solid #c9c9c9;
}
#media(max-width: 900px) {
#contact-form {
margin: 5% 0;
width: 98%;
}
}
/*--------------- footer section starts here --------------- */
.footer {
background: #161616;
}
#media, #address, #mail {
text-align: center !important;
}
#mail a:hover {
text-decoration: none;
}
#media a:link, a:hover, a:visited {
color:white;
}
.footer .container {
padding: 160px 0;
}
.footer li, p, h4 {
font-size: 24px !important;
}
.footer h4 {
font-weight: lighter;
color: #fff;
}
.footer p {
color: grey;
font-weight: lighter;
}
.footer li {
font-weight: lighter;
color: #fff;
padding-left: 20px;
font-size: 18px !important;
}
#media ul {
list-style: none;
}
#media ul li {
display: inline-block;
}
#media(max-width: 900px) {
.footer .container {
width: 92% !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="PRODUCTION SHORT DESCRIPTION"/>
<meta name="keywords" content="AVELI PRODUCTION, VIDEO PRODUCTION, MUSIC VIDEOS, FILMS COMPANY, VIDEO EDITING, VFX COMPANY, AVELI, aveli, filming crew">
<title>AVELI PRODUCTION</title>
<!-- stylesheet -->
<link rel="stylesheet" href="stylesheets/style.css">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Darker+Grotesque:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- icons -->
<script type="module" src="https://unpkg.com/ionicons#4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
<!-- for on scroll animations -->
<link rel="stylesheet" href="https://cdn.rawgit.com/daneden/animate.css/v3.1.0/animate.min.css">
<script src="https://cdn.rawgit.com/matthieua/WOW/1.0.1/dist/wow.min.js"></script>
</head>
<body>
<!--------------- team section starts here --------------->
<a id="team"></a>
<section class="team">
<div id="teamstar">
<div class="container-fluid">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2 section-index wow fadeInUp" data-wow-delay="0.3s" style="margin-right: -1.000em;">03</div>
<div class="col-md-8 section-heading wow fadeInUp" data-wow-delay="0.4s" style="margin-left:-5.000em; margin-bottom: 3.000em;">Our Founders</div>
</div>
<div class="row members">
<div class="col-md-4"></div>
<div class="col-md-3 wow fadeInUp" data-wow-delay="0.5s" style="margin-left: -110px; margin-right: 7px;">
<div class="team-member">
<div class="team-img team-one"></div>
</div>
<div class="team-title">
<h5>Fedir Hostryi</h5>
<span>Founder/Film&SMM Area</span>
</div>
</div>
<div class="col-md-3 wow fadeInUp" data-wow-delay="0.6s" style="margin-right: 7px;">
<div class="team-member">
<div class="team-img team-two"></div>
</div>
<div class="team-title">
<h5>Andrii Donetskyi</h5>
<span>Co-founder/Film Area</span>
</div>
</div>
<div class="col-md-3 wow fadeInUp" data-wow-delay="0.7s" style="margin-right:-1000px;">
<div class="team-member">
<div class="team-img team-three"></div>
</div>
<div class="team-title">
<h5>Illia Ivantsov</h5>
<span>Co-founder/SMM Area</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!--------------- team section ends here --------------->
<!--------------- newsletter section starts here --------------->
<section class="newsletter">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="news-data">
<div class="section-subheading">
<h1 class="wow fadeInUp" data-wow-delay="0.3s">Subscribe to our newsletter</h1>
</div>
<div class="input-group wow fadeInUp" data-wow-delay="0.4s">
<input type="email" class="form-control" placeholder="Enter your email">
<span class="input-group-btn">
<button class="btn" type="submit">Subscribe</button>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!--------------- newsletter section ends here --------------->
<!--------------- contact section starts here --------------->
<a id="contact"></a>
<section class="contact">
<div class="container-fluid">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2 section-index wow fadeInUp" data-wow-delay="0.3s">04</div>
<div class="col-md-8 section-heading wow fadeInUp" data-wow-delay="0.4s">Contact us</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-6 icon-title wow fadeInUp" data-wow-delay="0.5s">We’re here to help and answer any question you might have. We look forward to hearing from you 🙂</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-6">
<form action="mailto:aveliproduction#gmail.com" name="contact-form" id="contact-form" method="POST">
<ul>
<li class="wow fadeInUp" data-wow-delay="0.6s">
<label for="contact-name">Name :</label>
<div class="textarea">
<input type="text" name="contact-name" id="contact-name" value="" required>
</div>
</li>
<br>
<li class="wow fadeInUp" data-wow-delay="0.7s">
<label for="contact-email">E-mail :</label>
<div class="textarea">
<input type="email" name="contact-email" id="contact-email" value="" required>
</div>
</li>
<br>
<li class="wow fadeInUp" data-wow-delay="0.8s">
<label for="contact-project">Message :</label>
<div class="textarea">
<textarea name="contact-project" id="contact-project" rows="6" required></textarea>
</div>
</li>
</ul>
<button type="submit" name="contact-submit" id="contact-submit" class="send wow fadeInUp" data-wow-delay="0.9s">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!--------------- footer starts here --------------->
<div class="footer">
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-4 wow fadeInUp" data-wow-delay="0.3s" id="address">
<p>Workarea</p>
<h4>Warszawa</h4>
<h4>Zlota Tower</h4>
<h4>postal code: 00-165</h4>
<br><br>
</div>
<div class="col-md-4 wow fadeInUp" data-wow-delay="0.4s" id="media">
<ul>
<li>
<a href="//www.facebook.com/fedor.hostryy">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li>
<a href="//www.facebook.com/fedor.hostryy">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li>
<a href="//www.facebook.com/fedor.hostryy">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
<li>
<ion-icon name="logo-youtube"></ion-icon>
</li>
</ul>
<br><br>
</div>
<div class="col-md-4 wow fadeInUp" data-wow-delay="0.5s" id="mail">
<p>Feel Free to Contact Us</p>
<h4>aveliproduction#gmail.com</h4>
<br><br>
</div>
</div>
</div>
</div>
</div>
<!--------------- footer ends here --------------->
</div>
</div>
<script>
// audio starts here
var audio = document.getElementById("bckgmusic");
audio.autoplay = true;
audio.loop = true;
audio.volume = 0.1;
audio.load();
document.addEventListener('keydown', function(e) {
if (e.keyCode == 113) {
document.getElementById('bckgmusic').pause();
}
});
document.addEventListener('keydown', function(e) {
if (e.keyCode == 112) {
document.getElementById('bckgmusic').play();
}
});
</script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
// navigation starts here
$("#toggle").click(function() {
$(this).toggleClass('on');
$("#resize").toggleClass("active");
});
$("#resize ul li a").click(function() {
$(this).toggleClass('on');
$("#resize").toggleClass("active");
});
$(".close-btn").click(function() {
$(this).toggleClass('on');
$("#resize").toggleClass("active");
});
$(function () {
$(document).scroll(function () {
var $nav = $(".nav");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
new WOW().init();
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
</script>
</body>
</html>
May be you should add the images inside the html file. That would work
Well, the problem is you are mentioning file src like this
file:///htdocs/img/ILJA.jpg
but chrome will not recognize it so it is unable to fetch the image for you. So you need to specify the exact path from the root means directory followed by subdirectory and followed by file name for example in windows you have to use C:\xampp\htdocs\img but you are using it like just htdocs\img
But Coda can recognize it because it is a web development application. And it will know how to get the image just from the subdirectory
I took a look at your site you have a subdirectory called img if you want to mention file name with full url you can do like this http://avelitest.epizy.com/img/your_file_name.jpg this will show the correct output
For example, you can check this link
http://avelitest.epizy.com/img/FEDOR.jpg
and this link will display all images within img directory http://avelitest.epizy.com/img/
I'm beginer. I'm designing a website about furniture. But I face some problem with css and bootstrap. I think they are conflicted.
I want to design a table which contain some contents and pictures. They can lead another page's this website. I tried to do my best but they don't work.maybe my program is not good. sorry for this inconvenience!. Can you tell me how to make table? thanks a million.
#charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial;
background-color: darkgrey;
}
.topnav{
position: relative;
margin: 0 auto;
z-index: 1;
}
.topnav .content{
position: absolute;
top: 0;
background: rgba(0,0,0,0.5);
width: 100%;
color: #f1f1f1;
padding: 20px;
animation-duration: 0s;
}
.topnav a{
float:left;
display: inline-block;
color: white;
text-align: center;
padding: 15px 15px;
text-decoration: none;
font-size: 14px;
margin-left: 150px;
}
.topnav a:hover{
background-color: white;
color: white;
background: rgba(0,0,0,0.5);
}
.topnav .search-container{
float: right;
margin-right: 120px;
}
.topnav input[type=text]{
padding: 6px;
margin-top: 8px;
font-size: 15px;
border: 2px solid ghostwhite;
}
.topnav .search-container button{
float: right;
padding: 6px 10px;
margin-top: 8px;
background-color: white;
border: none;
cursor: pointer;
}
.top .search-container button:hover{
background-color: white;
color: black;
}
#media screen and (max-width: 600px){
.topnav .search-container {
float: none;
}
}
.topnav a, .top input[type=text], .topnav .search-container button {
float: none;
display: inline-block;
text-align: left;
margin: 0px;
padding: 14px;
}
.topnav input[type=text]{
border: 2px solid ghostwhite;
}
.topnav .logo{
float: left;
width: 70px;
height: 45px;
margin-right: 10px;
}
.mySlides {
display: none;
max-width: 100%;
}
.slideshow-container {
max-width: 100%;
position: relative;
margin: 0px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
.text{
color: white;
font-size: 50px;
position: absolute;
text-align: center;
}
.hero-text{
text-align: center;
position:absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%, -50%);
background: rgb(0,0,0,0.3);
background-color: black;
opacity: 0.4;
z-index: 1;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2.69s;
animation-name: fade;
animation-duration: 2.69s;
}
#-webkit-keyframes fade{
from{opacity: 0.5}
to{opacity: 1}
}
#keyframes fade{
from {opacity: 0.5}
to{opacity: 1}
}
#media only screen and (max-width: 320px){
.text {font-size: 30px;}
}
.container {
position: relative;
font-family: Arial;
}
.button{
color: white;
background-color: black;
cursor: pointer;
display: block;
fontsize: 20px;
font-weight: 400;
line-height: 45px;
margin: 2px auto 2em;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
letter-spacing: 0;
box-shadow: 3px 3px 1px;
}
.button:hover,
.button:active {
letter-spacing: 5px;
}
.button:after,
.button:before{
backface-visibility: hidden;
border: 1px solid white;
bottom: 0px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.button:hover:after,
.button:hover:before{
backface-visibility: hidden;
border-color: white;
transition: width 350ms ease-in-out;
width: 70%;
}
.button :hover:before{
bottom: auto;
top: 0;
width: 70%;
}
.dropdown{
float: left;
overflow: hidden;
}
.dropdown .dropbtn{
font-size: 14px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background: rgba(0,0,0,0.5);
}
.topnav a:hover, .dropdown: hover .dropbtn{
background-color: white;
color: black;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
}
.dropdown: hover .dropdown-content{
display: block;
}
.contain {
position:relative;
width: 50%;
}
.image{
opacity: 1;
display: block;
width: 90%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
margin-top: -30px;
border: 2px solid black;
box-shadow: 3px 3px 1px;
}
.middle{
transition: .5s ease;
opacity: 0.5;
position: absolute;
top: 50%;
left: 33%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.contain:hover .image{
opacity: 0.3;
}
.contain:hover .image{
opacity: 1;
}
.text-con{
background-color: black;
color: white;
font-size: 16px;
padding: 16px 32px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Quality Furnitures</title>
</head>
<body>
<div class="topnav">
<div class="content">
<img class="logo" src="image.css/logo.jpg">
HOME
PRODUCTION
PROJECTS
CONTACTS
<div class="search-container">
<input type="text" placeholder="Search..." name="search">
<buttton type="submit"><i class="fa fa-search"></i></buttton>
</div>
</div>
</div>
<div class="slideshow-container">
<div class="hero-text">
<h3 style="font-size: 60px"><u>Style.Luxury.Design</u></h3>
<br>
<button class="button"><strong>SHOP NOW</strong></button>
<button class="button"><strong>EXPLORE NOW</strong></button>
</div>
<div class="mySlides fade">
<div class="container">
<img src="image.css/161122_14_59_10_5DS_7049.0.jpg" style="width:100%; height:70%">
</div>
</div>
<div class="mySlides fade">
<div class="container">
<img src="image.css/top-interior-design-furniture-stores-home-decoration-ideas-designing-luxury-at-interior-design-furniture-stores-interior-design-ideas.jpg" style="width:100%; height:70%">
</div>
</div>
<div class="mySlides fade">
<div class="container">
<img src="image.css/luxury-furnature-stores-with-top-online-furniture-stores.jpg" style="width:100%; height: 70%">
</div>
</div>
</div>
<script>
var slideIndex;
function showSlides(){
var i;
var slides=document.getElementsByClassName("mySlides");
for (i=0; i<slides.length; i++){
slides[i].style.display ="none";
}
slides[slideIndex].style.display ="block";
slideIndex++;
if (slideIndex > slides.length -1){
slideIndex = 0;
}
setTimeout(showSlides, 5000);
}
showSlides(slideIndex =0);
function currentSlide(n){
showSlides(slideIndex = n);
}
</script>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<div class="contain">
<img src="image.css/22staged1-master768.jpg" style="width:90%" class="image">
<br>
<div class="middle">
<div class="text-con">
<h2>Living Room</h2>
<br>
<button class="button">SEE MORE</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="contain">
<img src="image.css/eva_br.jpg" style="width:90%" class="image">
<div class="middle">
<div class="text-con">
<h2>BedRoom</h2>
<br>
<button class="button">SEE MORE</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumnail">
<div class="contain">
<img src="image.css/bathroom.jpg" style="width: 90%" class="image">
<div class="middle">
<div class="text-con">
<h2>BathRoom</h2>
<br>
<button class="button">SEE MORE</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You just need to change the order in which you are loading your stylesheets. Currently you are loading them in this order
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
You need to have your own styles come after the bootstrap style sheet
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style1.css">
This is the cascade aspect of CSS (the 'C'). Your rules are currently being overwritten by bootstrap default rules and that is why you are having some conflicts. To better understand you can take a look here https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
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; }
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 am trying to show different tab content when clicking on a link using pure CSS by following this W3Schools tutorial. However, it is not working for me.
Again, it has to be pure CSS, no JavaScript!
Here's my code:
/* landscape-screen.css */
/*** General Settings ***/
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
/*Main Wrapper Styling*/
#main-wrapper {
min-width: 960px;
height: 100%;
}
/* Banner styling*/
.header {
width: 100%;
height: 10%;
background-color: #7a6868;
}
/* "Welcome" photo in the banner position */
#welcome {
margin-left: 30%;
}
/* General wrapper settings */
.inner-wrapper-settings {
width: 100%;
height: 100%;
}
/* Left navigation menu styling */
.aside {
width: 180px;
height: 100%;
background-color: #cd4409;
/*display: inline-block; */
/* So that Nav Bar will be next to its section */
text-align: center;
float: left;
}
/* Right main Section styling */
.section {
/*display: inline-block; */
/* So that the section will be next to Nav Bar */
width: calc(100% - 180px);
height: 100%;
background-color: #eec712;
float: right
}
/*Footer styling*/
.footer {
background-color: black;
width: 100%;
height: 80px;
clear: both;
color: white;
}
/*** Tooltip***/
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
.tooltip:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
/* sidebar-links.css */
ul {
padding: 0;
margin-top: 30px;
}
li {
margin-bottom: 30px;
padding: 0px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: #f0d248;
}
a:visited {
color: white;
}
/*form-responsive.css:*/
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
html {
/*background:url(http://thekitemap.com/images/feedback-img.jpg) no-repeat;*/
background-size: cover;
height: 100%;
}
#feedback-page {
text-align: center;
}
#form-main {
width: 100%;
float: left;
padding-top: 0px;
}
#form-div {
background-color: rgba(72, 72, 72, 0.4);
padding-left: 35px;
padding-right: 35px;
padding-top: 35px;
padding-bottom: 50px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top: 30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color: #3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0, 0, 0, 0);
}
.feedback-input:focus {
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused {
color: #30aed6;
border: #30aed6 solid 3px;
}
/* Icons ---------------------------------- */
#name {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment {
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize: vertical;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
background-color: white;
}
#button-blue {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float: left;
width: 100%;
border: #fbfbfb solid 4px;
cursor: pointer;
background-color: #3498db;
color: white;
font-size: 24px;
padding-top: 22px;
padding-bottom: 22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top: -4px;
font-weight: 700;
}
#button-blue:hover {
background-color: rgba(0, 0, 0, 0);
color: #0493bd;
}
.submit:hover {
color: #3498db;
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease {
width: 100%;
background-color: white;
}
#media only screen and (max-width: 580px) {
#form-div {
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
.section div {
display: none;
}
.section:target div {
display: inline-block;
}
<!--Layout Main Wrapper-->
<div id="main-wrapper">
<div class="header">
<!-- The banner-->
<img id="logo" src="Resources/Images/logo.png" width="184" height="47" alt="logo" />
<img id="welcome" src="Resources/Images/Welcome.png" width="180" height="40" alt="Welcome" />
</div>
<!--
-->
<div id="content-wrapper" class="inner-wrapper-settings">
<div class="aside">
<!--The Navigation Menu (left side)-->
<ul>
<li><a title="Link for blog" class="tooltip" href="#blog">Blog</a></li>
<li><a title="Link for Contacts" class="tooltip" href="#contacts">Contacts</a></li>
</ul>
</div>
<!--
-->
<div class="section">
<!--The Section of the layout (right side)-->
<div id="blog">
<span>Blog</span>
</div>
<div id="contacts">
<div id="form-main">
<div id="form-div">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue" />
<div class="ease"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--
-->
<div class="footer">
<!--The foot of the layout (down side)-->
bla bla
</div>
</div>
jsFiddle
Currently, when I click on "Blog" or on "Contacts", it doesn't show anything.
Can you please show me how to fix it?
change the css like below
.section > div {display: none;}
.section > div:target { display: block;}
and remove # from id name
DEMO
try removing the character "#" from your div ids :
<div id="blog">
<div id="contacts">