add task working incorrect

add task working incorrect - javascript

Problem: when adding the task of "to do" by pressing enter in safari than the collapsible is the "Week" tab duplicated. And added any task.
I do not know where it goes wrong
Who can help me?
The HTML
<!DOCTYPE html>
<html>
<head>
<title>planIt</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="https://use.fontawesome.com/e886da0b59.js"></script>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- jquery custom -->
<script type="text/javascript" src="js/script.js"></script>
<!-- jquery mobile -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- jquery ui -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- touch -->
<script src="js/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div data-role="page" id="pagedag">
<div id="header" data-role="header" style="overflow:hidden;">
<div class="logo"></div>
<i class="fa fa-bars" aria-hidden="true"></i>
</div><!-- /header -->
<div data-role="panel" id="overlayPanel" data-display="overlay">
<div class="logo"></div>
<p>Dag</p>
<p>Week</p>
</div>
<div data-role="tabs" id="tabs">
<div data-role="navbar" class="custom-navbar">
<ul>
<li>dag</li>
<li>week</li>
</ul>
</div>
<!--- dag --->
<div id="dag" class="ui-body-d ui-content">
<h1>Tijdlijn...</h1>
<div data-role="collapsible">
<h4>To Do</h4>
<p>Hoi</p>
<form name="toDoList">
<input type="text" name="ListItem"/>
</form>
<button id="button" class="ui-btn">Add</button>
</div>
<div data-role="collapsible">
<h4>Progress</h4>
<p>Hoi2</p>
<div id="progress">
<ol id="sortableProgress"></ol>
</div>
</div>
<div data-role="collapsible">
<h4>Done</h4>
<p>Hoi3</p>
<div id="done">
<ol id="sortableDone"></ol>
</div>
</div>
</div>
<!--- einde dag --->
<!--- week --->
<div id="week" class="ui-body-d ui-content">
<h1>Tijdlijn...</h1>
<div data-role="collapsible">
<h4>To do</h4>
<p>Hoi</p>
<form name="toDoList">
<input type="text" name="ListItem"/>
</form>
<button id="button" class="ui-btn">Add</button>
</div>
<div data-role="collapsible">
<h4>Progress</h4>
<p>Hoi2</p>
<div id="progress">
<ol id="sortableProgress"></ol>
</div>
</div>
<div data-role="collapsible">
<h4>Done</h4>
<p>Hoi3</p>
<div id="done">
<ol id="sortableDone"></ol>
</div>
</div>
</div>
<!--- einde week --->
</div>
<div id="header" data-role="header" style="overflow:hidden;">
<p>© planIT</p>
</div><!-- /footer -->
</div>
</body>
</html>
The CSS
header, section {
display: block;
color: #fff;
}
body{
margin: 0px;
padding: 0px;
background: #1abc9c;
font-family: 'Lato',sans-serif;
}
h1{
color: #000;
text-align: center;
margin-top: 20px;
}
.logo{
content: url(assets/planit.png);
height: 80px;
width: auto;
margin: auto;
padding: 8px;
}
/* header */
#header {
background-color: #fff;
}
/* button dag/week */
.custom-navbar ul li a {
background: #eee; /* Old browsers */
background: -moz-linear-gradient( #eee, #eee ) !important; /* FF3.6+ */
background: -webkit-linear-gradient( #eee, #eee ) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient( #eee, #eee ) !important; /* Opera 11.10+ */
background: -ms-linear-gradient( #eee, #eee ) !important; /* IE10+ */
border: none;
letter-spacing: 1px;
font-weight: normal;
}
.custom-navbar ul li a.ui-btn-active {
background: #57cb98; /* Old browsers */
background: -moz-linear-gradient( #57cb98, #57cb98 ) !important; /* FF3.6+ */
background: -webkit-linear-gradient( #57cb98, #57cb98 ) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient( #57cb98, #57cb98 ) !important; /* Opera 11.10+ */
background: -ms-linear-gradient( #57cb98, #57cb98 ) !important; /* IE10+ */
border: none;
letter-spacing: 1px;
font-weight: normal;
}
/* collapse */
.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
border-right-width: 1px;
border-left-width: 1px;
background-color: #57cb98;
color: #fff;
letter-spacing: 1px;
font-weight: normal;
}
.ui-collapsible-inset .ui-collapsible-heading .ui-btn:hover {
border-right-width: 1px;
border-left-width: 1px;
background-color: #38b77f;
color: #fff;
letter-spacing: 1px;
font-weight: normal;
}
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400);
body {
font: normal normal 13px/16px "Open Sans", sans-serif;
background: #ccc;
}
.container{
padding: 20px;
width: 300px;
margin: 0 auto;
margin-top: 40px;
background: white;
border-radius: 5px;}
form {
display: inline-block;
}
input{
padding: 4px 15px 4px 5px;
}
#button{
display: inline-block;
background-color:#fc999b;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
padding: 5px 15px;
}
#button:hover{
cursor: pointer;
opacity: .8;}
ol {padding-left: 20px;}
ol li {padding: 5px;color:#000;}
ol li:nth-child(even){background: #dfdfdf;}
.strike{text-decoration: line-through;}
li:hover{
cursor: pointer;
}
jQuery
$(document).ready(
function(){
$('#button').click(
function(){
var toAdd = $('input[name=ListItem]').val();
$('#sortableProgress').append('<li>' + toAdd + '</li>');
});
$("input[name=ListItem]").keyup(function(event){
if(event.keyCode == 13){
$("#button").click();
}
});
$(document).on('dblclick','li', function(){
$(this).toggleClass('strike').fadeOut('slow');
});
$('input').focus(function() {
$(this).val('');
});
$('#sortableProgress').sortable();
}
);

When you attach the click handler to your buttons, you're using the id $('#button'). This will only attach the handler to the first button with the id of 'button'.
So when you click the button for 'Week' nothing is happening because no function has been assigned to its click event.
Also, when you attach a new item to you list, your encountering the same issue. There are two lists with the id sortableProgress but when you do the following:
$('#sortableProgress').append('<li>' + toAdd + '</li>')
You are again only interacting with the first element that appears on the page with an id of 'sortableProgress'.
If you prepend your IDs with dag- and week- then this will solve your problem.
Here is an example fiddle with these changes: https://jsfiddle.net/2kjc55f3/

Related

JQuery UI button style not appearing in Dialog box

The buttons inside a dialog box is not appearing in JQuery UI Style whereas the outside buttons are getting stylised.
Here is my piece of code where i think i'm doing wrong-
$("#addSection").button().click(function(){
$('#sectionDialog').dialog({
buttons:{
"Add New Section":function(){},
"Cancel": function(){}}
});
});
Inside Dialog Box-
Here is the problem
Outside Dialog Box-
Appering perfectly outside dialog box
Edit:
My HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Daily Tasks</title>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jquery/external/jquery/jquery.js"></script>
<script src="jquery/jquery-ui.min.js"></script>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="jquery/jquery-ui.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container-fluid">
<h2>Daily Tasks</h2>
<hr width="100%" size="4">
<div class="addSection">
<button id="addSection">Add Section</button>
</div>
<div id="sections">
<ul id="main">
<li>Personal<span class='ui-icon ui-icon-close'></span></li>
<li>Work<span class='ui-icon ui-icon-close'></span></li>
</ul>
<ol id="personal">
</ol>
<ol id="work">
</ol>
</div>
<div class="addTask">
<button id="addTask">Add Task</button>
</div>
<div id="sectionDialog" title="Add a section">
<label for="section">Section Name:</label><input id="section" type="text">
</div>
<div id="taskDialog" title="Add a task">
<label for="task">Task Name:</label><input id="task" type="text">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
My CSS Code:
body{
background-color: #19456b;
}
h2{
text-align: center;
color: #d89216;
font-family:'Times New Roman', Times, serif;
font-size: 2.4rem;
font-style: italic;
font-weight: 500;
margin: 10px 0;
}
hr{
margin: 0;
color: #d89216;
}
button:focus{outline:none !important;}
.container-fluid{
margin-top: 50px;
padding: 2px 15px;
width: 800px;
height: 600px;
border: 5px inset rgb(255,214,75);
background-color: blanchedalmond;
}
ol li{
padding: 2px;
cursor: grabbing;
}
ol li:hover{
background-color: #fad586;
border: 0.5px solid rgb(238, 148, 14);
}
.checkbox
{
margin: 0 5px 0 3px;
cursor: pointer;
}
.addSection
{
text-align: right;
margin: 12px 2px;
}
.addTask
{
text-align: right;
margin: 12px 2px;
}
#sectionDialog{
display: none;
}
#taskDialog{
display: none;
}
.ui-icon-close
{
margin-top: 0.5px;
margin-right: 3px;
transform: scale(1.5);
cursor: pointer;
}
Thanks is advance!

Consider adjusting your head like so:
<!-- CSS Stylesheets -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="jquery/jquery-ui.min.css">
<link rel="stylesheet" href="styles.css" />
The order that they load in is important.
$(function() {
$("#addSection").button().click(function() {
$('#sectionDialog').dialog({
buttons: {
"Add New Section": function() {},
"Cancel": function() {}
}
});
});
});
body {
background-color: #19456b;
}
h2 {
text-align: center;
color: #d89216;
font-family: 'Times New Roman', Times, serif;
font-size: 2.4rem;
font-style: italic;
font-weight: 500;
margin: 10px 0;
}
hr {
margin: 0;
color: #d89216;
}
button:focus {
outline: none !important;
}
.container-fluid {
margin-top: 50px;
padding: 2px 15px;
width: 800px;
height: 600px;
border: 5px inset rgb(255, 214, 75);
background-color: blanchedalmond;
}
ol li {
padding: 2px;
cursor: grabbing;
}
ol li:hover {
background-color: #fad586;
border: 0.5px solid rgb(238, 148, 14);
}
.checkbox {
margin: 0 5px 0 3px;
cursor: pointer;
}
.addSection {
text-align: right;
margin: 12px 2px;
}
.addTask {
text-align: right;
margin: 12px 2px;
}
#sectionDialog {
display: none;
}
#taskDialog {
display: none;
}
.ui-icon-close {
margin-top: 0.5px;
margin-right: 3px;
transform: scale(1.5);
cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container-fluid">
<h2>Daily Tasks</h2>
<hr width="100%" size="4">
<div class="addSection">
<button id="addSection">Add Section</button>
</div>
<div id="sections">
<ul id="main">
<li>Personal<span class='ui-icon ui-icon-close'></span></li>
<li>Work<span class='ui-icon ui-icon-close'></span></li>
</ul>
<ol id="personal">
</ol>
<ol id="work">
</ol>
</div>
<div class="addTask">
<button id="addTask">Add Task</button>
</div>
<div id="sectionDialog" title="Add a section">
<label for="section">Section Name:</label><input id="section" type="text">
</div>
<div id="taskDialog" title="Add a task">
<label for="task">Task Name:</label><input id="task" type="text">
</div>
</div>

Unable to implement a scrollspy with Bootstrap 4. Why?

I'm trying to implement something as simple as a scrollspy in Bootstrap 4 for my portfolio and it's driving me to despair. I've read the official documentation, I've done my research, and I can't get it to work. No error in console.
Added data-spy = "scroll" data-target = ". Navbar" data-offset = "50" to the body and the anchors of the navigation links are the same as the section ids.
It also added the popper, jquery and other scripts.
I have also tried implementing it with just JavaScript, without success.
I start to think that there is something else in my code that is interfering with this Bootstrap function, but I can't find it. If anyone can take a look at the code and tell me what I'm doing wrong, I appreciate it.
HTML:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="I'm a developer and audiovisual producer. Here I show my evolution, my work and my passion.">
<meta name="author" content="Pablo Herrero">
<title>Pablo Herrero | Developer | pabloherrero.me</title>
<!-- Bootstrap style sheet -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- Custom styles -->
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/121886ca53.js" crossorigin="anonymous"></script>
<!-- Touch icons -->
</head>
<body id="top" data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- Navbar -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="#top">
<div id="h" class="align-self-center">H</div>
</a>
<button class="navbar-toggler navbar-toggler-right"
type="button" data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#works">Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Header -->
<header id="header">
<div class="container d-flex">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<img src="img/pabloHerrero.jpg" alt="Pablo Herrero" id= "headerPhoto">
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<h1>Pablo Herrero</h1>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<h2>lore ipsum</h2>
</div>
</div>
</div>
</header>
<!-- About -->
<section id="about">
<div class="container d-flex">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 align-self-center">
<h2>Hi! I'm a developer and audiovisual producer.</h2>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 align-self-center">
<p>I learned to code in 2019 when I started my studies on development. I'm confortable using Java, SQL, HTML5, CSS3, Bootstrap 4 and GIT, although I'm always digging deep and learning new things. I'm currently working on JDBC, Swing, Android Studio, JavaScript and Python, and will start soon with TypeScript, Node.js and Angular. Here you can take a look at my projects and drop me a line with the contact form if you wish.</p>
</div>
</div>
</div>
</section>
<!-- Works -->
<section id="works">
<div class="container d-flex">
</div>
</section>
<!-- Contact -->
<section id="contact">
<div class="container d-flex">
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="container-fluid">
<div class="row d-flex ">
<div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
<small id="copy">© 2020 Pablo Herrero</small>
</div>
<div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
<div id="social">
<i class="fab fa-twitter"></i>
<i class="fab fa-dev"></i>
<i class="fab fa-stack-overflow"></i>
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
</div>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap js -->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Popper.js -->
<script src="node_modules/#popperjs/core/dist/umd/popper.min.js"></script>
<!-- Portfolio script -->
<script src="js/app.js"></script>
</body>
</html>
CSS:
/* Fonts */
#font-face {
font-family: 'fira_coderegular';
src: url('fonts/firacode-regular-webfont.woff2') format('woff2'),
url('fonts/firacode-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'fira_codebold';
src: url('fonts/firacode-bold-webfont.woff2') format('woff2'),
url('fonts/firacode-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'fira_codemedium';
src: url('fonts/firacode-medium-webfont.woff2') format('woff2'),
url('fonts/firacode-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* General */
body {
position: relative;
font-family: 'fira_coderegular';
letter-spacing: normal;
overflow-y: scroll;
background-color:#ffffff;
}
body::-webkit-scrollbar {
display: none;
}
/* Navbar */
#navbar {
min-height: 56px;
background-color: transparent;
border-bottom: none;
}
#navbar .navbar-toggler {
color: #000000;
}
#navbar .navbar-toggler:focus {
outline: none;
}
#h {
font-size: 25px;
font-family: 'fira_codebold';
text-align: center;
color: #000000;
outline: none;
}
#navbar .nav-link {
font-size: 14px;
font-family: 'fira_codemedium';
padding: 1rem 1.5rem;
text-align: center;
color:#ffffff;
background-color: #000000;
outline: none;
}
#navbar .nav-link:hover {
color: #bd93f9;
outline: none;
}
#navbar .nav-link:active {
color: #50fa7b;
outline: none;
}
#navbar #h:hover {
color: #bd93f9;
outline: none;
}
#navbar #h:active {
color: #50fa7b;
outline: none;
}
#media (min-width: 992px) {
#navbar .nav-link {
font-size: 14px;
padding: 0.5rem 1.5rem 0.5rem;
color:#000000;
background-color: transparent;
}
}
/* Header */
#header {
width: 100%;
height: 100vh;
}
#header .col-lg-12 {
text-align: center;
}
#header #headerPhoto {
margin: 100px 0px 0px 0px;
text-align: center;
max-width: 100%;
}
#header h1 {
margin: 50px 0px 0px 0px;
width: 100%;
text-align: center;
text-transform: uppercase;
font-family: 'fira_codebold';
font-size: 58px;
line-height: 3.3rem;
letter-spacing: 0.05rem;
}
#header h2 {
margin: 15px 0px 0px 0px;
width: 100%;
text-align: center;
text-transform: uppercase;
font-family: 'fira_codemedium';
font-size: 24px;
letter-spacing: 0.05rem;
}
#media (min-width: 992px) {
#header #headerPhoto {
margin: 75px 0px 0px 0px;
max-width: 35%;
}
#header h1 {
margin: 25px 0px 0px 0px;
font-size: 64px;
line-height: 3.3rem;
letter-spacing: 0.05rem;
}
}
/* About */
#about {
width: 100%;
height: 100vh;
}
#about .container {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
#about .row {
background-color: #000000;
padding: 100px 100px 100px 100px;
}
#about .col-lg-12 {
text-align: center;
align-items: center;
}
#about h2 {
width: 100%;
text-align: left;
margin-bottom: 30px;
font-family: 'fira_codemedium';
font-size: 24px;
color: #ffffff;
letter-spacing: 0.05rem;
}
#about p {
width: 100%;
text-align: left;
font-family: 'fira_coderegular';
font-size: 14px;
color: #ffffff;
}
/* Recent works */
/* Contact */
/* Footer */
footer {
position: fixed;
bottom: 0;
width: 100%;
padding-bottom: 5px;
background-color: transparent;
color: #000000;
text-align: center;
}
footer #social a{
font-size: 15px;
color: #000000;
}
footer #social i:hover{
color: #bd93f9;
}
footer #social i:active {
color: #50fa7b;
outline: none;
}
#media (min-width: 992px) {
footer #copy {
float: left;
}
footer #social a{
font-size: 20px;
float: right;
padding: 0.5rem 2rem 0.5rem 0rem;
}
}

