I'm quite new to web development. I have a page that displays another page in an iFrame. On certain pages when you scroll down using keyboard or mouse wheel the scroll bar sticks to the top even though the page is scrolling down. On other pages it works normally with the scroll bar moving down. What is causing the iFrame to do this?
I recreated the same problem when using the iFrame to link to the apple site which is used in the examples below.
Examples
Scrollbar not working:
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
iframe {
display: block;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.tcontent{
display: block;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#header, #footer{
position:fixed;
height: 56px;
display:block;
width: 100%;
background: #333;
z-index:9;
text-align:center;
color: #f2f2f2;
/*padding: 20px 0 0 0;*/
}
</style>
</head>
<body>
<div class="tcontent">
<iframe src="http://apple.com/mac/" width="100%" height="100%" frameborder="0" style="border:0" scrolling="yes"></iframe>
</div>
<div id="footer">
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li class="active">Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</div>
</body>
</html>
http://jsfiddle.net/rzk4u80p/
Scrollbar working:
http://jsfiddle.net/b1qqotjq/
Related
So I'm trying to make an hamburger menu, and when the button is clicked it comes from top since it's styled as top: -100% at the beginning.
It's working fine but when its height is bigger than window height, overflow: auto makes vertical scroll so i can get to the bottom of menu.
The problem is that i cant always get to the very bottom and i dont see the bery last item, because it depends on window height.
.header__menu_mobile {
position: fixed;
top: -100%;
left: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: white;
color: #252525;
z-index: 3;
overflow: auto;
transition: all 0.3s ease 0s;
}
.header__menu_mobile .header__list {
font-weight: 300;
font-size: 16px;
line-height: 19px;
width: 100%;
}
.header__menu_mobile .header__list li {
width: 100%;
padding: 20px 0;
}
.header__menu_mobile .header__list li a {
text-decoration: none;
color: #252525;
}
.header__menu_mobile.active {
top: 63px;
}
<div class="header__menu_mobile">
<div class="container">
<ul class="header__list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
<div class="contacts">
<a class="contact">Email</a>
<a class="contact">Instagram</a>
<a class="contact">Facebook</dav>
</div>
</div>
</div>
Meybe the problem is top: 63px while menu is active, but in this layout it has to be excactly like this. When i change it to top: 0, overflow auto shows me the last item on every window height.
So meybe these 63px is also taken away from the bottom of menu. But what should i do?
Thanks for help. The problem was solved when i changed height: 100% to height: calc(100% - 63px);. Thanks #Cbroe and #DiegoD for help
iam trying to do a top menu with the width of the background color to 100%.
and keep the content of my menu inside my wrap id which 960px.
Can somebody explain me how to do it.
Demo: http://jsfiddle.net/NnCVv/246/
html:
<div id="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</div>
CSS
*
{
padding: 0px;
margin: 0px;
}
#wrap
{
width: 960px;
margin: 0px auto;
margin: 0px auto;
}
ul
{
background: navy;
overflow: hidden;
}
ul li
{
float: left;
list-style: none;
}
ul li a
{
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
Try this
<!DOCTYPE html>
<html>
<head>
<style>
*
{
padding: 0px;
margin: 0px;
}
#banner
{
width:100%;
background-color:green;
}
#wrap1
{
background-color:black;
width: 960px;
}
#wrap
{
margin: 0px auto;
margin: 0px auto;
}
ul
{
background: navy;
overflow: hidden;
}
ul li
{
float: left;
list-style: none;
}
ul li a
{
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div id="banner">
<div id="wrap1">
<ul id="wrap">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
</ul>
</div>
</div>
</body>
</html>
I am working with a website with css drop down menus within the header div. When the drop down menu appears it resizes the header div therefore shoving down the content div.
In the body of my index.php:
<div class="top"></div>
<div class="container">
<?php include_once("header.php"); ?>
<div class="content"></div>
</div>
The header.php
<div class="header">
<div style="display: table-cell; width: 250px; text-align: center;">
LOGO
</div>
<div style="display: table-cell;">
<br><br><br>
<ul>
<li>Link 1
<ul>
<li>Monkey 1</li>
<li>Monkey 2</li>
<li>Monkey 3</li>
<li>Monkey 4</li>
<li>Monkey 5</li>
<li>Monkey 6</li>
<li>Monkey 7</li>
</ul>
</li>
<li>Link 2
<ul>
<li>Monkey 1</li>
<li>Monkey 2</li>
</ul>
</li>
<li>
Link 3
<ul>
<li>Monkey 1</li>
<li>Monkey 2</li>
<li>Monkey 3</li>
</ul>
</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</div>
</div>
And main.css
ul{
padding: 0;
list-style: none;
}
ul li{
float: left;
width: 100px;
text-align: center;
}
ul li a{
display: block;
padding: 5px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
.top{
background: #1b2d3c;
width: 100%;
height: 40px;
}
.container{
width: 1100px;
height: 1000px;
}
.header{
display: table-row;
width: 1100px;
height: 130px;
}
.content{
position: absolute;
background: #fff;
width: 1100px;
height: 500px;
}
* {
background: #87a0b4;
margin: 0px;
padding: 0px;
margin-left: auto ;
margin-right: auto ;
}
I apologize for the lengthy post. How can I prevent the problem I am having? I want to be sure I am doing things correctly before I get too deep into the project.
You need to change position of ul li:hover ul to absolute, and add some other properties like this JSFiddel (Source)
ul li:hover ul {
display: block;
position: absolute;
width: 100px;
z-index: 100;
}
Hope this will help you ..
As was said in the previous answer, you need to set position: absolute. I'd like to add a bit of information as to why.
According to MDN:
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
Basically, by giving an element absolute positioning, it is no longer being taken into account when positioning the rest of the page. It will take up its alloted space in its set position no matter what.
In your case, the div was moving relative to the elements surrounding it. By using position: absolute, you are ommiting and relativity.
I want to place a footer at the bottom of the page. It is contained inside a div. The problem is that if I use fixed positioning, the footer sticks at the bottom but does not disappear if I scroll up the page. If I use absolute or relative positioning the footer shows up at the middle of the page.
I want it to stay at the bottom but it should not be sticky i.e when scroll up, the footer must disappear. It must shows when I scroll down to bottom and reached end of the page.
PS: The page contains an iframe.
html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Help</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.png" alt="Logo">
</div>
<div id="menu">
<ul>
<li>About</li>
<li>Support</li><br>
<li>Student Operation
<ul>
<li>Logging In</li>
<li>Creating Enquiry</li>
<li>Issuing Prospectus</li>
<li>Making Admission</li>
<li>Collecting Fees</li>
<li>Issuing Kit</li>
</ul>
</li><br>
<li>
Batch Operation
<ul>
<li>Creating Batch</li>
<li>Marking Attendance</li>
<li>Transferring Batch</li>
</ul>
</li><br>
<li>
Resource Operation
<ul>
<li>Center Resource Allocation</li>
<li>Student Resource Allocation</li>
</ul>
</li><br>
<li>
Course Operation
<ul>
<li>Course Type</li>
<li>Course List</li>
<li>Course Module</li>
<li>Course Price List</li>
<li>Distance University List</li>
</ul>
</li><br>
<li>
Inventory Operation
<ul>
<li>Kit Management</li>
<li>Item Category</li>
<li>Item Stock</li>
<li>Item Purchase</li>
</ul>
</li><br>
<li>
Admin Operation
<ul>
<li>Kit Validation</li>
<li>Users & Groups</li>
<li>Employee Management</li>
</ul>
</li>
</ul>
</div>
<div id="frame">
<iframe id="content" name="content"></iframe>
</div>
<div id="footer">
<p>Footer text</p>
</div>
</body>
</html>
css
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 80%;
}
#header {
background-color: #f8651c;
padding-bottom: 5%;
margin: 0;
border: 0;
}
#logo {
position: relative;
left: 20px;
top: 20px;
}
#menu {
width: 25%;
float: left;
border-right: 2px solid #a2a2a2;
margin: 0;
padding: 0;
}
#content {
position: absolute;
height: 93%;
width: 74%;
padding: 0;
margin: 0;
border: 0;
}
#footer{
position: fixed;
left: 0;
bottom:0;
background-color:#000;
width:100%;
height: 10px;
}
Like this
DEMO
CSS
#footer{
position: relative;
left: 0;
bottom:0;
background-color:#000;
width:100%;
bottom:0;
padding:5px 0;
}
.clearfix{
clear:both;
}
#footer p{
color:white;
}
its very simple. just add modify your footer css
#footer{
background-color:#000;
width:100%;
color:#fff;
float:left
}
You can do one thing, After page is scrolled for some height or on scroll event you can hide that div.
$(window).scroll(function(e){
$('#log').hide();
});
I want a page that has two fixed-width columns on the left and a main column that fills up the rest of the width of <body>. Within each column, I want to place some <div> object on the top and a <ul> object that fills up the rest of the height. I tried the following, but could not make the height of the <ul> objects automatically adjust to fill in the height. Rather, it overflows to the bottom as much as the height of the <div> above them.
<html>
<style>
body{
margin:0;padding:0;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color:red;
}
.column{
float: left;
background-color:blue;
}
.column>ul{
height: 100%;
width: 100;
overflow-y: scroll;
overflow-x: hidden;
background-color:green;
}
#main-column>ul{
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
background-color:brown;
}
</style>
<body>
<div class="column">
<div>Column 1 Title</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class="column">
<div>Column 2 Title</div>
<ul>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div id="main-column">
<div>Main Column Title</div>
<ul>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</body></html>
How can I make it so that height of the <ul> objects are automatically adjusted to fill up the remaining height?
This is what I get so far. The scroll bar is cut off and extends below the window border, which indicates that its height is overflowing.
If you give the column titles a fixed height, you can use that along with position: absolute on the uls to get the layout you want. Demo: http://jsbin.com/ecilob/1/edit
HTML:
<body>
<div class="column fw">
<div class="title">Column 1 Title</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class="column fw">
<div class="title">Column 2 Title</div>
<ul>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div class="column main">
<div class="title">Main Column Title</div>
<ul>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</body>
CSS:
body {
margin: 0;
padding: 0;
}
.column .title {
height: 30px;
border-bottom: 1px dashed #333;
}
.column {
background: lightblue;
float: left;
position: absolute;
top: 0;
bottom: 0;
}
.column + .column {
background: coral;
left: 120px;
}
.column + .column + .column { background: goldenrod; }
.column.fw {
width: 120px;
}
.column.main {
left: 240px;
right: 0;
}
.column ul {
position: absolute;
margin: 0;
top: 30px;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
}