I've noticed that the <input> element in HTML ignores the CSS pair of "left" and "right" properties. Same for the pair "top" and "bottom". See the sample code below:
<html>
<head>
<style><!--
#someid {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
}
--></style>
</head>
<body>
<input type="text" id="someid" value="something"/>
</body>
</html>
The <input> should take up almost all space in the browser (except a border of 10px around it). It works fine in Safari, but in FireFox and IE the <input> stays small in the top-left corner of the browser.
If I use "left" and "width", and "top" and "height", then everything works fine. However I don't know what is the width and the height, I want them adjusted depending of the size of the browser window.
Any ideas how to work around this?
Thanks.
You can Use a Wrapper DIV
<html>
<head>
<style><!--
#wrapper {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
}
#someid {
/* position:relative; EDIT: see comments*/
height:100%;
width:100%
}
--></style>
</head>
<body>
<div id="wrapper">
<input type="text" id="someid" value="something"/>
</div>
</body>
</html>
It's not ignoring left or top, you'll see it does position 10px out. What's happening is that the right and the bottom are not being respected. Form elements are treated a little bit specially in layout engines, it's entirely possible FF/IE consider the width/maxlength of the input more important, I haven't really looked into why that might be.
It's a bit of a strange thing to do though. Perhaps what you'd be better off doing is looking at <textarea> which is designed to provide a large text input, which you can push to 100% dimensions by applying width: 100%; height: 100%; and take care of the 10px margin on a container div.
WFM:
<html>
<head>
<style>
body
{
margin: 0px;
}
div
{
position: absolute; margin: 2%; width: 96%; height: 96%;
}
textarea
{
position: absolute; width: 100%; height: 100%;
}
</style>
</head>
<body>
<div>
<textarea></textarea>
</div>
</body>
http://reference.sitepoint.com/css/bottom
say, regarding internet explorer (<= 6)
don’t support the specification of both the position and the dimensions of an absolutely positioned element using top, right, bottom, and left together; they’ll use the last vertical and horizontal position specified, and need the dimensions to be specified using width and height
The way it looks in Safari is not how it should display. Because you didn't specify a height value, the input will default to the size of the last inherited font size.
The right and bottom positioning will also be ignored because you're trying to set the top and left margins at the same time. Looks like they take precedence in this case.
If you need to use the input field and have it display inside the entire width and height of the browser window at the time it is seen, you need to redo the CSS like this:
body{
margin:10px;
}
#someid{
display:block;
margin:0 auto;
width:100%;
height:100%;
}
This will stretch the input field to as high and wide as the user has their browser window. It will also have a margin around each side of 10 pixels from the browser window.
If you have to have a margin, then set that in the body style or a wrapper DIV around the input field.
Related
If I have the following HTML:
<!doctype html>
<html>
<head>
<style>
html {
height: 100%;
}
.square {
background-color: red;
width: 100px;
height: 100px;
margin-bottom: 2000px;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
I would expect that the margin of the div would cause the window to become scrollable. This works as expected in Chrome, but in Safari the window is not scrollable. Why is this? Is this a bug?
The html height 100% is deliberate.
Obviously Safari ignores the margin-bottom if nothing follows below that element.
I tried to put an additional element below the .square div that is made invisible by height: 0px; (and also by color: #fff; in this particular case). You don't see that element, but now the scrollbar appears, the padding is not ignored anymore:
http://codepen.io/anon/pen/eJRexY
I then tried just to use only a space inside that "invisible" element, but that didn't work the same way - there has to be some "real content". However, with a as only content of that element it works too.
In fact, you don't even need another DIV, just adding a after the .square div also makes the scrollbar appear in Safari.
I am building a website to host an online gameserver list for the game Crysis Wars, and have just found out that it's by far easier just to develop the design in Adobe Fireworks, and add the relevant code after.
The current web page that I am designing has a signin box at the center of the page, and it works beautifully.
That is, until we change the size of the browser window.
This is the web page as it normally looks:
It is displayed correctly, but here's the screenshot of when the browser window was resized:
As can be seen, this is an issue with the page, since visitors will have different screen resolutions, and this problem could easily re-occur.
My question is, how can I force these two CSS objects to maintain their position, and never overlap?
This is troublesome since the signin box centers itself on the web page.
The web page can be viewed at crysis-or.eu (please don't berate me for developing on a live website).
HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<title>Server Portal | Login</title>
<link href="./css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
</div>
<div class="loginui">
</div>
</body>
</html>
CSS:
body {
width:100%;
margin-left:-0px;
background-color:07080A;
}
body > .loginui {
width:400px;
height:400px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background:url("http://crysis-or.eu/img/login_b_bg.png") repeat-x;
}
body > .navbar {
width:500px;
height:100px;
position: absolute;
margin-top:50px;
margin-left:100px;
background:url("http://crysis-or.eu/img/navbar.png") repeat-x;
}
I would recommend the following:
Put the nav bar and the login window in separate wrapper-divs that prevent them from overlapping. You can change your HTML to:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<title>Server Portal | Login</title>
<link href="./css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="top-bar">
<div class="navbar">
</div>
</header>
<section id="main">
<div class="loginui">
</div>
</section>
</body>
</html>
Header and Section act just like Div, the only difference is their semantic significance.
Because the .top-bar and .loginui are no longer direct children of the body, your selectors won't work anymore. Change the CSS selectors to just .top-bar and .loginui instead of body > .top-bar and body > .loginui.
The header needs a specified height, and needs its position to be either 'relative' or 'absolute'. An absolutely positioned child element will be positioned absolutely to whatever the closest parent is that is also absolute, or explicitly relative. The background color is for illustration purposes only, and would be removed for production.
header {
position: relative;
height: 200px;
background-color: red;
}
You want the section to fill as much as it can, so it will need absolute positioning. The trick here, the thing that will fix your problem, is adding a min-height attribute to prevent the section from becoming smaller than its contents, thus allowing overlap.
section {
position: absolute;
top: 200px;
left: 0;
right: 0;
bottom: 0;
min-height: 400px;
background-color: blue;
}
That should work for you. The one problem with this solution is that the login window will be centered with respect to its container, rather than the whole window. It will be 100 pixels lower (one half of the header height) than it is with your current design. In order to fix that, if that's important to you, you would need to use a different method of vertically centering it. Put the top as 50%, then use a negative top margin to compensate for half the height plus half of the height of the header, too. Because it has a fixed height, that's easy: (400px + 200px) / 2 = 300px.
.loginui {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 0;
right; 0;
margin: -300px auto 0;
background: url('path/to/login_b_bg.png');
}
If you add this, it will create a scrollbar when trying to resize the browser instead of laying the elements on top of eachother
body
{
width:100%;
min-width: 950px; //ADD THIS. It sets the minimum browser width before creating a scroll bar.
min-height: 550px; // This does the same thing for a vertical scroll bar.
margin-left:-0px;
background-color:07080A;
overflow-y: scroll; // vertical scroll bar
overflow-x: scroll; //horizontal scroll bar
}
EDIT: ---------------------------------
After looking at your site and playing around a bit, your min-width is not an important factor, just the min height, if you set the values like this, the menus will never overlap.
body
{
width:100%;
height: 100%;
min-height: 750px; // Stops the menus from touching eachother vertically, but they can still line up in the x-direction.
margin-left:-0px;
background-color:07080A;
overflow-y: scroll; // vertical scroll bar
}
I have my markup like this (for argument's sake)
<div id="content"></div>
<div id="layout"></div>
<div id="layout2"></<div>
Then I use this CSS
#content {
width: 800px;
height: 600px;
margin: 0 auto;
} /* place this attached to the top of the page */
#sidebar,
#sidebar2 {
display: block;
width: 139px;
height: 100%;
position: absolute;
top: 0;
background: url(../images/layout/pretty.png) repeat-y;
}
#sidebar {
left: 50%;
margin-left: -700px;
} /* at this point, it appears to the left, and does not trigger scrolling when the window is resized.. it just slides off to the left */
#sidebar2 {
right: 50%;
margin-right: -700px;
} /* now, when you resize, the scrollbar appears as if the content stretches from #sidebar to #sidebar2 */
Is there a reliable way to do this? My only other option is to have a large background image, thats say 1200px wide with my repeating design on the left and right.. but this seems cumbersome if I could get this to work.
So my question is, is there a way to position 2 divs which won't affect the browser's interpretation of the width of the page (i.e. as you resize narrower, or smaller resolution, the divs are just hidden out of the viewport?)
Thanks!
EDIT
Thanks for the answers guys, but none are able to give me quite what I want. What's important is these divs that appear outside must be relative to the #content div. They need to appear to the left and right side, and butt up against #content. However, once the browser window is resized to not accommodate them, they should disappear under the viewport. I'd rather not use overflow-x: hidden as I'd like people with small resolutions/windows to be able to scroll left and right to see all the content.
It is possible, because I've done it.
The trick was using negative margins on absolutely positioned divs. For some reason the browser does not attempt to provide scrolling for objects pulled out of the page in this manner.
You can also use overflow:hidden. This will begin cropping your divs contents as the div itself shrinks (make sure the div uses a percentage or auto width so it will actually shrink).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cropped sides (no scrollbars)</title>
<style>
div.decor {
border: 3px solid red;
overflow: hidden;
position: absolute;
width: 48%;
height: 500px;
top: 2%;
}
div.content {
width: 60%;
height: 300px;
margin: 100px auto;
padding: 10px;
background-color: #DDF;
opacity: 0.7;
position: relative; /*hmmm.. without this content goes behind decor regardless of z-index... why?*/
}
</style>
</head>
<body>
<div class="decor" style="right:50%"><img src="images/teacher.jpg" width=400 style="position:absolute;right:0px;"></div>
<div class="decor" style="left:50%"><img src="images/teacher.jpg" width=400></div>
<div class="content">lorem ipsum</div>
</body>
</html>
Demo: http://test.dev.arc.net.au/cropped_sides.html
Key points:
overflow:hidden on absolutely
positioned decor divs
right:0 on content of left decor div
(forces cropping from left side)
unpositioned content goes behind the
decor regardless of z-index, but I
don't know why. Simple workaround is
to use position relative on your
content wrapper.
Very simple with absolute positioning. You can absolutely position the background and assign it a lower z-index than the main content. Example of just the right side - background color added for clarity:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Absolute Test</title>
<style type="text/css">
#content {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
background-color: blue;
z-index: 100;
} /* place this attached to the top of the page */
#layout2 {
height: 100px;
width: 100px;
z-index: 1;
position: absolute;
right: 50px;
top: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="content"></div>
<div id="layout"></div>
<div id="layout2"></<div>
</body>
</html>
Works with a picture as well:
#layout2 {
height: 600px;
width: 100px;
z-index: 1;
position: absolute;
right: 50px;
top: 0;
background: url(right-side.gif) repeat-y;
The absolute positioning removes it from the flow, so the browser won't add the width of your background to the window size. Since your content is a fixed width, this will even work with IE6.
You can use JavaScript to make the extra divs visible when the browser window is wide enough to handle both. There's no way that I know of to have the browser ignore the div for layout without actually making it hidden.
Yes you can do this but only on the left side of the screen.
If you have any content on the right (outside of the viewport) the browser will add horizontal scroll bars. The only exception to this is if you turn off the scroll bars but this cannot be done only horizontally across all browsers.
Back to the left side idea... Elements positioned off the left side of the viewport do not cause a horizontal scrollbar. You can have a fixed width layout that is centered on the screen (auto margins on either side) then from within this area you can absolutely position a new column in the left space. If the browser viewport is narrow you won't see it, if it's wide it will be completely visible and usable. The only problem is if it's half-way in the middle - your left column will be chopped off - this could look a bit messy!
Another alternative is to detect the width of the viewport with JavaScript and only show the column if there is room?
Alternately, you could place the two "floating" divs in a container div set to the max width, and set the "overflow" to "hidden".
That's the easiest way!
ie. Something to this effect:
<div id="wrap">
<div id="left></div>
<div id="center"></div>
<div id="right"></div>
</div>
css:
#wrap{
width:800px;
overflow:hidden;
}
Okay, this is driving me crazy right now.
I want to have a border around my document. It should be nicely going around the whole window/viewport. So I define:
body {
border: 1px solid red;
}
When my document is in quirks mode, this works fine. At least in IE, which is my primary target here. A red border shows up at the very edges of my page, obviously because by predefined CSS body and html are set to fill the screen.
When going to standards mode by setting a HTML 4.01 strict DOCTYPE, body and html collapse to the real (smaller) size of the content, the border is drawn right through the middle of the screen. So I define:
body, html {
padding: 0px;
margin: 0px;
border: 0px none;
width: 100%;
height: 100%;
}
body {
border: 1px solid red;
}
And I get — scroll bars, scrolling exactly one pixel to show the bottom/right borders. However, I want that border visible right away.
Is there a no-bullshit (like "height: 99.9%;", "overflow: hidden;" or "switch back to quirks mode") method to get a border at 100%, without unnecessary scroll bars? IE-only is fine, cross-browser would be better, of course.
As SpliFF already mentioned, the problem is because the default (W3C) box model is 'content-box', which results in borders being outside of the width and height. But you want those to be within the 100% width and height you specified. One workaround is to select the border-box box model, but you can't do that in IE 6 and 7 without reverting to quirks mode.
Another solution works in IE 7, too. Just set html and body to 100% height and overflow to hidden to get rid of the window's scrollbars. Then you need to insert an absolutely positioned wrapper div that gets the red border and all content, setting all four box offset properties to 0 (so the border sticks to the edges of the viewport) and overflow to auto (to put the scrollbars inside the wrapper div).
There's only one drawback: IE 6 doesn't support setting both left and right and both top and bottom. The only workaround for this is to use CSS expressions (within a conditional comment) to explicitly set the width and height of the wrapper to the viewport's sizes, minus the width of the border.
To make it easier to see the effect, in the following example I enlarged the border width to 5 pixels:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Border around content</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#wrapper {
position: absolute;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 5px solid red;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#wrapper {
width: expression((m=document.documentElement.clientWidth-10)+'px');
height: expression((m=document.documentElement.clientHeight-10)+'px');
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- just a large div to get scrollbars -->
<div style="width: 9999px; height: 9999px; background: #ddd"></div>
</div>
</body>
</html>
P.S.: I just saw you don't like overflow: hidden, hmmm...
Update: I managed to get around using overflow: hidden by faking a border using four divs that stick to the edges of the viewport (you can't just overlay the whole viewport with a full-sized div, as all elements below it wouldn't be accessible any more). It's not a nice solution, but at least the normal scrollbars remain in their original position. I couldn't manage to let IE 6 simulate the fixed positioning using CSS expressions (got problems with the right and bottom divs), but it looked horribly anyway as those expressions are very expensive and rendering got tediously slow.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Border around content</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#border-t, #border-b, #border-l, #border-r {
position: fixed;
background: red;
z-index: 9999;
}
#border-t {
left: 0;
right: 0;
top: 0;
height: 5px;
}
#border-b {
left: 0;
right: 0;
bottom: 0;
height: 5px;
}
#border-l {
left: 0;
top: 0;
bottom: 0;
width: 5px;
}
#border-r {
right: 0;
top: 0;
bottom: 0;
width: 5px;
}
</style>
</head>
<body>
<!-- just a large div to get scrollbars -->
<div style="width: 9999px; height: 9999px; background: #ddd"></div>
<div id="border-t"></div><div id="border-b"></div>
<div id="border-l"></div><div id="border-r"></div>
</body>
</html>
You'll love this one.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html {
height: 100%;
width: 100%;
display: table;
}
body {
display: table-row;
}
#wrapper {
display: table-cell;
border: 5px solid red;
}
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
http://www.test.dev.arc.net.au/100-percent-border.html
I figured since tables keep a lot of "quirky" behavior even under standards mode they might be the solution. Turning the HTML element into a table is pretty funny though.
Before marking this down for not working in IE6 consider that's a very trivial issue to fix. The point is that using the table drawing algorithm is the solution, and a pure CSS solution is also possible:
<table class="outer"><tr><td class="inner"> ...page content...
Until CSS3 gives us inside borders and box-model switching you need two divs. The first to give the 100% height and the second to provide the border. Otherwise the border goes on the outside of the 100% height (ie, 1px+100%+1px)
BTW. You should collect some stats before going "IE only". IE does not have the marketshare it once did. Anywhere between 10 - 30% of your users may be on other browsers.
Here's a simple solution using only the html and body elements (no need for nested divs). It takes advantage of the special behaviour of the HTML element (it can't have an outer border so it must shrink to display it).
<html>
<head>
<style>
html {padding:0; margin:0; border:5px solid red;}
body {height:100%; padding:0; margin:0; border:0;}
</style>
</head>
<body>
</body>
</html>
It also a bit ugly, but giving the body
position:relative;
top:-1px;
left:-1px;
worked for me.
Try setting borders for the html element. The body element is only as high as it needs to but, as far as I remember, the html element takes the whole space (it's where you should set your background, too).
I'm not sure how borders look, I usually only set backgrounds.
border is out of 100% size. Try padding: -1px or margin: -1px.
In an HTML page, if I align some <div>s with "right: 0px", they all look very nice, as I expect. However, if I make the browser window smaller and the horizontal scroll bar appears, when I scroll the page to the right, I see an unexpected white space (instead of the background colors of my <div>s). It seems that my <div>s are aligned relative to the visible area of the page. See the sample code below:
<html>
<head>
<style>
<!--
#parent {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: yellow;
}
#child {
position: absolute;
left: 100px;
top: 300px;
width: 1000px;
height: 400px;
background-color: blue;
}
-->
</style>
</head>
<body>
<div id="parent"><div id="child">some text here</div></div>
</body>
</html>
Is there any way to make the "right: 0px" property align the controls relative to the size of the entire page, not only the visible area?
Thanks.
The Problem is the "absolute" position in the parent element, because it's scrollable per definition.
If you set the position to "fixed" and an additional attribute overflow to "scroll", it should look like expected.
#parent {position: fixed;
overflow: scroll;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: yellow;
}
if you add
html{ border: 3px solid red }
to your stylesheet,
you'll see that you are setting the 'right' property to the edge of the page.
I think you need to rethink your strategy.
What are you trying to achieve?
Dont use absolute position unless you absolutely must. Use margins and paddings instead. And dont forget to reset margins and paddings so you dont start with whatever the browser has as default.
Is it necessary to use absolute positioning in your case? Otherwise you can remove the left and right properties and simply use width: 100%;
my answer is i want change align scroll?
example "right align" scroll.
#ex {overflow: scroll}
Right? Bottom? Are sure these are even real CSS attributes? Normally you would just set top/left and then width/height...