There seems to be a gap between the footer and main body. i want the body to touch the footer, as seen i want it to completely fill up the space in the middle.
https://ibb.co/dUpFJF
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Droid Sans', sans-serif;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
min-height: 100%;
}
.div_top1 {
height: 30px;
margin: 0 auto;
width: 100%;
border-bottom: 1px solid #FFF;
background-color: #2d2d2d;
}
.div_top2 {
height: 150px;
width: 100%;
background-color: #072135;
}
.main_container {
width: 100%;
margin: 0 auto;
background-color: #FFF;
overflow: auto;
min-height: 100%;
display: inline-block;
}
.container_right {
height: 100%;
padding-left: 20px;
margin: 0 auto;
}
.container_left {
float: left;
text-align: left;
border-right: 2px solid #5a5c5d;
border-bottom: 1px solid #5a5c5d;
height: 100%;
overflow: hidden;
}
.bk {
border-top: 4px solid #da6161;
display: table;
height: 200px;
margin: 0 auto;
margin-top: 30px;
padding: 8px;
}
.icon {
float: left;
display: block;
}
.icon-bar {
width: 70px;
/* Set a specific width */
background-color: #FFF;
/* Dark-grey background */
height: 100%;
}
.icon-bar a {
display: block;
/* Make the links appear below each other instead of side-by-side */
text-align: center;
/* Center-align text */
padding: 16px;
/* Add some padding */
transition: all 0.3s ease;
/* Add transition for hover effects */
color: black;
/* White text color */
font-size: 27px;
/* Increased font-size */
height: 100%;
}
.icon-bar a:hover {
background-color: #5a5c5d;
/* Add a hover color */
}
.active {
background-color: #818384;
/* Add an active/current color */
}
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: auto;
background-color: #da6161;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
font-size: 20px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
margin-left: 36px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.foot {
background-color: #2d2d2d;
position: absolute;
color: #FFF;
text-align: center;
left: 0;
bottom: 0;
height: 35px;
width: 100%;
border-top: 3px solid #9c9d9e;
padding-top: 3px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="div_top2"> </div>
<div class="main_container">
<div class="container_left">
<div class="icon_menu">
<div class="icon-bar">
<a class="active tooltip" href="#">
<span class="tooltiptext">Home</span>
<i class="fa fa-home"></i>
</a>
<a class="tooltip" href="#">
<span class="tooltiptext">My Story</span>
<i class="fa fa-black-tie"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Companies</span>
<i class="fa fa-building"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Blog</span>
<i class="fa fa-paper-plane"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Ask Me Anything</span>
<i class="fa fa-quora"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Contact</span>
<i class="fa fa-address-card"></i>
</a>
</div>
</div>
</div>
<div class="container_right">
<div class="bk"></div>
</div>
</div>
<div class="foot">
Copyright 2017
</div>
When using floats you disturb the normal document flow. Change the definition of .foot as follows:
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Droid Sans', sans-serif;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
min-height: 100%;
}
.div_top1 {
height: 30px;
margin: 0 auto;
width: 100%;
border-bottom: 1px solid #FFF;
background-color: #2d2d2d;
}
.div_top2 {
height: 150px;
width: 100%;
background-color: #072135;
}
.main_container {
width: 100%;
margin: 0 auto;
background-color: #FFF;
overflow: auto;
min-height: 100%;
display: inline-block;
}
.container_right {
height: 100%;
padding-left: 20px;
margin: 0 auto;
}
.container_left {
float: left;
text-align: left;
border-right: 2px solid #5a5c5d;
border-bottom: 1px solid #5a5c5d;
height: 100%;
overflow: hidden;
}
.bk {
border-top: 4px solid #da6161;
display: table;
height: 200px;
margin: 0 auto;
margin-top: 30px;
padding: 8px;
}
.icon {
float: left;
display: block;
}
.icon-bar {
width: 70px;
/* Set a specific width */
background-color: #FFF;
/* Dark-grey background */
height: 100%;
}
.icon-bar a {
display: block;
/* Make the links appear below each other instead of side-by-side */
text-align: center;
/* Center-align text */
padding: 16px;
/* Add some padding */
transition: all 0.3s ease;
/* Add transition for hover effects */
color: black;
/* White text color */
font-size: 27px;
/* Increased font-size */
height: 100%;
}
.icon-bar a:hover {
background-color: #5a5c5d;
/* Add a hover color */
}
.active {
background-color: #818384;
/* Add an active/current color */
}
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: auto;
background-color: #da6161;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
font-size: 20px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
margin-left: 36px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.foot {
background-color: #2d2d2d;
color: #FFF;
text-align: center;
float: left;
height: 35px;
width: 100%;
border-top: 3px solid #9c9d9e;
padding-top: 3px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="div_top2"> </div>
<div class="main_container">
<div class="container_left">
<div class="icon_menu">
<div class="icon-bar">
<a class="active tooltip" href="#">
<span class="tooltiptext">Home</span>
<i class="fa fa-home"></i>
</a>
<a class="tooltip" href="#">
<span class="tooltiptext">My Story</span>
<i class="fa fa-black-tie"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Companies</span>
<i class="fa fa-building"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Blog</span>
<i class="fa fa-paper-plane"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Ask Me Anything</span>
<i class="fa fa-quora"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Contact</span>
<i class="fa fa-address-card"></i>
</a>
</div>
</div>
</div>
<div class="container_right">
<div class="bk"></div>
</div>
</div>
<div class="foot">
Copyright 2017
</div>
you made the footer element absolutely positioned relative to parent(body tag).
try wrapping your code in a after element
html
<body>
<div class="wrapper">
<!-- your code here -->
</div>
</body>
css
.wrapper
{
position:relative;
}
hope this works...
Related
My search suggestion box is not flowing all the way into the section below rather it is resizing the whole navbar. The search input is in the navigation bar. I want the search suggestions to just flow in the divs below. I have tried all the overflow property values but it is not giving me what I want.
.search-box {
position: relative;
}
.nav-search {
width: 260px;
}
.autocom-box {
background-color: white;
color: black;
width: 260px;
/* padding: 10px 8px; */
max-height: 280px;
overflow-y: auto;
border-radius: 5px;
/* opacity: 0; */
/* pointer-events: none; */
}
.search-box li {
list-style: none;
padding: 8px 12px;
cursor: default;
border-radius: 3px;
width: 100%;
/* display: none; */
overflow: auto;
}
.search-box li:hover {
background: #efefef;
}
.search-btn {
height: 38px;
width: 38px;
line-height: 38px;
position: absolute;
top: 0;
right: 0;
text-align: center;
cursor: pointer;
color: black;
margin-right: 10px;
border: none;
background: none;
}
<form class="d-flex ms-auto" action="/" method="post">
<div class="search-box">
<input
class="form-control me-2 nav-search"
autocomplete="off"
name="search"
placeholder="Type to Search..."
/>
<div class="autocom-box">
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
</div>
<button class="search-btn" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</form>
I've tried giving the full navbar max-height but then it tries to keep everything inside of it so it just pushes the search-box so high up it disappears.
And I've also tried position: absolute; but even that doesn't work it just messes everything up.
Adding position: absolute; to the pop-out window (.autocom-box) should just about do the trick:
.search-box {
position: relative;
border: 2px solid black;
}
.nav-search {
width: 260px;
}
.autocom-box {
position: absolute; /* This is the change */
background-color: white;
border: 2px solid red;
color: black;
width: 260px;
/* padding: 10px 8px; */
max-height: 280px;
overflow-y: auto;
border-radius: 5px;
/* opacity: 0; */
/* pointer-events: none; */
}
.search-box li {
list-style: none;
padding: 8px 12px;
cursor: default;
border-radius: 3px;
width: 100%;
/* display: none; */
overflow: auto;
}
.search-box li:hover {
background: #efefef;
}
.search-btn {
height: 38px;
width: 38px;
line-height: 38px;
position: absolute;
top: 0;
right: 0;
text-align: center;
cursor: pointer;
color: black;
margin-right: 10px;
border: none;
background: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<form class="d-flex ms-auto" action="/" method="post">
<div class="search-box">
<input
class="form-control me-2 nav-search"
autocomplete="off"
name="search"
placeholder="Type to Search..."
/>
<div class="autocom-box">
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
</div>
<button class="search-btn" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</form>
(The black border is the nav bar itself, the red border is the search window)
I have styling problem where my avatar image height will affect other inline items next to it. The image below is to illustrate the problem.
So if you see when I make my avatar logo taller it'll bring down the navigation links.
I want my avatar image not to affect the links next to it.
Here's my css and html:
.terms-link {
display: inline-flex;
align-items: center;
margin-right: -9px;
}
.user {
width: 153px;
}
.terms {
width: 103px;
}
.dropdown {
position: absolute;
right: 0;
padding: 30px 50px 30px 0;
background-color: #336F9C;
margin-top: 17px;
z-index: 10;
}
.right-side {
display: flex;
align-items: center;
}
.sign-up {
display: inline;
color: white;
margin-left: 1rem;
margin-right: 1rem;
}
.sign-up a {
padding: 5px;
}
nav a.is-active {
border-bottom: 3px solid #00aedb;
}
nav a.is-active.transparent {
border-bottom: 0;
color: #00aedb !important;
}
nav {
margin-bottom: 0;
}
nav a {
padding: 0 1.5rem 17px 1.5rem;
position: relative;
color: white;
text-decoration: none;
font-size: medium;
}
.explore-beta span {
font-size: x-small;
font-style: italic;
}
.spacer {
display: inline;
font-size: medium;
padding: 0 1rem 17px 1rem;
color: white;
}
.avatar-frame{border: 1.5px solid #c7b89e;}
.avatar-frame,.avatar-frame img{
width:30px;
height: 30px;
-webkit-border-radius: 50%; /* Saf3+, Chrome */
border-radius: 50%; /* Opera 10.5, IE 9 */
/*-moz-border-radius: 50%; Disabled for FF1+ */
}
<div class="right-side">
<nav>
<a routerLink="/initiatives" routerLinkActive="is-active">Initiatives</a>
<a routerLink="/search" routerLinkActive="is-active">Summary</a>
<a routerLink="/clinical" routerLinkActive="is-active">Clinical Filtering</a>
<a routerLink="/explore" routerLinkActive="is-active">Explore</a>
<a routerLink="/beacon" routerLinkActive="is-active">Beacon</a>
<a routerLink="/about" routerLinkActive="is-active">About</a>
<a *ngIf="!auth.authenticated()" class="sign-up">
<a (click)="auth.login()">Log in</a>
<div class="spacer">|</div>
<a (click)="openSignUpDialog()">Sign up</a>
</a>
<a *ngIf="auth.authenticated()" [ngClass]="{'is-active': termsLinkActive}" (click)="toggleUser($event)" class="avatar-link">
<span class="terms-link">
<div class="avatar-frame">
<img [src]="userPicture" />
</div>
</span>
<div *ngIf="userDropdown" [ngClass]="['user', 'dropdown']" (click)="auth.logout()">
<a>Log out</a>
</div>
</a>
</nav>
</div>
You can use position:absolute on your avatar-link class to remove it out of the default document flow and set its parent i.e. nav to position:relative;
This will ensure avatars dimensions do not effect its siblings.
div{
border: 1px solid black;
}
nav {
position: relative;
}
.avatar-link {
position: absolute;
border: 1px solid red;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.terms-link {
display: inline-flex;
align-items: center;
margin-right: -9px;
}
.user {
width: 153px;
}
.terms {
width: 103px;
}
.dropdown {
position: absolute;
right: 0;
padding: 30px 50px 30px 0;
background-color: #336F9C;
margin-top: 17px;
z-index: 10;
}
.right-side {
display: flex;
align-items: center;
}
.sign-up {
display: inline;
color: white;
margin-left: 1rem;
margin-right: 1rem;
}
.sign-up a {
padding: 5px;
}
nav a.is-active {
border-bottom: 3px solid #00aedb;
}
nav a.is-active.transparent {
border-bottom: 0;
color: #00aedb !important;
}
nav {
margin-bottom: 0;
}
nav a {
padding: 0 1.5rem 17px 1.5rem;
position: relative;
color: white;
text-decoration: none;
font-size: medium;
}
.explore-beta span {
font-size: x-small;
font-style: italic;
}
.spacer {
display: inline;
font-size: medium;
padding: 0 1rem 17px 1rem;
color: white;
}
.avatar-frame {
border: 1.5px solid #c7b89e;
}
.avatar-frame,
.avatar-frame img {
width: 30px;
height: 30px;
-webkit-border-radius: 50%;
/* Saf3+, Chrome */
border-radius: 50%;
/* Opera 10.5, IE 9 */
/*-moz-border-radius: 50%; Disabled for FF1+ */
}
<div class="right-side">
<nav>
<a routerLink="/initiatives" routerLinkActive="is-active">Initiatives</a>
<a routerLink="/search" routerLinkActive="is-active">Summary</a>
<a routerLink="/clinical" routerLinkActive="is-active">Clinical Filtering</a>
<a routerLink="/explore" routerLinkActive="is-active">Explore</a>
<a routerLink="/beacon" routerLinkActive="is-active">Beacon</a>
<a routerLink="/about" routerLinkActive="is-active">About</a>
<a *ngIf="!auth.authenticated()" class="sign-up">
<a (click)="auth.login()">Log in</a>
<div class="spacer">|</div>
<a (click)="openSignUpDialog()">Sign up</a>
</a>
<a *ngIf="auth.authenticated()" [ngClass]="{'is-active': termsLinkActive}" (click)="toggleUser($event)" class="avatar-link">
<span class="terms-link">
<div class="avatar-frame">
<img [src]="userPicture" />
</div>
</span>
<div *ngIf="userDropdown" [ngClass]="['user', 'dropdown']" (click)="auth.logout()">
<a>Log out</a>
</div>
</a>
</nav>
</div>
I have a navbar with a few elements inside it and a button that escapes the navbar when i resize it. What CSS property should I style to keep the button in CSS to stop the button from escaping the navbar?
Attached is a JFiddle of an example of what happens:
https://jsfiddle.net/6Lx0hkfa/
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
float: left;
margin-left: 235px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
<a href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
</div>
</section>
I don't know what you are trying to achieve, but this one worked for me:
.green-button {
position: absolute;
}
This is a case where I would use float for simplicity. Note that this requires to put the link element on top of the rest of the wrapper's contents within the markup, but it's the most direct solution.
.green-button-link {
float: left;
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
margin-right: 20px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<a class="green-button-link" href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
</div>
</section>
check the snippet if its what you want.i added description add to ones I added to your code.
* {
margin: 0;
padding: 0;
}
body {
background: url(img/hero_bg.jpg) repeat-y center center fixed;
background size: 100%;
}
#header {
background-color: #1d7cb6;
display: block;
/* position: relative; */
color: white;
width: 100%;
height: 50px;
}
.wrapper {
text-align: center;
margin: 0px auto;
font-family: 'Raleway';
background: white;
z-index: 500;
vertical-align: middle;/* add */
position: relative;/* add */
padding-right: 200px;
}
.address {
display: inline-block;
width: 240px;
float: left;
display: inline-block;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.phone {
display: inline-block;
width: 100px;
float: left;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.email {
width: 150px;
float: left;
display: inline-block;
height: 100%;
padding: 20px 18px;
font-size: 10px;
}
a.social-btn {
width: 20px;
height: 20px;
margin-top: 13px;
float: left;
}
a.social-btn.fb {
background: url("img/facebook#2x.png") 0% 0%/ 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.tw {
background: url("img/twitter#2x.png") 0% 0% / 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.ig {
background: url("img/instagram#2x.png") 0% 0% / 20px 20px no-repeat;
}
a.social-btn.gp {
background: url("img/google#2x.png") 0% 0% / 20px 20px no-repeat;
}
section {
width: 900px;
margin: 0 auto;
}
section#header .wrapper button.green-button {
text-decoration: none;
font-family: 'Raleway';
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
/* float: left; */
right: 0;/* add */
position: absolute;/* add */
/* margin-left: 235px; */
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social"><a class="social-btn fb" href="http://facebook.com"></a></div>
<div class="social"><a class="social-btn tw" href="http://twitter.com"></a></div>
<div class="social"><a class="social-btn ig" href="http://instagram.com"></a></div>
<div class="social"><a class="social-btn gp" href="https://plus.google.com"></a></div>
<button class="green-button">Book Consultation</button>
</div>
</section>
So, I'm using a while loop with PHP. The while loop makes the following code:
<img src='$user_six' class='avatar_friend'>
Please don't worry about $user_six or the background info on the while loop. I know it works. I'm trying to put three avatars on top of a movie. The problem is that each image takes space and is ruining the spacing with the movies.
This is the information of .avatar_friend:
.avatar_friend {
width: 36px;
height: 36px;
position: relative;
z-index: 10;
border: 1px solid white;
}
I think absolute positioning works better, but the images overlap each other.
This is the information of .avatar_friend:
.avatar_friend {
width: 36px;
height: 36px;
position: absolute;
z-index: 10;
border: 1px solid white;
}
How can I have the best of both positions? I want proper spacing, but no overlapping. How can I achieve this effect?
EDIT:
I've tried doing the following:
html
<div id='container'> <img src='$user_six' class='avatar_friend'> </div>
css
#container {
position: absolute;
}
.avatar_friend {
width: 36px;
height: 36px;
position: relative;
z-index: 10;
border: 1px solid white;
}
This did not work...
EDIT 2:
html
<!DOCTYPE html>
<html>
<head>
<title> Movies </title>
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src='main.js'></script>
</head>
<body>
<!-- Navigation -->
<div id='nav'>
<!-- Profile Wrapper -->
<ul class="profile-wrapper">
<li>
<!-- user profile -->
<div class="profile">
<img src="avatars/default.png" />
MatthewMalan <i class="fa fa-caret-down" id="caret-down"></i>
<!-- more menu -->
<ul class="menu">
<li>Sign Out</li>
<li>Sign Out</li>
<li>Sign Out</li>
</ul>
</div>
</li>
</ul>
<!-- End of Profile Wrapper -->
</div>
<!-- End of Navigation -->
<!-- Movie Content -->
<div id='movie_content2'>
<div id='movie_line'>
<div id='movie_line2'></div>
<!-- Dropdown Selection -->
<nav>
<ul id="dropdown_selection">
<li>Most Recent
<ul>
<li> Most Liked </li>
<li> My History </li>
<li> My Likes </li>
</ul>
</li>
</ul>
</nav>
<!-- End of Dropdown Selection -->
<div id='descriptive_div' number='1'> <i class='fa fa-caret-left' id='descriptive_caret' number='1'></i> <a href='like.php?number=7&page=1'><a href='like.php?number=7&page=1&code=1&sorting=recent'> <div class='like_button' number='1'> Like </div> </a></a> <span id='descriptive_div_text'> Professional, Clean, Ready to Go </span> <div id='files_left'> 3 Copies Left </div> </div><a href='open.php?destination=movies/56c7ede7d3ed3658.44679765.mp4'> <div class='movie_length' number='1'> <div id='movie_length_text' number='1'> 1h 20m </div> </div> </a><a href='open.php?destination=movies/56c7ede7d3ed3658.44679765.mp4'> <div class='movie_rating3' number='1'> <span id='movie_rating_text' number='1'> G </span> </div> </a><a href='open.php?destination=movies/56c7ede7d3ed3658.44679765.mp4'> <img src='covers/inside.jpg' class='movie_size' number='1'> </a><div id='descriptive_div' number='2'> <i class='fa fa-caret-left' id='descriptive_caret' number='2'></i> <a href='like.php?number=8&page=1'><a href='like.php?number=8&page=1&code=1&sorting=recent'> <div class='like_button' number='2'> Like </div> </a></a> <span id='descriptive_div_text'> s </span> <div id='files_left'> 1 Copy Left </div> </div><a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'> <div class='movie_length' number='2'> <div id='movie_length_text' number='2'> 2h 16m </div> </div> </a><a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'> <div class='movie_rating' number='2'> <span id='movie_rating_text' number='2'> PG-13 </span> </div> </a><a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'> <img src='covers/star wars.jpg' class='movie_size' number='2'> </a><img src='avatars/sam.jpg' class='avatar_friend'><img src='avatars/traek.jpg' class='avatar_friend'><img src='avatars/jessie.jpg' class='avatar_friend'><div id='descriptive_div' number='3'> <i class='fa fa-caret-left' id='descriptive_caret' number='3'></i> <a href='like.php?number=9&page=1'><a href='like.php?number=9&page=1&sorting=recent'> <div class='liked_button' number='3'> Like </div> </a></a> <span id='descriptive_div_text'> r </span> <div id='files_left'> 7 Copies Left </div> </div><a href='open.php?destination=movies/56e06853166618.33290858.mp4'> <div class='movie_length' number='3'> <div id='movie_length_text' number='3'> r </div> </div> </a><a href='open.php?destination=movies/56e06853166618.33290858.mp4'> <div class='movie_rating4' number='3'> <span id='movie_rating_text' number='3'> PG-13 </span> </div> </a><a href='open.php?destination=movies/56e06853166618.33290858.mp4'> <img src='covers/56e068530dc9f9.52895782.jpg' class='movie_size3' number='3'> </a><br><div class="complete_page">1</div> </div>
</div>
<!-- End of Movie Content -->
</body>
</html>
css
/* Rating of Movie Content */
.movie_rating, .movie_rating2, .movie_rating3, .movie_rating4, .movie_rating5, .movie_rating6, .movie_length, .movie_length2 {
display: inline-block;
width: 100px;
height: 30px;
background: #E10E0D;
color: white;
text-align: center;
position: absolute;
z-index: 5;
font-family: 'Days One', sans-serif;
cursor: pointer;
margin-top: -10px;
margin-left: 16px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid #FE4042;
}
.movie_rating4, .movie_rating5, .movie_rating6 {
background: #7D5505;
border: 1px solid #F9BA01;
}
.movie_length, .movie_length2 {
width: 120px;
background: #02477D;
border: 1px solid #97D0F2;
margin-top: 239px;
}
.movie_length2 {
width: 75px;
}
.movie_rating2, .movie_rating5 {
width: 60px;
}
.movie_rating3, .movie_rating6 {
width: 40px;
}
#movie_rating_text, #movie_length_text {
font-size: 25px;
position: relative;
top: 0px;
font-family: 'Days One', sans-serif;
letter-spacing: 1px;
}
/* Description of Movie */
#descriptive_div {
position: absolute;
width: 400px;
min-height: 241px;
background: black;
color: white;
z-index: 6;
margin-left: 228px;
margin-top: -10px;
font-size: 16px;
line-height: 25px;
padding-bottom: 30px;
border: 5px solid #ccc;
display: none;
}
#descriptive_div_text {
width: 370px;
display: inline-block;
position: relative;
left: 14px;
top: 14px;
text-align: left;
}
#descriptive_caret {
color: #ccc;
font-size: 51px;
position: absolute;
margin-left: -19px;
margin-top: 115px;
display: none;
}
/* End of Description of Movie */
/* Movie Line */
#movie_line2 {
width: 1px;
height: 635px;
background: #ccc;
position: absolute;
left: 1120px;
top: 10px;
z-index: 2;
}
/* End of Movie Line */
/* End of Rating of Movie Content */
/* Like Button */
.like_button, .liked_button {
background: #0566AE;
width: 50px;
padding: 3px;
color: white;
text-align: center;
position: absolute;
margin-left: -95px;
z-index: 6;
border-radius: 3px;
cursor: pointer;
font-family: 'Days One', sans-serif;
font-size: 18px;
letter-spacing: 1px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.liked_button {
background: #2C599D;
margin-left: -95px;
margin-top: 0;
}
.like_button:hover {
background: #2C599D;
}
.show {
opacity: 1;
}
/* End of Like Button */
/* End of Movie Content */
/* Tab System for admin.php */
h1, h2, h3, h4 {
padding: 0;
margin: .1rem 0;
border-left: 4px solid #4F2CCA;
padding-left: 8px;
}
.material-tabs {
display: block;
float: left;
padding: 16px;
padding-top: 0;
width: 100%;
max-width: 480px;
left: calc(50% - 480px/2);
position: relative;
margin: 96px auto;
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
border-radius: 2px;
}
#media all and (max-width: 480px) {
.material-tabs {
max-width: 100%;
left: 0;
}
}
.visible {
position: relative;
opacity: 1;
width: 100%;
height: auto;
float: left;
-webkit-transition: opacity .35s ease;
transition: opacity .35s ease;
z-index: 3;
}
.hidden {
position: absolute;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 0s ease;
transition: opacity 0s ease;
}
.hidden img {
display: none;
}
[class*="tabbed-section-"] {
float: left;
color: #000;
}
[class*="tabbed-section-"] img {
display: block;
width: 80%;
margin: auto 10%;
}
.tabbed-section__selector {
position: relative;
height: 32px;
top: -31.2px;
left: -16px;
padding: 0;
margin: 0;
width: 100%;
float: left;
}
.tabbed-section__selector [class*="-tab-"] {
float: left;
display: block;
height: 32px;
line-height: 32px;
width: 100px;
text-align: center;
background: #fff;
font-weight: bold;
text-decoration: none;
color: black;
font-size: 14px;
}
.tabbed-section__selector [class*="-tab-"].active {
color: #4F2CCA;
}
.tabbed-section__selector a:first-child {
border-top-left-radius: 2px;
}
.tabbed-section__selector a:last-of-type {
border-top-right-radius: 2px;
}
.tabbed-section__highlighter {
position: absolute;
z-index: 10;
bottom: 0;
height: 2px;
background: #4F2CCA;
max-width: 100px;
width: 100%;
-webkit-transform: translateX(0);
transform: translateX(0);
display: block;
left: 0;
-webkit-transition: -webkit-transform 0.23s ease;
transition: -webkit-transform 0.23s ease;
transition: transform 0.23s ease;
transition: transform 0.23s ease, -webkit-transform 0.23s ease;
}
.tabbed-section__selector-tab-3.active ~ .tabbed-section__highlighter {
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
.tabbed-section__selector-tab-2.active ~ .tabbed-section__highlighter {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
.tabbed-section__selector-tab-1.active ~ .tabbed-section__highlighter {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.divider {
background: rgba(0, 0, 0, 0.1);
position: relative;
display: block;
float: left;
width: 100%;
height: 1px;
margin: 8px 0;
padding: 0;
overflow: hidden;
}
/* End of Tab system for admin.php */
/* Create */
#title, #length {
font-size: 16px;
border: 1px solid #ccc;
padding: 11px;
outline: none;
border-radius: 3px;
width: 400px;
}
#title:focus, #description:focus, #length:focus {
border: 1px solid #A9A9A9;
}
#description {
font-size: 16px;
border: 1px solid #ccc;
padding: 11px;
outline: none;
border-radius: 3px;
width: 400px;
resize: vertical;
max-height: 70px;
}
#rating_text {
position: relative;
top: -10px;
}
#length_text {
position: relative;
top: -10px;
}
/* End of Create */
/* Dropdown Selection */
nav {
margin: 10rem auto;
width: 220px;
position: absolute;
left: 1150px;
top: -140px;
}
nav ul {
color: #fff;
font-family: sans-serif;
font-size: 1.4rem;
letter-spacing: .1rem;
position: relative;
width: 100%;
}
nav a {
background: #1A1A1A;
color: inherit;
display: block;
text-decoration: none;
padding: 1rem;
}
nav ul ul a:hover {
background: #666;
}
nav ul ul {
display: none;
padding-top: 1rem;
position: absolute;
}
nav ul:hover ul {
display: block;
}
nav ul:first-child:hover > li:first-child:before {
border: .7rem solid transparent;
border-top-color: #fff;
}
nav ul ul > li:not(:last-child) {
border-bottom: 1px solid white;
}
nav ul > li:first-child:before {
content: "";
position: absolute;
}
nav ul:first-child > li:first-child:before {
border: .7rem solid transparent;
border-top-color: #fff;
pointer-events: none;
left: 175px;
top: 30px;
}
.fa {
margin-right: .5rem;
}
/* End of Dropdown Selection */
/* Files Left */
#files_left {
color: red;
width: 110px;
padding: 1px;
border: 1px solid red;
text-align: center;
border-radius: 10%;
position: relative;
left: 15px;
top: 20px;
}
/* End of Files Left */
/* Avatar */
.avatar_friend {
width: 36px;
height: 36px;
position: relative;
z-index: 10;
border: 1px solid white;
}
/* End of Avatar */
Some of the CSS may be for other pages. I realize this is a lot of information. Let me know if you need anything else...
First of all, you use the same id in 6 elements for every movie, which you shouldn't. An id is unique, so change that to like 'descriptive_div_1', 'descriptive_caret_1', etc (I did that in the samples below so you can see where).
This is how a movie section looks like (repeated for each movie, no wrapper around each of them)
<div id='descriptive_div_2' number='2'>
<i class='fa fa-caret-left' id='descriptive_caret_2' number='2'></i>
<a href='like.php?number=8&page=1'>
<a href='like.php?number=8&page=1&code=1&sorting=recent'>
<div class='like_button' number='2'> Like </div>
</a>
</a>
<span id='descriptive_div_text_2'> s </span>
<div id='files_left_2'> 1 Copy Left </div>
</div>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_length' number='2'>
<div id='movie_length_text_2' number='2'> 2h 16m </div>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_rating_2' number='2'>
<span id='movie_rating_text_2' number='2'> PG-13 </span>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<img src='covers/star wars.jpg' class='movie_size' number='2'>
</a>
<img src='avatars/sam.jpg' class='avatar_friend'>
<img src='avatars/traek.jpg' class='avatar_friend'>
<img src='avatars/jessie.jpg' class='avatar_friend'>
So to be able to target each avatar_friend in each movie section, you need CSS rules like this
.avatar_friend {
width: 36px;
height: 36px;
position: absolute;
z-index: 10;
border: 1px solid white;
}
div[number] + a + a + a ~ .avatar_friend:nth-of-type(3n+1) {
left: 0px;
}
div[number] + a + a + a ~ .avatar_friend:nth-of-type(3n+2) {
left: 36px;
}
div[number] + a + a + a ~ .avatar_friend:nth-of-type(3n+3) {
left: 72px;
}
The problem with this is you need to know how many avatars_friend's it is, as you need to change the nth-of-type counter and the amount of CSS rules accordingly.
By adding a wrapper like this for the avatar's, will fix it for you
<div id='descriptive_div_2' number='2'>
<i class='fa fa-caret-left' id='descriptive_caret_2' number='2'></i>
<a href='like.php?number=8&page=1'>
<a href='like.php?number=8&page=1&code=1&sorting=recent'>
<div class='like_button' number='2'> Like </div>
</a>
</a>
<span id='descriptive_div_text_2'> s </span>
<div id='files_left_2'> 1 Copy Left </div>
</div>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_length' number='2'>
<div id='movie_length_text_2' number='2'> 2h 16m </div>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_rating_2' number='2'>
<span id='movie_rating_text_2' number='2'> PG-13 </span>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<img src='covers/star wars.jpg' class='movie_size' number='2'>
</a>
<div class='avatar_friend_wrapper'>
<img src='avatars/sam.jpg' class='avatar_friend'>
<img src='avatars/traek.jpg' class='avatar_friend'>
<img src='avatars/jessie.jpg' class='avatar_friend'>
</div>
.avatar_friend_wrapper {
position: absolute;
left: 0;
}
.avatar_friend {
width: 36px;
height: 36px;
position: relative;
z-index: 10;
border: 1px solid white;
}
What I recommend to do, would be to change your PHP loops so they generate something like this instead, where each movie item has its own wrapper.
With that you get a completely different control how to layout each movie info item based on screen size etc.
<div class='movie_div_2' number='2'>
<div id='descriptive_div_2' number='2'>
<i class='fa fa-caret-left' id='descriptive_caret_2' number='2'></i>
<a href='like.php?number=8&page=1'>
<a href='like.php?number=8&page=1&code=1&sorting=recent'>
<div class='like_button' number='2'> Like </div>
</a>
</a>
<span id='descriptive_div_text_2'> s </span>
<div id='files_left_2'> 1 Copy Left </div>
</div>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_length' number='2'>
<div id='movie_length_text_2' number='2'> 2h 16m </div>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<div class='movie_rating_2' number='2'>
<span id='movie_rating_text_2' number='2'> PG-13 </span>
</div>
</a>
<a href='open.php?destination=movies/56c7ede7d3ed3108.44679765.mp4'>
<img src='covers/star wars.jpg' class='movie_size' number='2'>
</a>
<div class='avatar_friend_wrapper'>
<img src='avatars/sam.jpg' class='avatar_friend'>
<img src='avatars/traek.jpg' class='avatar_friend'>
<img src='avatars/jessie.jpg' class='avatar_friend'>
</div>
</div>
I've been trying to get this list of buttons to have a scroll bar and scroll on table and smaller screens. I've add two divs for inner and outter to add overflow: hidden on outter and overflow: auto on inner. I can't seem to get this to work. Can anyone tell me what I'm missing?
Created a JSFiddle as asked and it works here. Maybe it is an issue with my SASS
http://jsfiddle.net/tuckerjoenz/p9afq4y9/
HTML
<div class="circle-outer">
<div class="circle-button-menu-container">
<ul class="field field-name-field-link-button field-type-entityreference field-label-hidden">
<li class="link-button">
<span property="dc:title" class="rdf-meta element-hidden"></span>
<a class="circle-button" href="#parents">
<div class="circle-image">
<img class="active" src="../images/Parent_2_0.jpg">
</div>
<div class="button-title">Parents</div>
</a>
</li>
<li class="link-button">
<span property="dc:title" class="rdf-meta element-hidden"></span>
<a class="circle-button" href="#kids">
<div class="circle-image">
<img class="active" src="../images/kids_JPEG_0.jpg">
</div>
<div class="button-title">Kids</div>
</a>
</li>
<li class="link-button">
<span property="dc:title" class="rdf-meta element-hidden"></span>
<a class="circle-button" href="#educators">
<div class="circle-image">
<img class="active" src="../images/Educator_JPEG_0.jpg">
</div>
<div class="button-title">Educators</div>
</a>
</li>
<li class="link-button">
<span property="dc:title" class="rdf-meta element-hidden"></span>
<a class="circle-button" href="#volunteer">
<div class="circle-image">
<img class="active" src="../images/volunteer_JPEG_0.jpg">
</div>
<div class="button-title">Volunteer</div>
</a>
</li>
</ul>
</div>
</div>
SASS
.circle-outer {
height: 350px;
display: block;
margin: 0 auto;
width: 100%;
margin-top: -200px;
padding: 100px 0px 0px;
overflow: hidden;
.circle-button-menu-container {
overflow: auto;
.field-name-field-link-button {
text-align: center;
display: block;
width: 1000%;
z-index: 100;
list-style-type: none;
position: absolute;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
.link-button {
margin: 0px 46px 10px;
float: left;
text-decoration: none;
list-style: none;
position: relative;
display: block;
width: 170px;
a.circle-button {
display: block;
text-decoration: none;
.circle-image {
border: 10px solid white;
border-radius: 50%;
box-shadow: 0 4px 2px -2px gray;
overflow: hidden;
width: 170px;
height: 170px;
img {
display: block;
min-width: 100%;
min-height: 100%;
width: 100%;
}
&:hover, &:active {
border: 10px solid #b6b6b6;
box-shadow: none;
}
}
.button-title {
text-transform: uppercase;
color: #40749e;
font-weight: bold;
font-size: 1.3em;
margin-top: 10px;
}
&:before, &:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
&:before {
bottom: -33px;
left: 39%;
border-top-color: #b6b6b6;
border-width: 17px;
}
&:after {
bottom: -28px;
left: 40%;
border-top-color: #fff;
border-width: 15px;
}
}
}
}
}
}
Ok I figured this out. I had to remove the position: absolue on the .circle-button-menu-container class and it works! Thanks!
You could try overflow:scroll