Sorry if this post is too many of question, but because i weak in web design but i want to do these effect in my website, could you guy please let me know on how to do it ?
First...Please visit this site
http://net.tutsplus.com/
Question 1 : May i know how could i do the effect of resizing in Asp MVC 3 ?
when our site got a sidebar user screen size less than 1280x800, it will display single column of sidebar. When user screen size larger than 1280x800, it will display two column of sidebar.
Question 2 : when the screen size is too small, left side of site will display only about 20px of margin. All the image and background will hidden. exact like when you re-size your browser when opening nettuts site.
The best way to adjust the layout of a page with respect to the size of the viewport that it is being displayed on is with CSS Media queries. Before you do anything, read this:
http://www.alistapart.com/articles/responsive-web-design/
It's practically the bible on the subject.
After that, give the specs a read:
http://www.w3.org/TR/css3-mediaqueries/
The less CSS framework comes with a set of useful media queries and is something I use as a very simple framework:
http://lessframework.com/
It depends of the positioning atribute: absolute, relative or fixed..
Try to use percentage rather than an absolute, relative or fixed value.
Otherwise try to control the left-margin, right-margin, top and bottom and test, test and more test until it get what you expect.
I do this myself all the time, and always work.
Answer to Question 1
This is not ASP but JavaScript. Basically you will need a script that is launched each time you resize the browser. It should then check the new viewport width and modify some of the CSS for the sidebar
Related
I have a website that I am working on that has a simple widget that shows the current status of certain systems. The problem I am having is that when the view goes to mobile (iPhone size about) or the screen on a browser is creating the same effect, the rows that have objects in them start to stack and become invisible or cut off. I don't want these to ever stack because the design doesn't make sense that way. Is there a way to make is so something will never stack? I can't seem to get any clues as to how to fix this since the bootstrap choices don't go that small. It seems like it would work if there was a col-xxs-* class or a col-mobile-* class.
You can customize twitter media query breakpoints
so the col-xs-* can start from 200px instead of 480px for example.
here is the link:
http://getbootstrap.com/customize/#media-queries-breakpoints
Edit the variables and download that version. you can also use bootstrap Less to edit these variables in your project as it suites you instead of re-downloading the files every time.
I'm not sure if this helps,
Make sure the viewport is configured correctly:
Make sure you don't have content that is wider than the viewport.
For instance if you have an image that is wider than the viewport set the CSS to
max-width:100%;
From what I can understand you don't want to stack the divs one below the other in mobile view. Then try to use class like table-responsive that allows the content to appear with a horizontal scroll bar.
Then you have to set the min-width for those columns that you don't want to wrap.
Or white-space:nowrap
The issue that I was having is there was a custom div class that was put into the hosting software's global styling. This class duplicated the idea of the Bootstrap col classes. It started from col-all-12 to col-all-1. The problem is this would override all the other bootstrap styling and make things a certain size no matter what width the screen is. I appropriately adjusted these and it seems to work. I had to rebuild this code from scratch but now it is good!
Thank you to all those that helped and gave suggestions!
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.
When i make websites, it fits on my screen, but when i open the website on another screen, it doesn't work correctly (The divs overlaps eachother). It's the same when i resize the window. I saw a couple of posts about this, but still, no good answer. I tried making a container to put them all in. But it's still the same.
Any answers, why this is happening?
Container CSS code:
#container
{
width: 960px;
margin-left: auto;
margin-right: auto;
}
I put it into HTML like this:
<div id="container">
Content goes here
</div>
EDIT: Guys, i don't think you understand me. When i'm on another screen resolution, all the divs moves. I think everything moves, if i'm not completely wrong. I would like to know the real way of doing this. What do you do?
http://i49.tinypic.com/8wwo6r.jpg
http://i48.tinypic.com/359ydc9.jpg
FINAL EDIT: I fixed it with the percentage. It seems to work quite well! Thanks for all your answers! I know this will give me a kind of bad reputation, because i didn't make myself clear enough.
You can use percentages instead of pixel.
#container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
You can figure out percentages having screen resolution and the size you want using this forumla:
WidthPercentage = ContainerWidth / ScreenWidth * 100
So for your example if your screen resolution is 1360x768:
WidthPercentage = 960 / 1360 * 100 = 70.5%
This is called responsive design.
You can find some guidelines here and some good articles here.
If you don't want to use percentages, you can go with Responsive Design and Media Queries. Basically, you call different CSS rules based on different browser properties (for example: width). See a nice tutorial about this here (you can also see it in action).
Quote:
The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify
You've set your <div> (<div id="container">) to be 960 pixels wide. If you view the page in a browser window that's less than 960 pixels wide, then the <div> won't fit in it.
Your question isn't very clear. You've said "when i open the website on another screen, it doesn't work correctly", but you haven't said how it doesn't work. To get help, you need to describe the following three things with enough detail:
What you've done (e.g. what code you've written, what steps you're taking to run that code)
What results you expect from what you've done
What results you're actually getting
I had to redo a website from flash to html/jquery.
Everything looked great. Until I tested the site on a netbook where the screen resolution is much smaller. All the elements were misaligned or didn't stretch as I wanted it to. Or there were scroll bars everywhere.
So, How would do I make it stretch or resize properly,
Is there a property which I can set somewhere that would resize everything proportionately?
You should use heigh / width in percentage(%) rather px / em. change the css file.
Is there a property which I can set somewhere that would resize everything proportionately?
No, I wish :P You'll need to redo the layout to make it liquid or use media queries to make it responsive to different resolutions. I'm afraid both solutions could be pretty complex.
Is there a property which I can set somewhere that would resize everything proportionately?
Everything? No. Font sizes won't adjust based on window size (at least not without JS).
You can set the widths of most things using percentage units in your stylesheets, but even then there will be a point where things will break down.
The current buzzword is responsive web design (I can't comment on the quality of the links from that page) in which media queries are used to provide different designs for different sized browsers.
The property called Media Query we mostly use this property with Responsible Web Design. In which we tell browsers change the specific css property at that particular screen size.
Check this article for more http://css-tricks.com/6206-resolution-specific-stylesheets/
& for Responsible Web Design mostly use value in Percentage instead of Pixels .
Check THIS website for more reference.
unfortunately there is no "magic" which scales things up/down. i can think of some guidelines:
Use relative widths for things (percentages) instead of absolute value
no hardwired sizes, keep them in separate CSS documents
work your way up: choose a minimum resolution, work upwards from it. it makes sizing things much easier.
The question was to RESIZE not to REALIGN. Using percentiles will only change WHERE the HTML elements show up on the page. It will not change their SIZE.
you can use with and height in percentage to set your screen for all resoulation..Give the 100% width to the body and the div you want give 100% width.