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.
Related
I am looking for a good angular directive, that would handle sticky elements and append a compact class to it once they are out of the view...
so imagine a header element on a website, that has a normal height of 200px;... but when you start scrolling down, you would FIRST make the heater sticky (position fixed - top: 0) but when you scroll down for more than 200 px (I guess) you would append a "compact" class to it, so you would than see a compacted version of the header on top - lets say 70px;. This is quite established behaviour with modern [responsive] websites.
Which is fine and easy enough. The problem is when you want to stack more elements on top...
So to better explain myself... you would have the mentioned header with mentioned behavior... but further down on the page you would have a table, with it's theader row... and you would like to stack that on top, but after the header... and only when you scroll pass it...and also with "COMPACT" behavior (but not necessarily)
and imagine you would have some navigation even further down (tabs for example)... and you would like to stuck them on top as well, but only after the header and table...
so the directive would need to calculate the fixed top position depending on the elements already stuck there and if they are a compact version of themselves or not...
plus it should consider also the (css) animation bit (lets say you would put a transition animation on height of the element... so the transition of full to compact is smooth)
Anything similar out there already? I don't think this is something new in terms of expected behavior...so there must be some solutions out there already.
anyone?
I know this is an older topic, but I think I've a proper solution.
I'm the creator of Angular Sticky and already have this feature implemented.
You can view the demo displaying with most of what you're asking right here. The "collections" demo has more header like behavior though.
There is however some smart CSS that needs to be done to make the compacting happen, but I think it should be possible with the current functionalities of the plugin. I might need to look into this too anyway as I can imagine it can be a popular request.
ng-sticky could do with a little mod.
It has a body sticky class so you can change the behavior of the whole page after an element became sticky.
UPD1
As I stated before a little update of ngSticky would do the trick.
So I decided to do such changes
Here is my fork of ngsticky on Github
It is still very WIP and I'm planning to contribute it to the main ngSticky project when done.
But before that( and continuing my work on it) I wanted to check with you if this is the behavior you are expecting.
Any response will be helpful.
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.
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.
Is this going to cause me untold grief if I stick it at the top of my stylesheet?
* {position:relative}
Is this going to cause me untold grief if I stick it at the top of my stylesheet?
Yes. You will not be able to work with absolutely positioned elements any more, for example - the absolute positioning will always be relative to the parent element, which is almost never the desired result.
I could imagine there are even more side-effects field of z-index settings.
Not a good idea IMO.
And no, position: static is not deprecated, after all, it is the default setting :)
Wildcards can cause performance issues when not used carefully. That would probably not be the case in your example, but it's a bad habit to develop.
But more importantly, it's rare that you can conclusively say you want any behavior to apply to all elements.
With relative positioning, you will at best achieve nothing and at worst create many headaches for yourself trying to troubleshoot things that would normally "just work".
Relative positioning definitely has its uses. Apply it when you need it.
It's a bad idea imho as it changes the default behaviour of elements without clear indication and it will have unforseen consequences.
If you really want to have most elements positioned relative, you might want to think about just making div and similar relative.
Just to give the other side of the coin, I have used this setting quite a lot, and have found it useful. Main advance being the easiness of using positioning properties (top, left, right, bottom) without having to define relative positioning to parent all the time.
It's true that this setting will make it impossible to use absolute positioning in relation to anything else than the parent right above, but I find this to be a good thing. Because the first parent with 'position: relative' is visually de facto parent of any child with 'position:absolute', then it is only logical to make them direct children also in the HTML hierarchy.
In short * {position:relative} forces a convention that makes it easier to reason how positioning works.
Caveat 1: Event if the new convention simplifies things to new comers, it's different from what seasoned CSS developers are used. Prepare to face opposition if you start using this in big project with many frontend developers.
Caveat 2: Performance issue should be tested properly. I have tried turning this setting on and off on some big sites without noticing any difference, but no real tests with real numbers exist (to my knowledge).
Final note: First line in the second paragraph is not quite true. You can always overwrite wildcard definitions, setting position: static some mid level node, if you really need to.
Answering title question:
This is the current CSS 2.1 spec:
http://www.w3.org/TR/CSS2/visuren.html#propdef-position
Accepted values include static, relative, absolute, fixed and inherit.
I'm not sure about CSS 3 (it's still work in progress) but they don't seem to mention static:
http://www.w3.org/Style/CSS/current-work#positioning
Whatever, I wouldn't really care yet :)
Answering body question:
The default is static so you'd be changing the property for every single item in the page. The best you can achieve is nothing. The worse is that you'll be probably creating weird side effects you won't even notice at first sight.
Also (this is pure speculation on my side), it can't be good for performance. I'm sure rendering engines are optimized for having a majority of static elements.
I feel like the problem is extremely apparent. I'm working on an issue with a client's site, which actually happens on several of my clients' sites but this one is the most apparent. IE7 Is refusing to obey z-index rules. I've played around with differing values, particularly on the divs #mapWrapper and #map. Take a look here: http://thepaysongroup.com/wp-content/plugins/hq_idx/searchlistings.php
I've done dozens of web searches and I can't find anything that resolves this issue. I also ready through Aleksandar Vacić's article on IE6/7 z-index discrepancies, but still nothing. Any assistance would be much appreciated, I'm tearing my hair out on this one.
In my experience, z-index in wonky in IE. Setting it to 0 is especially a problem, so make sure 0 isn't one of your z-index values.
Sometimes the simplest solution is to change the source-order of the html: whatever shows up later in the source will be on top. Is that a possibility in your case?
If I remember correctly, you can't have two elements with the same z-index or things get funky. I notice a lot of your paths have z-index of 1000. Some ideas to try:
Reset the z-indexes to be incremental within faux layers. That is, if you want all the boundary strokes to be on the same "layer", allocate the numbers between, say, 1001 and 2000 for that layer. The next layer above would use the numbers between 2001 and 3000, etc.
Let the document flow set the z-indexes within a few containers, and set the containers themselves to wide-apart z-indexes.
Note that historically with IE, elements like combo-box dropdowns and ActiveX controls, etc. get displayed on a layer above the actual page, and so always appear above any HTML, no matter how high you try to set the z-index. Not saying this is the problem, but perhaps using the map api triggers that problem. Read more here.
Okay, I figured it out. So the main navigation is in div #header with position: relative and no z-index defined. Once I placed a z-index on the header the menu popped right out in front of the map.
I guess the lesson here is look for every element with a defined position, be it absolute or relative, and how it is interacting with the elements in question.