It seems to be working fine, but the correct CSS selector for showing the active nav-link is...
#navbar .nav-link.active {
color: #50fa7b;
outline: none;
}
https://codeply.com/p/1hcQLKYm19
Also note, the sections need height (or a lot of content) to see the menu changing between each section.

Probably you have just forgotten to include bootstrap script like
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
if you want to do it with pure js just add event listener for the scroll event
window.addEventListener("load", function(){
window.addEventListener('scroll', function(e) {
// your handler
console.log(window.scrollY);
});
});

Site Overlay not working "Uncaught ReferenceError: closeNav is not defined"

I'm trying to code a site just to learn but i can't get something to work on my site togheter with all the other elments but if i code that part alone it works. I'm talking about a bottom navigation bar or "Filter". I want it to slide down if i press on "x" but it doesn't and in the browser console i get this message "Uncaught ReferenceError: closeNav is not defined" and "Uncaught ReferenceError: openNav is not defined"
Here's the code (it's pretty messy):
function openNav() {
document.getElementById("myFilterTab").style.height = "100px";
}
function closeNav() {
document.getElementById("myFilterTab").style.height = "0%";
}
body {
margin:0;
background-color: white;
color: #a5a5af;
font: 12px/1.4em Arial,sans-serif;
}
#header {
position: relative;
background-color: #77c9d4;
color: #FFF;
height: 11.3%;
}
#header input{
position:absolute;
top: 20px;
padding: 5px 9px;
height: 30px;
margin-left: 700px;
width: 600px;
border: 1px solid #a4c3ca;
background: #FFFFFF;
border-radius: 6px 0px 0px 6px;
}
.SearchBar{
color:black;
}
.SearchBar:focus{
outline:0;
color:black;
}
.SearchButton{
position:absolute;
padding:6px 15px;
left:1300px;
bottom:64px;
border: 1px solid #57BC90;
background-color:#57BC90;
color:#fafafa;
border-radius: 0px 6px 6px 0px;
}
.SearchButton:active{
outline:0;
}
.SearchButton:hover{
background-color:#015249;
border-color: #015249;
}
#logo {
font-size: 30px;
line-height: 40px;
padding: 15px;
color:white;
}
ul {
position:relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #57BC90;
}
li {
border-right:1px solid #57BC90;
float:left;
}
#NavBar{
width:455.76px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.Login{
float:right;
text-decoration: none;
}
li a:hover{
color:white;
text-decoration:none;
}
li a:hover:not(.active) {
background-color: #015249;
}
.active {
background-color: #015249;
}
br.clearLeft {
clear: left;
}
* {
margin: 0;
}
.glyphicon-log-in{
right: 4px !important;
}
.openBox{
position:absolute;
width: 50px;
background-color: #57BC90;
top: -24px;
left:926px;
cursor:pointer;
}
.glyphicon-chevron-right{
transform: rotate(-90deg);
font-size:20px;
color:white;
right: -13px;
top: 3px;
}
.glyphicon-remove{
position:absolute;
left: 1865px;
top: 13px;
font-size:20px;
color:white;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
.footer{
background-color:#77c9d4;
}
.ShowBox{
padding:1px;
border: 1px solid gray;
height:108px;
width: 192px;
}
.FilterTab{
transition: 0.5s;
position: fixed;
height: 100px;
width: 100%;
padding: 1px;
background-color: #57BC90;
bottom: 0px;
border-radius: 20px 20px 0px 0px;
}
#media screen and (max-height: 450px) {
.FilterTab {padding-top: 15px;}
.FilterTab a {font-size: 18px;}
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
<!DOCTYPE html>
<html>
<head>
<title>PC Master</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="ScrollBar.css">
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
</head>
<body>
<div id="header">
<div id="logo">PC Master</div>
<form method="get">
<input class="SearchBar" type="text" name="search" placeholder="Cauta.." required>
<button type="submit" Value="submit" class="SearchButton"><span class="glyphicon glyphicon-search"></span></button>
</form>
<ul>
<li>Home</li>
<li>Componente</li>
<li>Periferice</li>
<li>Contact</li>
<li class="Login"><span class="glyphicon glyphicon-log-in" ></span>Login</li>
</ul>
<br class="clearLeft" />
</div>
<div class="FilterTab" id="myFilterTab">
</span>
<div class="openBox"><span class="glyphicon glyphicon-chevron-right" onclick='openNav()'></span></div>
</div>
<div class='wrapper'>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class='push'></div>
</div>
<div class='footer' id="logo">PC Master</div>
</body>
</html>
The site is only for full hd monitor so in smaller monitors it won't look ok.

JavaScript is not a stylesheet
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
use a script tag like all of the other includes in the page
<script src="ScrollBar.js"></script>

Why are there black and white bars on the top and bottom of my page?

I am still a beginner...
The first time I created the page everything worked well. The background img was covering everything and the navigation was transparent. But as soon as I put in the links to bootstrap everything changed what am I missing?
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>WILDA Designs</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar transparent navbar-inverse">
<div class="nav">
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</div> <!-- end nav here -->
</div> <!-- end navbar bar here -->
<div class="jumbotron-contact">
<div class="container">
<div class="main">
<h1>Contact</h1>
<p class="main-text">If you have any inquires for WILDA please reach us at:
</p>
<p><span class="glyphicon glyphicon-map-marker"></span><strong>50 Franklin St, Worcester, MA 01608 </strong></p>
<p><span class="glyphicon glyphicon-phone"></span>Phone:
<strong>774.535.7475</strong></p>
<p><span class="glyphicon glyphicon-envelope"></span>E-mail: <strong><span style="color: #FF3300">touclaire#gmail.com</span></strong>
</p>
</div> <!-- end main -->
</div> <!-- end container here -->
</div> <!-- jumbotron -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
.jumbotron-contact {
height: 800px;
background-image: url(../img/largecontactimg.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.main {
position: relative;
top: 40px;
text-align: left;
font-family: freight-text-pro;
}
.main h1 {
color: #333;
font-family: freight-text-pro;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 10px;
text-transform: capitalize;
}
.main p {
font-size: 22px;
}
.main-text {
font-weight: 550;
}
span {
padding-right: 10px;
}
/*Navigation*/
.nav ul li {
display: inline-block;
float: right;
}
.navbar .transparent .navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: transparent;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
.nav ul li a {
text-align: right;
font-size: 16px;
white-space: nowrap;
color: white;
text-transform: uppercase;
text-decoration: none;
transition: color 600ms;
-webkit-transition: color 600ms;
padding-right: 10px;
font-family: freight-text-pro;
}
.nav a:hover {
color: #FF3300;
text-decoration: none;
}

Should be okey now.
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
body {
height: 800px;
background-image: url(https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.main {
position: relative;
top: 40px;
text-align: left;
font-family: freight-text-pro;
}
.main h1 {
color: #333;
font-family: freight-text-pro;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 10px;
text-transform: capitalize;
}
.main p {
font-size: 22px;
}
.main-text {
font-weight: 550;
}
span {
padding-right: 10px;
}
/*Navigation*/
.nav ul li {
display: inline-block;
float: right;
}
.navbar .transparent .navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: transparent;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
.nav ul li a {
text-align: right;
font-size: 16px;
white-space: nowrap;
color: white;
text-transform: uppercase;
text-decoration: none;
transition: color 600ms;
-webkit-transition: color 600ms;
padding-right: 10px;
font-family: freight-text-pro;
}
.nav a:hover {
color: #FF3300;
text-decoration: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html lang=“en”>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>WILDA Designs</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar transparent ">
<div class="nav">
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</div> <!-- end nav here -->
</div> <!-- end navbar bar here -->
<div class="jumbotron-contact">
<div class="container">
<div class="main">
<h1>Contact</h1>
<p class="main-text">If you have any inquires for WILDA please reach us at:
</p>
<p><span class="glyphicon glyphicon-map-marker"></span><strong>50 Franklin St, Worcester, MA 01608 </strong></p>
<p><span class="glyphicon glyphicon-phone"></span>Phone:
<strong>774.535.7475</strong></p>
<p><span class="glyphicon glyphicon-envelope"></span>E-mail: <strong><span style="color: #FF3300">touclaire#gmail.com</span></strong>
</p>
</div> <!-- end main -->
</div> <!-- end container here -->
</div> <!-- jumbotron -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
</body>
</html>

Remove Navbar-inverse .. its adding black background.
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
.jumbotron-contact {
height: 800px;
background-image: url(../img/largecontactimg.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.main {
position: relative;
top: 40px;
text-align: left;
font-family: freight-text-pro;
}
.main h1 {
color: #333;
font-family: freight-text-pro;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 10px;
text-transform: capitalize;
}
.main p {
font-size: 22px;
}
.main-text {
font-weight: 550;
}
span {
padding-right: 10px;
}
/*Navigation*/
.nav ul li {
display: inline-block;
float: right;
}
.navbar .transparent .navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: transparent;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
.nav ul li a {
text-align: right;
font-size: 16px;
white-space: nowrap;
color: white;
text-transform: uppercase;
text-decoration: none;
transition: color 600ms;
-webkit-transition: color 600ms;
padding-right: 10px;
font-family: freight-text-pro;
}
.nav a:hover {
color: #FF3300;
text-decoration: none;
}
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>WILDA Designs</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar transparent">
<div class="nav">
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</div> <!-- end nav here -->
</div> <!-- end navbar bar here -->
<div class="jumbotron-contact">
<div class="container">
<div class="main">
<h1>Contact</h1>
<p class="main-text">If you have any inquires for WILDA please reach us at:
</p>
<p><span class="glyphicon glyphicon-map-marker"></span><strong>50 Franklin St, Worcester, MA 01608 </strong></p>
<p><span class="glyphicon glyphicon-phone"></span>Phone:
<strong>774.535.7475</strong></p>
<p><span class="glyphicon glyphicon-envelope"></span>E-mail: <strong><span style="color: #FF3300">touclaire#gmail.com</span></strong>
</p>
</div> <!-- end main -->
</div> <!-- end container here -->
</div> <!-- jumbotron -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>WILDA Designs</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar transparent navbar-inverse">
<div class="nav">
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</div> <!-- end nav here -->
</div> <!-- end navbar bar here -->
<div class="jumbotron-contact">
<div class="container">
<div class="main">
<h1>Contact</h1>
<p class="main-text">If you have any inquires for WILDA please reach us at:
</p>
<p><span class="glyphicon glyphicon-map-marker"></span><strong>50 Franklin St, Worcester, MA 01608 </strong></p>
<p><span class="glyphicon glyphicon-phone"></span>Phone:
<strong>774.535.7475</strong></p>
<p><span class="glyphicon glyphicon-envelope"></span>E-mail: <strong><span style="color: #FF3300">touclaire#gmail.com</span></strong>
</p>
</div> <!-- end main -->
</div> <!-- end container here -->
</div> <!-- jumbotron -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
<style>
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
.jumbotron-contact {
height: 800px;
background-image: url(../img/largecontactimg.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.main {
position: relative;
top: 40px;
text-align: left;
font-family: freight-text-pro;
}
.main h1 {
color: #333;
font-family: freight-text-pro;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 10px;
text-transform: capitalize;
}
.main p {
font-size: 22px;
}
.main-text {
font-weight: 550;
}
span {
padding-right: 10px;
}
/*Navigation*/
.nav ul li {
display: inline-block;
float: right;
}
.navbar .transparent .navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: transparent;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
.nav ul li a {
text-align: right;
font-size: 16px;
white-space: nowrap;
color: white;
text-transform: uppercase;
text-decoration: none;
transition: color 600ms;
-webkit-transition: color 600ms;
padding-right: 10px;
font-family: freight-text-pro;
}
.nav a:hover {
color: #FF3300;
text-decoration: none;
}</style>

Center image in the middle of list with 50% overhang

I am trying to get my image to center in the middle of my four list items (2 either side), however when trying to get it to work the list items just go below the image! I want the image to be responsive so if the page gets smaller then say 1000px it will simply move into the right place (i understand that will need to be done with different media screens.
Note: I am using CoolKitten One Page website framework as I have no understanding of Javascript
Live Demo
JSFiddle
HTML Code:
<!DOCTYPE HTML>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<title>Brand New Club</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<!-- <link rel="stylesheet" href="css/style.min.css" type="text/css" media="screen"> -->
<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="menu">
<div class="container clearfix">
<div id="nav" class="grid_9 omega">
<ul class="navigation">
<li data-slide="1">Home</li>
<li data-slide="2">About Us</li>
<div id="logo">
<img src="http://www.brandnewclub.com/images/brand-new-club-logo-final.png">
</div>
<li data-slide="3">Services</li>
<li data-slide="4">Contact</li>
</ul>
</div>
</div>
</div>
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<div class="container clearfix">
<div id="content" class="grid_7">
<h1>Top Slide</h1>
<h2>Get ready to make magic!</h2>
<p>Remember that this is a BETA version. This is my first framework so if you see any issue please let me know it. </p>
<p>Don't forget to follow me!</p>
<p><img src="images/twitter.png"> <img src="images/dribbble.png"></p>
</div>
<div id="decorative" class="grid_5 omega">
<img src="images/decorative.png">
</div>
</div>
</div>
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
<div class="container clearfix">
<div id="content" class="grid_12">
<h1>Parallax Scrolling</h1>
<h2>What you've seen its called parallax scrolling</h2>
</div>
</div>
</div>
<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
<div class="container clearfix">
<div id="content" class="grid_12">
<h1>Grid</h1>
<h2>See how the grid changes when you resize your screen</h2>
</div>
<div id="test" class="grid_1">1</div> <div id="test" class="grid_11 omega">11</div>
<div id="test" class="grid_2">2</div> <div id="test" class="grid_10 omega">10</div>
<div id="test" class="grid_3">3</div> <div id="test" class="grid_9 omega">9</div>
<div id="test" class="grid_4">4</div> <div id="test" class="grid_8 omega">8</div>
<div id="test" class="grid_5">5</div> <div id="test" class="grid_7 omega">7</div>
<div id="test" class="grid_6">6</div> <div id="test" class="grid_6 omega">6</div>
<div id="test" class="grid_7">7</div> <div id="test" class="grid_5 omega">5</div>
<div id="test" class="grid_8">8</div> <div id="test" class="grid_4 omega">4</div>
<div id="test" class="grid_9">9</div> <div id="test" class="grid_3 omega">3</div>
<div id="test" class="grid_10">10</div> <div id="test" class="grid_2 omega">2</div>
<div id="test" class="grid_11">11</div> <div id="test" class="grid_1 omega">1</div>
<div id="test" class="grid_12">12</div>
</div>
</div>
<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0.5">
<div class="container clearfix">
<div id="content" class="grid_12">
<h1>Credits</h1>
<h2>Cool Kitten was made by Jalxob.</h2>
<p>Don't forget to follow me!</p>
<p><img src="images/twitter.png"> <img src="images/dribbble.png"></p>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<!-- <script type="text/javascript" src="js/scripts.min.js"></script> -->
</body>
</html>
CSS Code:
/* Global */
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1em;
color: #8a8683;
background-color:#ffffff;
}
img {
max-width: 100%;
}
a:link {
color: #f68f67;
text-decoration: none;
}
a:hover {
color: #bde2df;
text-decoration: none;
}
a:visited {
color: #f68f67;
text-decoration: none;
}
/* Navigation */
.menu {
position:fixed;
top:0px;
width:100%;
height:auto;
background-color:#bbb;
z-index:100;
}
#logo {
padding: 10px;
}
#logo img {
width: 300px;
}
#nav {
text-align: center;
height: 100px;
margin: 30px auto;
min-width: 1100px;
}
.navigation{
list-style: none;
text-align: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
height: 100px;
line-height: 200px;
}
.navigation li{
padding:0 0 0 50px;
float: left;
display: inline;
}
.navigation li:hover{
cursor:pointer;
color: #a9d3d0;
}
.navigation .active{
cursor:pointer;
color: #f68f67;
font-weight:bold;
}
/* General Slides */
.slide{
background-attachment: fixed;
width:100%;
height:auto;
position: relative;
padding:140px 0;
}
/* Slide 1 */
#slide1{
background-color:#156;
}
#slide1 h1 {
font-size: 3.8em;
letter-spacing: -3px;
line-height: 0px;
color:#8a8683;
font-weight: 700;
}
#slide1 h2 {
font-size: 2em;
color: #8a8683;
line-height: 0px;
padding-bottom:20px;
font-weight: 400;
}
/* Slide 2 */
#slide2{
background-image:url('../images/footprints.png');
background-color:#f68f67;
color:#ffffff;
}
#slide2 h1 {
font-size: 3.8em;
letter-spacing: -3px;
line-height: 0px;
color:#ffffff;
font-weight: 700;
}
#slide2 h2 {
font-size: 2em;
color: #ffffff;
line-height: 0px;
padding-bottom:20px;
font-weight: 400;
}
/* Slide 3 */
#slide3{
background-color:#ffffff;
}
#slide3 h1 {
font-size: 3.8em;
letter-spacing: -3px;
line-height: 0px;
color:#8a8683;
font-weight: 700;
}
#slide3 h2 {
font-size: 2em;
color: #8a8683;
line-height: 0px;
padding-bottom:20px;
font-weight: 400;
}
#test{
background-color:#bde2df;
color:#ffffff;
text-align:center;
font-size: 2em;
font-weight: 400;
}
/* Slide 4 */
#slide4{
background-image:url('../images/sunglasses.png');
background-color:#8a8683;
color:#ffffff;
}
#slide4 h1 {
font-size: 3.8em;
letter-spacing: -3px;
line-height: 0px;
color:#ffffff;
font-weight: 700;
}
#slide4 h2 {
font-size: 2em;
color: #ffffff;
line-height: 0px;
padding-bottom:20px;
font-weight: 400;
}
/* Tablet */
#media screen and (max-width: 1024px) {
#logo {
width: 100%;
text-align: center;
}
#nav {
width:100%;
text-align:center;
margin:10px 0;
}
.navigation{
width: 100%;
float: center;
list-style: none;
margin: 0;
padding:0;
}
.navigation li{
float: left;
width:25%;
padding:0;
}
.slide{
background-attachment: fixed;
width:100%;
position: relative;
padding:150px 0;
}
#decorative {
display:none;
}
#content {
text-align:center;
width:100%;
}
#slide1 h1 {
line-height: 1em;
}
#slide1 h2 {
line-height: 1em;
}
#slide2 h1 {
line-height: 1em;
}
#slide2 h2 {
line-height: 1em;
}
#slide3 h1 {
line-height: 1em;
}
#slide3 h2 {
line-height: 1em;
}
#slide4 h1 {
line-height: 1em;
}
#slide4 h2 {
line-height: 1em;
}
}
/* Mobile */
#media screen and (max-width: 480px) {
#logo {
width: 100%;
text-align: center;
}
#nav {
width:100%;
margin:5px 0;
}
.navigation{
width: 100%;
float: left;
list-style: none;
margin: 0;
padding:0;
}
.navigation li{
float: left;
width:25%;
}
.slide{
background-attachment: fixed;
width:100%;
position: relative;
padding:150px 0;
}
#slide1 h1 {
line-height: 1em;
}
#slide1 h2 {
line-height: 1em;
}
#slide2 h1 {
line-height: 1em;
}
#slide2 h2 {
line-height: 1em;
}
#slide3 h1 {
line-height: 1em;
}
#slide3 h2 {
line-height: 1em;
}
#slide4 h1 {
line-height: 1em;
}
#slide4 h2 {
line-height: 1em;
}
}
Any tips and advice would be much appreciated!
Thanks in advance!

