I am trying to create a simple black box that spans the top of my web page.
Currently I have this:
<canvas id="block" align="center" height="250" width="5000"
style="border:1px solid #000000;background:#ffffff;position:absolute;top:-100px;z-index:10;">
Initially I tried making it a percentage, but it's far too complex for me.
I need to prevent the box from causing the page to scroll to the sides.
I'm sure this is a very simple thing, probably the main issue I am having is not knowing what to search for.
I have been googling for 2 hours now.
Yo can simply use overflow:hidden
example:
<div style="overflow:hidden; width:200px; height:200px;position:relative;"></div>
Watch the demo: jsFiddle Live Demo
I am trying to create a simple black box that spans the top of my web page.
If you're trying to accomplish this then all you need to do is the following:
<div style="background-color:#000;height:10px;width:100%;"></div>
and place it directly under your opening <body> tag.
I'm confused as to why you are setting width:5000px; on a canvas, if you're expecting to make a canvas element wider than the viewport and still not allow scrolling then you need to set overflow:hidden on the body element.
body {
overflow:hidden;
}
If the unwanted scrolling is due to user pressing arrow keys in your application, then you should be telling the browser that you are handling the arrow keys yourself by executing:
event.preventDefault();
in the handler for keyboard events.
Additionally html {overflow: hidden} might work too.
Related
I created a jsFiddle which shows the chosen-select control being 'truncated' by it's parent div. And even though the overflow is set to hidden for the y-axis, it's showing the scroll bar anyway when clicking on the chosen-select control.
The height of this parent div is fixed and set to 200px, and needs to remain this way.
How can I make chosen-select go over the parent div when clicked upon?
EDIT: jsFiddle updated with more CSS.
If I comment the div.content, it doesn't mess up the layout.
The chosen-select control is now on top of the 4th header. In this fiddle I can still select the chosen-select control, but in my application I can't.
Is there something I need to do for the header's positions?
EDIT2: jsFiddle. I just noticed that the chosen-select control stays on its place when heading 1/2 are sliding up. For the record, this doesn't happen in my application.
What does happen, is when you slide up the 3rd heading, chosen-select control is visible until it's slided up all the way. Unlike the other heading's, where the input's are slowly hiding.
Simply add this CSS class:
Added border to show you the definition of your other box is staying fixed.
div.content {
position:absolute;
}
View Here: http://jsfiddle.net/SinisterSystems/e62Wu/3/
When you select position:absolute, you are effectively telling it to ignore the constraints of your fixed parent div and be able to bound outside the box.
Does this answer the question? I can elaborate further if you'd like.
EDIT:
absolute positioning will remove it from the flow of the rest of the document and treat it as if it didn't exist (it displays where you tell it to, but will not modify other element flow).
Try just adding a spacer like so:
CSS:
div.filler {
height:30px;
}
HTML:
...
<div class="filler">
<div class="content">
<select class="chosen-select">
...
FIDDLE: http://jsfiddle.net/e62Wu/7/
ANOTHER Edit:
Try this:
JS Fiddle: http://jsfiddle.net/SinisterSystems/e62Wu/10/
Add CSS:
.hider {
position:static;
}
Add ID in HTML:
<div id="dropper" class="heading">header 3 <span class="glyphicon glyphicon-chevron-up pull-right"></div>
Add jQuery if/else:
if($this.attr('id')==='dropper'){
$('.content').toggleClass('hider').toggleClass('content');
}
I added
border: 1px solid black;
to the parentbox, and removed "overflow: hidden" and the dropdown stays in front of the div.
It was not based on any prior knowledge, just dumb luck. I was trying to figure out the exact borders of the divs...oh well.
It's always something...
I added two divs to hold background images for decorative purposes - as requested by the artist whom is working with me on a website.
At first, it worked very well. The images were supposed to show on each side of the wrapper div holding the website content - without affecting page width.
Then the organization owning the website got another sponsor, who's logo I had to add to a column on the right. I created a new id for the 5th "button" and created a div for it. Uploading it, I noticed that a scroll bar had suddenly appeared on the bottom of the page, for no apparent reason.
I first suspected the button to be the problem, but eventually found out that the right-most decorative div was bending the page width, despite using absolute positioning. Both of the divs use the same code, only mirrored for left and right. I have no idea what is causing the problem..
(You can see the problem in action while it lasts at www.torucon.no/no/)
Please help me out! Here is the CSS for both of the divs:
#wolf
{
position:absolute;
min-height:500px;
min-width:498px;
left:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/wolf.png');
z-index:-1;
}
#lion
{
position:absolute;
min-height:500px;
min-width:498px;
right:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/lion.png');
z-index:-1;
}
Here is an HTML snippet showing the HTML of the divs:
<div class="wrapper"> <!-- Contains the entire website for structure -->
<div id="wolf">
</div>
<div id="lion">
</div>
((In case you didn't get it: The wrapper div is supposed to be centered, and it is. But when I resize my window, I find that a scroll bar appears long before the wrapper content is even close to the browser window borders. That would be annoying on computers with low resolution or small screens!))
I think what you want is to have the lion and wolf progressively appearing as the user widens the browser viewport, but otherwise partially hidden off to the sides of the wrapper. Correct?
I think you're only safe option to achieve this without triggering the scrollbars you don't like are to combine the images into one and attach them as the background image on the body element of the page.
I believe you're right about using overflow-hidden on the body -- you'd loose the ability to scroll to see overflowed content if the viewport is resized down below the wrapper's width.
I have checked that you posted link http://www.torucon.no/no/ but i coudnt see bottom scroll bar ,
Anyway , Why you cant set background?
<body>
<div class="overlay">
<div class="wrapper">
</div>
</div>
</body>
<style>
body{width:100%; background:---;}
.overlay{width:100%; background:---;}
<style>
I've been developing this site for a while and suddenly today I noticed that the horizontal scrollbar on my browser was showing and was allowing the site to be scrolled an inch or two to the right.
The whole site is only 960px wide and my screen resolution is 1680px so clearly it should fit with plenty of space.
The site still displays exactly the same but the scrollbar is annoying me. I've tried adding borders to everything using the * selector in CSS but nothing seems to be protruding that extra inch. I've also used the Google Chrome console to highlight different sections of the site but none of them are causing the problem.
Every browser shows the same problem, do you have any explanations?
This is the site in question: http://compressmycode.com/
remove the position:relative in your #body-wrapper style around line 31 of your CSS and use margin-top:50px instead of top:50px
if you must keep the position:relative you can also just apply an overflow:hidden to your wrapper to remove whatever overflow may be there, but there are some inherent dangers in doing so.
EDIT
Upon further inspection, I've discovered that your .right div is the issue. For some reason, its being floated to the right is causing your problems.
The problem comes form your JS. if you disable it, it works perfectly.
More precisely with the facebook button:
div#body-wrapper > div#site-title > div.right > div.fb-root > div
setting this to overflow: hidden, fixes the problem
I had a similar issue. There was nothing that seemed to exceed the width but still there was a scroll bar at the bottom.
My structure of page was:
<body>
<div id='appContainer'>
<div class='page'>
<div>All the content along with "Youtube video"
which meant there was
an iframe within my page,
some other stuff like *sharethis buttons,
Which meant i had to add a few scripts.</div>
<div>more stuff</div>
<div>more fancy stuff</div>
<div>some more stuff with shadows and floating elements</div>
</div>
</div>
</body>
*sharethis: http://www.sharethis.com/#sthash.r7Bx1kDr.dpbs
I'm not sharing the CSS as there was nothing other than box-shadows at the outer levels and top-margin.
Although i'll share how the problem got fixed.
I gave the
<div class='page'></div>
css:
.page{
overflow: hidden;
}
This fixed the scroll issue for me.
Although the fix was just to find the right parent and give it the above CSS
I still would like to know the root cause for the scroll. Kindly share that knowledge if you have it.
I have following problem. I've integrated facebook send/like buttons to my website and when i click send, it overlaps with the underlying div.
Since I'm really no CSS guru, i would like that you point me in to a direction where i can find a solution for this problem.
Thank you
the problem is that the div with class box-center & div with class box have the css property overflow: hidden; so anything that's bigger then the div when is loaded will not be shown
but the problem if you remove that is that the box above will be messed up. But that can be resolved by adding (just before closing the div):
<div class="clear"></div>
and in css
.clear {clear:both}
edit: This should give you a better picture (for a bigger preview -> http://i.stack.imgur.com/nvsJW.png)
this is my first asp.net site that i write
I want to have simple form with 5 textbox line that the user will be able to write in
and one button that the user will be able to press when he finish his data input.
Each textbox that i adding i automaticly jump to the left side of the form.
How can i control the place that it will will be shown ?
You should probably do that with a simple css script.
You can add a css page/script to your solution. And then add that in the header of the page. But you could also use something like this on the top of your .asp page :
<style type="text/css">
.style1
{
position:absolute;
left:12%
top: 50px;
}
</style>
Block elements can be aligned by setting the left and right margins to auto. Setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element:
margin-left:auto;
margin-right:auto;
Read about Horizontal Alignment.
Put the textboxes into a div with centered text:
<div style="text-align: center;">
...
</div>
In order to understant web development, you need to know basic concepts of HTML and CSS.
I would recommend you to learn some HTML and CSS first, you can google it or go to w3schools.
Everything will be easier.