I need to dev a very flexible layout for a cms so that the structure auto-adjusts regarding the content.
The basic layout min-with layout is suposed to obey 1024px wide and it works fine for the most os the cases, but as we're talking about a cms, the editor very often creates content or copy/paste it from word and the content makes the layout stretch out so that i can look nice.
This is a huge challenge for me and i don't know you can i create a dynamic layout that behaves nicely regardless the content.
I only can think in jquery to help on this, and compute the content size and try to reset it to the appropriate size, but that doesn't look very easy or clean solution to do it.
So i'm posting this question to "hear" from you and have some cool suggestions an ideas that i can try out.
I'm sure most of you hava faced similar challenges.
Here's the layout i'm working on
alt text http://img132.imageshack.us/img132/7661/0606y.png
A problem I've often had with layouts such as that is you want two columns to stretch to be the same size with dynamic content, but it doesn't always work. Here's a bit of Javascript that you might find useful in the future:
document.getElementById("sidebar").style.height = document.getElementById("content").offsetHeight + "px";
This assumes your height is in px (which it is 99% of the time), but it's useful for vertically stretching columns to match other columns.
Related
I have to make a checkerboard homepage with several div's containing pictures and text.
I made something like this :
In the CSS, all blocks are placed with an absolute position and some top, left properties (in px).
The design is correct, but I want to make all this responsive, but in 2 different ways :
1 - Adapt all the body to the screen and eventually increase the font-size property.
2 - Simply align all the blocks in two or one column(s) (for smartphones for example)
I don't want an answer with a ready-made code, just help to realize the responsive version of my homepage.
You should really look into using a CSS framework rather than relying on absolute positioning, which is difficult to adapt for use with multiple screen sizes and make responsive.
Although there is a learning curve when first attempting to use a CSS framework, it quickly pays dividends, especially when taking into account cross-browser and responsive-design considerations.
Probably the most popular CSS framework is Bootstrap, which is responsive by default, and would make producing your layout relatively simple.
Another good option for a CSS framework is Foundation.
There are countless others. Here's a list: http://usablica.github.io/front-end-frameworks/compare.html
I used to realize the responsive with the float columns and change the columns' width through media query. But in your job, you should change the hope wrapper's width and reset the columns' left and top through js. You can consult the plugin 'Masonry', which may help you.
I am first year student Software Engineering and I use to have an assignment to make a web page. It is not complicated at all but after writing the web page I realised that when you open the site in smaller resolution (than mine 1080p) device it doesn't fit very well. I don't know what resolution uses the teacher who is going to assess me so i want to modify the site for 1600;900 and 1336:768 at least.
I should say that I used other suggestions that I should divide div tags by % not by pixels but it still doesnt work.
I googled the problem and I think I found a solution - actualy it is something with #media where you can set different percentages for different screen resolutions in advance and then you get the cliend screen resolution and open it in appropriate proportions
So I wanted to ask you how exactly to write this?
P.s you could take a look at my webpage here
The answer really depends on how intricate your site is, what the layout looks like, and what elements need to do at what sizes.
In general, HTML is "fluid" by default, so text will wrap, and elements will resize to fit their contents, so if your design is simplistic, you shouldn't have to do anything.
When you start sizing things with absolute/static pixel sizes, you get yourself into situations where things no longer fit.
You should generally avoid making designs that are fixed pixel sizes, and allow for elements to re-size naturally as HTML is designed to do.
#media queries are appropriate for changing appearances at specific resolutions, and are generally set up to make "responsive" designs, where elements can change styling or be hidden/shown at different resolutions. This is usually used for more complicated or dynamic layouts, and still needs to be planned for accordingly, because it is usually set up to accommodate a range of resolutions. For example an element might be 100% wide from 0 to 1024 pixels wide, and become 50% wide when the window is over 1024 pixels wide.
In the case of your web site, you are sort of breaking it by floating everything left. float tends to be really over-used in CSS without understanding its side effects.
Remove width from your menu element, and remove width and float from your content element.
This will cause the menu to be as wide as its contents (the buttons) and "float" next to the contents, which will try to be 100% wide, but be narrowed to allow the menu to fit next to it.
Good luck in school you will need to read up on responsive design which you acheave via CSS.
eg.
#media screen and (min-width: 500px) {
// Write your style
}
#media screen and (min-width: 501px){
// Write your style
}
That is what you need to do, there is lot of documentation and tutorials on this you will have no problem finding the resources.
Here is a TutsPlus page to get you started: Tutorial link
I mobilizing a website and would like to know if I can use one or more rather simple css rules to shrink a main div that has many nested divs and still have everything look proportonate in the smaller screen. The page is... http://www.junkyardzombiez.com/choose-a-zombie/ and the container is Any help is appreciated.
There is no magical way to to do as it's something that needs to be built into the site initially. If you had written the CSS to use % rather than PX then you would have more scope to work with but hard coded PX values mean it's built to stay at that size.
As it stands at the moment, you will need to change a number of classes to scale in width based on screen size.
It's worth looking at some frameworks like bootstrap that can help with this.
I have put together a simple static layout where I would lilke to understand how to convert the static widths into percentages in order to eventually create a responsive web layout. Can anyone recommend the easiest way to work out layout widths, font-sizes, padding and margins in percentages? I have been so used to creating my layouts in static format but I would love a complete understanding on how to implement this % technique.
Link to my simple layout is here: http://jsfiddle.net/9fH87/
All advice welcomed,
Thanks Kyle
Replacing the fixed width of the two columns with 45%, you'll get a fluid layout, it means a layout that fit it self to the container.
You can find tons of examples with an easy search.
Honestly, percentages are a bad idea, because they correspond to how wide the viewport is all the time, if you resize the viewport closer together, all the words just squish together.
The best way to do it is to make a container div (name it body-container), give it whatever width you want, and center it using this code margin: 0 auto; then set the min-width of the body to something acceptable. 1080px is usually good since most people nowadays have a resolution at least 1080 wide.
Here is my example: http://jsbin.com/ufesif/2
Until now I was using layout patterns with fixed arrangements, targeted for 1024-pixel width monitors. I think it's fixed to something like 980 pixels with some extra space on the left and right sides. Lately I was thinking about non-fixed solutions, where I can widen the frame to the width of the monitor. But there are also some very high monitor resolutions, which will make the page look too wide and too ugly. So it would be nice to set a maximum width as well and maybe minimum width too.
Firstly, what is it called when you don't use fixed layout? Is there a name for this?
Are there any disadvantages which I have to consider when going for this style?
I want to apply this style to a portal site, where I use a 3-column design with many boxes inside of each column.
Here are some notable "fluid" design examples:
http://addons.mozilla.org/
http://en.wikipedia.org/
I tend to call it "fixed width" or "fluid width" but "elastic" seems a popular term as well.
The cons are that getting a fluid/elastic design to look great on all monitors is tough, you mention larger monitors/resolutions, in my job I have to consider smaller monitors too.
Recommended reading:
http://www.alistapart.com/articles/elastic/
http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/
(the other articles on these sites are generally worth a read as well)
You will notice that the first example has got a limit. I often set a maximum width and then set alot of things inside that with percentage. So a sort of half way house if you like. It really depends on the site, what you wish to acheive and which screen res your users will use(available using market research)