I trying add "tooltip bootstrap" to my web site and has fail. It's doesn't work for me, but early i used it and all was fine. Maybe my css styles wrapping some bootstrap styles. Can someone help?
my html
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
#media (min-width: 1024px) and (max-width: 2560px) {
.navbar-custom-header,
.navbar-custom-footer {
background-color: bisque;
margin-bottom: 0px;
width: 100%;
height: auto;
text-align: center;
display: block;
overflow: hidden;
}
.navbar-nav {
float: none;
list-style: none;
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
>li {
display: inline-block;
}
}
.navbar-custom-header .navbar-nav li a:hover {
color: darkgreen;
text-decoration: none;
background-color: bisque;
}
.navbar-custom-footer .navbar-nav li a:hover {
color: darkgreen;
text-decoration: none;
background-color: bisque;
}
.navbar-custom-header .navbar-nav li .nav-ref {
color: white;
font-size: 40px;
font-family: Allegretto Script One;
}
.navi_images {
width: 120px;
height: 60px;
}
#font-face {
font-family: Allegretto Script One;
src: url(fonts/AllegrettoScriptOne.ttf);
}
.footer_images {
width: 280px;
height: 60px;
}
.navbar-custom-header .navbar-nav li a {
padding: 0px 0px 0px 0px;
line-height: 60px;
}
.navbar-custom-footer .navbar-nav li a {
padding: 0px 0px 0px 0px;
line-height: 62px;
}
.navbar-custom-footer .navbar-nav li a .footer_logos {
width: 35px;
height: 35px;
}
.tooltip > .tooltip-inner {
font-family: Allegretto Script One;
font-size: 26px;
}
}
<!DOCTYPE html>
<html lang="en">
<title>Главная страница</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta charset="utf-8">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page
via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
<!-- Bootstrap source-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!-- Own style-->
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-custom-header" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Main
</li>
<li>
<img class="navi_images" src="images/rose+garland.png" />
</li>
<li>Portfolio
</li>
<li>
<img class="navi_images" src="images/rose+garland.png" />
</li>
<li>Contacts
</li>
<li>
<img class="navi_images" src="images/rose+garland.png" />
</li>
<li>Reviews
</li>
</ul>
</div>
</nav>
<!-- Main content-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/021.JPG" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/FXUw2IOSk6I.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/kLaceXVf9Iw.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Footer -->
<nav class="navbar navbar-custom-footer" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>
<img src="images/Originals/example.png" class="footer_images">
</li>
<li>
<a href="#" data-toggle="tooltip" data-placement="top" title="Instagram">
<img src="images/insta.png" class="footer_logos">
</a>
</li>
<li>
<a href="https://vk.com/pricheskiotkylikludmilu" data-toggle="tooltip" data-placement="top" title="Vkontakte">
<img src="images/vk.png" class="footer_logos">
</a>
</li>
<li>
<img src="images/Originals/example.png" class="footer_images">
</li>
</ul>
</div>
</nav>
<script src="bootstrap/jquery/jquery-2.2.2.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
your code is working . try adding bootstrap from external resources . see snippet below :
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
#media (min-width: 1024px) and (max-width: 2560px) {
.navbar-custom-header, .navbar-custom-footer {
background-color: bisque;
margin-bottom: 0px;
width: 100%;
height: auto;
text-align: center;
display: block;
overflow: hidden;
}
.navbar-nav {
float: none;
list-style: none;
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
>li {
display: inline-block;
}
}
.navbar-custom-header .navbar-nav li a:hover {
color: darkgreen;
text-decoration: none;
background-color: bisque;
}
.navbar-custom-footer .navbar-nav li a:hover {
color: darkgreen;
text-decoration: none;
background-color: bisque;
}
.navbar-custom-header .navbar-nav li .nav-ref {
color: white;
font-size: 40px;
font-family: Allegretto Script One;
}
.navi_images {
width: 120px;
height: 60px;
}
#font-face {
font-family: Allegretto Script One;
src: url(fonts/AllegrettoScriptOne.ttf);
}
.footer_images {
width: 280px;
height: 60px;
}
.navbar-custom-header .navbar-nav li a {
padding: 0px 0px 0px 0px;
line-height: 60px;
}
.navbar-custom-footer .navbar-nav li a {
padding: 0px 0px 0px 0px;
line-height: 62px;
}
.navbar-custom-footer .navbar-nav li a .footer_logos {
width: 35px;
height: 35px;
}
.tooltip > .tooltip-inner {
font-family: Allegretto Script One;
font-size: 26px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-custom-header" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Main</li>
<li><img class="navi_images" src="images/rose+garland.png"/></li>
<li>Portfolio</li>
<li><img class="navi_images" src="images/rose+garland.png"/></li>
<li>Contacts</li>
<li><img class="navi_images" src="images/rose+garland.png"/></li>
<li>Reviews</li>
</ul>
</div>
</nav>
<!-- Main content-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/021.JPG" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/FXUw2IOSk6I.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/kLaceXVf9Iw.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Footer -->
<nav class="navbar navbar-custom-footer" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><img src="images/Originals/example.png" class="footer_images"></li>
<li><img src="images/insta.png" class="footer_logos"></li>
<li><img src="images/vk.png" class="footer_logos"></li>
<li><img src="images/Originals/example.png" class="footer_images"></li>
</ul>
</div>
</nav>
Related
I am having a problem whenever I scroll my page or content, the Sidebar is being scrolled down as well which leaves the navbar at the top and produce a gap in between. Here is the picture of the problem.
How to fix this UI problem. As you can see there's a gap in between, and if I scroll it down, the gap becomes larger.
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</nav>
<!-- End -->
<!-- sIDEBAR -->
<div class="sidebar">
<a class="active" href="<?php echo base_url(); ?>">Dashboard</a>
<a class="" href="<?php echo base_url(); ?>">Bookes</a>
<a class="" href="<?php echo base_url(); ?>">Clothes</a>
<a class="" href="<?php echo base_url(); ?>">Electronics</a>
</div>
<div class="content">
body {margin:0;}
/*Sidebar*/
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
top:80px;
height: 100%;
overflow: auto;
}
/*Navbar*/
.navbar {
position:fixed;
top:0;
left:0;
height:80px;
width:100%;
background:red;
}
/*Main content*/
main {margin-top:120px; margin-left:240px;}
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">App</a>
</nav>
<!-- End -->
<main>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
</main>
<!-- sIDEBAR -->
<div class="sidebar">
<a class="active" href="<?php echo base_url(); ?>">Dashboard</a>
<a>1</a>
<a>2</a>
<a >3</a>
<a>4</a>
</div>
<div class="content">
Both your navbar and sidebar need to be position: fixed. That way they wont be affected by the scroll.
I know its bit late, but still to help community.
Code:
<aside class="left-sidebar">
<div class="sidebar">
<nav >
<span class="divider"></span>
<a class="active" href="<?php echo base_url(); ?>">Dashboard</a>
<a class="" href="<?php echo base_url(); ?>">Bookes</a>
.
.
</nav>
<div>
</aside>
CSS:
.left-sidebar {
position: relative;
width: 240px;
height: 100%;
background-color: $darkBlue;
background: linear-gradient(180deg, #0072C0 15%, $darkBlue 100%);
box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
}
.divider{
display: block;
border-bottom: 1px solid rgba(255,255,255,0.10);
width: 170px;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sidebar {
margin: 0;
padding: 0;
width: 201px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 999px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</nav>
<br><br>
<div class="sidebar">
<a class="active" href="<?php echo base_url(); ?>">Dashboard</a>
<a class="" href="<?php echo base_url(); ?>">Bookes</a>
<a class="" href="<?php echo base_url(); ?>">Clothes</a>
<a class="" href="<?php echo base_url(); ?>">Electronics</a>
</div>
<div class="content">
</body>
</html>
I'm having an issue regarding the CSS while applying to the UL and LI Tag in HTML UI designing.
My CSS Code
.jobs {
list-style: none;
}
.jobs li {
float: left;
margin-left: 20px;
padding: 10px;
}
.jobs::after {
content: "";
display: grid;
clear: both;
}
<ul class="jobs">
<div th:each="indTypeProduct :${indTypeProducts}">
<li>
<div class="card" id="wrapper" style="align-items: center;">
<p th:text="${indTypeProduct}" />
</div>
</li>
<br>
</div>
</ul>
Could you please anyone help me on this issue?
Check the view source
Updated Code Please have a look and let me know where I'm going wrong and let me know, I simply want all my result should be align and have in same line.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css">
#wrapper {
margin-left: 50px;
margin-right: 20px;
padding: 12px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: cursive;
}
.price {
color: grey;
font-size: 24px;
}
.card a {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
text-decoration: none;
}
.card a:hover {
opacity: 0.5;
}
.jobs {
list-style: none;
}
.jobs li {
float: left;
margin-left: 20px;
padding: 10px;
}
.jobs::after {
content: "";
display: grid;
clear: both;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/home">Cart Studio</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="/home">Home
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item"><a class="nav-link" href="/product">Product</a>
</li>
<li class="nav-item"><a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item"><a class="nav-link" href="/profile">Profile</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<br>
<div>
<h4>
<p style="margin-left: 15px"> Hello test#gmail.com Greetings!!</p>
</h4>
</div>
<hr style="color: black;">
<div id="carouselExampleIndicators" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/uploads/images.jpg"
alt="First 1 slide" width="100" height="350">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/uploads/images.jpg"
width="100" height="350" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/uploads/images.jpg"
width="300" height="350" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators"
role="button" data-slide="prev"> <span
class="carousel-control-prev-icon" aria-hidden="true"></span> <span
class="sr-only">Previous</span>
</a> <a class="carousel-control-next" href="#carouselExampleIndicators"
role="button" data-slide="next"> <span
class="carousel-control-next-icon" aria-hidden="true"></span> <span
class="sr-only">Next</span>
</a>
</div>
<hr style="color: black;">
<ul class="jobs">
<div>
<li>
<div class="card" id="wrapper" style="align-items: center;">
<!-- <img th:src="#{/images/Mobile-Phones-Category.jpg}" alt="category" width="150" height="150"> -->
<p >retail</p>
</div>
</li>
<br>
</div>
<div>
<li>
<div class="card" id="wrapper" style="align-items: center;">
<!-- <img th:src="#{/images/Mobile-Phones-Category.jpg}" alt="category" width="150" height="150"> -->
<p >mobile</p>
</div>
</li>
<br>
</div>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
One thing I have added here <ul class="row" style="width: 400px"> and it fixed the issue and width for not getting horizonatl scroll bar.
I was wondering how I could implement an arrow down icon next to the navigation bar text "About Me" and "Units".
In addition, how could I also make these two pages drop down menus? Below within my code I didn't make them drop down menus due to me not knowing how to make them a drop down menu.
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<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">
</head>
<style>
body{
margin: 0;
padding: 0;
}
header{
height: 10vh;
background-color: #4D5061;
}
nav ul{
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav ul li a{
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family:'Roboto', sans-serif;
}
nav ul li {
padding-bottom:6px;
position:relative;
display: inline-block;
}
nav ul li:after {
content:'';
position:absolute;
right:50%;
bottom:0;
left:50%;
height:3px;
background-color:red;
border-radius:9px;
transition:all .2s;
}
nav ul li:hover:after {
right:0;
left:0;
}
a:hover { color:red;
}
#logo{
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section{
position:relative;
}
.section1{
height:93vh;
background-color: #FFFFFF;
text-align: center;
}
.section2{
height:93vh;
background-color: #A59E8C;
text-align:center;
color:white;
padding-top:23vh;
}
.contact_section{
height:93vh;
background-color: grey;
}
.hero{
height:750px;
}
h1{
font-family:'Roboto', sans-serif;
color: white;
}
.container-fluid{
padding: 60px 50px;
}
.bg-grey{
background-color: #f6f6f6;
}
.logo-small{
color: #000000;
font-size: 50px;
}
.logo{
color: #000000;
font-size: 200px;
}
#media screen and (max-width: 768px){
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.fa-angle-down{
color: #4D5061;
}
footer{
height:10vh;
}
</style>
<body>
<header>
<div id="logo">
<img src="http://placehold.it/60x60" alt=""></div>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Units</li>
<li>Clients</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2">
<div class="banner">
<h1>What I can offer you</h1>
<p> Feel free to contact me regarding any </p>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>Availability</h4>
<p>You can expect a response with 24 hours of the sent message. </p>
</div>
</div>
</div>
</div>
</section>
<section id="contact-me" class="contact_section">
</section>
</body>
<footer>
</footer>
</html>
You can use bootstrap to solve that problem and then apply your css to this bootstrap code.
<!DOCTYPE html>
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
About Me<span class="caret"></span>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="dropdown">
Units<span class="caret"></span>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>Clients</li>
<li>Contact Me</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="jquery-3.1.0.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Just remember to change the <script src="jquery-3.1.0.min.js"></script> for your jquery file.
TESTED AND WORKING
Here your solution:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<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">
</head>
<style>
body {
margin: 0;
padding: 0;
}
header {
height: 10vh;
background-color: #4D5061;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
nav ul li:hover a {
text-decoration: none;
color: red;
border-bottom: 1px solid red;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
}
.section1 {
height: 93vh;
background-color: #FFFFFF;
text-align: center;
}
.section2 {
height: 93vh;
background-color: #A59E8C;
text-align: center;
color: white;
padding-top: 23vh;
}
.contact_section {
height: 93vh;
background-color: grey;
}
.hero {
height: 750px;
}
h1 {
font-family: 'Roboto', sans-serif;
color: white;
}
.container-fluid {
padding: 60px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #000000;
font-size: 50px;
}
.logo {
color: #000000;
font-size: 200px;
}
#media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.fa-angle-down {
color: #4D5061;
}
footer {
height: 10vh;
}
</style>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2">
<div class="banner">
<h1>What I can offer you</h1>
<p> Feel free to contact me regarding any </p>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>Availability</h4>
<p>You can expect a response with 24 hours of the sent message. </p>
</div>
</div>
</div>
</div>
</section>
<section id="contact-me" class="contact_section">
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<footer>
</footer>
</html>
You miss the javascript files and some code as well...
Next time refere to http://getbootstrap.com and try to read all the documentation. Everything is super well documented there.
Also, if I can advice you, use an external css file to store your style...
It looks you are using Bootstrap, so try this code and I don't see bootstrap javascipt file in your code, which you have to link and jQuery of course.
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Let me know if you still couldn't figure out.
As you can see the logo is displayed above the background-image, but i would like it to be in the center of the background image.
this is my header and the background needs to begin on top of the page and end before the menu. the logo needs to be displayed in the center over the background image.
i have tried a lot but maybe somebody had a similar problem and can help me with this.
this image show the thats its almost working but its behind the background
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=font1|font2|etc' type='text/css'>
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="navbar.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--bootstrap-->
<link rel="stylesheet" type="text/css" href="styles/css/bootstrap.css">
<script src="styles/js/bootstrap.min.js"></script>
<!--datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="styles/js/bootstrap.min.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<header>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<img class="logo" src="fts.png">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active">
</li>
<li data-target="#theCarousel" data-slide-to="1">
</li>
<li data-target="#theCarousel" data-slide-to="2">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="slide1">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div class="slide2">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div class="slide3">
<div class="carousel-caption">
</div>
</div>
</div></div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"> </span></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"> </span> </a>
</div>
</header>
<div id="cssmenu" class="align-right">
<ul>
<?php
switch ($_SESSION['isAdmin']) {
case "1":
echo '<li><i class="fa fa-unlock"></i><span>AdminDash</span></li>' ;
break;
case "0":
break;
default:
break;
}
?>
<li><span>DASHBOARD</span><i class="fa fa-home"></i></li>
<li><span><i class="fa fa-ticket"></i> NIEUW TICKET</span></li>
<li><span>ALLE TICKETS</span></li>
<li><span></i> KLANTEN</span></li>
<li class="active"><span><i class="fa fa-sign-out"></i>UITLOGGEN</span></li>
</ul>
</div>
<br><br><br>
</body>
<style>
body {
background-color: #cdcdcd;
width: 100%;
margin: 0 auto;
}
img.logo {
height: 130px;
position: absolute;
margin: auto;
display: block;
top: 80px;
left: 0;
right: 0;
}
header{
width: 100%;
position: relative;
text-align: center;
}
/* Carousel Styling */
.carousel div[class^=slide] {
height: 100px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
z-index: -1
}
.slide1{
background-image: url('styles/3.jpg');
}
.slide2{
background-image: url('styles/2.jpg');
}
.slide3{
background-image: url('styles/1.png');
}
</style>
</html>
use position:relative/absolute
img.logo {
height: 90px;
position: absolute;
margin: auto;
display: block;
top: 80px;
left: 0;
right: 0;
}
header {
width: 100%;
position: relative;
text-align: center;
}
/* Carousel Styling */
.carousel div[class^=slide] {
height: 110px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
z-index: -1
}
.slide1 {
background-image: url('//placehold.it/500');
}
.slide2 {
background-image: url('styles/2.jpg');
}
.slide3 {
background-image: url('styles/1.png');
}
<header>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<img class="logo" src="//placehold.it/100/FF0">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active">
</li>
<li data-target="#theCarousel" data-slide-to="1">
</li>
<li data-target="#theCarousel" data-slide-to="2">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="slide1">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div class="slide2">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div class="slide3">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"> </span>
</a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"> </span>
</a>
</div>
</header>
i had my site and it's working find and looks like this.
but when i zoom out 100% to 25% it's looks like this.
where should be problem??? and it's zoom out fine in firefox but problem in chrome...i am using bootstrap and slider is carousel.and my html for header where menu comes is.
<body>
<!-- header-section-starts -->
<div class="home">
<span class="glyphicon glyphicon-home"></span>
</div>
<div class="header-top">
<div class="social-icons">
<i class="facebook"></i>
<i class="twitter"></i>
<i class="googlepluse"></i>
</div>
<span class="menu"><img src="images/nav.png" alt=""/></span>
<div class="top-menu">
<ul>
<nav class="cl-effect-13">
<li>About</li>
<li>Products</li>
<li>E-Showroom</li>
<li>Contact Us</li>
<li>E-Catalog</li>
</nav>
</ul>
</div>
<!-- script for menu -->
<script>
$( "span.menu" ).click(function() {
$( ".top-menu ul" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<!-- //script for menu -->
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<!-- header-section-ends -->
and for slider is.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div data-example-id="simple-carousel" class="bs-example">
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
<li data-slide-to="1" data-target="#carousel-example-generic"></li>
<li data-slide-to="2" data-target="#carousel-example-generic"></li>
<li data-slide-to="3" data-target="#carousel-example-generic"></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item active">
<img alt="im1" src="images/slide/im1.jpg"
data-holder-rendered="true">
</div>
<div class="item">
<img alt="im2" src="images/slide/im2.jpg"
data-holder-rendered="true">
</div>
<div class="item">
<img alt="im3" src="images/slide/im3.jpg"
data-holder-rendered="true">
</div>
<div class="item">
<img alt="im4" src="images/slide/im4.jpg"
data-holder-rendered="true">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
and css for header is.
.home{
float:left;
width:20%;
background: #22292F;
padding: 1.44em 1em;
position: relative;
}
span.glyphicon.glyphicon-home {
margin-top: -6px;
font-size: 21px;
color: #fff;
float: right;
}
.top-menu{
float:left;
margin-top:9px;
}
.cl-effect-13 a {
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.cl-effect-13 a::before {
position: absolute;
top: 20%;
left: 50%;
color: transparent;
content: '.';
text-shadow: 0 0 transparent;
font-size: 1.2em;
-webkit-transition: text-shadow 0.3s, color 0.3s;
-moz-transition: text-shadow 0.3s, color 0.3s;
transition: text-shadow 0.3s, color 0.3s;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}
.cl-effect-13 a:hover::before,
.cl-effect-13 a:focus::before {
color: #0078B5;
text-shadow: 10px 0 #fff, -10px 0 #fff;
}
.cl-effect-13 a:hover,
.cl-effect-13 a:focus {
color: #FFFFFF;
}
/* Effect 14: border switch */
.cl-effect-14 a {
padding: 0 20px;
height: 45px;
line-height: 45px;
}
.social-icons{
float:right;
margin-right: 22%;
}
.social-icons i{
width:35px;
height:35px;
background: url('../images/img-sprite.png') no-repeat 0px 0px;
display:inline-block;
cursor:pointer;
}
.social-icons i:hover {
opacity: 0.5;
}
i.facebook{
background-position:0px 0px;
}
i.twitter{
background-position:-40px 0px;
}
i.googlepluse{
background-position:-80px 0px;
}
.top-menu ul li{
display:inline-block;
}
.top-menu ul li a{
color:#fff;
font-weight:400;
font-size:22px;
text-decoration:none;
margin:-5px 15px;
font-family: 'Myriad ProPoP', times, sans-serif;
}
#media (max-width: 1200px) {
.top-menu ul li a{
font-size:18px;
margin:0 15px;
}
}
#media (max-width: 992px) {
.top-menu ul li a{
font-size:18px;
margin:0 8px;
}
}
.top-menu ul li a:hover{
color: #0078B5;
}
.top-menu ul li a.active{
color: #0078B5;
}
.header-top {
background: #22292F;
padding: .5em 15px;
float: left;
width: 80%;
position: relative;
}
please help me.
For the slider, you are just missing a container div over it.
So change your
<div data-example-id="simple-carousel" class="bs-example">
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-generic"></li>
<li data-slide-to="1" data-target="#carousel-example-generic" class=""></li>
<li data-slide-to="2" data-target="#carousel-example-generic" class="active"></li>
<li data-slide-to="3" data-target="#carousel-example-generic" class=""></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item">
<img alt="im1" src="images/slide/im1.jpg" data-holder-rendered="true">
</div>
<div class="item">
<img alt="im2" src="images/slide/im2.jpg" data-holder-rendered="true">
</div>
<div class="item active">
<img alt="im3" src="images/slide/im3.jpg" data-holder-rendered="true">
</div>
<div class="item">
<img alt="im4" src="images/slide/im4.jpg" data-holder-rendered="true">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
to
<div class="container">
<div data-example-id="simple-carousel" class="bs-example">
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-generic"></li>
<li data-slide-to="1" data-target="#carousel-example-generic" class=""></li>
<li data-slide-to="2" data-target="#carousel-example-generic" class="active"></li>
<li data-slide-to="3" data-target="#carousel-example-generic" class=""></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item">
<img alt="im1" src="images/slide/im1.jpg" data-holder-rendered="true">
</div>
<div class="item">
<img alt="im2" src="images/slide/im2.jpg" data-holder-rendered="true">
</div>
<div class="item active">
<img alt="im3" src="images/slide/im3.jpg" data-holder-rendered="true">
</div>
<div class="item">
<img alt="im4" src="images/slide/im4.jpg" data-holder-rendered="true">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
And for the Navbar, you might have to restructure it. Please follow the example here https://getbootstrap.com/examples/navbar/
EDIT:
Since you wanted the slider to occupy full screen...
Currently your images are too small to occupy full screen when you zoom out. So let me do a small CSS hack...
.carousel-inner>.item>img {
width: 100%;
}
If you want the slider to maintain the aspect ratio and gets smaller when zoom out
.carousel-inner>.item>img {
line-height: 1;
width: 100%;
object-fit: cover;
height: 500px; /**This could be any height you prefer***/
}