Basically a calculator app. Terminal / text field up top. 4x4 grid of buttons below it. Everything should scale to fill any screen. I know this is extraordinarily open ended. You can be general in your answers. Use a table? Divs? What kind of display? Fixed? I don't know how to best approach it.
Don't use tables.
You want to look into responsive web design.
http://www.alistapart.com/articles/responsive-web-design/
I'd use a grid system. Check into a few to see what suits what you are doing. You want your grid to be flexible, so percentage based, rather than pixel based. That way you won't have to rely on media query break points to change the widths - it will just flex with the viewport width.
eg (
.onecol { width: 5.801104972%; }
.twocol { width: 14.364640883%; }
.threecol { width: 22.928176794%; }
.fourcol { width: 31.491712705%; }
.fivecol { width: 40.055248616%; }
.sixcol { width: 48.618784527%; }
.sevencol { width: 57.182320438000005%; }
.eightcol { width: 65.74585634900001%; }
.ninecol { width: 74.30939226%; }
.tencol { width: 82.87292817100001%; }
.elevencol { width: 91.436464082%; }
.twelvecol { width: 99.999999993%; }
/* layout & column defaults */
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
position: relative;
float: left;
margin-left: 2.762430939%;
}
.first {
margin-left: 0;
}
.last {
float: right;
}
So your input would be in a twelvecol and then move have buttons into a threecol grid
That said, you will find that for portrait mode on phones and down, you might need to change the layout, so use media queries and alter the css to maybe only show two buttons per row from there.
There's no best solution, the simplest is to use tables, the most modern to use display: grid but won't work on all browsers, you could also try putting whatever you write in a fixed width and height element and using css3's transform: scale to "fit screen", but that also doesn't work in all browsers, you could also do it using 4 inline-block with height: 100%; width: 25%; elements inside 4 block elements with height: 25%, or using 16 inline-block elements with width: 25%; height: 25%, another solution is could define all 16 elements with position: fixed or position: absolute and width:25%; height:25% and define the top and left for each individually. I think for all the mentioned solutions you should also not forget to set html, body { margin: 0; padding: 0; height: 100%; }.
Of course you might want to adjust those percentages if you add margins, but set those also in percentages so they look good when you scale.
I will prefer to work with divs but for this kind of grid maybe a table will be easier way, but for sure use precents as a values for width and height, you maybe use colspan and rowspan to fit your table cells in the right way
If you keep your buttons fixed at 4x4, go with a responsive design.
Don't use tables, use Divs.
Don't use a fixed display, or an absolute display. (I guess you could, but why?)
Finally, the answer you're looking for: Responsive Design
Related
http://www.remotegoatdesign.com/sayhey/pages/edit-valentines-marc-card.html
Doing this site for an assignment due tomorrow. In the proccess of making it responsive.
I am having an issue with the last color block, although its put into its container using percentages, it keeps moving out. In chrome its outside it straight away, whereas in Firefox its only when I resize. Although the difference is only a few pixels, so I'd assume its to do with the monitor size.
Any ideas guys? I'm stumped.
Try add this code snippet into your css file.
#tab-1 > div > div
{
width: 8%;
}
You can change the width.
Good Luck!!
Try using property " display:inline-table " for the class color_container
and give margin for the smaller color divs for space inbetween
try putting slightly smaller percentages(in the color block) and test it until it looks good. also it fits right in wider monitors as you say, because you have one css, that is best for wide screens. the point of responsive design is to have more than one media queries if the one you have breaks the design in smaller screens. so either make the color blocks really small, or myou should make more media queries
Your issue here is display: inline-block;. When you use it, it adds an extra space between elements. If you want to sort out this, you have 2 fixes:
a) negative margin-right
.box {
display: inline-block;
width: 8.74%;
height: 100%;
margin-right: -4px;
}
b) font-size: 0; on the container and default font-size on the elements inside
.color_container {
width: 98%;
height: 60px;
min-height: 60px;
padding: 5px;
background-color: #fff;
font-size: 0;
}
.box {
display: inline-block;
width: 8.74%;
height: 100%;
font-size: 1em; /* or what is your default font-size */
}
I am designing a fluid page which requires:
parent: 80% (of the screen)
container contains x number of images, width:10%, float left.
The container needs to be autosized as wide as the content, max-width is 50% of the parent.
I have tried different techniques to set display to inline-block, and attached the jsfiddle here. http://jsfiddle.net/7D9XS/
#parent
{
width: 80%;
}
#container {
max-width:50%;
border:solid 1px red;
display:inline-block;
}
.uploadItemPreviewThumbDiv
{
width: 20%;
margin: 10px;
background: cyan;
float:left;
}
.uploadItemPreviewThumbDiv img {
width:100%;
}
OK, Here you go...
.uploadItemPreviewThumbDiv
{
width: 70px;
margin: 10px;
background: cyan;
float:left;
}
JSFiddle!
Remember, the problem here was that the whole of the talk was going on in percentages.. and percentages tend to be one of the most unreliable things that you can come across while developing responsive designs, and on a side note, if I were you i'd use jquery plugins like Isotope or http://mixitup.io/
And Yeah, this is as far as i know, maybe someone could explain quiet better clearer..
Ok Let me try to put it this way...
This is sort of a paradox, where your conditions are..
You want your innerelements(content) to be of a certain percentage
width of the container.
But on the same time you dont want to specify what the width of the container would exactly be.
Because you want the container to be "autosized as wide as the content"
Which again brings us back to the 1st point.
It is like both the 'container' and the 'innerelements' are arguing over who should take the responsibility of being a specific width First, and each one is telling the other to attain a specific width, so that he himself can then adjust his own width based on that.
I came across the website http://www.swiftkey.net.
On my widescreen I see the gray background on the sides of the content area..On my regular(1024x768) the grey bars are not there.
How do they acheive this effect?
Using firebug, I was able to decipher what I think MIGHT be doing this:
.w1 {
float: left;
width: 1600px;
position: relative;
left: 50%;
}
.w2 {
float: left;
width: 1600px;
position: relative;
}
I do have experince with CSS and HTML, but the above code is a little bit cryptic to me, especially considering w2 is inside w1.
I'm answering this under the assumption that the grey bars you're talking about are the ones shown in the second sample image:
The simple answer is that the page uses a wrapper with a static maximum width that is horizontally centered:
#wrapper {
max-width: 1000px;
margin: 0 auto; //centers a block element
}
The grey bars are created by having a background color on the <body> or <html> elements:
body {
background-color: #888;
}
I haven't checked the source to see where these styles are specifically set, I'll leave that as an exercise for the reader.
This has to accomplished with javascript screen object
var scr=window.screen;
var availwidth=scr.availWidth;
var width=scr.width;
var availh=scr.availHeight;
var height=scr.height;
availWidth and availHeight gives actual available width and height, considering taskbars and scrollbars etc.
width and height give the actual screen resolution. Then access the variables and decide the type of layout.
However adjusting anything to center is easy
div
{
width:1024px;
position:absolute;
left:50%;
margin-left:-512px;
}
the javascript screen width tracing is for more control options
I am in a big of an issue here with a design I am trying to set up. Here is the website for a reference;
http://throwbackhero.com/index1.php
The problem is that I set the body to height: 100%; in the stylesheet and on the #wrapper div as well. The height goes off the current page height and does not take into account that there are other divs that could cause overflow.
I would like, a blank page to be the size of the browser even if the vertical size of the browser is changed, the content/wrapper div will shrink to accommodate.
Can this be done?
EDIT
Okay so clearly my original question was extremely confusing. Here is a picture;
So, in pic 1 (the left) is the issue. With height 100%; on the wrapper and content divs, it is creating that bad boy. I want it to look like picture, where the white/gray area grows/shrinks depending on the size of the browser...
The easiest way is simply using CSS:
height: 100vh;
Where 'vh' stands as vertical height of the browser window.
Responsive to resizing of brower and mobile devices.
Give body,HTML & main DIV height 100%. write like this:
body,html{height:100%;}
.parent{
min-height:100%;
width:400px;
margin:0 auto;
background:red;
}
Check this http://jsfiddle.net/3VUGt/
The answer from #sandeep is correct. The best way of controlling the most basic container of display in the browser is to control html/body.
Normally, I need the same structure as you design:
1. the content should stay inside the container without overflow scroll, and
2. the container should resize as 100% while the browser is resizing.
So the basic way of doing it is:
html, body {
height: 100%;
}
And I always set the basic container fit both height and width:
html, body {
width: 100%;
height: 100%;
}
NOTE: there could a margin/padding issue for some browser (as user agent stylesheet):
which add a style for some of basic component like body in default (e.g. Chrome 70.0.3538.102):
body {
display: block;
margin: 8px;
}
Check within the developer mode, if that happens, add margin override, this also works for padding:
html, body {
margin: 0;
width: 100%;
height: 100%;
}
And if your page base component looks like:
<body>
<div id="div1">
my html content ...
</div>
</body>
You could just do:
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#div1 {
position: absolute;
width: 100%;
height: 100%;
}
This always work for me. Hope it helps. And down here is what I guessed that the target you want to reach.
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#div1 {
position: relative;
width: 60%;
height: 100%;
background-color: rgb(255,125,125);
float: left;
}
#div2 {
position: relative;
width: 40%;
height: 100%;
background-color: rgb(125,255,125);
float: left;
}
<div id="div1"> layer 1 </div>
<div id="div2"> layer 2 </div>
Add overflow:auto to the wrapper element.
There is no complete CSS solution for this problem. This CSS "issue" has been known for many years. Since CSS has grown in functionality over the years, I thought there may be a complete CSS solution by now. But alas, there is not. I have tried many things and have searched high and low, and the issue remains the same.
To my knowledge, there are only 3 solutions that do not require 3rd party libraries: absolute positioning, faux colums (two-tone repeating background) and JS.
The only two solutions that appeal to me are: faux columns and JS. I prefer the JS solution, since it makes more use of CSS. With JS you don't have to re-work the background image if you want to change the column width or color later on. It is a more adaptable and re-useable solution. The only advantage I can see for creating faux columns is that your layout doesn't break if the client disables JS.
JS solution (wrapper not required): https://jsfiddle.net/Kain52/uec9cLe4/
var side1 = document.getElementsByTagName('main')[0];
var side2 = document.getElementById('mainMenu');
var side1Height = side1.clientHeight;
var side2Height = side2.clientHeight;
if(side2Height < side1Height) { side2.style.height = side1Height + "px"; }
else { side1.style.height = side2Height + "px"; }
JS solution (wrapper required): https://jsfiddle.net/Kain52/7udh55zq/
var wrapperHeight = document.getElementById('innerWrapper').clientHeight;
document.getElementsByTagName('main')[0].style.height = wrapperHeight + "px";
document.getElementById('mainMenu').style.height = wrapperHeight + "px";
Explanation: If you use a div wrapper then you can assign it to the height of the wrapper. If you don't use a wrapper, then you can just set the height of the shortest side to the height of the longest side. If you know that your side menu bar will always be shorter than your content, then you only need two lines of code:
var contentHeight = document.getElementsByTagName('main')[0].clientHeight;
document.getElementById('mainMenu').style.height = contentHeight + "px";
If you are okay with having some JavaScript run every millisecond on your page, and the content above the white area in question will always be the same pixel height, you could try something along the lines of this...
bodyLeadingFill = // put the size taken up by everything above the white div,
// including margin, padding, border, etc
function resizeElement(){
document.getElementById(/* name of white element here */).style.height = (window.innerHeight - bodyLeadingFill) * (/* put the % size you need here */ / 100) + "%";
}
window.setTimeout(resizeElement, 0);
This is, of course, assuming that the content above the white box will always be the same size no matter the font or operating system or size of the window.
I didn't actually test this myself, but the concept should work. Look out for the comments that say where to put some info.
I have fairly simple layout, like this:
<div class="card">
<span class="attack">1</div>
<span class="defence">2</div>
</div>
They're arranged on top of each other with simple display: block. What I want to achieve is when a card is in specific areas, "attack" shows on bottom and "defence" is on top. I know I can make it with jQuery, but can I achieve the same effect using pure CSS?
Technically, this is a business rules thing, which is not the domain of your cosmetic layer.
In an HTML document, the order of elements from first to last has semantic meaning - your case is not different, I suspect, in that you are trying to indicate some difference in importance from one element to the next (in the document, not just the visual representation) depending on the context.
So your approach should be JQuery, or some other method of changing the meaning of the relationship of these two elements in terms of their order in the document. CSS is intended to change only their cosmetic appearance.
With situations like this, it can be helpful to think, "what if someone could not see the elements, and had to rely on a screen reader to read them in the order they appear in the document? Would this information (not just the content of the two elements, but their relationship) still be correct and comprehensible?"
You may not intend for this to be accessible to the blind, but that's often a good sanity check for how to approach a problem like this.
I'm pretty sure this will work:
.card {
width: 100px;
height: 150px;
float: left;
}
.attack, .defence {
width: 100px;
height: 75px;
clear: right;
}
/* Play with height and padding-top of .defence to
get the text to the very bottom */
.attack-top .card .attack {
float: left;
}
.attack-top .card .defence {
float: right;
height: Wpx;
padding-top: Xpx;
}
/* Play with height and padding-top of .attack to
get the text to the very bottom */
.defence-top .card .attack {
float: right;
height: Ypx;
padding-top: Zpx;
}
.defence-top .card .defence {
float: left;
}
There are a few details missing in your description, so I'll try to fill in my assumptions, and you can let me know if they're valid or not.
You said "when a card is in specific areas". I'll assume these areas can be represented by different containing classes (.attack-top and .defence-top, but rename as you see fit).
I'm assuming that a .card is 100px wide and 150px tall. If these width and height values are wrong, fill in the correct ones and make the appropriate recalculations. If .card doesn't have fixed width/height, it may still work, but I'm less confident, and you won't be able to get the bottom text to go to the very bottom of the card (just below the top text).
The first thought is to use absolute positioning within .card.
.card { width:100px; height:50px; position:relative; }
.attack { width:100px; height:25px; position:absolute; top:25px; }
.defense { width:100px; height:25px; position:absolute; top:0; }
In this example, .attack will be (visually) below .defense. But note, if you disable CSS, the true arrangement will be seen.
If you know the height of the element, you can use position: relative (with positive and negative values, respectively) or position: absolute. But this is all very hacky and comes with a lot of side-effects - I would do it in Javascript instead.
You can do this by using (if you only want to do the swap in div.card):
.card .attack {
position: relative;
top: 1em;
}
.card .defence {
position: relative;
top: -1em;
}
But as others have mentioned this can have some unintended side-effects. E.g. the above sample will move swap position correctly only for 1 line blocks.
No, you can't. Even if you decided to try to "hack" it out in CSS, the resultant CSS would be huge, messy, and not easily maintained. The corresponding jQuery code would be very simple by comparison, easily understood, and easily maintained.