I'm making a playlist. I want the songs to appear in a striped list.
to do that I'm using this css
.track-list > ul > li{
list-style: none;
}
div ul li:nth-child(even) {
background-color: #ccc;
}
this is not working at all, but this code below works.
.track-list > ul > li{
list-style: none;
}
div ul li:nth-child(even) {
color: #ccc;
}
But if I remove the .track-list > ul > li{list-style: none;} the
div ul li:nth-child(even) {
background-color: #ccc;
}
is working properly.
here is a screenshot from my browser
this puzzles me allot and every advice would be welcome
Run the snippet full screen to see the issue, the background-color will disappear
#import url("//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.wrapper{
height: 100vh;
}
.box-item{
position: relative;
width: 100%;
background-color: red;
color: blue;
height: 10vh;
margin-top: 40px;
}
footer > .listen{
position: absolute;
margin-right: 20px;
bottom: 0;
right: 0;
}
.playlist-dropdown{
border: solid 1px #dedede;
}
.interface{
border-bottom: solid 3px #dedede;
padding-bottom: 10px;
padding-top:10px;
}
.name-of-song{
margin-bottom: 10px;
}
.track-list{
padding-top: 10px;
}
.track-list > ul > li{
list-style: none;
}
div ul li:nth-child(even) {
background-color: #ccc !important;
}
#play, #pause, #mute, #unmute {
position: relative;
display: block;
}
#play {
position: absolute;
}
#pause:before {
position: absolute;
}
#pause:after {
position: absolute;
}
#mute{
position: absolute;
}
#unmute:before {
position: absolute;
}
#unmute:after {
position: absolute;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>playlist</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="box-item ">
<footer>
<a class="listen" data-toggle="collapse" href="#playlist-collapse"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a>
</footer>
</div>
<div id="playlist-collapse" class="playlist-dropdown">
<div class="interface clearfix">
<div class="col-md-12 name-of-song">
Name of track being played
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-play"></span>
<span class="glyphicon glyphicon-pause"></span>
</div>
<div class="col-md-6">
progress bar
</div>
<div class="col-md-1">
<span class="glyphicon glyphicon-volume-off"></span>
<span class="glyphicon glyphicon-volume-up"></span>
</div>
<div class="col-md-3">
volume-bar
</div>
</div> <!--interface ends -->
<div class="track-list clearfix">
<ul>
<li class="track-row">
<div class="col-md-2 track-number">
01
</div>
<div class="col-md-7 track-name">
Track name/ song name
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
<li>
<div class="col-md-2 track-number">
02
</div>
<div class="col-md-7 track-name">
Track name/ song name 02
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
<li>
<div class="col-md-2 track-number">
03
</div>
<div class="col-md-7 track-name">
Track name/ song name03
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
</ul>
</div>
</div>
</div><!--container-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$('#play').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
});
$('#pause').on('click', function(event) {
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
$('#unmute').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#mute').show();
$('#unmute').hide();
});
$('#mute').on('click', function(event) {
//currentPlayingTrack.pause();
$('#mute').hide();
$('#unmute').show();
});
</script>
</div> <!--wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
The issue is with float. The li is getting collpased (height:0) because inside you are using col-* class without row. You need to consider row so that float elements (the col-*) are correctly cleared then row inside container to get the correct margin (https://getbootstrap.com/docs/3.3/css/#grid)
#import url("//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.wrapper{
height: 100vh;
}
.box-item{
position: relative;
width: 100%;
background-color: red;
color: blue;
height: 10vh;
margin-top: 40px;
}
footer > .listen{
position: absolute;
margin-right: 20px;
bottom: 0;
right: 0;
}
.playlist-dropdown{
border: solid 1px #dedede;
}
.interface{
border-bottom: solid 3px #dedede;
padding-bottom: 10px;
padding-top:10px;
}
.name-of-song{
margin-bottom: 10px;
}
.track-list{
padding-top: 10px;
}
.track-list > ul > li{
list-style: none;
}
div ul li:nth-child(even) {
background-color: #ccc !important;
}
#play, #pause, #mute, #unmute {
position: relative;
display: block;
}
#play {
position: absolute;
}
#pause:before {
position: absolute;
}
#pause:after {
position: absolute;
}
#mute{
position: absolute;
}
#unmute:before {
position: absolute;
}
#unmute:after {
position: absolute;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>playlist</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="box-item ">
<footer>
<a class="listen" data-toggle="collapse" href="#playlist-collapse"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a>
</footer>
</div>
<div id="playlist-collapse" class="playlist-dropdown">
<div class="interface clearfix">
<div class="col-md-12 name-of-song">
Name of track being played
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-play"></span>
<span class="glyphicon glyphicon-pause"></span>
</div>
<div class="col-md-6">
progress bar
</div>
<div class="col-md-1">
<span class="glyphicon glyphicon-volume-off"></span>
<span class="glyphicon glyphicon-volume-up"></span>
</div>
<div class="col-md-3">
volume-bar
</div>
</div> <!--interface ends -->
<div class="track-list clearfix">
<ul class="container-fluid">
<li class="track-row row">
<div class="col-md-2 track-number">
01
</div>
<div class="col-md-7 track-name">
Track name/ song name
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
<li class="row">
<div class="col-md-2 track-number">
02
</div>
<div class="col-md-7 track-name">
Track name/ song name 02
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
<li class="row">
<div class="col-md-2 track-number">
03
</div>
<div class="col-md-7 track-name">
Track name/ song name03
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
</ul>
</div>
</div>
</div><!--container-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$('#play').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
});
$('#pause').on('click', function(event) {
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
$('#unmute').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#mute').show();
$('#unmute').hide();
});
$('#mute').on('click', function(event) {
//currentPlayingTrack.pause();
$('#mute').hide();
$('#unmute').show();
});
</script>
</div> <!--wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Why list-style is affecting this?
When list-style is different from none, we have the bullets that add a default height to the li element even if the element is empty or contains float elements without clearfix. Using none will remove this height and we have issues:
ul {
border: 1px solid;
}
span {
float: left;
}
li:nth-child(even) {
background: red;
color: blue;
}
<ul>
<li>element 1</li>
<li></li>
<li>element 3</li>
</ul>
<ul style="list-style:none">
<li>element 1</li>
<li></li>
<li>element 3</li>
</ul>
<ul>
<li><span>float element 1</span></li>
<li><span>float element 1</span></li>
<li><span>float element 1</span></li>
</ul>
<ul style="list-style:none">
<li><span>float element 1</span></li>
<li><span>float element 1</span></li>
<li><span>float element 1</span></li>
</ul>
That issue had caused by the li had the height 0 when the size is bigger than 991px because of floated div has col-* class.
You use the bootstrap and col-md-x has the float property when the screen size is bigger than 991px.
So you have to set the property overflow:hidden to li to wrap the floated child's content.
Try using like this.
.track-list > ul > li{
list-style: none;
overflow:hidden;
}
The below code is the fixed one.
#import url("//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.wrapper{
height: 100vh;
}
.box-item{
position: relative;
width: 100%;
background-color: red;
color: blue;
height: 10vh;
margin-top: 40px;
}
footer > .listen{
position: absolute;
margin-right: 20px;
bottom: 0;
right: 0;
}
.playlist-dropdown{
border: solid 1px #dedede;
}
.interface{
border-bottom: solid 3px #dedede;
padding-bottom: 10px;
padding-top:10px;
}
.name-of-song{
margin-bottom: 10px;
}
.track-list{
padding-top: 10px;
}
.track-list > ul > li{
list-style: none;
overflow:hidden;
}
div ul li:nth-child(even) {
background-color: #ccc !important;
}
#play, #pause, #mute, #unmute {
position: relative;
display: block;
}
#play {
position: absolute;
}
#pause:before {
position: absolute;
}
#pause:after {
position: absolute;
}
#mute{
position: absolute;
}
#unmute:before {
position: absolute;
}
#unmute:after {
position: absolute;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>playlist</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="box-item ">
<footer>
<a class="listen" data-toggle="collapse" href="#playlist-collapse"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a>
</footer>
</div>
<div id="playlist-collapse" class="playlist-dropdown">
<div class="interface clearfix">
<div class="col-md-12 name-of-song">
Name of track being played
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-play"></span>
<span class="glyphicon glyphicon-pause"></span>
</div>
<div class="col-md-6">
progress bar
</div>
<div class="col-md-1">
<span class="glyphicon glyphicon-volume-off"></span>
<span class="glyphicon glyphicon-volume-up"></span>
</div>
<div class="col-md-3">
volume-bar
</div>
</div> <!--interface ends -->
<div class="track-list clearfix">
<ul>
<li class="track-row">
<div class="col-md-2 track-number">
01
</div>
<div class="col-md-7 track-name">
Track name/ song name
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
<li>
<div class="col-md-2 track-number">
02
</div>
<div class="col-md-7 track-name">
Track name/ song name 02
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
<li>
<div class="col-md-2 track-number">
03
</div>
<div class="col-md-7 track-name">
Track name/ song name03
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
</ul>
</div>
</div>
</div><!--container-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$('#play').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
});
$('#pause').on('click', function(event) {
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
$('#unmute').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#mute').show();
$('#unmute').hide();
});
$('#mute').on('click', function(event) {
//currentPlayingTrack.pause();
$('#mute').hide();
$('#unmute').show();
});
</script>
</div> <!--wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Related
I have three div's as a nav list. I want to add active class to a div when clicked. Below is my code but it is not working properly. Please help me to fix it out.
html
function changeClass() {
var divsLenght = $(".list").children().length;
for (var i = 0; i < divsLenght; i++) {
$('.list').children(i).toggleClass('tabActive item');
}
$(this).addClass('tabActive');
}
.item
{
height: 60px;
padding-top: 20px;
background: #f8f9fa;
}
.tabActive{
background: #87ceeb69;
border-left: 3px solid blue;
height: 60px;
padding-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<div class="item" onclick="changeClass(this)">
<center><i class="fas fa-user"></i><br>Students</center>
</div>
<div class="tabActive" onclick="changeClass(this)">
<center><i class="fas fa-book"></i><br/>Lesson Plan</center>
</div>
<div class="item" onclick="changeClass(this)">
<center><i class="fas fa-cog"></i><br/>Settings</center>
</div>
</div>
Updated your code to achieve the same with Jquery.
$(document).ready(function(){
$('div.item').click(function(){
$('.item').removeClass('tabActive');
$(this).addClass('tabActive');
});
});
.item
{
height: 60px;
padding-top: 20px;
background: #f8f9fa;
}
.tabActive{
background: #87ceeb69;
border-left: 3px solid blue;
height: 60px;
padding-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<div class="item">
<center><i class="fas fa-user"></i><br>Students</center>
</div>
<div class="item tabActive">
<center><i class="fas fa-book"></i><br/>Lesson Plan</center>
</div>
<div class="item">
<center><i class="fas fa-cog"></i><br/>Settings</center>
</div>
</div>
try this:
html
<div class="list">
<div class="item" >
<center><i class="fas fa-user"></i><br>Students</center>
</div>
<div class="item" >
<center><i class="fas fa-book"></i><br/>Lesson Plan</center>
</div>
<div class="item" >
<center><i class="fas fa-cog"></i><br/>Settings</center>
</div>
js
$(document).ready(function(){
$(".item").click(function(){
$('.item').removeClass('tabActive');
$(this).addClass('tabActive');
});
});
<!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>
.item
{
height: 60px;
padding-top: 20px;
background: #f8f9fa;
}
.tabActive{
background: #87ceeb69;
border-left: 3px solid blue;
height: 60px;
padding-top: 20px;
}
</style>
</head>
<body>
<div class="list">
<div class="item">
<center><i class="fas fa-user"></i><br>Students</center>
</div>
<div class="item tabActive">
<center><i class="fas fa-book"></i><br/>Lesson Plan</center>
</div>
<div class="item">
<center><i class="fas fa-cog"></i><br/>Settings</center>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('div.item').click(function(){
// for more information about removeClass() -> https://api.jquery.com/removeclass/
$('div.item').removeClass('tabActive');
// for more information about addClass() -> https://api.jquery.com/toggleclass/
$(this).addClass('tabActive');
});
});
</script>
</body>
</html>
The navigation bar is at a certain distance away from the top, after scrolling past the navigation-bar, it sticks to the top but unfortunately it's width expands beyond the container(it's defined in). The navigation-bar should retain it's original width, so how do I resolve it? Here's my github link too :- https://github.com/Archiie/MyPortfolio
.affix {
top: 0px;
margin: 0px 20px;
}
.affix + .container {
padding: 5px;
}
h1, h4 {
text-shadow: 4px 5px 3px #A866B2; /*#DCD4F9, #F74554 moves to the right, moves down, thickness of text's shadow*/
}
.main-container {
margin: 40px 0px;
border-radius: 10px;
background-color: #4B004C ; /*#800000, #4B004C, #E6E6E6*/
}
#head_tag, #footer_tag {
font-family: Tangerine, Monospace;
color: white;
}
#head_tag {
font-size: 100px;
height: 300px;
}
#footer_tag {
font-size: 50px;
}
.image {
border-style: solid;
border-radius: 50%;
border-width: 1px;
border-color: #000;
height: 230px;
width: 240px;
}
.img-responsive {
margin: 20px auto;
}
.navbar {
margin: 0px 20px;
z-index: 1;
}
.info {
font-family: Monospace;
font-size: 20px;
background-color: #E6E6E6; /*#4B004C, #E6E6E6*/
border-radius: 10px;
margin: 20px 20px;
padding: 20px 20px;
}
.boxSpacing {
margin: 20px auto;
}
.pics {
height: 300px;
width: 300px;
}
#aboutMe, #portfolio, #contactMe {
font-family: Lobster, Monospace;
font-size: 35px;
color: #6E326F;
}
.centeringIcon {
display: block;
text-align:center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<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/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="10">
<div class="container main-container">
<div class="row">
<div class="col-md-8">
<h1 class="text-center" id="head_tag">Archita's Portfolio</h1>
</div>
<div class="col-md-4">
<img src="images/Archi.jpg" class="img-responsive image">
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="365">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar"> <!-- This navigation bar should not change it's width even after scrolling past it-->
<ul class="nav navbar-nav">
<li>About Me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info">
<h3 class="text-center" id="aboutMe">About Me</h3>
<p>I'm a new-bee in front-end technology. I used to work on ROR, R and Python but now I'm exploring HTML, CSS, Bootstrap, jQuery, JavaScript, AngularJS and ReactJS.</p>
<p>I've also worked on several <span style="color:#960099">android projects </span>as well. I've also worked on highcharts and D3.</p>
</div>
<div class="info">
<h3 class="text-center" id="portfolio">Portfolio</h3>
<div class="row">
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
</div>
</div>
<div class="info">
<h3 class="text-center" id="contactMe">Contact</h3>
<p><b>Here's my contact details:</b></p>
<ul>
<li>Name:- Archita Sundaray</li>
<li>Phone no.:- +91 89514 88208</li>
<li>email address:- archi.sundaray5#gmail.com</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h4 class="text-center" id="footer_tag">~ made by Archita Sundaray</h4>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-linkedin centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-github centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-twitter centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-bitbucket centeringIcon"></i>
</div>
</div>
</div>
</body>
</html>
Check Now its working, when it is sticky then it's position fixed so you have to give it width or set left and right position
.affix {
top: 0px;
margin: 0px 20px;
width:1100px;
}
#media (max-width: 1199px)
{
.affix {
width: 900px;
}
}
#media (max-width: 991px)
{
.affix {
width: 680px;
}
}
#media (max-width: 768px)
{
.affix {
left:15px;
right:15px;
width:auto;
}
}
.affix + .container {
padding: 0px;
}
h1, h4 {
text-shadow: 4px 5px 3px #A866B2; /*#DCD4F9, #F74554 moves to the right, moves down, thickness of text's shadow*/
}
.main-container {
margin: 40px 0px;
border-radius: 10px;
background-color: #4B004C ; /*#800000, #4B004C, #E6E6E6*/
}
#head_tag, #footer_tag {
font-family: Tangerine, Monospace;
color: white;
}
#head_tag {
font-size: 100px;
height: 300px;
}
#footer_tag {
font-size: 50px;
}
.image {
border-style: solid;
border-radius: 50%;
border-width: 1px;
border-color: #000;
height: 230px;
width: 240px;
}
.img-responsive {
margin: 20px auto;
}
.navbar {
margin: 0px 20px;
z-index: 1;
}
.info {
font-family: Monospace;
font-size: 20px;
background-color: #E6E6E6; /*#4B004C, #E6E6E6*/
border-radius: 10px;
margin: 20px 20px;
padding: 20px 20px;
}
.boxSpacing {
margin: 20px auto;
}
.pics {
height: 300px;
width: 300px;
}
#aboutMe, #portfolio, #contactMe {
font-family: Lobster, Monospace;
font-size: 35px;
color: #6E326F;
}
.centeringIcon {
display: block;
text-align:center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<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/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="10">
<div class="container main-container">
<div class="row">
<div class="col-md-8">
<h1 class="text-center" id="head_tag">Archita's Portfolio</h1>
</div>
<div class="col-md-4">
<img src="images/Archi.jpg" class="img-responsive image">
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="365">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar"> <!-- This navigation bar should not change it's width even after scrolling past it-->
<ul class="nav navbar-nav">
<li>About Me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info">
<h3 class="text-center" id="aboutMe">About Me</h3>
<p>I'm a new-bee in front-end technology. I used to work on ROR, R and Python but now I'm exploring HTML, CSS, Bootstrap, jQuery, JavaScript, AngularJS and ReactJS.</p>
<p>I've also worked on several <span style="color:#960099">android projects </span>as well. I've also worked on highcharts and D3.</p>
</div>
<div class="info">
<h3 class="text-center" id="portfolio">Portfolio</h3>
<div class="row">
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
</div>
</div>
<div class="info">
<h3 class="text-center" id="contactMe">Contact</h3>
<p><b>Here's my contact details:</b></p>
<ul>
<li>Name:- Archita Sundaray</li>
<li>Phone no.:- +91 89514 88208</li>
<li>email address:- archi.sundaray5#gmail.com</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h4 class="text-center" id="footer_tag">~ made by Archita Sundaray</h4>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-linkedin centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-github centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-twitter centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-bitbucket centeringIcon"></i>
</div>
</div>
</div>
</body>
</html>
I tried to align text on the right side of image with
img {
float: left;
margin-right: 9px;
}
But it doesn't always work (on codepen it seems it works but not on my localhost)
full source code with Bootstrap and AngularJs
https://codepen.io/anon/pen/YZGjgq
<!DOCTYPE htwml 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">
<meta charset="utf-8">
<head>
<title>Details Layout</title>
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style media="screen">
/* make sidebar nav vertical */
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
</style>
<style media="screen">
.hidden {
display: none;
}
</style>
<style>
/* start left side menu */
ul.menu-navigation {
font-size: 1.2em;
float: left;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
background: #e25454;
border-bottom: 1px solid #BF4E4E;
border-top: 1px solid #BF4E4E;
}
ul.menu-navigation li a {
display: block;
color: #fff;
text-decoration: none;
width: 205px;
padding: 10px 10px 10px 35px;
border-top: 1px solid #BF4E4E;
border-bottom: 1px solid #BF4E4E;
}
ul.menu-navigation li span {
display: none;
}
ul.menu-navigation li a:hover {
background-color: #BF4E4E;
border-top: 1px solid #BF4E4E;
}
ul.menu-navigation li a:hover span {
display: block;
font-size: 0.8em;
padding: 10px 0;
}
/* end left side menu */
</style>
<style>
img {
float: left;
margin-right: 9px;
}
</style>
<script>
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $window, $sce) {
$scope.sections = [
{id:'section1',name:'Section 1'},
{id:'section2',name:'Section 2'},
{id:'section3',name:'Section 3'},
{id:'section4',name:'Section 4'},
];
});
</script>
</head>
<body ng-app="app" ng-controller="MainCtrl" >
<div class="container">
<div class="row">
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Accueil</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
</div>
<div class="row">
<div class="col-sm-3">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="media">
<div class="media-left">
<img src="http://www.freeiconspng.com/uploads/person-icon-5.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Mr DOE John</h4>
<a href="#">CEO <span class="glyphicon glyphicon-pencil"></span>
</a>
</div>
</div>
</a>
</h4>
</div>
<ul class="menu-navigation nav-tabs">
<li ng-repeat="section in sections">
<a href="#{{section.id}}" id="mnu{{section.id}}" class="mnu" data-toggle="tab" data-target="#{{section.id}}">{{section.name}}
<span>
Lorem Ipsum es texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el.
</span>
</a>
</li>
</ul>
<!-- End Left_Side_NavBar_Component_Html -->
</div>
<div class="col-sm-9 tab-content" >
<form class="form-group" action="index.html" method="post" id="sections">
<div id="myTabContent" class="tab-content"> <!-- start class .tab-content to create tab -->
<!-- start tab 1 -->
<div class="tab-pane in active" id="{{sections[0].id}}"> <!-- tab 1-->
{{sections[0].name}} content
</div>
<!-- end tab 1 -->
<div class="tab-pane " id="{{sections[1].id}}"><!-- tab 2 -->
{{sections[1].name}} content
</div>
<div class="tab-pane " id="{{sections[2].id}}"><!-- tab 3 -->
<!-- start tab 3 content -->
{{sections[2].name}} content
<!-- end tab 3 content -->
</div>
<div class="tab-pane " id="{{sections[3].id}}"> <!-- tab 4 -->
{{sections[3].name}} content
</div>
</div> <!-- end class .tab-content to create tab -->
</form>
</div>
</div>
</div>
</body>
</html>
Override .media-left css class, add float:left in it.
.media-left{
float:left
}
I have read a lot of posts about this but I still didn't find an answer.
I have a footer that I want to be at the end of the page, not fixed.
The problem is that the footer is where the content ends. Look at picture.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech - Privatni korisnici </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="css/basic-template.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<!--Navigation bar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span> <img src="Slike/logo.png" alt="LogoSlika"/> </span>
<font face="Roboto Condensed" size="4" color="green"> Mobtech </font>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav navbar-right">
<li> Početna strana </li>
<li class="active"> Privatni korisnici </li>
<li> Poslovni korisnici </li>
<li> Uređaji </li>
<li> O Nama </li>
</ul>
</div>
</div>
</nav>
<br />
<div class="container"> <!--Container -->
<div class="row">
<!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
<div class="col-lg-12 bg-success">
<p> Outer div </p>
<div class="col-lg-6 bg-primary">
<p> Inner div </p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mojFooter">
<font face="Roboto Condensed" size="4"> <center>
<div class="container">
<div class="row" style="margin-top: 7px;">
<p> © Copyright Ivan Prošić 2016.</p>
</div>
<div class="bottom-footer">
<div class="col-md-12">
<ul class="footer-nav">
<li> Facebook </li>
<li> Twitter </li>
<li> Google+ </li>
</ul>
</div>
</div>
</div>
</font> </center>
</footer>
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This is my CSS, for the footer only:
.mojFooter{
background-color: #f8f8f8;
color: #00a651;
padding-top: 0px;
border-top: 1px solid #e7e7e7;
margin-bottom: 0px;
}
.bottom-footer{
border-top: 1px solid #00a651;
margin-top: 0px;
padding-top: 7px;
color: #00a651;
}
.footer-nav li{
display: inline;
padding: 0px 40px;
}
.footer-nav a{
color: grey;
text-decoration: none;
}
When using bootstrap 4 or 5, flexbox could be used to achieve desired effect:
<body class="d-flex flex-column min-vh-100">
<header>HEADER</header>
<content>CONTENT</content>
<footer class="mt-auto"></footer>
</body>
Please check the examples: Bootstrap 4 Bootstrap 5
In bootstrap 3 and without use of bootstrap. The simplest and cross browser solution for this problem is to set a minimal height for body object. And then set absolute position for the footer with bottom: 0 rule.
body {
min-height: 100vh;
position: relative;
margin: 0;
padding-bottom: 100px; //height of the footer
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
height: 100px;
}
Please check this example:
Bootstrap 3
In my case for Bootstrap4:
<body class="d-flex flex-column min-vh-100">
<div class="wrapper flex-grow-1"></div>
<footer></footer>
</body>
You can just add:
style="min-height:100vh"
to your page content container and place the footer in another container
Use this stylesheet:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
© 2021 Company, Inc
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>
<ul class="nav col-md-4 justify-content-end">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
:root {
--text: #daf7a6;
--header: #581845;
--main: #900c3f;
--footer: #ff5733;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
header,
main,
footer {
color: var(--text);
height: 100px;
padding: 1rem;
}
header {
background-color: var(--header);
}
main {
background-color: var(--main);
}
footer {
background-color: var(--footer);
position: sticky;
top: 100vh;
}
<header>header</header>
<main>content</main>
<footer>footer</footer>
I am developing a website where the body is split into two sections using Materialize grid. On the left side the website has a fixed image that wont change, the right side has content that a user can scroll up and down on. There is also a fixed navbar and fixed footer. Here is the layout
Here you can see as you scroll down where the whitespace starts here
I want the right side to not have any white space and just have the div content show. I looked through each element through the inspect tool and saw no additional padding or margins. I am wondering if the fixed left side is adding pixels to the bottom of the left side?
Here is my index.html `
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title> Sequel Seattle Apartments </title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">
<img class="mainlogo" src="logo_navy.png" alt="Sequel Apartments Seattle"/>
</a>
<ul class="bigbuttoncta right hide-on-med-and-down">
<li><a class="waves-effect waves-light btn">Apply Now</a></li>
<li><a class="waves-effect waves-light btn">Contact Us</a></li>
</ul>
<ul class="right hide-on-med-and-down">
<li>Aparmtents</li>
<li>Sequel Lifestyle</li>
<li>Location</li>
<li>Amenities</li>
<li>Gallery</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Aparmtents</li>
<li>Sequel Lifestyle</li>
<li>Location</li>
<li>Amenities</li>
<li>Gallery</li> </ul>
<i class="material-icons">menu</i>
</div>
</nav>
<!-- START OF CONTENT -->
<div id="allcontentfields" class="row">
<!-- Left Hand side of the screen, static content -->
<div class="col s5 leftsection">
<div id="index-banner" class="parallax-container">
<img src="background1.jpg" alt="Unsplashed background img 1">
</div>
</div>
<!-- Right hand side of the screen, all dynamic content -->
<div class="col s7 offset-s5 rightsection" >
<!-- SECTION 1 -->
<div class="section scrollspy" id="section1">
<div class="row">
<h1>Text goes here </h1>
</div>
</div>
<!-- SECTION 2 -->
<div class="section scrollspy" id="section2">
<div class="row">
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
<div class="parallax"><img src="background2.jpg" alt="Unsplashed background img 2"></div>
</div>
</div>
</div>
</div>
<!-- SECTION 3 -->
<div class="section scrollspy" id="section3">
<div class="row">
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 4 -->
<div class="section scrollspy" id="section4">
<div class="row">
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 5 -->
<div class="section scrollspy" id="section5">
<div class="row">
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER SECTION -->
<footer class="page-footer teal">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="brown-text text-lighten-3" href="http://herocreativemedia.com">Hero Creative Media, LLC</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>
`
Here is the CSS, I am using Materialize so they have a css file as well but I haven't messed with it.
/* Custom Stylesheet */
/**
* Use this file to override Materialize files so you can update
* the core Materialize files in the future
*
* Made By MaterializeCSS.com
*/
html, body {
margin:0;
padding: 0;
}
nav ul a,
nav .brand-logo {
color: #444;
}
nav {
position: fixed;
width: 100%;
}
.col {
position:relative;
margin-top: 125px;
}
.row .col.s5 {
margin-left:0;
left:0;
right:0;
padding:0;
}
.row .col.offset-s5 {
padding:0;
height: auto;
}
.leftsection {
position: fixed;
z-index: -1;
margin-top: 200px;
padding:0;
overflow:hidden;
padding-left: 0;
padding-right: 0;
}
.rightsection {
position: relative;
z-index: -1;
margin-top: 200px;
padding:0;
overflow: hidden;
height: auto;
}
#section1 {
position:relative;
height: 700px;
width: 100%;
background-color:red;
overflow-y: scroll;
padding:0;
}
#section2 {
position:relative;
height: 700px;
width: 100%;
padding: 0;
overflow-y: scroll;
}
#section3 {
position:relative;
height: 700px;
width: 100%;
padding:0;
background-color:blue;
z-index: -1;
overflow-y: scroll;
}
#section4 {
position:relative;
height: 700px;
width: 100%;
padding:0;
background-color:yellow;
z-index: -1;
overflow-y: scroll;
}
#section5 {
position:relative;
height: 700px;
width: 100%;
padding:0;
background-color:orange;
z-index: -1;
overflow-y: scroll;
padding-bottom: 0;
}
.mainlogo {
width: 100%;
margin-left: -50px;
margin-top: 40px;
}
.bigbuttoncta {
margin-top: 10px;
}
.bigbuttoncta li {
margin: 20px;
}
p {
line-height: 2rem;
}
.button-collapse {
color: #26a69a;
}
.parallax-container {
min-height: 780px;
line-height: 0;
height: auto;
color: rgba(255,255,255,.9);
z-index: -1;
}
.parallax-container .section {
width: 100%;
}
#media only screen and (max-width : 992px) {
.parallax-container .section {
position: absolute;
top: 40%;
}
#index-banner .section {
top: 10%;
}
}
#media only screen and (max-width : 600px) {
#index-banner .section {
top: 0;
}
}
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
footer.page-footer {
margin-top: 100%;
display:block;
}
I just figured out that it was my footer.page-footer had a margin top that was set to 100% so in essence created a huge sroll that was showing on one half of the screen since the other half was fixed. I removed that and I am all set.
Note to self....delete the stupid CSS you put in when trying to figure stuff out.