I'm trying to develop a 5 part top layout that will work on any browser. Its 5 part because you have the center menu that spans 1024.
Then you have a left and right side of the menu that has some non-repeating images that will run over into a repeating image that I want to go to infinity.
This has proven to be very hard, and I've probably forgotten that it could be impossible...
What I have done is get so close I can almost taste it. If you could look at my code and tell me what's going on with the "right_side" and it's width - it's causing some serious trouble with the scrollbar.
Image of what I'm talking about:
http://i.imgur.com/xertW.jpg
The following is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
.left_stretch{
background-color:red;
z-index:-10;
position:absolute;
top:0px;
left:0px;
width:50%;
height:100%;
}
.left_side{
background-color:blue;
z-index:-5;
position:relative;
top:0px;
right:512px;
width:100%;
height:100%;
}
.center{
background-color:green;
height:500px;
width:1024px;
margin-left:auto;
margin-right:auto;
}
.right_side{
background-color:grey;
z-index:50;
position:relative;
top:0px;
left:512px;
width:100%;
height:100%;
}
.right_stretch{
background-color:orange;
z-index:-10;
position:absolute;
top:0px;
right:0px;
width:50%;
height:100%;
}
</style>
</head>
<body>
<div class="left_stretch">
<div class="left_side"></div>
</div>
<div class="center"></div>
<div class="right_stretch">
<div class="right_side"></div>
</div>
</body>
</html>
And then I'm of course worried that ie 7 and ie 6 is messing things up... But I just want to solve this first...
Any hints at all?
Realized that i can jsfiddle your code, so i tested it.
It's your <div class="right_side"></div> whats causing it.. its just basically hanging in there.. creating the space.
I'm not really sure why the structure is like this so im not gonna give any hints as far as fixing it goes. ..unless you want a quick fix.. which is to delete that element :D
Related
Hello and thanks in advance for the help :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
</style>
</head>
<body>
<div id="bg">
<img src="images/bck.png" >
</div>
</body>
</html>
I need some help to get it similar to the background that you find on this website: http://hotdot.pro/en/
As you can see I managed to make it resize accordingly but i don't get the best results with the horizontal scroll bar(for now it is ok if the bar is displayed).
The idea is that the width is 3 times larger than the height and I was thinking to achieve this with overflow-x: auto and overflow-y:hidden as shown in the example from the second row, 6-th column on these website: http://www.brunildo.org/test/Overflowxy2.html
So thank you in advance and feel free to make changes to the code because I really understand better by example.
I have a canvas element inside a div element. The canvas size can change, and I want it vertical centered. I'm using this CSS approach:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vertical Centering</title>
<style>
html,
body{
height:100%;
width:100%;
margin:0;
padding:0;
}
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
background:#aae;
}
#container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
canvas{
width:400px;
height:300px;
display:inline-block;
vertical-align:middle;
background:#fff;
}
</style>
</head>
<body>
<div id="container">
<canvas></canvas>
</div>
</body>
</html>
You can see it working on this fiddle: http://jsfiddle.net/8FPxN/
This code works great for me, until the browser resizes under the canvas width. The virtual element defined by the :before selector stands on the first line, and the canvas falls to the second line. I'm trying to keep them sticked, avoiding the line break, and showing scroll bars when needed. Adding the overflow:auto rule to the container shows the scroll bars, but the line keeps breaking.
The canvas size can change, so the top:50%; margin-top:- ($canvas_height / 2); approach is not suitable for this. Well, it can be, but I prefer not to control the margin-top using JavaScript. Just CSS would be great.
Any ideas? Thanks!
It seems (from limited testing) that adding white-space: nowrap; works:
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
background:#aae;
white-space: nowrap;
}
Updated JS Fiddle demo.
Adding white-space:nowrap should do the trick. http://jsfiddle.net/David_Knowles/aEvG5/
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
white-space:nowrap;
}
EDIT: correct fiddle
I am trying to make a in window app similar to
http://jsfiddle.net/szfkn/5/ structure but I want it to not overlap on the sizebars/footer/header/content is there a way to do this while still maintaining a fluid layout?
Or any good pointers on keeping content in window without scrolls and fluid.
Steve Sanderson in his blog shared a few pointers on how to generate a nice css layout: http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
Don't know if it is the answer you are looking for but it is definetely worth reading :)
<html>
<head>
<title>Fluid Layout</title>
<style>
.hBar, .vBar
{
opacity:.5;
position:absolute;
font-weight:bold;
font-family:Tahoma, Arial, Times New Roman;
text-align:center;
}
div
{
display:block;
}
.hBar
{
height:10%;
width:100%;
left:0px;
z-index:5000;
font-size:1.2em;
}
.vBar
{
width:5%;
height:100%;
top:0%;
z-index:3000;
font-size:.7em;
color:Lime;
}
div#TopWrap
{
background-color:#000;
top:0%;
}
div#RightWrap
{
background:#0FF;
right:0px;
}
div#BottomWrap
{
background-color:#F00;
bottom:0px;
}
div#LeftWrap
{
background-color:#FF0;
left:0px;
}
div#ContentWrap
{
padding:7% 0% 0% 8%;
position:relative;
z-index:1000;
}
</style>
</head>
<body>
<div id="TopWrap" class="hBar">
Top Wrap</div>
<div id="RightWrap" class="vBar">
Right Wrap</div>
<div id="BottomWrap" class="hBar">
Bottom Wrap</div>
<div id="LeftWrap" class="vBar">
Left Wrap</div>
<div id="ContentWrap">
<h3>
Fluid Layout</h3>
<div>
#* Content goes here *#
</div>
</div>
</body>
</html>
Can't guarantee browser compatibility, but should get you a good foundation. The example I have provided just pads the content wrapper. You could modify the div#ContentWrap styling to: 'margin:15%;overflow:hidden;'. Be mindful that any padding you place on that container will affect your overall size.
As far as the content scrolling, there are plenty of jQuery plugins out there that can help with the content scrolling. http://jquerytools.org/demos/scrollable/vertical.html seems to have a good example of what you are looking for.
Best of luck!
I've looked everywhere, and can't figure out if there's a way to do this. Basically, I want to mimic this layout, without using the CSS3 attributes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bad way...</title>
<style>
html,body{
margin:0px;
height:100%;
}
.tall{
background-color:yellow;
min-height:100%;
height:100%;
padding-top:50px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.short{
background-color:blue;
height:100%;
}
</style>
</head>
<body>
<div class='tall'>
<div class='short'>
Foo bar baz
</div>
</div>
</body>
</html>
I don't care how much extra markup or CSS there is, as long as its cross-browser compatible. I would just settle with the ol' faux columns, but it won't work in this situation. The short div is going to have an iframe, which needs to be the full height.
The tall div is just there to show what its supposed to look like. All I want, is a div that is full height, but with a 50px margin on top. All of my attempts just extend the height to 100% + 50px.
I know I can do it with JavaScript, but I would really like to get a CSS solution if its possible.
You can use absolute positioning as described here: http://www.alistapart.com/articles/conflictingabsolutepositions/
You can specify all sides of div e.g.
position: absolute;
top: 50px;
right: 0;
left: 0;
bottom: 0;
Instead of " padding-top:50px;" in .tall{} use margin-top:50px;
remove:
.tall{
min-height:100%;
}
along with css3 property. Should work fine. New css would look like
.tall{
background-color:yellow;
height:100%;
padding-top:50px;
}
.short{
background-color:blue;
height:100%;
}
I've been writing a small notice board site in ASP.NET and nothing i do will make it work properly in IE6. The main page has a header DIV, with the content region below it. Within this region are three further regions, a search facility in the top left, a list of notices below it, and the currently displayed notice to the right of these two. The search and notice list regions are 240px wide, and the displayed notice region takes up the rest of the width. The problem is that the notice list and displayed notice regions should both scroll if the content is bigger than the displayed area (i.e. overflow:auto style) but this doesn't happen in IE6. Everything else displayes fine. The layout is as follows:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Notice Board</title>
<style type="text/css">
body
{
margin:0;
border:0;
padding:0;
height:100%;
max-height: 100%;
overflow: hidden;
}
#header
{
position:absolute;
top:0;
left:0;
width:100%;
height:130px;
overflow:hidden;
}
#footer
{
position:absolute;
bottom:0;
left:0;
width:100%;
height:0px;
overflow:hidden;
}
#content
{
position:absolute;
top:130px;
left:0;
bottom:0px;
right:0;
overflow:hidden;
}
* html body
{
padding:130px 0 0 0;
}
* html #content
{
height:100%;
width:100%;
}
#leftdiv
{
position:absolute;
left:0;
width:240px;
top:0;
height:100px;
overflow:hidden;
}
#listdiv
{
position:absolute;
left:0;
width:240px;
top:100px;
bottom:0px;
overflow:auto;
}
#noticediv
{
position:absolute;
left: 270px;
right:0;
top:0;
bottom:0;
overflow:auto;
}
</style>
</head>
<body>
<form id="form1" runat="server" method="post">
<div id="header" >
<!-- Header content goes here -->
</div>
<div id="content">
<div id="leftdiv">
<!-- Content region for the search facility goes here -->
</div>
<div id="listdiv">
<!-- Content region for the notice list goes here -->
</div>
<div id="noticediv" >
<!-- Content region for the displayed notice goes here -->
</div>
</div>
</form>
</body>
</html>
Any ideas?
For a DIV to scroll it must have at least a height and/or a width specified, depending on which dimension you want it to scroll through. Some browsers (eg Firefox) will infer a height if given both a top and bottom value. IE6 will not, however.
If you are still stuck with supporting IE6, then a lot of CSS issues are resolved by using Dean Edwards' IE7 scripts -- I've not faced this particular problem, but have been able to take designs from more compliant browsers and have them "just work" using these scripts. With the magic of IE conditional comments, you can just serve the fix-ups to those people still stuck with browsers that are 2 versions behind current.