i've a simple question. I'm learning now webdesign, but i find very difficult having grids based on pixels; the matter is due to responsive elements.
I can't just insert mediaqueries, because images, for example, have to resize for every pixel, not just at the logical breakpoint.
So my solution, as simple as possible, will set a width: %; for every column (I'll have 1 or 2 columns, but the images and the content have to resize for every pixel).
Then take Skeleton.. i saw it, but it seems it's the same copy of 960gs except for the mediaqueries... and it's still the same problem.
I can think that 960gs could solve problems just in a big site where you have many elements (3-4 columns) and you don't need to increase or resize their widths (for example for the max logical breakpoint at 1024, for example, u don't need another space for the columns, you just do a margin: 0 auto; for centering the whole site).
So, what do you think? I need an advice. Thank you.
EDIT:: a code sample (i said it was just 2 columns)
<header>
some social media pixtures
</header>
<nav>
logo and menu
</nav>
<aside>
pictures
</aside>
<section>
some articles
</section>
<footer>
copyright and about me
</footer>
960gs has been succeeded by Unsemantic. See: http://unsemantic.com/. The Unsemantic framework uses precentages for column widths and as percentages are relative to the container width, they are better suited to be used in reponsive grids.
Some small advice: use the grid system to specify your lay-out columns, instead of applying column widths to specific elements such as news lists, forms, images, etc. This allows the elements within the column to automatically gain their width via the column width itself.
Related
I'm sure this has been asked before but I'm not sure of the terminology meaning my search results are not coming up with anything relevant.
I want to add some blocks of same-size content to my page and they should be organised in rows and columns, without a table, and adapt to larger and smaller screen sizes. Example in pictures:
Is there a simple cross-browser non JS way of doing this, which works without having to refresh the page (adaptive to changing screen size, i.e. on resize)?
The technique is called responsive web design. You can create a four column page layout, with four div columns, each given a width of say 23% (adding up to just under 100%). You will need to learn HTML and CSS and then responsive web design. There is a lot of help online.
Images can also be made responsive by use of CSS as follows:
img {
max-width: 100%;
height: auto;
}
You can also choose to learn the Bootstrap framework, which is an HTML framework to create responsive websites and could be used to create a responsive 4 column design.
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 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'm drawing a blank at how to make text dynamically grow and shrink to always fit a page perfectly so that various word groups always take up the full width of various screen sizes.
I'm on a phone browser right now, so excuse me if I don't post full html examples, but here is the gist of common scenarios that I'm trying to have a technique to resolve:
<div>
<div>
<a>nav element</a> <a>another</a><a>lots of text in this nav element</a>
</div>
<div>
... another set of links wwith different text here ...
</div>
<div>
... and another ...
</div>
</div>
All told, the above layout would take up exactly three lines all the way across the screen on any screensize or window size.
A simpler example:
<h1>Hello World</h1>
Wherein not only would the h1 have a width of 100% of the screen (easy) but the text content itself would grow in font-size to fit 100% of the screen.
Similar techniques that I am aware of:
Font-stretch // except it just squashes/stretches text without regard for the text containers
Font-size:5%; // except this deals with the vertical scale of each letter.
text-align:justify; // except it just adds space instead of scaling up the font.
I'm not aware of a pure CSS way to accomplish this. I believe you have to use JS. There's several scripts and plugins out there for that. Here's one for jQuery:
http://fittextjs.com/
Media queries is probably the closest thing that exists to what you are looking for. Another good term to search for is "Responsive Design", its been a fairly hot topic on most of the designer blogs I follow in the last few months.
You can't. Not with css.
Sorry.
You can probably program something with javascript.
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.