I'm working with Visual Studio, ASP.net, HTML, CSS, C# (for the code behind), ADO.net and Javascript/Jquery.
I'm trying to make a web page with some div block and I want that the block never exceed the browser. Do you know : how to add a height size for div even if I change the resolution of my window?
PS: I'm French so, please, don't be matter about my mistake.
Without further clarification of your senario, one method is to do the following:
HTML
<div id="test">
My div
</div>
CSS
html, body {height:100%;margin:0;padding:0}
#test {width:100%; height: 100%;position:absolute;}
Setting height to 100% usually works. NOTE: Sometimes padding may push you beyond the browser.
I've encountered screen resolution problem before and this solved my problem.
If you want your website to dynamically changing whenever your screen resolution change you can use % in your css to all your page, containers, wrappers etc. so that it will adjust on any screen resolution. (problem: This destroys your web design whenever the screen resolution is big)
The best solution I find so far and I think other professional websites also is doing is to make your width static or fixed and just let your page get on the center. This will preserve the design you made on your page and everything will stay and looks as it is.
In your CSS just add this line on your page ,containers, wrappers etc. margin:0 auto;
and your site will be centered to any screen resolution. For more examples and to read more about it check this reference How to Center a Website With CSS. If you want to test different screen resolutions without changing your actual screen resolution you could try it here. Hope this helps :)
Related
I'm pretty new to web development and I'm having trouble making a website that I've created for my portfolio responsive. My main issue is that my website uses a sidebar navigation menu...so I'm stuck on how to incorporate that in the responsiveness. I'm thinking about using Bootstrap to make the process easier but I'm still unsure on how I could rearrange the sidebar so that it fits smaller screen sizes without making any major changes to it.
Any tips, help, suggestions will be greatly appreciated. Thanks!!
You should check out css media queries. They allow you to change the your sidebars with the size of the browser or to disable them you browser is too small.
You could use media queries or you can also use display flex for responsive behaviour: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In css, you can use percentages when defining dimensions like so:
.sidebar{
width: 50%;
}
As long as you sidebar isn’t in any other element, it will automatically resize to 50% of the users screen. If your sidebar is contained in another element, you will have to resize the other element first.
I'm kinda new at creating a website using scripts, css ant etc. but I think that I'm doing well already... Now I came to the place where I need to make my site looking good in different screen resolution (monitor). So now I have something like this: (deleted link due of reputation lack) boxes are my site's content and I want this to look like that one: http://ipix.lt/di/BH2C/stretched.png content is stretched to the end of browser size and monitor size... What should I do to make my content a little bit bigger, or lower for lower screen monitors? I have already done width to 100%, but don't know what to do more, maybe where's some javascripts? Thanks! And sorry for my English, wanted to make it more clearer...
EDIT. Okay, so there's my site http://pingvinasus.tumblr.com/, yeah it's a blog which I edit in html... Now I managed to make my every content in percents, would be 20%, sooo it will stretch. But I can't do that because I have extra spaces after every of my post, tried to edit css, but can't find that correct margin, tried changing everything there, but it looks like it's not event css... So any ideas?
I think Media queries is what you are looking for.
Here is a simple example
Check this jsfiddle
#media (min-width: 700px) {
.color{
background-color: red;
}
}
From your pictures, it looks like you have margins and paddings set. set them to 0px!important and like Slico says, ensure your media queries are intact.
The short question:
I have a simple monitor and a projector, both should show the same browser window with the same page loaded, but with some different content for each of them. Is there any way to achive this with css or js (or maybe with a specific browser extension)?
Longer explanation:
I want to build a little presentation plugin with js and css, and the biggest presentation programs all have a timer on the screen, but not on the projector. This feature is something I want to realise. Notes or something like that could also be added, but all that requires different content on different screens/projectors, so I need a solution for that. For this even a browser extension would be useful because I only want the plugin for myself.
So, do you have any suggestions?
You can specify different media. Like this:
#media projection{
//projection css
}
#media screen{
//screen css
}
Then, obviously, the projection ones will apply to projection media, like slides, projectors, etc, and the screen stuff will only apply to a computer screen. Now, you may want to toy around with the projection css, as I've never actually tested it. But you could easily get away with just using the screen stuff to set certain stuff to display:block;, while it is display:none; otherwise.
I guess you can use media queries for that in CSS3.
See thinkvitamin.com for example, resize your window and see how it is arranging the UI according to the screen size.
You can also hide or show divs at a particular screen resolution, but I think that this will work only in CSS3.
I built a new .Net website which will fit nicely on 1200px width resolution.
The problem is that some of my users will browse this website with 1024px width.
Is there a way to fix this problem quick without changing all the design of the page? For example, to put some javascript that will do the trick.
Please keep in mind that the top banner of my site is 1200px wide, and I don't need to support less then 1024px resolution.
Thanks a lot.
It all depends on how 'properly' your web site was designed. You might need to change a few widths for the main containers (hopefully divs) and the whole content will reflow nicely.
However, if your website contains fixed widths for individual elements, or if there are some images / background images with fixed width, then you will have to amend them as well.
Relatively / absolutely positioned elements will need to by amended as well.
There is no silver bullet 'make my page look nice in smaller resolution', if that's what you're looking for.
I would use javascript. I'd check user's width with document.width, then use jQuery's css() element to change what's needed.
If you really don't need to support users with horizontal resolutions less than 1200px, then why not just let them have the horizontal scrollbars?
Wrap the whole structure of the site in a (div) container that has a min-width: 1200px and be done with it.
Otherwise, if you can't stomach some users having horizontal scrollbars and you really want to maintain the beauty of the site, then you really need to get out of your way and re-design the site in a way that it gracefully degrades in lower resolutions. It definitely is not easy but it can be beautiful.
Here's an article from alistapart that discusses the techniques involved.
You can use the following CSS:
min-width:600px;
max-width:2000px;
this code will set the webpage to all resolutions between 600px to 2000px.
My boss is running a laptop which has a setting which is resizing font sizes and making them larger by about a third. This is fine but we have a java app running on the site and the div tags are being pushed off of the page because of the increase in font size. Is there a way to stop font being resized, via code?
Thanks, R.
Depends on the browser, but most use zooming now: see this article: http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html
I do not think you can stop this, nor should you. What about people who need to larger font size.
It sounds like the problem is in your DIVs, not in your fonts. Unless your text contains huge strings with no "breaking" characters in them, a DIV should merely set itself to its parent's width as default behavior.