how can one create a css layout as seen on google wave that resizes automatically according to window size without the need for scrolling (apart from the specific elements on each page which are using scrollbars) with each div positioned in a similar fashion as seen on the website? i really love this interface and have been trying to create it on dreamweaver (web programming is a hobby) without using tables as practice.
i am learning css from scratch.
i have included an image for reference.
many thanks!
The columns can be achieved using CSS floats. Simply create three div tags and apply float: left and assign a width to each one.
The 100% height can be achieved through CSS, but in Wave's case javascript is probably being used. The particular logic depends on the site's design, since you need to take into account other elements on the page, such as a header bar.
If you were interested, you could use Firebug/Developer console to inspect how Google Wave's basic layout is setup tag-wise. One wrapper div, 3 column divs, and a div or two within each column for the panels.
I made a lil example about how you could try to start achieving that kind of layout: http://jsfiddle.net/steweb/A77gy/
Working with widths is pretty simple because you set floating columns, % widths/margins and opla' you get the fluid width layout.
Working with heights is very hard I think, because if you want a 'fluid' behavior that also affects heights, without using abs positioning (good for setting % height, but you lose the % width powerful), you should do something with JS too (even if I would avoid to do something that concerns the pure layout by JS) - I apologize for this complicated sentence :D.
By dealing with this kinds of layout 'problems' you will also notice that some browsers (...IE?...) sometimes behave in a weird way... so you will need some kinds of tricks to make everything working in EVERY browser (this is the main challenge IMO)
markup:
<div id="header">
link 1
|
link 2
|
link 3
|
link 4
<!-- or a <ul> -->
</div>
<div class="column" id="first-column">
<div class="window" id="window-1"></div>
<div class="window" id="window-2"></div>
</div>
<div class="column" id="second-column">
<div class="window" id="window-3"></div>
</div>
<div class="column" id="third-column">
<div class="window" id="window-4"></div>
</div>
css:
body, html{
height:100%;
}
#header{
width:100%;
height:30px;
background:black;
}
.column{
float:left;
margin:1%
}
#first-column{
width:10%;
}
#second-column{
width:30%;
}
#third-column{
width:50%;
}
.window{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #CECECE;
width:100%;
}
#window-1{
height:100px;
}
#window-2{
margin-top:10px;
height:200px;
}
#window-3{
height:310px;
}
#window-4{
height:310px;
}
Related
I'm having some trouble getting this done 'right'...
its a two parter. :)
1.) is getting the layout to look like how I need it (without resorting to tables!), but for some reason I can get the divs and nested divs to 'act right'... (surely its my error/mis-understanding)
I am trying to get a layout like so, using only DIVS and display..etc..
http://dmstudios.net/misc/layout.jpg
I have attempted it myself (so you dont think Im just looking for a handout) :)..
but some things like the vertical alignment of the custom div container isnt working..etc
Here is my JSFiddle attempt: http://jsfiddle.net/yeKxU/1/
JSFiddle Code:
<div class="container">
<div class="logo"><img src="http://academickids.com/encyclopedia/images/thumb/5/53/150px-Blue_morpho_butterfly_300x271.jpg" /></div>
<div class="custom">
<div class="president">item1</div>
<div class="mission">item2</div>
<div class="active">item3</div>
</div>
<div class="url">www.nike.com</div>
<div class="freetext">random text</div>
</div>
CSS:
* {
border: 1px dashed blue;
padding:0;
margin:0;
}
div{
display: inline-block;
border:2px solid;
border-radius:2px;
border-color:#FF0000;
}
.container{
width:450px;
padding:0;
margin:0;
}
.logo{
padding:0;
margin:0;
}
.custom{
vertical-align:top; /* doesnt work to move the 'custom div' to the top */
/* width:63%;*/ /*needs to auto stretch to fit the rest of the space after image*/
}
.custom div{
display:block;
background-color:#EEEEEE;
}
.url{
width:100%;
}
.freetext{
width:100%;
}
Couple notes: the '3' fields to the right of the image div, will have varying data in them.. (meaning I am not clear if they will need to wrap or not...hopefully not a problem)
The second portion of the question, is about implementing some dynamic capabilities. (jQuery I imagine should work)..
2.) Knowing the general (perfect scenario) layout I am trying to achieve above...
I need to also code things in a way.. that is certain parts of the data are MISSING, then that 'cell' (div) is removed/hidden (or something)
*(I am building this using PHP printed to screen, to spit out the HTML/DIVS..etc and using variables to populate the content of the DIV/image..etc)
So for example..
if the IMAGE was not there (variable is empty).. Id like the the CUSTOM div that has 3 child divs in it 1 for each of the text fields) to expand all thew way to the LEFT.. as the logo/image DIV will have nothing (or be removed/hidden since its empty)
Same goes for the text fields in the CUSTOM DIV container.. if one of those fields are BLANK... its should NOT just have a blank/empty placeholder... it should be removed/hidden.. and the rest of the data butted up to the TOP (under any other fields that may be present)
I've seen examples (sorta) where you have some DIV blocks on the stage.. click on one.. it removes it.. the other DIVS move over...etc... (sorta the same thing, except I cant manually click things to remove them)..
So maybe some jQuery to go through the 'DIVS' see if its empty and then remove itself?
-or-
would just having some sort of layout that is fluid/liquid work? be better? so I dont really need to check if its empty.. if nothing is IN the cell/DIV.. then the other just adjust their WIDTH/POSITION to make-up for it?
Let me know what you guys think? JSFiddle examples are appreciated!
Thanks!
to get the layout in question one you do like this...
#divA {float:left;}
#divB {float:left;}
before divC you can put an empty div (id="empty") like this...
#empty {clear:both;}
this should fix the design, assuming you have your width seth on the divs...
for question 2 i suggest you create the divs dynamically, when you create your content on page... if you want examples, just let me know...
There are a lot of properties you can set on your divs, one is max-width... one risk of not setting any value on width on your divs is that if your total width get wider than your holding container your divB will stack up under divA... and i think you dont want that to happen... :) you can do some experiments with min-width and max-width on your divs to get the behavior you want because i guess you have some values on your pic to play with...
divA {
float:left;
max-width:50px;
}
divB {
float:left;
min-width:400px;
}
as example, you have to find your values, trial and error-way i guess...
there is also a lot of guides on internet if you search on css and positioning... happy hunting!
Is there a common CSS layout technique for controlling the vertical source order of a page?
For example, can I change this...
<container>
<header></header>
<content></content>
<footer></footer>
</container>
...to this...
<container>
<content></content>
<header></header>
<footer></footer>
</container>
...while still having the <header> appear at the top of the page, above the <content>?
In other words, I'd like to apply the techniques used for controlling horizontal source order, such as "One True Layout" and "Holy Grail", to the vertical source order of the page.
This question asks essentially the same thing, but the responders didn't seem to get what was being asked and the asker's solution seems cumbersome.
I might get criticism for micro-optimizing, but Mega Menus and responsive design keep pushing my page content down further and further.
Littlefool's answer works well if you know the height of the block you are moving (if you are swapping two blocks, it's sufficient for either of them to have a fixed height).
However it doesn't help if the blocks all have flexible height. In that case you can try the technique from http://tanalin.com/en/articles/css-block-order/:
<div class="container">
<div class="block-1">1st block</div>
<div class="block-2">2nd block</div>
<div class="block-3">3rd block</div>
</div>
<style>
.container { display: table; width: 100%; }
.block-1 { display: table-footer-group; } /* Will display at the bottom. */
.block-2 { display: table-row-group; } /* Will display in the middle. */
.block-3 { display: table-header-group; } /* Will display at the top. */
</style>
(see demo: http://jsbin.com/etujad/11/edit)
Caveats:
It only works for up to 3 blocks (you may be able to achieve more by nesting).
It doesn't work in IE6/7, and there are some wrinkles in IE8.
Many browsers (except Firefox?) don't allow replaced elements like images to be given these display values (testcase), so you'd have to wrap them in a div and reorder the div instead.
You could either supplement this with JavaScript for old IE, or depending on the design it might be acceptable to just leave the blocks in the wrong order in old IE (note that very few smartphones run old versions of IE, as even Windows Phone 7.5 runs IE9, so this is a good option if you're only swapping the source order on mobile devices).
You cannot alter the source of a page with CSS. You can, to some mild degree, alter the HTML output, but not in this way.
The order of elements in an HTML document has meaning. So typically it won't make sense for your source to have a heading which comes after its related content. It is the order which defines that relationship in many cases.
What you can do is use CSS techniques to lay out these elements visually so that they appear to be in different order.
But their vertical order in HTML should be semantically logical.
You should know that searching for "the holy grail" is quite useless. Although I can understand why you want to have the content section in front. Usually search engines index the pages on the content as they appear in html. Having first a bunch of headers and other things won't do any good.
I haven't had time to look into HTML5 and CSS3 yet, but it is quite possible to alter your layout with only css. I'm a developer so my css and html skills are less then real web producer but you can play around with the position properties in CSS.
<div id="content">this is your content</div>
<div id="header">this is the header</div>
<div id="footer">this is your footer</div>
This html can still show the header tag on top of your page with the following css.
#header
{
height:100px;
width:100%;
background-color:Red;
position:absolute;
top:0;
}
#content
{
margin-top:100px;
height:500px;
background-color:Green;
}
#footer
{
height:100px;
background-color:Blue;
}
I hope it gives you an idea of what is possible. (since you mention HTML5 I suppose you don't need to worry about older browsers but only the latest releases).
You can use the old friend display:table to re order your element.
Lets say this is your source.
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
In order to reorder try this.
#container{
display: table;
}
#content{
display: table-header-group;
}
#header{
display: table-row-group;
}
#footer{
display: table-footer-group;
}
bam. you got it. Here is the proof of concept. http://jsfiddle.net/k0La8egp/1/
I'm trying to convert my site from using tables to just using css and divs but I'm running into a lot of problems with trying to figure how to exactly do it, I've been looking for tutorials on centering a site with css and how to put divs side by side but I can't really find one that does both and I keep getting confused by how to exactly achieve this, I asked around a bit and I got told to use absolute positioning but still I can't really wrap my head around this.
So basically how would I arrange the 2 central div side by side while keeping the whole thing centered in the browser? The following image is the layout I'm trying to achieve:
the blue boxes are eventual other stuff I might want to put in them, such as a blog requiring again the use of side by side divs.
right now I have the following layout:
<div id="wrap">
<div id="banner"> banner </div>
<div id="navbar"> navigation links </div>
<div id="body"> stuff </div>
<div id="footer"> stuff </div>
</div>
General idea: http://jsfiddle.net/JjbJE/
A little specific but provide you a great adventure to learn HTML | CSS : http://jsfiddle.net/JjbJE/3/
float:left|right this property does the side by side trick
clear:both this property clear away the float property
Other things are pretty easy to learn, just head to W3Schools
First you need a main container to center everything. Then two separate divs. See the HTML below:
<div id="main">
<div class="box">Left Box</div>
<div class="box">Right Box</div>
<div class="clear"></div>
</div>
Here is the CSS you will need:
#main{
width:960px;
margin:0 auto;
}
.box{
width:450px;
float:left;
border:solid 1px #000000;
}
.clear{
clear:both;
}
Hope that helps.
Here's my general overview on converting to a CSS based layout - if you have a table based layout, this is a good plan - in the end you can do more, Google will like you more, and it's much cooler.
My strategy is to look at all the groups of things on your page. Whatever needs to go into a group together, put inside a div. Assign this div a class and/or id to style it. If the divs are grouped, put them together in a div too.
In your case, you have two chunks of content to group inside of divs. Style them to be the size and shape you like, background, border, whatever is needed. Then group them together in an additional div, and center it. This and the rest of the page content can go inside a container div, which will determine the width of the page, how it's aligned, etc.
One possibility is to have a centered wrapper class and contain the divisons inside of that:
<div class="wrapper">
<header></header>
<div id="middle">
<div class="main-article clearfix"></div>
<aside></aside>
</div>
<footer></footer>
</div>
Then to style, center the wrapper, float the aside and main-article:
.wrapper { width: 1024px; margin: 0 auto; /* the auto centers it */ }
header, footer, aside, { display: block; }
.main-article { width: 50%; float: right; }
aside { width: 50%; float: left; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
Note: This is untested, and uses the clearfix from the HTML5 Boilerplate.
Update 01.22.2014: This "Holy Grail Layout" has ben solved by Flexbox. Check out Solved By Flexbox for more information on recreating this layout (and many more).
I'm trying to determine the best way to format two columns of text like this using CSS:
(take the ----- as spaces)
dfasfasdfsa ------------ fdafsadfasdfasdf
fdsafadsfaf ------------ fadsdsafasfsaf
fdfgfgdsdffd ----------- fgdhfjshkjahjkh
fdljkgjklkj --------------- jfkldjskafljaf
I could brute force position it, but I'm sure there must be an easier way..any advice? Sorry for the beginner question.
Use two division tags and set their float property
<div style='float:left; width:30%'>
Put your content here...
</div>
<div style='float:left; width:40%; margin-left:30px'>
Put another content here...
</div>
With the float property, the two divs will be aligned sideways, the margin-left property will give a margin between the two division.
You could optionally put the CSS in a separate file, then use id or class to reference it.
css3 columns work on modern browsers, no support for IE8 or under.
http://www.quirksmode.org/css/multicolumn.html
https://developer.mozilla.org/en/CSS3_Columns
You can define the number of columns and the space between columns:
div {column-count:2; column-gap: 20px;}
Alternatively, the jQuery columnizer plugin works cross browser:
http://welcome.totheinter.net/columnizer-jquery-plugin/
I have extended Chibuzo's solution and here it is:
CSS:
.col1 {
float:left;
width:100px;
background-color: #E8F6F7;
}
.col2 {
float:left;
width:200px;
margin-left:30px;
background-color: #f2dede;
}
HTML:
<div class="col1">
<div>Monday:</div>
<div>Tuesday:</div>
<div>Wednesday:</div>
</div>
<div class="col2">
<div>open 8am to 5pm</div>
<div>open 9am to 4pm</div>
<div>open 9am to 6pm</div>
</div>
and it looks like this:
I had been trying to do it with CSS position, relative and absolute, which is possible but can be rather frustrating.
I want to have 2 boxes right next to each other, one with a fixed width, and another with a width that will change based on the size of the browser. The box has overflow:auto, and I'm trying to get the first box to act as a side bar that will follow you down the page. But of course I can't seem to achieve this, and have come here hoping someone could give me some examples, or point me in the right direction.
Thanks!
To achieve the layout you asked try something along these lines:
HTML:
<div>
<div id="col1">Left Navigation Menu</div>
<div id="col2">Right Content</div>
</div>
CSS:
#col1
{
position:fixed;
width:400px;
}
#col2
{
position:absolute;
left:400px;
}
Will I was trying to think of a good way to do this in CSS, I was channeling my google-fu and found...
http://plugins.jquery.com/project/jStickyScroll
"This plug-in allows you to keep a div element at the top of the browser window when scrolling down a page. The most common use is to keep a sidebar navigation menu from disappearing when scrolling to the bottom of a web page."
You could maybe try...
#element{
position:fixed;
}
Although this doesn't work without hacks in IE6, see
http://www.howtocreate.co.uk/fixedPosition.html
Give this a go (I hope this is what you are after?):
See a live demo here: http://jsfiddle.net/VcecU/
HTML
<div class="main_container">
<div class="content_a">1</div>
<div class="content_lotsoftext">Start. Lots of text goes here! Finish. </div>
</div>
CSS
.main_container{
background-color:#ccc;
overflow:auto;
zoom:1;
}
.content_a{
width:60px;
float:left;
background-color:#3FF;
}
.content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 0 0 60px; /* -- Need conditional for IE6 and 7 to remove the margin to get it to work in those browsers --*/
/*-- The following classes help it to sit better in IE6 and 7 --*/
clear:left;
display:inline;
}
Please note, you will need a IE6&7 conditional to remove the margin, clear and display classes from .content_lotsoftext