I have got it working for you using only CSS and not tables.
The way I saw best to do it was to split the lists and give one the property of float:left and the other float:right. I have to admit it is not the cleanest way of doing it but it works and for me that is the main thing.
JSFiddle
*Note: This will work on the larger screens better then smaller, I would suggest using media screen {} in your CSS for this to work *
Hope this helps!

I go for table in this context. Please find a sample.
<table width="100%" border="1" style="height:100%; padding:0px; margin:0px;">
<tr><td>Home</td><td></td><td>About Us</td></tr>
<tr><td rowspan="1"></td><td style="background:url(deep-forest.jpg) no-repeat; background-size:100%;width:400px;"></td><td rowspan="1"></td></tr>
<tr><td>Services</td><td></td><td>Contact</td></tr>
</table>
Image:
Let me know of any corrections.

You could done this that way :
#logo {
width: 100%;
text-align: center;
position: relative;
}
#logo img {
width: 300px;
height: auto;
margin-left: -150px;
position: absolute;
left: 50%;
}
Everything is explained here

We Keep Coding

JavaScript is the programming language of the Web.

add task working incorrect - javascript

Related

JQuery UI button style not appearing in Dialog box

Unable to implement a scrollspy with Bootstrap 4. Why?

Site Overlay not working "Uncaught ReferenceError: closeNav is not defined"

Why are there black and white bars on the top and bottom of my page?

Center image in the middle of list with 50% overhang

Categories

Resources