so guys, if u test the code below, u can see that everything is alright, except if u size down the window, so the flash menu ( red div ) is going out of the page to the right.
well if the window is smaller then 900px, there is a HORIZONTAL scrollpane, so far so good, but it just scrolls the content of the page!
I want the upper part also to scroll, but only horizontal, cuz I want them to be fixed (stay on top of the site always)...
any suggestions? I've tried so many things from google, but no one of them was the right one 4 me...
thx & g.r. ace
html:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="div_page" align="center">
// page content goes here
</div>
<div id="div_menu">
<img src="img/logo.png" alt="<Logo>" style="position:absolute; top:0px; left:20px; width:225px; height:150px;">
<div id="div_flash"></div>
</div>
</body>
</html>
css:
#charset "utf-8";
body {
padding:0px;
margin:0px;
}
#div_menu {
position:fixed;
top:0px; right:0px; left:0px;
width:100%; height:40px;
min-width:800px;
overflow:visible;
background-image:url(img/menu.png);
background-position:top left;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:100% 40px;
background-color:#333;
}
#div_flash {
position:absolute;
top:0px; left:250px;
width:500px; height:150px;
background-color:#F00;
}
#div_page {
position:absolute;
top:40px; right:0px;left:0px;
min-width:800px; min-height:500px;
}
As it seems to me, pure CSS can't solve this issue.
But adding a few lines of JQuery may help:
<script type="text/javascript">
$(window).scroll(function() {
$('#div_menu').css('top', $(this).scrollTop() + "px");
});
</script>
CSS position of #div_menu should be changed to absolute.
UPD:
In pure JS it would be:
<script type="text/javascript">
var div_menu = document.getElementById('div_menu');
window.onscroll = function (e) {
if (div_menu)
div_menu.style.top = window.pageYOffset + 'px';
}
</script>
There is a CSS-only solution possible with position:sticky , top:0
See this Fiddle : Link
$headerDiv = $('.header-wrapper');
$rowDiv = $('.row-wrapper');
$rowDiv.scroll(function(e) {
$headerDiv.css({
left: -$rowDiv[0].scrollLeft + 'px'
});
});
It will be helpful.
Hie, that is because you have made the widht of the content boxes/divs fixed; If you want to make them adjust as per the window size, then use percentages for width like: width: 60%; This is infact a responsive design. But still if you want your page header only to be scrolled, then make sure that you bound the content required in a div tag, whose width should be determined by page's width and apply overflow property for that tag; if you want only in horizontal direction, then use overflow-x:scroll and overflow-y hidden(since if one direction is specfied, other will be visible but with disabled mode), which is as shown:
<div style="width:60%;overflow-x:scroll; overflow-y:hidden;">
//your conetnt//including divs
</div>
The thing here is, whenever the width of the content in a div/any tag is more than the width of its outer div, then overflow happens; in this case, you can use overflow property, where you can set properties like : hidden, show, scroll, auto etc..
But try to avoid this, because responsive design is the next-generation markup language technique, where the widths(size) should be dependent on the browser size... :)
Happy coding.. :)
$("#body").scroll(function() {
scrolled = $("#body").scrollLeft();
$("#header").scrollLeft(scrolled);
});
.header {
background-color: red;
position: absolute;
top: 10px;
left: 8px;
width: 120px;
overflow: hidden;
}
.body {
overflow: scroll;
margin-top: 51px;
height: 100px;
width: 120px;
}
.col {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.cell1 {
border-top: 1px solid red;
border-right: 1px solid red;
background: #DDD;
height: 40px;
min-height: 40px;
width: 50px;
min-width: 50px;
}
.cellh {
border-top: 1px solid red;
border-right: 1px solid red;
background: yellow;
height: 40px;
width: 50px;
min-width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here a very simple solution
Uses Flex for the table formatting -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrap">
<div id="main">
<div id="header" class="row header">
<div class="cellh">1</div>
<div class="cellh">2</div>
<div class="cellh">3</div>
<div class="cellh ">4</div>
<div class="cellh">5</div>
</div>
<div id="body" class="col body">
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I'm playing with flexout. I wanted to create the typical layout of a header content area and footer
Now when I set the body, and the main divs to 100% height the footer is truncated. Is this a content area,
See this plnkr
<html style="height: 100%">
<body style="height: 100%">
<div style="height:100%;display:flex;background-color: lightblue;flex-direction:column">
<div style="width: 600">Header</div>
<div style="width: 500;display: flex;height: 100%">
<div style="width:300">Nav</div>
<div>Content</div>
</div>
<div style="height:50px">footer</div>
</div>
</body>
</html>
[
what am I missing?
Just add this css:
body {
margin: 0;
}
The body have by default a margin of 8px.
Most browsers will display the element with the following default values:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
Copied from W3C - HTML body Tag.
Here's a godd starting point for you:
It offers a completely responsive flex design with header and footer.
body,html{
margin:0;padding:0;
height:100%;
}
.Flx{
display:-webkit-flex;
display:-ms-flex;
display:flex;
}
.Wrap{
margin:0 auto;
height:100%;
max-width:600px;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
}
.Header{
-webkit-flex:0 50px;
-ms-flex:1;flex:0 50px;
background:#ccc;
}
.Content{
-webkit-flex:1;
-ms-flex:1;
flex:1;
}
nav{
-webkit-flex:0 1 300px;
-ms-flex:0 1 300px;
flex:0 1 300px;
background:#eee;
}
.Footer{
-webkit-flex:0 50px;
-ms-flex:1;flex:0 50px;
background:#ccc;
}
<div class="Flx Wrap">
<div class="Flx Header">Header</div>
<div class="Flx Content">
<nav class="Flx">Nav</nav>
<div>Content</div>
</div>
<div class="Flx Footer">footer</div>
</div>
You want to remove the margin on your body tag.
To be sure you make it look in every browser the same you can do a so called css reset.
Browsers can have different default styles. This short css file will reset all default styles to be the same.
Solution
body {
margin: 0;
}
<html style="height: 100%">
<body style="height: 100%">
<div style="height:100%;display:flex;background-color: lightblue;flex-direction:column">
<div style="width: 600">Header</div>
<div style="width: 500;display: flex;height: 100%">
<div style="width:300">Nav</div>
<div>Content</div>
</div>
<div style="height:50px">footer</div>
</div>
</body>
</html>
I'm using bootstrap and my site is a responsive site.
In a row I'm having 2 divs. One is for the responsive tabs and the other is for the main content. The main content is dynamic. So the content is loaded in to this div once only at the start. The responsiveness is based on the width of the divs (not height).
My issue: I want the height of these two divs to be based on the 'dynamic content DIV height.
html:
<div class = "row">
<div class = "col-md-8 classA">
<div class="classB">
<div class="classC">
<div class="classD"></div>
<div class="classD"></div>
</div>
</div>
</div>
<div class="col-md-4 classA">
<div class="responsive-tabs"></div> <!-- bootstrap's responsive tabs -->
</div>
</div>
css:
.classA{
width: 300px;
min-height:100px;
}
.classB {
position:absolute;
width: 100%;
}
.classD{
position: absolute;
}
#media only screen and (min-width : 1224px) {
.classC{
width: 75%; /*responsiveness is based on the width here*/
height: auto; /*I think this is where the issue is?*/
}
}
A sample Fiddle
This is how it is at the moment (based on the responsive tab height):
This is what I expect it to be (to be based on the dynamic content height):
Basically if you are using jquery the answer will be the following:
Working example: Bootply Link
HTML
<div class="row" id="thedivs">
<div id="B" class="col-md-6 col-lg-6 col-sm-6">BBB
<div id="C">CCCCCC</div>
BBBB<br>
bbbbbbdsbdbsdbsbdbsbsd
</div>
<div id="D" class="col-md-6 col-lg-6 col-sm-6">DDD
<div id="A">AAAAA</div>
DDD
</div>
</div>
CSS
#A{
background-color: orange;
}
#B{
background-color: red;
}
#C{
background-color: blue;
}
#D{
background-color: green;
height:inherit;
}
#thedivs{
height:100%;
}
Use JQuery to find height of parent and set the child's height to parent's height
Javascript
$(function() {
$('#thedivs').find('#D').css('height', $('#thedivs').innerHeight());
});
for row you should use relative after that you can achieve it
Example
HTML
<div class="row">
<div class="aclass">A</div>
<div class="bclass">b</div>
</div>
CSS
.row{
position:relative;
max-width:600px;
background-color:#00ff00;
}
.aclass{
float:left;
width:48%;
height:580px;
background-color:#ff0000;
}
.bclass{
position:absolute;
width:48%;
right:0;
top:0
background-color:#0000ff;
}
I found this jQuery animate script -> http://jsfiddle.net/steweb/dsHyf/ which works perfectly fine for me when I try it standalone. But as soon as I want to include it into my responsive layout using display: table-cell and %-widths everything looks out of place.
I want the .full to fill out 100% of the width and height of the .cell.
Is it possible to adjust this to fluid layouts instead of fixed widths? I have been trying for hours... Or is there a better solution?
I simply want to exchange a first "tile" showing a headline with a second "tile" showing a text/list with a smooth animate effect.
Plus I want to use this script multiple times on the same pages. What can I do?
HTML:
<div class="container">
<div class="sidebar">
<h1>Text</h1>
</div>
<div class="cell">
<div id="wrapper">
<div class="full" id="div1"></div>
<div class="full" id="div2"></div>
</div>
</div>
<div class="cell">
<div id="wrapper">
<div class="full" id="div1"></div>
<div class="full" id="div2"></div>
</div>
</div>
</div>
CSS:
#wrapper{
width:100%;
overflow:hidden;
position:relative;
height:100%;
}
.full{
position:absolute;
width:100%;
height:100%;
}
#div1{
background:#FF0000;
left:0px;
}
#div2{
display:none;
background:#FFFF00;
}
.container{
display: table;
width: 100%;
}
.cell{
display: table-cell;
}
div.container div:nth-child(1){
width: auto;
}
div.container div:nth-child(2), div.container div:nth-child(3){
width: 40%
}
JS:
$('#div2').css('left',-$('#wrapper').width()).show();
$('#div1').click(function(){
$(this).animate({'left':$('#wrapper').width()});
$('#div2').animate({'left':0});
});
$('#div2').click(function(){
$(this).animate({'left':-$('#wrapper').width()});
$('#div1').animate({'left':0});
});
I've searched high and low and cannot find a solution specific to this problem. I'm trying to accomplish the following:
Have a container DIV defined with a percentage height to serve as max-size container
A secondary container DIV that provides a content size-based borde
Have a header div that is fixed at the top of that DIV
Have a list of DIVs (table-like) under the header
When the list is short, the border is reduced to size of content
When list if long (> height of outer container), scrollbar is shown for DIV list and not header.
I put together the following simplified version:
<html>
<head>
<style type="text/css">
.panel { height: 10%; border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; }
.header { border-bottom: 1px solid black; }
.scroll { max-height: 100%; overflow: auto; }
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
The two red boxes should be fixed size. Check
The blue box should size to be the size of the content or size of red box maximum. Check
When contents in lower exceed red box size, scrollbar should be displayed under header. Fail
Any change I make that gets the scrollbar displayed causes the top blue box to enlarge to the size of it's container, red box. e.g., { .scroll height: 100% }
(The DIV.wrap does have a purpose - just not in this example. It is intended to provide a double-border effect on the sizer, so it should be the same size as sizer all the time).
Also, I have figured out some solutions where I used fixed (px) sizes for the DIVs, but this is not necessarily desired. Especially on DIV.panel - this must be set to a percentage height.
Not completely sure i understand the question, but if you want the scroll on the list but not on the header, have you tried:
overflow-y:scroll;
on the "scroll" div instead of
overflow:auto?
Let me know
Ok i think maybe i worked it out. I think cause you have overflow:hidden and a height on the container div, and not the variable scroll div. Just try the code below and let me know. I have added the height of 10% to the scroll div and not the overall container. Hope thats what you were looking for
<html>
<head>
<style type="text/css">
.panel { border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; display:block;}
.header { border-bottom: 1px solid black; }
.scroll { height: 10%;overflow-y: scroll; display:block; }
.scroll div {display:block; line-height:normal; clear:both; height:20px;}
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
So, i have some block, and this block must contains two divs, first div must be at left(attached to block), second at right(attached to block), and this two divs must coverage all block size.
<div id="block" style="width:800px">
<div id="left" style="float:left;width:50%;"> left </div>
<div id="right" style="float:right;width:50%;"> right</div>
</div>
Both divs have a width half of the parent's div.
But you have to be careful with borders as the width defines the width of the content (i.e. without borders). So if you use borders, the right box will be shown below the left, but still on the right side.
You would do it like this.
<div id="block">
<div id="left"></div>
<div id="right"></div>
</div>
The css would be
#block {
width:800px;
display:block //not sure if this line is required or not
}
#left {
width:400px;
float:left;
}
#right {
width:400px;
float:left;
}
There are many ways this could be done.... here's one:
<div style="position: relative; width: 100%; ">
<div style="position: absolute; left: 0; width: 50%; ">
<p>Content</p>
</div>
<div style="position: absolute; right: 0; width: 50%; ">
<p>Content</p>
</div>
</div>
Would something like this do what you want?
<div id="container">
<div id="leftside" style="width:100px; float:left">
Left Side
</div>
<div id="rightside" style="margin-left: 100px;">
Right Side
</div>
</div>
You may need to tweak the margin-left depending on the padding (and widths obviously). This is an easy way to get the two column approach (even if the two columns is a small box) :)
Or in the interests of separating the HTML and CSS, the same code represented again in two parts :) :
HTML
<div id="container">
<div id="leftside"></div>
<div id="rightside"></div>
</div>
CSS
#container:
{
/* insert any requires styles here :) */
}
#leftside:
{
width: 100px;
float: left;
}
#rightside:
{
margin-left: 100px;
}
Try this:
<div id="container">
<div id="left">
Some Content
</div>
<div id="right">
Some Content
</div>
</div>
CSS:
<style type="text/css">
#container
{
width:500px;
height:500px;
position:relative;
}
#left
{
width:250px;
height:250px;
position:absolute;
float:left;
}
#right
{
width:250px;
height:250px;
position:absolute;
float:right;
}
</style>
Adjust margin and width and you're done.
<div id="main">
<div id="left" style="float:left">
Content Left
</div>
<div id="right" style="float:right">
Content Right
</div>
</div>