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!
Related
I am attempting to write a simple 404 (Page not Found) error page for my website: bazingamanphdgaming.t15.org. This is my code so far:
<html>
<head>
<title>404 - Not found</title>
<style>
#title {
position:fixed;
top:40%;
color:white;
font-size:40px;
text-align:center;
width:100%
}
#link {
position:fixed;
top:45%;
font-size:20px;
text-align:center;
width:100%
}
</style>
</head>
<body style="background-color:black">
<div id="title"><b>404 - Page not found</b></div>
<div id="link"><br />
<a style="color:white" href="http://bazingamanphdgaming.t15.org">
Return to the BazingaManPHD Gaming home page.
</a>
</div>
</body>
</html>
However when I reduce the browser window's width the bold text in the #title goes over the link going back to the homepage. This is a screenshot:
Of course to fix this problem I would need to put a min-width property on the #title like so:
<div id="title" style="min-width:200px"><b>404 - Page not found</b></div>
I am using 200px as an example there, but it doesn't seen to work, whatever size I put it as. Any help would be appreciated.
Simply add this to your CSS:
#title {
white-space: nowrap;
/* rest of your styles */
}
This will prevent the text in #title from wrapping.
You could enable vertical align by setting display:table and display:table-cell to the containers.
html,body{
width:100%;
height:100%;
}
body{display:table}
.page {
background:black;
display:table-cell;
vertical-align:middle;
text-align:center;
width:100%;
height:100%;
}
.title {
color:white;
font-size:40px;
}
.link {
font-size:20px;
color:white;
}
<div class="page">
<div class="title">404 - Page not found</div>
<a class="link" href="http://bazingamanphdgaming.t15.org">Return to the BazingaManPHD Gaming home page.</a>
</div>
This way it will center whatever you put into it.
Demo at http://jsfiddle.net/gaby/f6c1wupL/1/
here is a fiddle to take a look.
Basically there were a couple problems in your css.
Setting the position of elements to fixed takes them out of the natural flow.
If your thinking about the page as a piece of paper these fixed elements are floating above the paper wherever you place them.
By putting them relative you are putting them onto the piece of paper so the position of other elements can have an effect on their position. i.e bumping them out of the way.
by marking them relative the 'top' selector no longer works instead to move the items down the page give them a margin-top to offset them from the the bounds of the body(it's parent element).
#title {
position:relative;
margin-top:40%;
color:white;
font-size:40px;
text-align:center;
width:100%;
http://jsfiddle.net/crnc6ht5/
I have this kind of structure coming from the following code. And I cannot achieve to do the following despite my efforts and reading.
In pure CSS, how may I force X to stick the right border of the container, being under Y2/Y1 divs ?
The container and C do not have a fixed width (I put a fixed width in the code for convenience). All the other ones have fixed width.
.
I
<HTML>
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
BODY {
font-family:Arial;
}
DIV.container {
width:200px;
height:20px;
line-height:20px;
font-size:9px;
background-color:yellow;
}
DIV.BlocA {
width:20px;
background-color:#AAAAAA;
float:left;
}
DIV.BlocB {
width:20px;
background-color:#999999;
float:left;
}
DIV.BlocC {
width:20px;
background-color:#666666;
float:left;
}
DIV.BlocX {
padding-right:9px;
width:50px;
background-color:#00E9E9;
text-align:center;
float:right;
-moz-opacity: 0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter:alpha(opacity=70);
}
DIV.BlocY1, DIV.BlocY2 {
width:20px;
float:right;
}
</style>
</HEAD>
<DIV class="container">
<DIV class="BlocA">A</DIV>
<DIV class="BlocB">B</DIV>
<DIV class="BlocC">C</DIV>
<DIV class="BlocY1" style="background-color:red;">Y1</DIV>
<DIV class="BlocY2" style="background-color:green;">Y2</DIV>
<DIV class="BlocX">X</DIV>
</DIV>
</BODY>
</HTML>
I am not sure if this is what your desired result was.
CHECK DEMO
I used clear:both; and float:left; on the elements you wanted to the left. I also wrapped the 'Y' divs so that I could float them side to side.
I share with you the link that changed my life and how I deal with CSS positioning
http://www.barelyfitz.com/screencast/html-training/css/positioning/
To control which div is on top you may give them each a z-index.
I would either float them all in a certain order or I would use position relative/absolute
I am working on my portfolio page for class. I am trying to get the web page to adjust with the browser when the browser gets resized. Mainly the navigation links I have in header. Also when screen is in full my navigation links are in the top right corner. But when I restore down the window it is center in middle. What do I do? Any help will be appreciated. Here is my code. If that helps any.
#header,
#main,
#footer{
display:block;
position:relative;
float:left;
}
#header,
#footer{
width:1100px;
height:80px;
}
#header{
margin-bottom:2px;
}
#footer{
margin-top:2px;
text-align:right;
border:2px;
}
#main{
width:650px;
height:200px;
margin-left:200px;
margin-right:200px;
margin-top:200px;
}
#leftcol{
float:left;
}
#nav{
border:2px solid #F00;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
<html>
<head>
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
.auto-style1 {
text-align: left;
}
</style>
</head>
<body>
<div class="auto-style1">
<div id="header">Header
<h1>Creative Minds Inc.</h1>
</div>
<div id="nav">Navigation
<ul>
<li>Homepage
</li>
<li>Tips and Trick
</li>
</li>About me
</li>
<li>Get in Touch
</li>
</ul>
</div>
<div id="main">Main
<h2>A passion for design and a creative mind.</h2>
<h3>Design, Develop, Dream</h3>
</div>
<div id="sidebar">Navigation</div>
<div id="footer">Footer
<h3>Creative Minds Inc. Jonathan Mourning</h3>
</div>
</div>
</body>
</html>
You can use the standard resize DOM event. Then at
window.onresize = function(event) {
...
}
you can adjust the elmenets positions and size accordingly.
However In general, you could avoid fixed sizes and provide percentage values for your DOM elements, in order for them to resize automatically under all screen sizes and ratios. For example, if your page has a vertical orientation, change width to 100% and have your #main element always align the center of the screen:
#main{
width:650px; /*or 70% */
height:200px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:200px;
}
Here is an example with the code :http://jsfiddle.net/TZGXf/4/
Here is a full screen: http://jsfiddle.net/TZGXf/4/embedded/result/
Instead of using set widths like width: 1000px; use percentage values like width: 100%;. But be careful as this can cause unforeseen problems.
I've dealt with divs collapsing on their content when using float positioning (e.g. solving with overflow:hidden), but am trying to learn absolute/relative positioning and can't figure out why the container div is collapsing. My test case:
<html>
<head>
<style type="text/css">
body {
background-color:#eee;
}
#content {
margin:0 auto;
position:relative;
border:1px solid red;
width:800px;
display:block;
background-color:white;
}
#header {
border:1px solid black;
background-color:#777;
color:white;
width:800px;
position:absolute;
left:0;
top:0;
}
#leftcol {
position:absolute;
border:1px solid black;
background-color:#ddd;
width:200px;
top:100px;
left:0;
}
#rightcol {
position:absolute;
top:100px;
left:205px;
border:1px solid black;
background-color:#ddd;
width:500px;
}
</style>
<title>CSS Positioning Example 1</title>
</head>
<body>
<div id="content">
<div id="header">
<h1>The Awesome Website</h1>
</div>
<div id="leftcol">
<h2>About</h2>
<p>
This website is so awesome because it was made by someone
and that is really all there is to it. There.
</p>
</div>
<div id="rightcol">
<p>This is where I'm going to put some real body text so that it goes
on and on for a while and so I can get a sense of what happens when
the text in the paragraph keeps going and the box containing it keeps
going on as well.
</p>
</div>
</div>
</body>
</html>
What's going on here? Why does the red-bordered content div collapse even though it contains the other divs?
It is because all of its content is styled as position:absolute. This takes those elements out of flow and (layout-wise) it's like they don't even exist. Consider using position:relative to position the content.
You really need to read these articles at A List Apart
CSS Positioning 101
CSS Floats 101
Your question is why the div with red borders don't expand to it's content. As Joseph said the problem is that you take the elements out of the document flow. Positioning an element absolutely make the element's position independent from it's parent and siblings.
I fixed your code using CSS float property. Take a look here.
I highly recommend you read those articles.
I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.
Here's my HTML:
<html>
<body>
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
And here would be my basic CSS, without implementation of CSS Sticky Footer:
div#container {
width:960px;
margin:0 auto;
}
div#main {
background-color:black
padding-bottom:30px;
}
div#content {
width:425px;
}
div#footer {
position:relative;
bottom:0;
width:inherit;
height:90px;
}
To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?
And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead
Try making the footer position:fixed.
http://jsfiddle.net/QwJyp/
Update
I'm a little bit closer: http://jsfiddle.net/QwJyp/1/. Perhaps somebody can build off it. If you remove the line with !important defined, it allows the main with height:100% to show up. But there's still a lot of extra padding at the bottom of the div which I can't figure out. I'll continue later when I have more time. Good luck! Hopefully this helps with some direction.
Here you go: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
EDIT
Using the technique in the article above (tested - and works in fiddle):
HTML
<html>
<head>
</head>
<body>
<div id='container'>
<div id='main'>
<div id='content'>Hello</div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
CSS
html, body {
margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
background-color: #333;
}
div#container {
min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
padding-bottom:90px; margin:0; padding:10px;
}
div#content {
width:425px;
}
div#footer {
position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}
idea is to have #main with padding-bottom x, container min-height: 100%, footer after container and with margin-top -x
Try using with absolute position for the footer div
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
Make sure that body height is 100%
html,body
{ height:100%;
padding:0;
margin:0;
}
div#container {
width:960px;
margin:0 auto;
position:relative;
height:100%;
}
div#main {
background-color:black;
padding-bottom:90px;
}
div#content {
width:425px;
}
div#footer {
position:absolute;
bottom:0;
width:inherit;
height:90px;
width:960px;
}
I know the html is structured differently than what you're working with, but perhaps you can alter your core structure to mimic this (because it works): CSS Sticky Footer
It looks like this group has done a lot of research on the topic and have found this it be the best (maybe the only?) way...through many different versions.