Menu
I've been working on a website design for a chat site, but every attempt I make to get it right has failed so far. I have tried to do it with tables, it always failed in one browser (Mostly IE tho), divs, and a lot more.
The website has to be fullscreen, with a min-width of 900 and a min-height:500px so it won't get any smaller. I want to do this without any javascript (I have made it in JS, but this needs to be done without it :< )
Here is a picture of what it should look like.
I hope this is possible in pure CSS/HTML
Thanks in advance
EDIT
I got it working in Firefox + Chrome, but IE decides to not follow any rule...
<html>
<head>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
</style>
</head>
<body>
<div style="height: 100%; width: 100%;">
<div style="position: relative; height: 100%; width: 100%; background-color: gray; min-width: 900px; min-height: 500px;">
<div style="position: absolute; height: 30px;left:0px; right: 300px ; background-color: yellow; bottom: 0;">
Input
</div>
<div style="position: absolute; height: 200px; width:300px; right: 0px; background-color: green; bottom: 0;">
ad
</div>
<div style="position: absolute; bottom: 200px; width:300px; right: 0px; top: 20px; background-color: blue;">
online
</div>
<div style="position: absolute; width:300px; right: 0px; top: 0px; height: 20px; background-color: red;">
online menu
</div>
<div style="position: absolute; right: 300px; top: 0px; left: 0px; height: 20px; background-color: yellow;">
tabs
</div>
</div>
</div>
</body>
</html>
535
If you set the width to 100% on the body element you will have a full page width. This is essentially equivalent to not setting a width value and allowing the default. If you want to use the body element as a smaller container and let the HTML element fill the page, you could set a max-width value on the body.
Alright, a few questions were extracted from your question;
First off, a little tip: CSS in IE seems to be extremely different in most cases than other browsers. For this, use one of the various "IE Hack" symbols (I use the # symbol) in front of a property for it to only apply to IE.
For example:
html
{
background: #F00 ;
#background: #0F0 !important ;
}
will make all browsers show a red background, and only IE will have a green background.
Second, why not use the min-width and min-height properties? They are compatible with everything (and buggy in IE6 or earlier; check out here for more info) and always do the trick with me. Set the width and height (obviously) to 100%, and all of this on both html and body (like the following)
html, body {
width: 100% ;
height: 100% ;
min-width: 900px ;
min-height: 500px ;
}
As for other methods, you can try wrapping the entire page data (starting right after the body tag) with a div (making sure you leave it block) to have it span across the entire page.
Another note that's worthy of, well, noting, is that you should also apply an overflow property to the html/body as well if you want a clean full-screen site. Where you'll lose content if you go outside the window's width, it will remove any scrollbars if you choose to get rid of them.
Hope this helps!
EDIT:
After looking at your new image link, this one is easy! :]
Keeping in mind that divs are block by default, the following should work (this is untested, so some tweaking may be necessary):
<body>
<div id="page">
<div id="right">
<div class="thirty">Top bar</div>
<div class="tall">Middle bar</div>
<div id="rt_bot">Bottom bar</div>
</div>
<div id="left">
<div class="thirty">Left Top Bar</div>
<div class="tall">Left Mid Bar</div>
<div id="lf_bot">Left Bottom Bar</div>
</div>
<div id="container"></div>
</div>
</body>
and the CSS:
html, body {
width: 100% ;
height: 100% ;
min-height: 500px ;
min-width: 900px ;
margin: 0px ;
}
div#page {
height: 100% ;
}
div#right {
float: right ;
height: 100% ;
width: 300px ;
}
div#rt_bot {
height: 200px ;
}
div#left {
float: left ;
}
.thirty {
height: 30px ;
}
.tall {
height: 100% ;
}
div#lf_bot {
height: 50px ;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
