The problem is that sidebar menu list items breaks parent boundary. How can i fix this, kind of not let childs go beyond parent width?
Working on sliding out from left side navigation site menu.
It looks fine as is, the actual problem happens when i hover over list items.
As you can see list items reveals themself immideately, going beyond parent boundary. This looks awful. I pretty sure the issue can be fixed with css, but unfortunately my knoweledge is not solid at this moment. Could you please help me out with the solution to the issue? Thanks in advance!
This image shows what the correct behaviour should be.
body {
font-family: 'Open Sans', sans-serif;
}
img {
position: relative;
color: #999;
}
#one {
padding: 17px 15px 15px 17px;
}
#two {
padding: 20px 14px 15px 12px;
}
#three {
padding: 15px 17px 15px 15px;
}
#four {
padding: 20px 16px 15px 17px;
}
#five {
padding: 20px 14px 15px 17px;
}
#six {
padding: 17px 14px 15px 14px;
}
nav {
background: #1b1e22;
border-right: 1px solid #e5e5e5;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: 0;
width: 60px;
overflow: hidden;
transition: width .5s linear;
}
nav > ul {
margin: 7px 0;
}
nav li {
position: relative;
display: block;
width: 250px;
transition: width .5s linear;
border-bottom: 1px solid #24272a;
}
nav li > a {
height: 60px;
color: #999;
font-size: 14px;
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
padding: 15px 0;
text-decoration: none;
-webkit-transition: all 5s linear;
transition: all 5s linear;
}
nav span {
position: relative;
display: table-cell;
vertical-align: middle;
width: 190px;
}
a:hover,
a:focus {
text-decoration: none;
}
nav {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
li a:hover {
color: #104E8B;
background-color: #343536;
}
.main-menu:hover,
nav.main-menu.expanded {
width: 250px;
overflow: visible;
}
<body>
<nav class="main-menu">
<ul>
<li>
<a href="#">
<img id="one" src="https://i.imgur.com/RcWtM2a.png" alt="" />
<span class="nav-text">
Строительные проекты
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<img id="two" src="https://i.imgur.com/wKDZKMl.png" alt="" />
<span class="nav-text">
Строительные товары
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<img id="three" src="https://i.imgur.com/oztvKJ0.png" alt="" />
<span class="nav-text">
Строительные работы
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<img id="four" src="https://i.imgur.com/MT1dCFF.png" alt="" />
<span class="nav-text">
Недвижемость
</span>
</a>
</li>
<li>
<a href="#">
<img id="five" src="https://i.imgur.com/uICbjKw.png" alt="" />
<span class="nav-text">
Мебель
</span>
</a>
</li>
<li>
<a href="#">
<img id="six" src="https://i.imgur.com/nHnYpBg.png" alt="" />
<span class="nav-text">
Строител. калькулятор
</span>
</a>
</li>
</ul>
</nav>
</body>
You will have to consider width for the transition and must keep overflow hidden as it is for following class:
.main-menu:hover,
nav.main-menu.expanded {
width: 250px;
transition: width .5s linear;
}
Here is the updated codepen
http://codepen.io/anon/pen/PqbEqj
Related
I currently have an angular app that has a nav bar made up of a tags, now when the player logs in i have an ngIf for a my profile icon to show with dropdowns but I cant get it styled correctly, I just want sort of that spanner icon on the top right of the nav bar and when clicked it shows options. This is what I have so far:
<div class="page-links responsive" [ngClass]="{'animate': shouldShow}">
<a [routerLink]="''"
[routerLinkActive]="'active'"
[routerLinkActiveOptions]="{exact: true}"
draggable="false"
(click)="toggleMenu()">
Home
</a>
<a [routerLink]="'/university'"
[routerLinkActive]="'active'"
draggable="false"
(click)="toggleMenu()">
University Cup
</a>
<a [routerLink]="'/rules'"
[routerLinkActive]="'active'"
draggable="false"
(click)="toggleMenu()">
The Game
</a>
<a [routerLink]="'/tournaments'"
[routerLinkActive]="'active'"
draggable="false"
(click)="toggleMenu()">
Tournaments
</a>
<a [routerLink]="'/history'"
[routerLinkActive]="'active'"
draggable="false"
(click)="toggleMenu()">
Our Legacy
</a>
<a [routerLink]="'/team'"
[routerLinkActive]="'active'"
draggable="false"
(click)="toggleMenu()">
Our Team
</a>
<a [routerLink]="'/portal'"
[routerLinkActive]="'active'"
draggable="false"
(click)="toggleMenu()">
Player Portal
</a>
<a *ngIf="isAuthed">
<mat-form-field appearance="fill">
<mat-label><mat-icon>accessibility</mat-icon></mat-label>
<mat-select>
<mat-option value="option1">My Profile</mat-option>
<mat-option value="option2">GitHub Instructions</mat-option>
<mat-option value="option3">Download CICD file</mat-option>
<mat-option value="option4">Logout</mat-option>
</mat-select>
</mat-form-field>
</a>
</div>
My css:
.page-links {
#media (max-width: $screen-md-max) {
position: absolute;
top: 80px;
right: 0;
left: 0;
}
a {
display: inline-block;
height: 80px;
line-height: 80px;
padding: 0 8px;
margin: 0 8px;
overflow: hidden;
transition-property: height, border-width, underline, background-color, color;
transition: ease-in-out 350ms;
font-weight: bold;
&, &:active, &:focus, &:visited {
text-decoration: none;
color: white;
}
&:hover {
color: $title;
background-color: rgba(255, 255, 255, 0.1);
}
&.active {
color: $title;
}
}
li {
display: inline-block;
height: 80px;
line-height: 80px;
padding: 0 8px;
margin: 0 8px;
overflow: hidden;
transition-property: height, border-width, underline, background-color, color;
transition: ease-in-out 350ms;
font-weight: bold;
&, &:active, &:focus, &:visited {
text-decoration: none;
color: grey;
}
}
&.responsive {
#media (max-width: $screen-md-max) {
display: inline-block;
width: 100%;
background: $primary-darker;
a {
position: relative;
float: none;
display: block;
text-align: left;
height: 0;
line-height: 50px;
padding: 0 16px;
margin: 0;
border-top: 0 solid white;
}
li {
position: relative;
float: none;
display: block;
text-align: left;
height: 0;
line-height: 50px;
padding: 0 16px;
margin: 0;
border-top: 0 solid white;
}
&.animate {
a {
height: 50px;
border-width: 1px;
}
}
}
}
}
But my code renders like this:
Rendered Code
What can i do to fix this?
Please add two more div's and add independent classes. and format by using the CSS it will work
<div class="left-menu">
<a>Home</a>
<a>University Cup</a>
<a>The Game</a>
<a>Tournaments</a>
<a>Our Legacy </a>
<a>Our Team</a>
<a>Player Portal</a>
</div>
<div class="right-menu">
<a *ngIf="isAuthed">
<mat-form-field></mat-form-field>
</a>
</div>
</div>
<style>
.left-menu{
float: left;
width:80%;
}
.right-menu {
float: left;
width: 20%;
}
</style>
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
Unabridged Explanation
Last night I was working on replicating an interesting Codepen I found. After I finished it, I was extremely happy with how it worked. Since I wasn't planning on using it in production, I neglected to use the proper CSS prefixes to insure cross-browser compatibility. However, when I decided to check it in Safari and Firefox I noticed that my ":hover" events weren't translating properly, and so far I have been unable to fix it. I do not need this project for anything, but I would like some help figuring out why this is occurring so I can be prepared to address this issue in future developments.
Direct Problem
In Firefox and Safari, when you mouse over the menu items that are to the right of the "Fly-Out" menu headers they collapse, whereas in Chrome they remain out.
I would like to stress that I understand why certain features like the transitions aren't working, as I didn't specify the "webkit" or "moz" prefix for most of them. It is simply the collapsing menu that's troubling me.
Code
ul.sidebar {
display: block;
position: absolute;
margin: 0;
left: 0;
height: 100%;
width: 6.5em;
background: #aa2266;
padding: 0;
text-align: center;
}
ul.sidebar * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul.sidebar a {
color: white;
text-decoration: none;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
ul.sidebar a > i {
margin-top: 0.13333em;
font-size: 2em;
display: block;
margin-bottom: 0.2em;
}
ul.sidebar a > span {
font-size: 0.8em;
font-family: sans-serif;
}
ul.sidebar li {
transition: background 0.3s;
background: #aa2266;
}
ul.sidebar > li {
margin: 0;
padding: 0;
height: 4em;
display: inline-block;
position: relative;
width: 100%;
background: #aa2266;
transition: background 0.3s;
}
ul.sidebar > li:hover {
background: #dc3278;
}
ul.sidebar > li:hover:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 6px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
}
ul.sidebar > li > a {
transition: background 0.3s;
}
ul.sidebar > li > a:hover {
background: #ff5f87;
}
ul.sidebar > li > ul {
overflow: hidden;
height: 4em;
padding: 0;
position: absolute;
z-index: -1;
margin: 0;
color: red;
left: 100%;
transition-delay: 0.3s;
transition-property: transform;
transition-duration: 0.6s;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
width: auto;
list-style: none;
white-space: nowrap;
top: 0;
background: #dc3278;
}
ul.sidebar > li > ul > li {
overflow: hidden;
background: none;
margin: 0 0px 0 -4px;
padding: 0;
display: inline-block;
width: 6.5em;
height: 4em;
transition: background 0.3s;
}
ul.sidebar > li > ul > li:hover {
background: #fa648c;
}
ul.sidebar li:hover > ul {
-webkit-transform: translateX(0);
transform: translateX(0);
}
ul.sidebar li:hover > ul > li {
color: white;
}
body {
padding: 0;
position: fixed;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #450f30;
}
description {
position: absolute;
bottom: 0;
right: 0;
padding: 0 0.4em 1em 0;
color: white;
font-size: 20px;
font-family: times new roman;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<description>
Full Stack Developer
</description>
<ul class="sidebar">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>
My Projects
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-question-circle"></i>
<span>Nothing</span>
</a>
</li>
<li>
<a>
<i class="fa fa-square"></i>
<span>Boxes for all</span>
</a>
</li>
<li>
<a>
<i class="fa fa-th-large"></i>
<span>More boxes</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-info-circle"></i>
<span>
About
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-eye"></i>
<span>I have eyes</span>
</a>
</li>
<li>
<a>
<i class="fa fa-bed"></i>
<span>and a bed</span>
</a>
</li>
<li>
<a>
<i class="fa fa-heartbeat"></i>
<span>plus cool icons</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-globe">
</i>
<span>
Links
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-external-link"></i>
<span>No Links</span>
</a>
</li>
<li>
<a>
<i class="fa fa-fire"></i>
<span>For the wicked</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-envelope-o"></i>
<span>
Contact
</span>
</a>
<ul>
<li>
<a href="mailto:alec.menke#gmail.com">
<i class="fa fa-user"></i>
<span style="font-size: 8px;">alec.menke#gmail.com</span>
</a>
</li>
</ul>
</li>
</ul>
Code Pen
The problem wasn't the vendor prefixes for transforms and transition. The problem was z-index: -1 property. By definition, element with absolute position should be on top of all the elements positioned inline or relative. The trick with -1 worked and placed it below the parent menu element which has position relative. However, in Firefox and IE it was placed even below the body, so when the mouse hovers on dropped menu in fact in hovers on body, i.e. out of the parent menu <li> element.
To solve this problem I made the changes:
In the ul.sidebar > li > a class changed z-index to 1, and added the following properties to the ul.sidebar > li > a class:
position: absolute;
left: 0;
background: #aa2266;
z-index: 1;
I've checked the result on Firefox and Internet Explorer and now it works fine :)
ul.sidebar {
display: block;
position: absolute;
margin: 0;
left: 0;
height: 100%;
width: 6.5em;
background: #aa2266;
padding: 0;
text-align: center;
}
ul.sidebar * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul.sidebar a {
color: white;
text-decoration: none;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
ul.sidebar a > i {
margin-top: 0.13333em;
font-size: 2em;
display: block;
margin-bottom: 0.2em;
}
ul.sidebar a > span {
font-size: 0.8em;
font-family: sans-serif;
}
ul.sidebar li {
transition: background 0.3s;
background: #aa2266;
}
ul.sidebar > li {
margin: 0;
padding: 0;
height: 4em;
display: inline-block;
position: relative;
width: 100%;
background: #aa2266;
transition: background 0.3s;
}
ul.sidebar > li:hover {
background: #dc3278;
}
ul.sidebar > li:hover:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 6px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
}
ul.sidebar > li > a {
position: absolute;
left: 0;
background: #aa2266;
z-index: 1;
transition: background 0.3s;
}
ul.sidebar > li > a:hover {
background: #ff5f87;
}
ul.sidebar > li > ul {
overflow: hidden;
height: 4em;
padding: 0;
position: absolute;
z-index: 0;
margin: 0;
color: red;
left: 100%;
transition-delay: 0.3s;
transition-property: transform;
transition-duration: 0.6s;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
width: auto;
list-style: none;
white-space: nowrap;
top: 0;
background: #dc3278;
}
ul.sidebar > li > ul > li {
overflow: hidden;
background: none;
margin: 0 0px 0 -4px;
padding: 0;
display: inline-block;
width: 6.5em;
height: 4em;
transition: background 0.3s;
}
ul.sidebar > li > ul > li:hover {
background: #fa648c;
}
ul.sidebar li:hover > ul {
-webkit-transform: translateX(0);
transform: translateX(0);
}
ul.sidebar li:hover > ul > li {
color: white;
}
body {
padding: 0;
position: fixed;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #450f30;
}
description {
position: absolute;
bottom: 0;
right: 0;
padding: 0 0.4em 1em 0;
color: white;
font-size: 20px;
font-family: times new roman;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<description>
Full Stack Developer
</description>
<ul class="sidebar">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>
My Projects
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-question-circle"></i>
<span>Nothing</span>
</a>
</li>
<li>
<a>
<i class="fa fa-square"></i>
<span>Boxes for all</span>
</a>
</li>
<li>
<a>
<i class="fa fa-th-large"></i>
<span>More boxes</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-info-circle"></i>
<span>
About
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-eye"></i>
<span>I have eyes</span>
</a>
</li>
<li>
<a>
<i class="fa fa-bed"></i>
<span>and a bed</span>
</a>
</li>
<li>
<a>
<i class="fa fa-heartbeat"></i>
<span>plus cool icons</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-globe">
</i>
<span>
Links
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-external-link"></i>
<span>No Links</span>
</a>
</li>
<li>
<a>
<i class="fa fa-fire"></i>
<span>For the wicked</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-envelope-o"></i>
<span>
Contact
</span>
</a>
<ul>
<li>
<a href="mailto:alec.menke#gmail.com">
<i class="fa fa-user"></i>
<span style="font-size: 8px;">alec.menke#gmail.com</span>
</a>
</li>
</ul>
</li>
</ul>
I have following code:
<div class="settingsMenu" style="top: 135px; left: 149px; display: block;">
<ul>
<li class="download" onclick="downTemplate('template1')">Download</li>
<li class="delete" onclick="showConfirmationDialog ($(this))">
Delete
<div class="deleteItemConfirmation">
<div class="confirmationText">Are you sure?</div>
<div class="buttons"><button onclick="deleteTemplate ('template1')">Yes</button> <button onclick="hideConfirmationDialog();">No</button></div>
</div>
</li>
<li class="info">Info</li>
</ul>
</div>
CSS:
.settingsMenu{
position: absolute;
top: 0;
left: 0;
display: none;
background-color: #FFFFFF;
border: 1px solid #b5044a;
border-radius: 5px;
width: 150px;
padding: 10px 0;
margin: 0;
z-index: 200;
}
.settingsMenu ul{
list-style-type: none;
width: 100%;
margin: 0px;
padding: 0;
}
.settingsMenu ul li {
color: #000000;
cursor: pointer;
float: left;
font-size: 14px;
font-weight: normal;
font-family: Arial;
height: 18px;
max-width: 100px;
margin: 5px 20px;
padding: 0;
display: block;
padding-left: 30px;
}
.settingsMenu ul li.edit{
background: url("../img/edit-context-menu-icon.svg") no-repeat scroll center left white;
}
.settingsMenu ul li.delete{
background: url("../img/delete-context-menu-icon.svg") no-repeat scroll center left white;
}
.settingsMenu ul li.info{
background: url("../img/info-context-menu-icon.svg") no-repeat scroll center left white;
}
Problem is: while div.deleteItemConfirmation has "display: none;" everything is displaying correctly, when it`s display property becomes "display: block;" strange space appears before text of
<li>Delete</li>
Try changing
<li class="delete" onclick="showConfirmationDialog ($(this))">
Delete
To
<li class="delete" onclick="showConfirmationDialog ($(this))">Delete
Could this help you out:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
or
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
or with comments...
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
I took the idea from http://css-tricks.com/fighting-the-space-between-inline-block-elements/ and helped me in a few similar situations.