So I did notice that zoom related layout problems are commonly being dealt with, but I couldn't find an answer to my case - I wrote a WEB calc, and the buttons just slide out of place when zooming in and out, in Chrome and Firefox but not in IE. What is the way to fix it?
Give width:220px to your #main div
If you closely look at your CSS you will see that the buttons together(5 in a line) actually have more width than the Main div while resizing. Increasing the width to 220px solves that problem. Another solution could be to give max-width and max-height to all elements, another can be to properly layout your elements and don't just rely on the browser's positioning. Doing the latter is an trivial task.
For the sake of searchers, my solutions was to use a table to make the calculator eventually. I know using tables for layout is considered a bad practice, but considering a calculator shape is not supposed to adjust to new contents or to the size of the end-user's screen (at least in my case) it seemed to be the best implementation. It was the only way to avoid losing the layout shape in zoom-in zoom-out, which is kind of what div's are all about.
Related
I am a mostly skilled server-end developer, and am creating an ambitious website project - all by myself. I know c#, MVC, T-SQL, LINQ, and ASP.NET pretty well. Obviously, since I'm working by myself, I have knowledge in design too. I'm obviously good with html (who isn't?). And I absolutely love jQuery! The thing is, I'm decent in my understanding of css, but css is my least knowledgeable trait. I understand programming, I also am good in design, not just because I have a decent level of knowledge in css (and jQuery) - but also because I just know what looks good (I can draw and paint on real paper too).
The thing is, I know I can probably do this with jQuery code, but I was wondering if this could also be done with css alone. On my main design (Views/Shared/_Layout.cshtml) - I made the body to have a "min-width: (my value);" attribute, which, obviously isn't supported with older browsers, so I also included a transparent image of a default width of 1px that I set to stretch to my desired width also - it works in controlling the width of the page (to the minimum I desired). But - I have a site header div which resides at the top of the page. I have a part of that header div with elements positioned on the far right - which is nice when the browser is on a device that is large enough and the browser is in decent size, but once the browser is set to a size less than my desired minimum width, then the scroll bar shows up, and I can move it around as expected. But, the elements in that header div do not stay to the far right in conjunction with my minimum width - but stay on the right of the current window size instead. I have the main div holding the elements itself set to be in fixed position, I tried making those elements relative with no success. I tried a few ideas, the problem still persists.
So, as I said, I am well aware of concepts using jQuery that can do what I have previously described I desire in these regards, but, as I also said, I know a decent amount of css, but am the least close to an "expert" in css than anything else I know. I just have a strong suspicion what I desire here can be done with css and css alone (also, it would be nice to have it compatible with most browsers, or at the least most browsers made after the year 2008).
Can someone please give me some good information in these regards?
I just remembered asking this question.
I actually found a way to go about doing what I wrote I desired here through some experimentation that eventually got me to where I needed to be. What I did was instead of using relative positioning - which I thought was the proper way of doing this, I used absolute positioning inside the absolute positioned top header div. I didn't think this would be the solution at the time of asking the question, I assumed setting something as absolute positon - even inside something that is already absolute positioned - would put it in a new context of absolute positioning like any absolute positioned element inside the body tag. What I discovered was if I put an absolute positioned element inside another absolute positioned element - the context of the absolute positioning was based on the original absolute positioned element - so top (or left for that matter) 0px wasn't 0px from the context of the body (the very top of the page) - but - 0px from the element that the element is inside of. I think that's a pretty explanation of it, so I'll end explaining it here.
I'm sure there's plenty of people that know css much more than I do, and think this issue I had here is so basic, but, I did ask the question, and I might as well answer it based upon the solution I used. I could've posted an example on jsfiddle like asked for in a comment, but I thought my explanation was good enough, and since no one offered an answer based on my question alone, I decided to try to address the issue with experimentation, which I had success with.
I have created a layout using DIVs/CSS. I have attached an example image and links below which shows how I would like things to be organized. Within the header, there is a logo and a menu which are cumulatively 1000px in width. The feature, content, and footer sections are also to be 1000px in width. However, the actual background images for ALL sections are 100% in width and are repeated horizontally.
Below is an example of what I want to do:
What I have actually put together so far (in terms of the design) can be viewed here: http://ohachem.com/2/. This is what I would like to follow. The CSS can be viewed here: http://ohachem.com/2/style.css
What is the best way to accomplish this? As you can see, the text in the "feature" section does not align completely in the centre. I've tried using clear:both, overflow:hidden, and several other methods, with no luck.
The "misalignment" of the "featured" text is caused by the floating logo. Because the float hasn't been cleared and extends outside of your header, it is causing that text to flow around it. Adding overflow: hidden to your #header element will correct it, but there's other ways to clear floats without adding extra markup.
Alternately, you could just make your logo the same height as the header. Right now the height property is set to the same value, but the logo has some extra padding, which is causing the overflow.
The website you're pointing to uses a liquid layout, here's a bunch of examples: http://www.dynamicdrive.com/style/layouts/category/C13/ .
One note, on your example, there's no positioning attributes that I can discern, a large part of making a layout responsive is ensuring it looks consistent across all browsers & screens.
I would Suggest you to use CSS3 Media Queries rather than Script for the Responsive/ Adaptive Web page design.
Please have a look at this
These do not process a lot, hence Light weight and most modern browsers and Devices support CSS3 hence a convenient and reliable Option.
I'm pretty much as new to CSS as it gets and what I'm trying to do right now is just design a very simple/basic splash or landing page for a small business.
Here is the url for the site: My site
Now if you go on any browser, lets say google chrome and you zoom out or in (ctrl -/+) you will notice that the website layout starts to "break apart" in that all my divs just start shifting around. I obviously dont want this, and just want the site to remain the same when people zoom in or out, pretty much like all good sites haha.
I know it must have something to do with positioning, but I can't figure it our for the life or me. Last night I spent hours browsing similar questions but I can figure it out.
I'm not posting the code as to take up more space, I'm assuming since I gave you the URL you'll be able to retrieve the code from there.
I also have a few more, smaller questions:
1) if you open my site on chrome, or ie you'll notice that after the "terms and conditions" on the bottom of the page, the site ends, like it should. however, if you go on firefox, you'll notice that after the "terms and conditions" the background so to speak continues for a while. why is this and how can i fix it?
2) you'll notice that on different browsers positioning of elements is slightly different.
most noticeably if you look or chrome/firefox and then internet explorer 9 you'll notice that the "terms and conditions" are slightly higher than in chrome or ff and thus slightly touching the main content area. is there a way to fix this?
3) what is an efficient, effective way to center divs? For example, I want to center the "sign up" button perfectly centered relative in the main content area. ive pretty much just been eyeing it out and using relative positioning to center it. what is a more accurate way to center it?
Thanks, and sorry if these questions seem a little redundant. if you need any clarification on anything I'll be monitoring this question like a hawk.
Cheers
When you zoom in or out, you will encounter issues because of rounding and text rendering. It is a good idea to make sure the layout can survive a bit of stretching without breaking down.
Relative positioning is affected by issues mentioned in #1, and therefore unreliable.
Look into using something to remove the properties that the various browsers will apply. You could use a reset to give you something more workable or try to normalize the values to make them more even between browers.
For (horizontal) centering you have some options:
If you have a container with "text-align:center" it will center all child elements that are inline-blocks or inline.
If you want to center a block element, you can use "margin: 0 auto" to center it horizontally and remove vertical margins.
If you want to center an absolutely positioned element, you can use "left: 50%, margin-left: -(width of element/2)".
In addition to attempting to get rid of relative positioning, I would recommend that you do not explicitly set the height of the body element. Generally you want the elements to manage their own size, that way they will be more robust.
If you use "position: relative" now because that is what you know how to use, I would suggest you try using "float: left" (or right), or changing the display type (display: inline-block). That may help you get started in the right direction.
not sure for your points 1 & 2, but as for 3 what i've come to use is the following have the div i want to center and then use width : some-percentage; margin-left : 100-(some_percentage)*0.5 ;, where some percentage is the width I want to use.
a couple suggestions before go into fixing the zoom in and zoom out issue.
Don't use <div> to wrap around text.
Use <h1> tags for header
Store your CSS in a separate css file.
You defined the header section that's great, but do that for container and footer as well.
Comments! That would make the job much easier for people who try to help you.
I have a layout in which two divs appear stacked vertically inside a parent div which will be a specific height (due to containing a left hand menu). I wish the two divs to take up all the available vertical space. However, they must resize depending on their content. The easiest way to explain is with a diagram:
Reading the diagrams from top to bottom, this is the scenario:
both divs take up 50% of available height as this is sufficient to contain their content (this is the default).
there is a lot of content in top div and less content in bottom div. Top div expands to fit content and squashes bottom div.
reverse situation of (2).
both divs must expand to fit their content. Containing div must expand to accomadate.
I think I could figure out how to do this with a table, see the example here which is almost correct (in chrome anyway) except the outer div doesn't expand properly.
Is there a better CSS solution to this without using a table?
I cannot use JavaScript and solution must work in all browsers... including IE6 :(
.
This can be done using CSS, with a feature called the flexible box model. It's an extension to the box model that's been in use in CSS since the begining, and allows you to do stuff like vertical stacking, etc, which wasn't possible before.
You would start off with display: flexbox;, and then use other related styles to define the characteristics of the layout you want. It is very powerful. You can read the full W3C spec for it here: http://www.w3.org/TR/css3-flexbox/
Now the bad news: It's a very recent addition to CSS. It actually has reasonably good browser support (albeit with vendor prefixes), but the problem you'll always hit is that it isn't supported in IE, not even IE9 (though it is planned for IE10)
Other browsers require vendor prefixes, so even for supported browsers you'll need to write your styles in four or five versions.
In addition - and this is the real killer - there isn't a good fall-back solution for browsers that don't support it. If you design your page using flexbox layouts, and load it into a browser that doesn't support them, it will be a disaster.
For this reason, it is hasn't really seen much use in the real world yet. It's time will come, but as long as IE9 and earlier are in use, it won't become mainstream.
You can see a full browser compatibility chart for the feature here: http://caniuse.com/#search=Flexible%20Box%20Layout%20Module
In the meanwhile, you're going to have to use a Javascript solution.
My recommendation is the JQuery Masonry plugin. I think this will be your best solution for now.
You could fake it using a 100% height wrapping div and a white border like so:
http://jsfiddle.net/cBV88/2/
You can also remove the fixed height and it will still work.
SuperStretch might get you part of the way there.
So, for a website I've been trying to get a specific layout to work across the IE browsers (FF + Chrome are a plus if they work, but usually they do).
Below you can see the layout I'm trying to achieve;
alt text http://dl.dropbox.com/u/2199846/layout.png
As you can see, this is just a slight variation of a multi-column layout that you can see around the internet. Just with some added extra's.
- no div should ever exceed the page height, if they do, they should just overflow (but normally that will only happen for the middle part)
- the "toggle" link should toggle the div below visible/invisible (got the jquery code and all, no issues there), but that toggle should offcourse expand/decrease the width of the middle div.
I'm at the end of my possibility's here, and tried changing to a full table layout, but that had the problem of always expanding when content got too much...
If any of you CSS heroes out there know how to make this layout, I'll be very grateful!!
EDIT:
What I forgot to add is that certain parts of this design should be fixed width/height. The top part should be 60px height, right and left side should be 200px width. And the small bar (+ toggle bar) should be 30px high.
Of course I'll try to work from the example posted below, but I thought I'd add this edit just in case someone finds it challenging to make (I know I find it challenging, yet I'm not so good yet in CSS for now)
http://jsfiddle.net/YGgTx/1/
this is a mock up of what you are trying to do I believe. As it indicated by the other posters you may want to use hide() to handle the menu effect. If there is anything wrong with this mockup let me know, I do not have IE6 installed but it works on 8.