What i want to do is to scroll my web page in two direction that is leftPanel in left to right direction while rightPanel in right to left direction but the header remain fixed in its postion. But i am stuck some where.
here is my code:
HTML File-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page </title>
<link rel='stylesheet' href='css/default.css'>
</head>
<body class='aboutUsBody'>
<div id='header'></div>
<div id='mainPanel'>
<div id='leftPanel'></div>
<div id='rightPanel'></div>
</div>
</body>
</html>
CSS File-
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0px;
}
#header{
width: 100%;
height: 10%;
background: #bad960;
}
#mainPanel{
height: 90%;
display: inline;
overflow-y: scroll;
}
#leftPanel{
float: left;
margin-left: -200px;
display: inline;
position: relative;
width:100 %;
height: 100%;
background: red;
}
#rightPanel{
display: inline-block;
position: relative;
width:100%;
height: 100%;
background: black;
}
please look at the image for further explaination:
at the page load scroll will be at center and the two divs positioned accordingly, when i scroll up the leftPanel scrolls from left to right and when i scroll down its rightPanel move from right to left.
What should i do ??
What you are doing is quite awkward to achieve because the scrollable divs must have a known width otherwise it is really difficult to control the line-wrap to act in your favour, but if you have a fairly static design to aim for it can work quite well.
You have quite a few strange things in your code that don't seem to be doing anything useful but it could be due to me misunderstanding what you are aiming for, also, some javascript might be essential for this, at least to get the left panel to start scrolled all the way to the right.
Here is my working css for something like what you are trying to do:
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0px;
}
#header{
width: 100%;
height: 10%;
background: #bad960;
}
#mainPanel{
height: 90%;
}
#leftPanel{
float: left;
width:50%;
height: 100%;
background: red;
overflow-x: auto;
}
#rightPanel{
float: left;
color: red;
width:50%;
height: 100%;
background: black;
overflow-x: auto;
}
.horizScroll{
width: 800px;
}
#leftPanel .horizScroll{
direction: rtl;
}
And a jsfiddle
I have done some research and i had achieved it by adding a little jquery.
My code is :
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page </title>
<link rel='stylesheet' href='css/default.css'>
<script src="./jQuery.1.10.0.js"></script>
<script>
$(document).ready(function(){
$("#mainPanel").scrollLeft(document.body.clientWidth*0.25);
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
}
else {
}
});
});
</script>
</head>
<body class='aboutUsBody'>
<div id='header'></div>
<div id='mainPanel'>
<div id='panelOne' class='panel'></div>
<div id='panelTwo' class='panel'></div>
</div>
</body>
</html>
CSS file
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0px;
}
#header{
width: 100%;
height: 10%;
background: #bad960;
position: fixed;
}
#mainPanel{
top:10%;
position: relative;
width:100%;
height: 90%;
overflow-x:scroll;
display: block;
background: yellow;
}
#panelOne{
position: absolute;
display: inline;
width: 1000px;
height: 100%;
background: red;
}
#panelTwo{
position: absolute;
display: inline;
margin-left: 1000px;
width: 1000px;
height: 100%;
background: aqua;
}
and here its fiddle:
JSFiddle
Related
when I scroll down on my page, my container overlap the header, but I want my header to overlap the container, so I made my header on a fixed position, but it does not work
here is my html code:
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="page">
<header class="leheader">
<div id="bloc1"></div>
<img src="https://i.imgur.com/dm6H7GV.png">
<div id="bloc2"></div>
</header>
<main class="container"></main>
</div>
</body>
</html>
and here is my css code:
body,
html,
.page {
background: #666666;
width: 99%;
height: 100%;
}
.leheader {
display: flex;
width: 99%;
position: fixed;
flex: 1 100%;
height: calc(100%-50px);
}
#bloc1 {
margin-left: 1px;
margin-top: 0.5px;
height: 50px;
width: 90px;
background: #cccccc;
border-radius: 10px 0 0 0;
}
#bloc2 {
background: #467491;
margin-top: 4px;
width: 93%;
height: 37px;
}
.container {
position: absolute;
top: 57px;
left: 9px;
background: #cccccc;
width: 99%;
height: calc(100% - 33px);
}
where is the problem ?
Try adding the z-index property to the header.
like this....
z-index: 2
In CSS to make something Fixed position you also need to give it a z-index (which is its position on z-axis). Read more about Z-Index here. Apart from it you also have to give it a position in terms of top, left, bottom and left to tell it where it has to fixed.
.leheader {
display: flex;
width: 99%;
position: fixed;
top:0;
left:0;
z-index:2;
flex: 1 100%;
height: calc(100%-50px);
}
I'm practicing with web development and I have a very weird problem with HTML and CSS.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
position: absolute;
text-align: center;
height: 50px;
width: 60%;
background-color: #3231ff;
}
#friendRequests {
position: absolute;
float: left;
height: 100%;
width: 20%;
background-color: #3231ff;
}
#friendsList {
position: absolute;
float: left;
height: 20%;
width: 20%;
background-color: #3231ff;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<!--<div id="friendRequests"></div>-->
<div id="friendRequests"></div>
<div id="chatScreen"></div>
</body>
</html>
As you can see, #friendsList and #friendRequests are exactly the same. Note the line after the div that has been commented out, it has the id friendRequests. When I load the page, the div doesn't show up. But here is where I get confused. If I change the id of that div to friendsList, it does show up, but those two identities have exactly the same properties (I did this just to debug, friendRequests will have other properties). I even commented the friendsList out in CSS and I even removed it, it still doesn't change. Can someone explain to me why this apparently only depends on the name of the id? Thanks!
Big Update:
Apparently the script works perfectly fine in Microsoft Edge, so the problem lies in Chrome. Using Element Inspector, I discovered that the #friendRequests is actually never loaded in Chrome!! What might be the issue here?
Both divs #friendsList and #friendRequest are set with position: absolute; and float: left;.
This means both will be aligned to the left side of the screen regardless of other elements. As a consequence, both divs are on top of each other and only one is visible (specifically the one which is defined later in html).
You should remove the position: absolute from the divs. Or make them relative, so they are aligned next to each other, depending on the order in the html.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
text-align: center;
height: 50px;
width: 60%;
background-color: blue;
position: relative;
}
#friendRequests {
float: left;
height: 100%;
width: 20%;
background-color: red;
position: relative;
}
#friendsList {
float: left;
height: 20%;
width: 20%;
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<div id="friendRequests"></div>
<div id="friendsList"></div>
<div id="chatScreen"></div>
</body>
</html>
The reason for this is both the div are having same css when you use the same id because of which the divs are overlapping on each other.
The id should be unique.
To understand the difference, I have shifted "friendRequests 2" block a bit left.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
position: absolute;
text-align: center;
height: 50px;
width: 60%;
background-color: #3231ff;
}
#friendRequests {
position: absolute;
float: left;
height: 100%;
width: 20%;
background-color: #3231ff;
}
#friendsList {
position: absolute;
float: left;
height: 20%;
width: 20%;
background-color: #3231ff;
}
.left_block{
left: 21%;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<div id="friendRequests">friendRequests 1</div>
<div id="friendRequests" class="left_block">friendRequests 2</div>
<div id="chatScreen"></div>
</body>
</html>
Thank you for answering, I found the solution. The problem wasn't the script, it was my browser apparently. Like I commented a few times, loading the page in Edge worked perfectly fine. I discovered using the debugger tool that the CSS file wasn't loaded completely for one or another reason. Thus I suspect this might be a bug in Chrome.
I have a problem with my brand new html & css sites : I want to have a that opens when hovering on a floating element of itself. The problem is not on animation but on layout. When it's empty, it works well, but when I add content into the , it goes under the floating element. To solve this, I've tried different overflow values as explained here, but of course the part of the whitch is "outside" of it got impacted.
(in this sample, the "menu" is already opened)
section
{
background-color: white;
margin: 10px;
}
.scroll_aside{
overflow-y: auto;
width: 100%;
height: 100%;
}
.aside_left{
width: 70%;
height: 100%;
display: block;
background-color: gold;
position: fixed;
top:0;
}
.aside_left .cote{
position: relative;
top:0px;
right: -80px;
width: 80px;
background-color: orange;
margin-top: 100px;
margin-left:0;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TEST2.css"/>
</head>
<body>
<div class='aside_left'><span class='cote' onclick="openjourney()">Floating on the right</span>
<div class="scroll_aside">
<section style='height: 400px'>Section 1</section>
<section style='height: 800px'>Section 2</section>
</div>
</div>
</body>
</html>
Another thing I've noticed is that when the content is thin enough, it goes to the top....
But what I want, is to have the content taking all the , so going at the top and with width=100%.
Is there a way to do that ?
Thank you in advance....
Instead of float use absolute position:
section {
background-color: white;
margin: 10px;
}
.scroll_aside {
overflow-y: auto;
width: 100%;
height: 100%;
}
.aside_left {
width: 70%;
height: 100%;
display: block;
background-color: gold;
position: fixed;
top: 0;
}
.aside_left .cote {
position: absolute;
left: 100%;
width: 80px;
background-color: orange;
top: 100px;
}
<div class='aside_left'><span class='cote' onclick="openjourney()">Floating on the right</span>
<div class="scroll_aside">
<section style='height: 400px'>Section 1</section>
<section style='height: 800px'>Section 2</section>
</div>
</div>
I'm making a simple website with html and CSS, and I have made a div circle. When I resize the browser, it's stretched more in one direction than the other. Is it possible to make it stay a perfect circle? If so, how?
Right now, this is the code for the circle:
#circle
{
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
background-color: #B64926;
width: 60%;
height: 60%;
max-width: 70%;
max-height: 70%;
min-width: 30%;
min-height: 30%;
display: block;
position: fixed;
text-align: center;
}
Try this complete example:
<html>
<head>
<style>
#circle
{
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
background-color: #B64926;
height: 60%;
max-height: 70%;
min-height: 30%;
display: block;
position: fixed;
text-align: center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).resize(
function(){
$('#circle').width($('#circle').height());
}
);
$(window).resize();
});
</script>
</head>
<body>
<div id="circle"></div>
</body>
</html>
You can manually set the height and width of the div like:
<html>
<style>
.circle {
height: 20px;
width: 20px;
background: red;
border-radius: 100%;
}
</style>
<body><div class="circle"></div></body>
</html>
I am making a website that uses numerous DIVs with a 100% height. Now when the text is bigger than the page I want the normal scrollbars to appear. Unfortunately they don't. and with trying overflow:auto anywehre, it gets worse and worse.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><PageTitle> | Anga Designs</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/standard.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/iefix.css" /><![endif]-->
<!-- /Stylesheets -->
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<!-- /Scripts -->
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- /Meta Tags -->
</head>
<body>
<div id="bgstripe"></div>
<div id="outercontainer">
<div class="leftbar"></div>
<div id="innercontainer">
<div id="header">
<div class="leftbar"></div>
<div class="innercontent">
</div>
</div>
<div id="content">
<div>
<span class="articletitle">Page Title!</span>
<div class="articletitlebar"></div>
</div>
<div class="articletext"><p>
Put your text here
</div>
</div>
</div>
<div id="faderight"></div>
</div>
<!-- /container -->
</body>
</html>
CSS
body, html {
margin: 0;
background-color: #eeeeee;
height: 100%;
font-family: Tahoma;
overflow: auto;
}
#bgstripe {
float: left;
background-color: #67a7ff;
width: 50%;
height: 100%;
}
#faderight {
position: relative;
float: right;
background: url('../images/layout/fade-right.jpg');
width: 50px;
height: 100%;
}
#outercontainer {
position: relative;
margin: auto;
width: 1000px;
height: 100%;
background-color: #2a5d95;
}
#innercontainer {
position: fixed;
float:left;
width: 950px;
background-color: #2a5d95;
}
.leftbar {
position: absolute;
background: url('../images/layout/leftbar.png');
width: 50px;
height: 100%;
}
.innercontent {
position: relative;
float: left;
background-color: #2a5d95;
height: 100%;
width: 100%;
margin-left: 50px;
}
#header {
position: relative;
float: left;
width: 950px;
height: 200px;
}
#content {
position: relative;
float: left;
width: 100%;
height: 100%;
}
.articletitle {
background-color: #003366;
padding: 10px 10px 10px 60px;
font-size: 20px;
font-family: Georgia;
color: #eeeeee;
}
.articletitlebar {
position: absolute;
width: 50px;
height: 40px;
background: url('../images/layout/articletitlebar.png');
margin-top: 10px;
}
.articletext {
display:block;
position: absolute;
margin-left: 70px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
width: 700px;
min-height: 500px;
}
Anyone who can help me with this? I'm totally lost right now..
Online sample: http://rune.blupfis.nl/wendy/
position:fixed on #innercontainer is part of the problem, if not the whole issue. That will act like an absolutely positioned element and be removed from the normal flow.
The problem here is that the height of your contentdiv is set to 100%. This makes it expand so that it is the same height as its contents. If you try something more like this:
#content {
float: left;
height: 500px;
overflow: auto;
position: relative;
width: 100%;
}
you should see the scroll bars appearing (but some other styling may be lost now).