I've always wondered about this.
Even with media queries, how would I significantly change the placement of things(since I'm not modifying element placement in HTML directly).
For example, if social Facebook/Twitter links appear somewhere in the middle of the page(with their HTML container elements nested in a bunch of other parent tags), how would I go about moving that to the bottom of the page(or, to make it look like they are nested in a different section).
You have at least two options:
Change the positioning of the container element. Instead of static position (default behavior), you can use position: absolute or position: fixed to move it to a totally different place on your page.
Repeat the elements in two different places, and set one of them visible depending on a screen size.
I must add, however, that in a good design such measures are rarely necessary. You do not want to confuse your users by moving the elements to a totally different location. A better approach is to use a responsive grid (for example, changing the layout from three columns to two, or from two to one, when a screen gets smaller), collapse tabs into a drop-down list, etc., but keep the position of different elements relatively stable.
Moving to the bottom of the page wouldn't be a big deal. Depending on the parent container, use position:absolute or position:fixed and adjust the z-index of this and the parent container.
However, if you wanted to re-order your containers for specific media queries, you'll either have to give absolute positioning to more elements, adjust your floats, or use Javascript.
If this is a client request, I would personally revisit the wireframe stage and plan your responsive behavior from scratch.
You never ever can assume height of elements for sure from a CSS perspective: user will zoom a bit or a lot, images included or not; images won't appear because of network problem or by user choice, etc. Thus position: absolute is a recipe for future or immediate failure (and fixed not what you're searching for).
You can play with:
flexbox (horizontal or vertical, natural or reverse order)
display: table-(header|footer)-group or display: table-caption along with table-cell and if possible with parent element having display: table (with or without table-layout: fixed) or table-row
floats and Block Formatting Context effects (such a powerful beast)
nope: CSS Grid Layout is IE10 and IE11 only
If you want to move an element from somewhere inside some other element far away both in HTML and visually, then go with JS/jQuery. CSS doesn't allow for complex manipulations. Just make sure that you watch for resize both from and to desktop/mobile resolutions (and allow for initial manipulation and after some AJAX event) and don't fire 100+ events per second when resizing
Related
I've been working with HTML and CSS for a while now.
Every time I work in CSS, I have a feeling that I'm not "doing it right".
For instance, when positioning different divs and elements on a webpage, I use "position: absolute" and "position: relative" quite often.
This can sometimes be very tedious to find the "right" position and results in very ugly numbers, such as:
position: relative;
width: 1300px;
height: -720px;
In addition to above, it also makes it very difficult to edit said divs and elements later on if I change my mind about their appearance or position.
I've watched a lot of tutorials on YouTube where people use "margin" and "padding" tags to position the elements on their websites.
I'm very confused by this since those tags are supposed to be used for creating space around elements and not actually change their position.
The strange thing is, that it is much easier to edit the website using "margin" and "padding" tags later on, if you change your mind about the appearance/positioning of those elements since they won't move around and overlap each other.
I apologize for the long query but this has been bothering me a lot lately and I would appreciate any advice regarding the positioning of elements in CSS.
Thank you
The biggest distinction between position and margin or padding is that when you set the position to absolute, relative or fixed, the element is taken out of the "normal flow" of the document and placed in its own layer. This is what allows you to use the z-index property and stack elements on top of each other. This has dramatic advantages when the elements in question are going to be dynamically sized or animated because doing so won't cause all other elements in the document to have to "re-flow", nor will the entire document have to "re-paint". In fact, when working with dynamic sizing or animations it is strongly recommended that you take elements out of the flow this way or performance can suffer.
Beyond this, understanding how absolute, relative and fixed positioning work is essential.
Absolute Positioning positions the element relative to its nearest ancestor that, itself, has been manually positioned or the body element if no ancestor has been positioned. The element is taken out of the flow and any space the element was taking up in that flow is removed.
Relative Positioning positions the element as an offset to its original location in the normal flow, but leaves the original space that the element took up in the document even though the element is now in its own layer.
Fixed Positioning is similar to absolute, except that the position is not relative to anything. It is fixed at an exact location you specify.
While all of these will pull the element into its own layer, how the layers are stacked (via "stacking contexts") are dependent upon which type of positioning you've used and the structure of the elements being positioned.
These are the reasons to use position. If you are not in need of new layers, using CSS float, flexbox are tools that can offer alternative ways to design a layout.
margin and padding should really not be used for the layout itself. They are used for small tweaks within a layout.
In summary, the default way the a browser lays out the contents of a page is the CSS Box Model, but using CSS position is one way to have certain content use that box model in different layers from the main content. CSS floats offer another, separate layout algorithm and Flexbox offers yet another. In the near future, the CSS Grid specification will be standardized and yet another layout paradigm will be available.
But margin and padding are not layout models. They are just tools to use in whatever layout model you happen to be using.
First off, i'm not really a good coder. I'm an IT but more of an infra guy but i do understand concepts about coding and maybe a bit of a good grasp about it. I am working with my website and it's under construction using wordpress. In my homepage, i plan to do it simple as it is and decided to use the page builder and use text or HTML (or any language) to maximize it. I hope some one can help me. I would really appreciate it.
Here it is:
homepage
Those images have onmouseover style and was able to do it.. the thing is i can't arrange it horizontally. :( and unable include arrow so they can move left or right to see each images :(.
I know i can also do the same on the icon part the moment someone help me about the concept i wanted.
Your question is pretty ambiguous as to the specific context of the solution.
However, in general the reason why things don't align horizontally when rendered on screen in a browser, is that most elements (including the popular <div>) have a default styling of display: block; which makes it take up the full width of its parent item if the parent itself has the same styling (cascading of this is a different discussion).
The general solution to this is to define the widths of the elements. And they will be placed on the same line to the extent that the widths of the elements allow for more than one to appear on the same line.
One way to solve this is to have elements widths defined in some way. This could be by applying a class with a width: 25%; for example. This would allow for 4 elements with the same width to fit on the line.
Alternately you can also set the display property value of the elements you want on the same line to inline-block. This will make those elements take the width of it's content (unless the content has no width specified). This will cause the elements to flow along the horizontal line like text would (it will re-flow on the resizing of it's parent element), until there are no more contiguous items containing the inline-block display property.
Since your description also showed carousel style navigation for these rows of items, it may be that these are not the full solutions you are looking for.
If you are using the Bootstrap framework, there is a built-in carousel feature which you could use to contain these horizontally aligned elements on separate "pages" of the carousel. Making this solution fully responsive is another challenge altogether.
I'm trying to get more efficient with building responsive websites and since I'm using Bootstrap (not particularly important for this case - I believe), I was looking into Bootsnipp. I decided to view the site's source and noticed one thing I've never seen before: they did not set a height for any of their containers except for the whole page wrapper and the footer. This baffles me because everything falls into place with the website and it's super repsonsive. I understand the elements where they use Bootstrap's classes like "col-sm-4" and whatnot but does anyone understand the art of making the header, a content container, etc calculate heights without specifying in css? Can anyone explain this concept? I tried Googling but not sure of the correct keywords to find answers.
Also, if you need to see yourself, here is the link to their CSS.
Thanks
Understanding the Box Model is important. As an (overly simplified) rule of thumb, you can think of it like this; there are 2 primary types of elements: inline (span, b, strong, ...) and block (div, p, ...).
Block tags by default are width: 100%. That is to say they will naturally stretch to fill their horizontal area.
Inline tags you can think of as being constricting. They shrik to fit the size of their inner elements. This makes sense when you think of a bold tag: it is not unlike highlighting the text you want to be bold. It stays small to fit the content.
In both cases, though, unless you specify a height, both block and inline tags will shrink their height to fit their inner elements. Because of this, you can think of a website as being a bunch of elements stacked on top of each other, where the top of the page is the bottom of the "stack".
Here is an example of divs without specified heights having their heights changed by the size of the interior content. http://jsfiddle.net/S3q2C/ Notice all the divs have a border to easily see its relative size.
If you don't set an explicit height, containers will automatically grow to fit the content (respectively). Sometimes this is desirable, other times not (think overflow hidden). A possible reason why people use explicit heights in containers could be because of absolute positioning, or if they want to align a nested element that is 50px tall, with another that is 200px tall. An explicit height could also be used to maintain perspective say for a picture or other element (maybe a series of elements). While this answer is the end all be all you might be looking for, the key thing I'm trying to pass along is that an explicit height is used when needed, not all the time.
Here's a quick demo showing you two <div> containers, one with a height set, and another with no height.
http://jsfiddle.net/xrZ73/1/
This is the scenario.
I have a simple table with a header row including several columns which have a dynamically changing width. Within the head row there are lists of a height that is longer than the head rows height, they are however only supposed to be visible on hover, but when on hover they are supposed to be ontop of the headrow but still having the the original 100% width of the parent being the <td> element of the column.
What I did was to set position: absolute on hover but as soon as that happens the element obviously took all the width it can get, fixable only with a specificly applied width, but that doesn't really help me as the column can be resized.
My Question is if there is a way in CSS ( NOT Javascript ) to achieve a behaviour where the element would still use the parent's width.
The answer to your question will vary wildly depending on what you're trying to accomplish. Most blanket solutions require:
The addition of extra positioning elements (often added using Javascript)
Setting display: block; on the TH, TD elements (often makes the TABLE behave erratically)
The reasons for this is that adding positioning to a table cell removes it from the flow, which affects table alignment (see this bug report comment). A much longer discussion about this issue and the possible solutions can be found at Does Firefox support position: relative on table elements?
That aside…
If you are using the TABLE for site layout, stop now and re-think your choices in life. There are better options:
The best option will be the CSS3 Flexible Box Layout model, if and when it becomes widely supported. Support at the time of this writing is minimal, scattered, and doesn't always follow the same standard (caniuse.com: flexbox)
Until that becomes an option, it's a little known fact that absolutely positioned elements can be positioned inside absolutely positioned elements. See this fiddle for an example of a 100% width/height layout made possible with absolutely positioned elements. Alternatively, the same layout can be made inside a relatively positioned parent element.
If you're not using a TABLE for site layout, then there may be other options open to you. It depends on the desired effect.
Alright, so this is basically the usual "how to vertically center with CSS" question, but with some catches.
No Javascript. HTML and CSS only. CSS3 is fine as long as it's reasonably well supported by today's browsers.
The element's content, and therefore height, is not known. It may be anywhere from a few dozen to a few hundred pixels. In the future I might even have a script adding and removing elements inside, so it may change height as the user is interacting with it.
There is other content on the page - a navigation bar at the left and a menu at the top. These need to be accessible.
The approach I've used is the three-container-div method using display: table-cell, as documented at: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html this solves issues 1 and 2, but not 3.
http://imgh.us/vcenter.jpg shows the design and the problem. The yellow box is the innermost container. The red and green dotted boxes around the entire page (which have become somewhat blurred together due to JPEG encoding) are the outermost and middle containers respectively. (The out-of-place footer is a separate issue...)
The problem with this layout is the outer containers cover the entire page, and this makes it impossible to click on the navbar, because it's now "under" those containers. Z-index can move them to the bottom, but then it becomes impossible to click on anything inside the red box, because it's now "under" the page's main content box. (XHTML only allows a single element inside the <body>, so I've just wrapped it all in a <div>.) Even if the outer two containers have z-index: -100 and the inner container has z-index: 200, it still ends up under the main content box for some reason. (I did try various position attributes.)
The only solution I've seen is a new CSS3 property, pointer-events, that would in theory allow me to make events pass through the transparent containers as I'd expect; however this seems to be quite new and not yet supported by most browsers outside of SVG, and I imagine I'd have the same trouble as with Z-index.
I do want the element at the center of the page, not the center of the content area (i.e. ignoring navbars in the calculation of position), so placing the container inside the content area isn't an ideal solution. (I'm using this style on the login page as well, which has no navbars, and it'd look a bit strange if the "centered" elements were centered relative to a navbar that isn't always visible.)
In summary what I need is to center, without using Javascript, an element of unknown height on a page with other content at its edges, without covering any of the content with an invisible layer (and thus making it unclickable).
While this is obviously an old question and the OP has undoubtedly solved this problem, I figured I'd add a link to Chris Coyier's marvelous write-up on how to deal with this issue for future wayfarers in need of a similar solution.
http://css-tricks.com/centering-in-the-unknown/