I am having an issue with the position-fix; top 100px;. when I use position-fix; top 100px; and run the program, the result will be "google scroller doesn't show up on the screen". when I don't use when I use position-fix; top 100px; then google scroller shows up on the screen.
Here is the HTML code.
<body>
<section class="container">
<div style="position:fixed; top:180px" class="First">
<ul id="ListName" class="">
<li><a style="text-decoration:none" href="interest.html"> Interest </a></li>
</ul>
</div>
<div style="position:fixed; top:180px;" class="Second">
<h1 align="center"> sport</h1>
<p>
<ul>
<li> soccer and,</li>
<li> football </li>
</ul>
</p>
</div>
</section>
<div id="" class="" style="clear:both;"></div>
</body>
Here is the CSS code.
<style>
.container {
width: 99%;
height: auto;
margin: auto;
padding: 10px;
font-family: Verdana,Geneva,Tahoma,Arial,Helvetica,sans-serif!important;
}
.First {
height: auto;
width: 20%;
background: white;
border:1px solid #666;
float: left;
}
.Second {
margin-left: 21%;
height: auto;
width:640px;
border:1px solid #666;
background: white;
}
</style>
Your requirement is bit confusing, it's not clear that whether you want to make the second div inside the section element scrollable then you can do it by adding a height or max-height property to the Second class.
Same holds true for any container scroll bar appear only when the content inside a div or any container exceeds the height specified.
If you want to make second div scrollable, you need to do following.
.Second {
height:100px !important;
overflow-y: scroll !important;
margin-left: 21%;
height: auto;
width: 640px;
border: 1px solid #666;
background: white;
}
If you want to make body element scrollable then you can set a height property or when your content increases the automatically body will be scrollable.
checkout the fiddle here.
I have added a width property to the second div in order to make it fit in the fiddle window.You may remove it. Also pasted some sample text inside body to demonstrate that body is scrollable when it has enough text or if you want a set a fix height you can do that as well.
NOTE: you need to set the property value with !important so that it overrides and forces browser to apply that css.
height:100px !important;
Hope it helps!!
Related
On our page we have a position: fixed header that stays at the top of the page as you scroll. Our product team wishes to have a gap/margin between this fixed element and the top navbar.
However, once we add in this gap, when the user scrolls, they can then see the elements scrolling away above the fixed header. I have created a jsfiddle to show the problem:
https://jsfiddle.net/9n50o567/
If you scroll down, the grey sections appear above the light-blue header while you are scrolling.
Is there anyway to hide this from the user? So all that would show above the fixed element is the background colour, or the background image if there is one (as it will vary from user to user). Essentially masking the elements?
We have tried creating a div that takes on the same colour as the body's background colour, however this just doesn't work when there is a background image. Also we tried using jQuery to detect what elements are present in that section and hiding them as they scroll through, but if the element is bigger than the header, it would dissapear prematurely.
I'm not sure if any of this is making sense, so if you have any more questions, please don't hesitate to ask below.
This is not perfect, certainly it works for colors, but background-images may be a little harder.
A positioned pseudo-element on the <body> which inherits the body bg color seems to work.
body {
background: red;
position: relative;
}
body::before {
content: '';
height: 25px;
display: block;
width: 100%;
background: inherit;
position: fixed;
top: 0;
left: 0;
}
.header {
background-color: #ccffff;
height: 300px;
width: 500px;
border: 1px solid black;
position: fixed;
top: 25px;
left: 8px;
}
.push {
height: 335px;
}
.section {
background-color: #cccccc;
height: 300px;
width: 500px;
border: 1px solid black;
margin-bottom: 15px;
z-index: 10;
}
<div class="header"></div>
<div class="push"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
JSfiddle Demo
Background image fiddle (with background-attachment:fixed) - Fiddle
Use a div to act as the gap (.headergap) see below.
Css:
.headergap{
background-color: #cccccc;
position:fixed;
top:0px;
height: 25px;
width: 100%;
}
.header {
background-color:#ccffff;
height:300px;
width:500px;
border:1px solid black;
position:fixed;
top:25px;
left:8px;
}
.push {
height:335px;
}
.section {
background-color: #cccccc;
height:300px;
width:500px;
border:1px solid black;
margin-bottom:15px
}
Html:
<div class="headergap"></div>
<div class="header"></div>
<div class="push"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
See fiddle:
https://jsfiddle.net/6bhhn869/
Updated code
I have used vh for timing you may use jquery to calculate height and apply it to in-wrap.
I'm using AngularJS to add divs to a section, and I want the div to have a static start width and to grow dynamically when I add more divs, How can I do this?
This code doesn't work:
<body ng-app="plunker" ng-controller="MainCtrl">
<section>
<div ng-repeat="div in divs track by $index">
<div class="square"></div>
</div>
</section>
<button ng-click="add()">add</button>
</body>
section {
border: 1px solid red;
overflow: hidden;
padding: 10px 0;
width: 400px;
}
.square {
width: 100px;
height: 100px;
background: #000;
margin-right: 10px;
float: left;
margin-top: 1em;
}
Link for Plunker:
http://plnkr.co/edit/SqGXBh9zXK2P3LCIVOPG?p=preview
All you need to do is:
for section:
min-width: 450px; //min width of all blocks that inside your section
display: inline-block; //to make width "grow" with content
and for square:
display: inline-block; //instead of float, because float makes height to 0
http://plnkr.co/edit/azOKubY7b371u2Pt7JbD?p=preview
//note: I moved square class to parent node of ng-repeat, but it's not necessary, you just need to add display: inline-block; if you want to have previous structure.
You can accomplish this by also using float:left on the section:
section {
border: 1px solid red;
padding: 10px 0;
float:left;
}
And making the squares direct descendants, which will actually fill up the section:
<section>
<div class="square"ng-repeat="div in divs track by $index"></div>
</section>
Plnkr
I am writing a web-app for iPhone and Android using HTML5 and CSS3.
I have a background div and a menu div on top of it. (larger z-index) and both div's have overflow and are scrollable.
The problem is, even when I swipe my finger over the top div (the menu) the bottom div (the background) is still scrolling. Sometimes both are scrolling at the same time and sometimes only one of them.
I wish only for the menu to scroll when I am swiping the finger over the menu area.
Can anyone help?
Here is my code :
HTML:
<html>
<body>
<div id="main">
<div id="menu">
<!-- menu content goes here -->
</div>
</div>
</body>
</html>
CSS:
#main: {
height: 3000px;
overflow: scroll;
}
#menu: {
height: 2500px;
padding-left: 10px;
overflow-y: scroll;
}
I made something similar. Your question is a bit unclear... But I had to make a scrollable div that was not visible... Here is my css...
#sidebar{
width: 1000px;
height: 670px;
border: 0px solid transparent;
overflow: hidden;
text-align: center;
padding-left: 0.5%;
background-color: transparent;
color: transparent;
}
#sidebar #scroller{
width: 1000px;
height: 545px;
padding-bottom: 15px;
overflow: scroll;
overflow-x: hidden;
text-align:center;
background-color: transparent;
}
and now in my html...
<div id="sidebar">
div id="scroller">
// the things i add in my scrollable menu...
</div>
</div>
I am having problems with some content not fixed into one place when I resize the window on a browser, I basically have 3 div id box elements placed next to each other.
They are positioned fine however when I resize the screen they seem to fall below one another.
I have min-width: 947px; in the body of the CSS however this does not do anything.
HTML:
<div id ="featured1">
</div>
<div id ="featured3">
</div>
<div id ="featured2">
</div>
CSS:
#featured1{
float:left;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
margin-left:150px;
border:1px solid black;
width:250px;
height:150px;
}
#featured2 {
display: inline-block;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
}
#featured3 {
float:right;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
margin-right:200px;
}
For some reason when I try resizing the screen with this code the elements fall below each other, I am looking for the content to completely remain the same and not resize at all.
Here is the working example: jsFiddle link
use
display: inline-block;
on all 3 divs, then they wont go down.
Note: this property will not work on IE7 and smaller versions.
You have given your body a min-width:947px but the actual width occupied by all divs including the margin and borders, etc is 1150px.
Thats why its breaking.
Please add vertical-align: top; property on all the divs
This should help. FYI. When writing in CSS make sure you minify the code. Google developer has a great section on this (https://developers.google.com/speed/pagespeed/service/MinifyCSS).
HTML:
<div id="container">
<div id="featured1">
Featured 1
</div>
<div id="featured2">
Featured 2
</div>
<div id="featured3">
Featured 3
</div>
</div>
CSS:
#container {
position: absolute;
width: 836px;
height: 190px;
}
#featured1, #featured2, #featured3 {
position: relative;
font-family: 'Lobster13Regular';
font-size: 35px;
float: left;
left: 20px;
top: 20px;
width: 250px;
height: 150px;
border: 1px solid #000;
overflow: hidden; /*Remove if you are not going to overflow text in each element*/
}
#featured2, #featured3 {
margin-left: 20px;
}
I want to have horizontal lists that can run as wide as possible but within a fixed width container. I am using jQuery to allow scrolling on the really wide list, and overflow:automatic for users without javascript.
I have code along the lines of this:
<div class="list">
<ul>
<li class="feed">
<section>
<h1><span class="name">Title</span></h1>
<div class="scroll_left"><a class="ir" href="#">Scroll Back</a></div>
<div class="article_list">
<ul class="article_list">
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<!-- variable number of li's, from 10s to 100s -->
</ul>
</div>
</section>
</li>
<!-- More of these lists -->
</ul>
</div>
I'll just give a subset of my css that I think is relevant:
.feed .article_list {
position: relative;
overflow: auto;
float: left;
width: 900px;
}
.feed .article_list ul {
position: relative;
width: 10000px; /** I want this to be wide, but not allow scrolling past the end*/
margin: 0;
background-color: #ffffff;
}
.feed .article_list li {
display: block;
width: 130px;
height: 150px;
position: relative;
float: left;
border-right: 2px solid #b5e8f4;
border-left: 2px solid #b5e8f4;
margin: 0 5px 0 0;
}
My javascript is:
$(document).ready(function() {
$('div.article_list').css({
'overflow' : 'hidden'
});
$('.scroll_left a').click(function() {
toScroll = $(this).parent().next();
toScroll.animate({scrollLeft: "-=135"});
return false;
});
$('.scroll_right a').click(function() {
toScroll = $(this).parent().prev();
toScroll.animate({scrollLeft: "+=135"});
return false;
});
});
So as it is, I either have to make the inner ul really wide, so users can scroll well beyond the list items, or I can restrict it but if I add too many items (dynamically, so I don't have a lot of control), then the layout breaks.
Can I somehow get that scrollable area to just be as wide as its floated contents?
Or is the only solution to set the width in javascript (less than ideal, but I can do that)?
Its the float: left on the .feed .article_list that you really don't want but I've removed it from all of them that I could.
I would move to an inline setup instead of floating:
.feed .article_list {
position: relative;
overflow: auto;
width: 100%; /* specify what ever width you want. I think 100% is proper. */
}
.feed .article_list ul {
position: relative;
overflow-x: scroll;
margin: 0;
background-color: #ffffff;
white-space: nowrap;
}
By making the overflow-x: scroll you have a permanent scroll bar (not totally necessary, it can be removed if you prefer). The white-space: nowrap Will keep the children on one line (instead of floating.)
.feed .article_list li {
display: inline-block;
// etc. etc. etc. ...
on the children display: inline-block; will let you specify height/width like a block element and keep them inline at the same time.
JsFiddle:- http://jsfiddle.net/GBtCb/
UPDATE :-
In an effort to make it cross-browser compatible make the following changes:
remove the overflow: auto from .feed .article_list
and add:
.feed
{
overflow: hidden;
}
.article_list
{
overflow: auto;
from quirksmode.com:
http://www.quirksmode.org/css/whitespace.html : white-space: nowrap is compatible IE7+.
-