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>
Related
.img-wrap {
position: relative;
display: inline-block;
}
.img-wrap .close {
position: absolute;
top: 2px;
right: 2px;
z-index: 5;
transition: opacity 0.15s ease-in;
padding: 5px 2px 2px;
color: #000;
font-weight: bold;
cursor: pointer;
opacity: 0;
text-align: center;
font-size: 22px;
line-height: 10px;
border-radius: 50%;
}
.img-wrap:hover .close {
z-index: 10;
background-color: rgb(5 0 0 / 75%);
opacity: 1;
}
<div class="img-wrap">
<i class="fas fa-trash-alt fa-lg text-white"></i>
<div class="media">
<i class="fal fa-file fa-4x icon-pdf d-flex mr-3"></i>
<div class="media-body">
<h6 class="mt-0 mb-0 grey-text font-weight-bold">This is an existing File</h6>
<div><small><b class="mr-2">File Name</b>
${filename}
</small>
</div>
</div>
</div>
</div>
☝️This is what I want to display, but ended up like this👇
This works for the image but not for div with text
Just need to mask the background on hover. Got stuck over this.
If i understand your problem you can use a div (i called it layer) absolute positioned above the card and show it when you hover the card.
.img-wrap {
position: relative;
display: inline-block;
width:200px;/* not important */
height:200px;/* not important */
background:#aeaeae;/* not important */
}
.img-wrap .close {
position: absolute;
top: 2px;
right: 2px;
z-index: 5;
transition: opacity 0.15s ease-in;
padding: 5px 2px 2px;
color: #000;
font-weight: bold;
cursor: pointer;
opacity: 0;
text-align: center;
font-size: 22px;
line-height: 10px;
border-radius: 50%;
}
.img-wrap:hover .close {
z-index: 10;
background-color: rgb(5 0 0 / 75%);
opacity: 1;
}
/* add this */
.layer{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
background:rgba(255,255,255,0.9);
display:none;
}
.img-wrap:hover .layer{
display:block;
}
<div class="img-wrap">
<i class="fas fa-trash-alt fa-lg text-white"> x </i>
<div class="layer"> </div>
<div class="media">
<i class="fal fa-file fa-4x icon-pdf d-flex mr-3"></i>
<div class="media-body">
<h6 class="mt-0 mb-0 grey-text font-weight-bold">This is an existing File</h6>
<div><small><b class="mr-2">File Name</b>
${filename}
</small>
</div>
</div>
</div>
</div>
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...
I tried to make a small login box that opens when you hover over the login item in the menu bar, keeping in mind that the user doesn't have to go to another page to log in but I can't get it working.
Please help
body {
background-image: url("back.jpg");
background-attachment: fixed;
}
#container {
height: 1000px;
}
#head {
position: absolute;
height: 150px;
width: 100%;
background-color: #ffffff;
right: 0px;
left: 0px;
top: 0px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
.navigationmenu-main {
list-style-type: none;
overflow: hidden;
background-color: #333;
}
.navigationmenu-parent {
float: left;
}
.navigationmenu-child {
display: inline-block;
color: white;
width: 50px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.navigationmenu-child:hover {
background-color: #111;
}
.navigationmenu-child:hover + .navigationmenu-line {
width: 100%;
}
.navigationmenu-line {
height: 3px;
background-color: red;
width: 0%;
-webkit-transition: width .3s;
-webkit-transition-timing-function: ease;
}
#main {
position: relative;
height: 700px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
top: 155px;
bottom: 100px;
box-shadow: 4px 4px 3px 1px #4d4d4d;
}
#logo-image {
position: relative;
margin-top: 40px;
margin-left: 40px;
}
#logo-image:hover {
-webkit-animation: blur 0.5s ease-in;
}
#-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
50% {
-webkit-filter: blur(1px);
filter: blur(2px);
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
}
.login-parent {
float: right;
}
.login-child {
display: inline-block;
color: white;
width: 60px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.login-child:hover {
background-color: #111;
}
.login-child:hover + .navigationmenu-line {
width: 100%;
}
#loginbox {
display: block;
visibility: hidden;
position: absolute;
top: 132px;
right: 90px;
z-index: 999;
background: #a6a6a6;
background-image: linear-gradient(top, #fff, #eee);
padding: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .9);
border-radius: 3px 0 3px 3px;
-webkit-transition: padding .3s;
}
.loginchild:hover + .loginbox {
visibility: visible;
}
#loginform {
padding: 5px;
}
#loginelement {
padding: 5px;
}
<!DOCTYPE html>
<title>
Le Meridian | A home away from home
</title>
<body>
<div id="container">
<div id="head">
<img src="logo.png" id="logo-image" height="20%" width="20%">
<ul id="nav_bar" class="navigationmenu-main">
<li class="navigationmenu-parent">
A
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
B
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
C
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
D
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
E
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
F
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
G
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child">Sign Up</div>
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child" id="trigger">Login ▼</div>
<div class="navigationmenu-line">
</div>
<div id="loginbox">
<form id="loginform">
<input type="text" name="email" id="loginelement">
<br>
<br>
<input type="password" name="password" id="loginelement">
<br>
<br>
<input type="submit" name="loginsubmit" id="loginelement">
<input type="checkbox" name="loggedin" id="loginelement"> Stay Signed In
</form>
</div>
</li>
</ul>
</div>
<div id="main">
dsa
</div>
</div>
</body>
To achieve what want you need to replace the hover code with this code:
.login-parent:hover #loginbox {
visibility: visible;
}
And that keep the loginbox visible as long as the cursor is inside the <li> tag with the class .login-parent.
if you do the hover on the div loginchild it will only show when you hover on that div.
body {
background-image: url("back.jpg");
background-attachment: fixed;
}
#container {
height: 1000px;
}
#head {
position: absolute;
height: 150px;
width: 100%;
background-color: #ffffff;
right: 0px;
left: 0px;
top: 0px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
.navigationmenu-main {
list-style-type: none;
overflow: hidden;
background-color: #333;
}
.navigationmenu-parent {
float: left;
}
.navigationmenu-child {
display: inline-block;
color: white;
width: 50px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.navigationmenu-child:hover {
background-color: #111;
}
.navigationmenu-child:hover + .navigationmenu-line {
width: 100%;
}
.navigationmenu-line {
height: 3px;
background-color: red;
width: 0%;
-webkit-transition: width .3s;
-webkit-transition-timing-function: ease;
}
#main {
position: relative;
height: 700px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
top: 155px;
bottom: 100px;
box-shadow: 4px 4px 3px 1px #4d4d4d;
}
#logo-image {
position: relative;
margin-top: 40px;
margin-left: 40px;
}
#logo-image:hover {
-webkit-animation: blur 0.5s ease-in;
}
#-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
50% {
-webkit-filter: blur(1px);
filter: blur(2px);
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
}
.login-parent {
float: right;
}
.login-child {
display: inline-block;
color: white;
width: 60px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.login-child:hover {
background-color: #111;
}
.login-child:hover + .navigationmenu-line {
width: 100%;
}
#loginbox {
display: block;
visibility: hidden;
position: absolute;
top: 132px;
right: 90px;
z-index: 999;
background: #a6a6a6;
background-image: linear-gradient(top, #fff, #eee);
padding: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .9);
border-radius: 3px 0 3px 3px;
-webkit-transition: padding .3s;
}
.login-parent:hover #loginbox {
visibility: visible;
}
#loginform {
padding: 5px;
}
#loginelement {
padding: 5px;
}
<!DOCTYPE html>
<title>
Le Meridian | A home away from home
</title>
<body>
<div id="container">
<div id="head">
<img src="logo.png" id="logo-image" height="20%" width="20%">
<ul id="nav_bar" class="navigationmenu-main">
<li class="navigationmenu-parent">
A
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
B
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
C
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
D
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
E
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
F
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
G
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child">Sign Up</div>
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child" id="trigger">Login ▼</div>
<div class="navigationmenu-line">
</div>
<div id="loginbox">
<form id="loginform">
<input type="text" name="email" id="loginelement">
<br>
<br>
<input type="password" name="password" id="loginelement">
<br>
<br>
<input type="submit" name="loginsubmit" id="loginelement">
<input type="checkbox" name="loggedin" id="loginelement"> Stay Signed In
</form>
</div>
</li>
</ul>
</div>
<div id="main">
dsa
</div>
</div>
</body>
You had some typos on class names. Also the hover should be on the parent otherwise the box will not render properly. It will flicker as soon as your mouse focus gets out of the child class.
body {
background-image: url("back.jpg");
background-attachment: fixed;
}
#container {
height: 1000px;
}
#head {
position: absolute;
height: 150px;
width: 100%;
background-color: #ffffff;
right: 0px;
left: 0px;
top: 0px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
.navigationmenu-main {
list-style-type: none;
overflow: hidden;
background-color: #333;
}
.navigationmenu-parent {
float: left;
}
.navigationmenu-child {
display: inline-block;
color: white;
width: 50px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.navigationmenu-child:hover {
background-color: #111;
}
.navigationmenu-child:hover + .navigationmenu-line {
width: 100%;
}
.navigationmenu-line {
height: 3px;
background-color: red;
width: 0%;
-webkit-transition: width .3s;
-webkit-transition-timing-function: ease;
}
#main {
position: relative;
height: 700px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
top: 155px;
bottom: 100px;
box-shadow: 4px 4px 3px 1px #4d4d4d;
}
#logo-image {
position: relative;
margin-top: 40px;
margin-left: 40px;
}
#logo-image:hover {
-webkit-animation: blur 0.5s ease-in;
}
#-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
50% {
-webkit-filter: blur(1px);
filter: blur(2px);
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
}
.login-parent {
float: right;
}
.login-child {
display: inline-block;
color: white;
width: 60px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.login-child:hover {
background-color: #111;
}
.login-child:hover + .navigationmenu-line {
width: 100%;
}
#loginbox {
display: block;
visibility: hidden;
position: absolute;
top: 132px;
right: 90px;
z-index: 999;
background: #a6a6a6;
background-image: linear-gradient(top, #fff, #eee);
padding: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .9);
border-radius: 3px 0 3px 3px;
-webkit-transition: padding .3s;
}
.login-parent:hover #loginbox {
visibility: visible;
}
#loginform {
padding: 5px;
}
#loginelement {
padding: 5px;
}
<!DOCTYPE html>
<title>
Le Meridian | A home away from home
</title>
<body>
<div id="container">
<div id="head">
<img src="logo.png" id="logo-image" height="20%" width="20%">
<ul id="nav_bar" class="navigationmenu-main">
<li class="navigationmenu-parent">
A
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
B
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
C
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
D
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
E
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
F
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
G
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child">Sign Up</div>
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child" id="trigger">Login ▼</div>
<div class="navigationmenu-line">
</div>
<div id="loginbox">
<form id="loginform">
<input type="text" name="email" id="loginelement">
<br>
<br>
<input type="password" name="password" id="loginelement">
<br>
<br>
<input type="submit" name="loginsubmit" id="loginelement">
<input type="checkbox" name="loggedin" id="loginelement"> Stay Signed In
</form>
</div>
</li>
</ul>
</div>
<div id="main">
dsa
</div>
</div>
</body>
I have tried a lot to make in correct order but unable to do.
Here is what i am using directly in widget
CSS
<style>
.news_lhs {
display: table-cell;
vertical-align: middle;
position: relative;
width: 100px;
background-color: #fff;
padding: 12px;
border-right: 1px solid #CCC
}
.tab-pane>ul li>.news_rhs {
display: table-cell;
width: auto;
font-size: 16px;
color: #595959;
padding: 10px;
vertical-align: top
}
.tab-pane>ul li>.news_lhs img {
width: 80px;
display: block
}
.tab-pane>ul li>.news_rhs a {
color: #333;
text-decoration: none
}
.tab-pane>ul li>.news_rhs .openlink {
width: 100%;
font-size: 14px;
padding: 0 0 5px;
color: #999;
font-weight: 400
}
.tab-pane>ul li>.news_rhs a.link {
color: #DA0000
}
.tab-pane>ul li>.news_rhs a strong {
font-weight: 400
}
.featureslist h2,
.newslist h2,
.reviewslist h2 {
font-size: 14px;
line-height: 18px;
font-weight: 400
}
.news_rhs h2 {
margin: 0
}
.n_opinion,
.n_sponsored {
line-height: 14px;
padding: 2px 4px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 3px;
white-space: nowrap
}
.xs_sprite i {
background-size: 140px;
background-color: #FFF;
width: 30px;
height: 30px;
bottom: -10%;
left: -10%;
position: absolute;
z-index: 9;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%
}
.xs_sprite.tab-pane>ul li {
border-width: 1px 0;
border-style: solid;
border-color: #CCC;
margin-top: -1px
}
.xs_sprite.tab-pane>ul li>.news_lhs a {
position: relative;
display: block
}
.n_sponsored {
font-size: 10px;
background-color: #fff100;
color: #000
}
.n_opinion {
background-color: #DA0000;
font-size: 14px;
color: #fff
}
.tab_ph {
padding: 0 12px 20px
}
.tab_ph.last {
padding-bottom: 0
}
.tab_ph_dtl {
background-color: #F7F7F7;
margin-top: 0;
display: table;
width: 100%
}
.tab_ph_dtl a {
display: table-row
}
.tab_ph_dtl .count {
width: 100px;
display: table-cell;
padding: 10px;
text-align: center
}
.tab_ph_dtl .count .lg_txt {
font-size: 30px;
line-height: 24px
}
.tab_ph_dtl .count span {
font-size: 18px;
color: #8C8C9A;
display: block
}
.tab_ph_dtl .p_name {
border-left: 1px solid #E4E4E4;
padding: 5px 10px;
display: table-cell;
vertical-align: middle;
color: #595959
}
.tab_ph_dtl .p_name,
.tab_ph_dtl .p_name h2,
.tab_ph_dtl .p_name strong {
font-weight: 400;
margin: 0;
font-size: 18px;
line-height: 20px
}
.tab_ph img {
border-bottom: none;
min-height: 200px
}
.tab_ph img,
.tab_ph_dtl {
border: 1px solid #e4e4e4
}
.tab_ph_dtl {
border-top: none
}
.video_icon {
width: 28px;
height: 36px;
background-position: 2.075% 70.399%
}
#tabs.stick {
position: fixed;
top: 50px;
background: #FFF;
padding: 5px 0 2px;
transition: all .2s ease;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
box-shadow: 0 1px 4px #CCC;
-webkit-box-shadow: 0 1px 4px #CCC;
-moz-box-shadow: 0 1px 4px #CCC;
z-index: 99;
}
</style>`
HTML
<div class="tab_container margin_bottom20">
<div id="latest" class="tab-pane xs_sprite active">
<ul class="newslist" id="news-view">
<div class="news_lhs">
<a href="#"><img width="80" height="60" alt="" title="Google Makes It Easier to Add Places and Suggest Changes in Maps" src="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" />
</a>
</div>
<div class="news_rhs"><strong>Google Makes It Easier to Add Places and Suggest Changes in Maps</strong>
</div>
<div class="news_lhs">
<a href="#"><img width="80" height="60" alt="" title="Samsung Galaxy Note7 Pre-Orders Begin in Dubai, Iris Scanner Shown in Video: Reports" src="http://cdn.ndtv.com/tech/images/Samsung_Galaxy_Note_Sammobile_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/images/Samsung_Galaxy_Note_Sammobile_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" />
</a>
</div>
<div class="news_rhs"><strong>Samsung Galaxy Note7 Pre-Orders Begin in Dubai, Iris Scanner Shown in Video: Reports</strong>
</div>
<div class="news_lhs">
<a href="#"><img width="80" height="60" alt="" title="Karbonn Mobiles Sets Up Manufacturing Unit in Haryana" src="http://cdn.ndtv.com/tech/images/karbonn_titanium_s600_hd_thumb.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/images/karbonn_titanium_s600_hd_thumb.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" />
</a>
</div>
<div class="news_rhs"><strong>Karbonn Mobiles Sets Up Manufacturing Unit in Haryana</strong>
</div>
<div class="news_lhs">
<a href="#"><img width="80" height="60" alt="" title="Indonesia Shrugs Off Pokemon Fatwa as Gaming Fever Takes Hold" src="http://cdn.ndtv.com/tech/images/gadgets/thumb/pokemons_wall_reuters_Small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/images/gadgets/thumb/pokemons_wall_reuters_Small.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" />
</a>
</div>
<div class="news_rhs"><strong>Indonesia Shrugs Off Pokemon Fatwa as Gaming Fever Takes Hold</strong>
</div>
<div class="news_lhs">
<a href="#"><img width="80" height="60" alt="" title="This Bengaluru-Based Company Wants to Help You Hire Full-Time Pokemon Hunters" src="http://cdn.ndtv.com/tech/images/gadgets/thumb/pokemon_go_99_afp_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/images/gadgets/thumb/pokemon_go_99_afp_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" />
</a>
</div>
<div class="news_rhs"><strong>This Bengaluru-Based Company Wants to Help You Hire Full-Time Pokemon Hunters</strong>
</div>
</div>
And i want to make it like below screenshot
http://i.imgur.com/BYnARKb.jpg
Please find the jsfiddle here
Here is a cleaned up (and shortened) version of yours.
.tab-pane ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.tab-pane ul {
display: table;
border-collapse: collapse;
}
.tab-pane ul li {
display: table-row;
}
.tab-pane .news_lhs {
display: table-cell;
vertical-align: middle;
position: relative;
width: 100px;
padding: 12px;
border: 1px solid lightgray;
}
.tab-pane .news_rhs {
display: table-cell;
width: auto;
font-size: 16px;
color: #595959;
padding: 10px;
vertical-align: top;
border: 1px solid lightgray;
}
.tab-pane .news_lhs img {
width: 80px;
display: block
}
.tab-pane .news_rhs a {
color: #333;
text-decoration: none
}
.tab-pane.xs_sprite .news_lhs a {
position: relative;
display: block
}
<div class="tab_container margin_bottom20">
<div id="latest" class="tab-pane xs_sprite active">
<ul>
<li>
<div class="news_lhs">
<a href="#">
<img width="80" height="60" alt="" title="Google Makes It Easier to Add Places and Suggest Changes in Maps" src="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg"
class="" />
</a>
</div>
<div class="news_rhs">
<a href="#">
<strong>Google Makes It Easier to Add Places and Suggest Changes in Maps</strong>
</a>
</div>
</li>
<li>
<div class="news_lhs">
<a href="#">
<img width="80" height="60" alt="" title="Google Makes It Easier to Add Places and Suggest Changes in Maps" src="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg"
class="" />
</a>
</div>
<div class="news_rhs">
<a href="#">
<strong>Google Makes It Easier to Add Places and Suggest Changes in Maps</strong>
</a>
</div>
</li>
</ul>
</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