Here's the layout I'm trying to achieve http://jsfiddle.net/qeDs3/44/
I mocked it up on Indesign using Grid_960 templates: http://designobvio.us/dov2/Homepage1.pdf
Here are the divs I cannot make parents out of http://designobvio.us/dov2/Homepage1Encapulate.pdf
Through trial an error, grid 960 seems forces you to use the class container_12 in conjunction to .grid_12 as the parent tag.
Here's another full example: http://designobvio.us/dov2/index.html
How can i get gChild to be the parent
Heres paired down example: http://designobvio.us/dov2/index2.html
I'm trying to get the header tag to be the parent of its contents.
Does my layout not cooperate with grid960? Am I totally missing something stupid? Does it require a hack? If you need any clarification of anything I'll be right here and will response ASAP.
Thanks
Update The reason I'm trying to do this is so that I may gain control of those parent divs for ease of media query.
After EXTENSIVE research (lol) I've finally solved this problem.
Grid 960 has 2 extra classes which simply remove margins left and right named alpha & omega. I've never bothered learning the purpose/theory of these because I was dumb. The purpose of these classes are exactly what I was curious to, "nesting grids within grids;" thus allowing me to clear the float and control the parent div's that dont abide by the 12 column standard.
I hope someday this question/answer helps some other fool that refuses to read documentation.
Related
I am modifying a website that currently uses a <table> for a price list.
Because tables obviously don't break + wrap, on a mobile device the right hand side of the table disappears of the right side of the screen.
I'd like to use CSS to make this price list responsive, so that when the browser runs out of width it renders the next column underneath. This is simple enough if I stop using a single table and use float:left, but in this case I want the name of the cottage to be repeated (the first column) when a horizontal break occurs.
Is this possible? If so, how would I achieve it?
Peter, a better way to construct this to do what your aiming for is not to use the Table element at all.
Instead, use a series of div elements and give them the display type "table-cell" on the individual divs, along with "display: table" and "display: table-row" where needed for for rows and the overall table.
See: http://www.senktec.com/2014/01/using-css-display-table-cell-for-columns/
For an example.
Once you've broken things down into indidvidual div's, your then free to place those divs where you see fit, You could with a little bit of re-layout in the structure of the divs, put a new set down below the the first part of the table as you mention in your question.
However, once your using div elements, this actually opens up a more interesting way of doing things, by using FlexBox and more specifically "flex-wrap".
Flexbox and it's wrapping modes will do exactly what your trying to achieve, you just need to make the parent container "display: flex", add a flex wrap css rule, and the immediate div children of the container will take care of themselves.
Flexbox is fully supported by ALL mainstream browsers these days, and the various table display modes have been around since HTML4, so your not going to have an issue with any of it working. Flex also largely works on IE11, with a few minor edge cases (I implemented an online designer for a company 3 years ago when flexbox was first introduced and the target was IE11).
With the individual div approach, and if your targeting reasonable recent browsers you can actually go one step further and use CSS media queries to adjust things for different display widths
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
and you can even now do some feature detection is CSS too
https://css-tricks.com/using-feature-detection-to-write-css-with-cross-browser-support/
The only thing I can't come up with a possible solution for in pure CSS is the repeating of the cottage names column, although I suspect you might actually be able to conjure something up using "data attributes" and css rules targeting those attributes to get the text of the column name into an "element::before" pseudo css rule of some kind, I'd need to sit and spend a day playing with that idea to come up with anything concrete though.
i've been trying to create pattern for my website using div elements. The problem is than my knowledge in css is very limited and i've no idea how to make the pattern like this
I tryed to use block, inline-block, but were not able to achieve the pattern i'm targeting to.
It's possible to do it with table, but than code looks like piece of thing.
It would be great if you will help me, because doing this not only to create a web site but also to learn css, so comments are really welcome.
Thank you in advance
make a parent div and add all properties to that like width of the container and height of the container. then add css property to each element individually or by grouping in class
Browsers I'm using for testing: IE, Chrome, FF;
Ideal layout example pdf: http://designobvio.us/dov2/Homepage1.pdf
Heres the link to the direct page http://designobvio.us/dov2/index.html
While Grid systems are excellent for laying out by width, I always stumble when using height constants.
Inside my code I have 2 major problems:
Ideally, I want to be encapsulate sections of my code by using
parent div that controls the height, margin-top. I've tried to
create this div colored a pale green and padded it for visuals.
this class is shown here:
siteBody #businessSection{ padding-bottom:200px; background:#0F9;}
I've also demonstrated idea in this imageURL: http://www.designobvio.us/dov2/Homepage1Encapulate.pdf
While trying to do this I've come up completely empty handed.
2.So next, I tried breaking down each section individually by using a class .businessInfo
#siteBody .businessInfo{height:200px; background:#ccc;}
Unfortunately this also didnt work and I have no idea why because all the grids line up perfectly.
I hope what I've stated above is understandable. I prefer solution one; however, if not possible 2 will work.
If I'm missing anything I'll response ASAP.
Thanks!
this problem stems from the use of float. For example problem : http://jsfiddle.net/GAvcL/
you can use clear attribute for solve problem.
Solution:
http://jsfiddle.net/qeDs3/
This is a common problem in html. Before closing the div that encapsulates the divs using float, use a div has clear attribute.
I think this has been asked a million times, but with different definitions of the problem. And it's probably either easy to fix or a long lasting wish from web designers and still unanswered. note: I did do a search on css float on stack, but although some look like my problem, so far I haven't found a similar one.
What I'm trying to do will become clear if you see the attachment. I want them in rows of 3 neatly stacked under each other, where the height of each <li> item is different. In other words: the heighest <li> element in a row is leading, and the next row of items should wrap under this one. Right now the items on the new row bump into the content of a longer list item at the beginning, preventing the first item of the new row to fully float to the left.
Please note that I don't want to solve this with php or js, I think a pure css solution must be out there... Because with php, I could of course add a class like "new-row" to it and apply a clear: both to it and it will wrap. If I want to do the same thing in CSS then I can't without using poorly supported :nth-of-type stuff. Besides, the content block is variable in width, so sometimes there are 3 on a row and sometimes maybe only 2 or up to 6.
Who can help?
Use "display:inline-block" for LI, not "float:left"
I'm happy to be proven wrong, but I think you have to use tables for this, or a display: table-* construct. (I personally would go with tables - this is somewhat tabular data.)
Only table rendering can resize a whole row according to its tallest member's height.
It's the only way I can see to do this without JS or PHP.
use jQuery.
Pretty sure this is impossible using just CSS. Unless you're going to use absolute positioning and forget floats all together.
I hope I am wrong though! :)
(Would love to be able to do this w/ css)
I've seen quite a few answers on this site which advocate using tables for a design because it can't be done using CSS and Divs... when in actual fact it can be done with a bit of ingenuity.
What are examples of things that genuinely can't be done?
The only one I've ever come across is vertically aligning a box within another box.
*edit: I suppose I'm mostly interested in unachievable layouts using CSS2
Vertical alignment of blocks or text.
Having elastic containers that stretch to the width of their content.
Having several "rows" with the same structure where "cells" are synchronized in width throughout all rows.
Having several "columns" synchronize their height (up to the length of the longest text block).
These are quite basic designer needs that appear in even basic design concepts.
Cells/columns issues can possibly be solved with CSS if you take IE8 into account, but it will be many years until its wide spread (even IE7 in 2-3 years hasn't reached the desired market share).
As for "ingenuity", it is not that good thing in software development. Tricks that your colleagues and you yourself after a couple of months will not be able to understand usually build up that code base that everyone either is scared to touch or determined to refactor/rewrite completely.
Remember the KISS principle. The simpliest way you do this, the more reliably it will work.
The answer to this question depends on a number of things:
How backwards compatible do you need to be? Including IE6 will decrease the capacity of pure CSS; and
How much of your site is fixed-width and/or fixed-height. There are certain things in CSS that become hard if not impossible in variable width and/or height situations.
Side-by-side content is a problem for CSS. You can use floats for this but if the sum of widths exceeds the width of the container, the tail end floats will fall down below. Tables are more capable in this regard as they will squeeze columns where possible to make things fit and cells will never be split onto new rows.
Vertical centering you mentioned. Its trivial with tables and hard or impossible (depending on compatibility and fixed or variable heights of the container and the item) in pure CSS.
You may also be referring to hover content. IE6 only supports the :hover pseudo element on anchors. Javascript is required for that browser for :hover-like behaviour.
Basically if what you need to do can be done fairly trivially with pure CSS then do it. If not, don't feel bad if you have to use tables despite all the anti-table fanatics (and they are fanatics) jumping up and down in horror.
If you want a relatively simple exmaple of this check out Can you do this HTML layout without using tables?. This is a conceptually simple layout problem that is trivial with tables and noone has yet posted a solution meeting the requirements with pure CSS.
"... when in actual fact it can be done
with a bit of ingenuity."
How about 'avoiding the need for ingenuity' as a thing that's hard to do in CSS.
;)
tables should be used for tabular data! We should always try to use the correct HTML for the given content in which to markup. So not just div's (span, ul, li, dl, strong, em ... etc) This ensures that the content is not just looking right but is right (for SEO and accesibile reasons)
By not using tables it allows us to transform the content from one look and feel to the next without having to change the HTML, see Zen Garden
For now though with current browsers CSS table like layouts can be done but are tricky. there are techniques to get round many of the issues, weather they are done though global wrappers with background images, or positioning fixes... where both articles also refer to using Javascript to progressively enhance a page to get those additional classes you may require.
or of course you could use some XSL as a middle ware to help do formating if processing from a CMS.
Alternate row colors in a table without manually (or with the aid of a script) assigning alternate styles to each row.
Determine one element's position relative to another. For example you can't use CSS to determine which position one box is in a bunch of floated boxes using the same class. Would be nice to for example know if one box is the first box floated, or the second, or the last.
Handle widows. A widow is a word that dangles off the end of a paragraph, that is a single word starts the last line on a paragraph. It's a big nono on print design, but in the world of web it's hard to control.
Floating elements in multiple columns, where text in each cell can expand the height of the element, but the entire row below must be pushed down if this happens.
--- --- ---
|AAA| |BBB| |CCC|
--- --- ---
--- --- ---
|AAA| |BBB| |CCC|
| | |BBB| | |
--- --- ---
--- --- ---
|AAA| |BBB| |CCC|
--- --- ---
An image cannot placed in exact center of a cell with align attribute.It can be done with some brute force .
Sounds obvious but you can't change content with CSS, it can only be used for styling.
Rory, I think you're absolutely right. Vertical alignment can be done with line-height, and creating lay-outs in CSS really isn't that hard. In fact, it's far more flexible when using absolute/relative positioning and floats.
People still using tables for design should really brush up with the current standards.
Going on topic, with CSS3 coming up it's hard to think of stuff CSS can't do. Image manipulation, content manipulation, advanced selectors, it's all going to be possible. But if I had to name one thing, it's that with CSS you can't (and won't) be able to rotate elements.
I was unable to use a transparency to create a variable-height text area across all pages. I believe it's impossible. I ultimately just wrote a quick javascript function to reset the height after the page load, to get the layout to work. See http://peterchristopher.com to see what I mean by transparency for the text area.
There is absolutely nothing tables can do that CSS can't.
There seems to be a common misconception that HTML & CSS should be easy. It isn't. If you find yourself wanting to use tables then its your CSS skills that need improving not the technology (although the technology does obviously have plenty of holes that could do with improving).