I am using Yahoo's UI Grids to structure most of my pages. One of my pages is a Google map and I need about a 400 pixel fixed left column to put map legend information into. YUI Grids however only offers 3 columns for their 100% page layouts, namely 160px, 180px and 300px.
Is there a way that I can customize their 'template 3' which provides the 300px column to get my 400px column I need?
I've determined how to do this. Kudos for Nate in the YUI forums for pointing me in the right direction.
To set a fixed left column, you need to divide the column pixel width by 13 to determine the em's for all non-IE browser's. For IE, divide the column width by 13.3333
e.g. wanting a fixed 480px width, 480/13 gives me 36.9231em for non-IE and 480/13.33 is exactly 36em for IE
Using template 3, the CSS is:
.yui-t3 .yui-b {
float: left;
width: 12.3207em; *width: 12.0106em;
}
.yui-t3 #yui-main .yui-b {
margin-left: 36.9231em; *margin-left: 36em;
}
Also, if you want to tweak margin's e.g. zero margin, you can do something like:
#doc3 {
margin: auto 0;
}
Grids is presently deprecated in YUI 3 - a bit of a shock when I saw that. There will be some browser(s) that drop off the A category in July and as a result, Grids will be reworked given that some of the initial design decisions were based on older browsers of course.
There is definitely a way. I think its just a matter of tweaking the CSS to either add in another 400px column, or modifying an existing column to fit your needs. If you are adding another column, be sure to account for the additional width (plus margin) and either reduce width on other elements, or increase the width of your containing element.
If the layout is using 100% width of the browser, width may not be an issue, but if your content is wrapped in a container element which holds all of your columns, be sure to adjust the existing elements to make up for the size of your new column.
EDIT: Also if you are dealing with 100% width layouts, its probably better to size your columns using percentage, instead of a fixed pixel size. Since the containing element for your columns will be the user's screen, if you use percentage then the column sizes should adjust relative to their resolution/window size.
If you want your new column to appear on the left of the your other columns, typically you would place it before the other columns in your markup, and apply a "float:left" property. But, take a look at how the other columns are set up in the YUI CSS, and follow their method.
I hope that helps.
Acorn
Related
I want to set up a certain CSS layout described by the following:
it is table-structured, so there are a number of rows each having certain amount of cells; cells borders in different rows possibly do not align;
it is fullscreen; not like occupying whole device display, but rather using all the window space present - the window height should be divided in rows and its length should be divided in cells (full-window would be a more precise term)
it is adaptive; meaning, heights and lengths are given as percentage from window dimensions; this also applies to margins, paddings, etc.
More accurately, I am trying to make a web-chat application consisting of message area, list of online users, text input and "send" button. I want each of these components to have space of certain (relative to window dimesions) length between them and between window borders and components adjacent to them (that is, margins). I want this layout to persist precisely after zooming or resizing the window.
I do realize that this could be achieved with Javascript (which I am capable of), but I assume that would be ugly and less efficient, so I would like to use CSS (if possible).
So far I tried:
marking up the window with inline-block wrappers containing the actual visible elements; didn't really work because setting wrapped content's width and height to 100% results in them expanding the wrappers (regarding borders and margins), which ruins the layout instantly; I understand I could try 98%, 97.5%, 97.2%, etc. but this is not precise so it really bugs me
using floating divs (same as above)
using table, table-row and table-cell divs; did not satisfy my requirements because only absolute values work this way
I am really a newb, so I might have missed a number of obvious points here.
Could you use the vh and vw measurments,
they can be used like this:
height 10vh;
width 100vw;
this would make a row that's 1/10th of the screen tall and 100% wide.
Okay, using Javascript looks like the only reasonable option here.
Ok, using the latest version of Bootstrap
Trying to set a column in my ROR application to a background color.
Here is the code (it's in HAML)
.row.testing
.col-lg-2
= render 'blah/blah_testing/
= yield :sidebar
.col-lg-10
= yield
I am trying to have the col-lg-2 column display a background color in its entirety regardless of how many rows there are, otherwise it stops when the last row stops.
The height is dynamic. And the width is set by bootstrap. And I don't think I can use table settings to set the column's background because that seems to rely on fixed measurements?
EDIT
Have simplified this question extensively .
Instead of height:100% use viewport heights.
You CAN use height:100% for a column, but you must set the body's height to 100% in CSS as well. It's cumbersome, once I discovered Viewport Units I've not used it since.
Alternatively as mentioned above, you can use a bit of a new CSS element called vh (do a quick google of "CSS vh unit" and you'll get a better explanation if you'd want to read more. [there ARE other viewport measurements you could find if you do read into it further])
Anyways back on point, for your row, give it an ID, let's say id="myRow" then set its height in the CSS to height: 100vh
One VH unit is equal to 1% of the screen size. So 100vh would be the full screen height, 50vh would be half screen height. (This unit is -supposed- to be dynamic, BUT I believe only the current version of Firefox has built in support so far...but don't quote me on that, been a while since I read the Viewport measurements doc.)
Here's a handy link/explanation to check out
https://css-tricks.com/viewport-sized-typography/
I am trying to change my navigation bar's position from the top of the screen based on the screen width. I tried in CSS: top: 10%, but this is based on the height of the screen not the width.
Is there a way to get top: .1 * width?
Quite often overlooked is that the vertical margin percentage properties of elements refer to their containing block's width, not just the horizontal ones.
That means that if you set something to margin-top:10%;, it will have a top margin equivalent to 10% of it's containing block's width.
You can easily see that in this jsFiddle. Try resizing the output panel vertically and horizontally, and note which resize direction makes the inner block move up and down.
You can use vw and vh and if your browser targets are allowing, I'd recommend that. But if you can't use them, you don't have to use Javascript right away. Too many people gun right away for Javascript when it opens up a whole new can of worms (like, what if the browser resizes?), especially when a bit of creative use of CSS can get you out of a sticky spot anyway.
I was going to say there is no way to do so, but apparently in CSS3 since 2011 you have vw/vh that allow sizes to be relative to the viewport. For example:
img { height: 95vw; }
should give images a height that is 95% of the viewport width. Read more; apparently only IE9 supported it at the time of writing.
I'm working on a responsive layout that displays some <div> boxes as part of a rectangular grid:
http://sl.cosd.com
The six boxes you can see on this page are all ungrouped in the HTML source, all in a row:
<div class="control">
<div class="controlContent">
<a>SOME VARIABLE-HEIGHT CONTENT including an image which might float</a>
</div>
</div>
The control divs assign the boxes percentage widths to first the whole, then 1/2 or 1/3 the screen width, so they double & triple up into rows as the screen size is increased. The controlContent divs assign properties like padding, margin, background, border-radius, etc.
I have imagined this as a linear set of boxes, standards-compliant and screenreader-friendly, to be displayed via CSS like a table. I know CSS2.1 allows elements to be assigned properties like:
display: table;
display: table-row;
display: table-cell;
My main problem: I have assigned display: table-cell to these elements (via the controlContent div) which prevents margin collapse inside the content but does not provide a uniform height to the cell-like divs. I need a way for all siblings on the same row to have matching height.
The smaller cells generally have gaps below them where the gradient background only covers the box height of the cell. (Worse, the text after this array of cells sometimes fills into these gaps: another problem that could be fixed with presentation markup, though one which will probably go away when the first problem is fixed.)
I think I understand the basics of the problem: each <div> which I have told to behave like a table cell has nothing to match its height to, since I have no way of grouping elements into a containing <div> to which I can assign the display: table-row property, since this grouping changes according to CSS media queries.
In my reading about the problem I've heard of anonymous table boxes and anonymous table rows being created but don't know how to use them in this case. Since I'm using the CSS :nth-child() selectors to clear the floating boxes at the beginning of each new row, I'd hoped I could also use these selectors to establish a new table row at every such point... but how?
I'm not married to any particular solution. I'd just like to know the best-practice way of doing this. I'm hoping to find a solution that doesn't involve presentation markup, especially since a general solution should provide a responsive variable-dimension table for any number of cells, not just a small, easily factorable number like 6.
display:table-cell; should give the div/columns the same height, as long as the parent div has display:table; set.
Check this fiddle (you can add/remove as many cols as you want).
Another solution is to give .control a fixed height, then you can use height:100%; on controlContent.
If you need to use percentages only, then you've to declare an height on all the parent containers of .controlContent, up to html and body:
html, body, .control, .controlContent {
height:100%;
}
Obviously it's just a simplification. This is the most reliable method, because table-cell is not rendered properly by some older browsers.
On the other hand, you always have to know the height (in pixels or percentage) of all containers.
Then, there's the faux column method, but i don't thinks it suits your case.
Lastly, there's the JavaScript / jQuery method, which in your case would be something like
$(document).ready(function(){
var higherContent = 0;
$('.controlContent').each(function() {
var currentHeight = $(this).height();
if( currentHeight > higherContent ) higherContent = currentHeight;
}).height(higherContent);
});
Which basically (when the page loads) passes through all the controlContent and sets the value of the highest one in the variable higherContent. Then this value is assigned to all controlContent.
Probably not the best jQuery function ever written anyway :-) and you'ld have to adapt it for every resolution targeted by your media-queries.
If i were you, i would probably go for the table-cell method, so that you can set different widths for different resolution, and the layout will adapt in most of modern desktop/mobile browsers. But be sure to test it on as many devices as possible!
EDIT: I see you're using min-width media queries. You can change your code this way:
div.controlContent {
/* other stuff */
display: block;
/* other stuff */
}
#media only screen and (min-width: 480px) {
/* other stuff */
div.controlContent {
display: table-cell;
}
/* other stuff */
}
I would like to know if it's possible, in a table where width=100%, and where each column width are % value, to get for the last column a fixed width?
If yes how?
The short answer would be no, not with CSS in a simple way. It is quite troublesome to mix fixed and relative width for obvious reasons.
There is however a new CSS3 feature calc() that can be used to let the browser calculate the proper width.
Notice Unfortunately it is still just experimental, and has limited browser support.
You could do it using CSS:
#mytable td:last-child {
width: 50px; /* change to whatever you want */
}
If your site requires JavaScript anyway, you could manipulate the width after rendering.
Let the browser render your table with relative column widths close to an ideal but without setting the last one to be fixed.
Read the width of the rendered table.
Subtract the width you would like the last column to have from the table width.
Calculate the width for the remaining columns by percentage using the value from 3. as 100%
Set all column widths programatically