I didn't find a solution for this problem:
For a nav bar, I have a ul with a specific width (530px), and inside it a few lis.
I want the lis to fill all the 530px width, with equal spaces between them. I can't hard-code this, as I don't know the width of each li.
I'd recommend Flexbox - the updated spec is fairly new, and you'll want to use a polyfill or vendor prefixes for broad browser support, but it's the direction this kind of task is going.
Here's a nice tutorial on creating a simple Flexbox-driven horizontal nav that will show you the basics.
As you can see, the browser support isn't yet perfect, but there are various polyfills and techniques available to you to make it rock solid. And you don't have to go far to find some more info about those resources. The key link from that related SO post is Chris Coyier's Using Flexbox.
I'd recommend using tables with borders disabled...
Tables will equally separate text into individual cells.
Here is a nice description about them
Related
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 have started getting into web development and have created a first draft for my website siavoush-re.co.uk, however the more research I do the more I realise the methods I have used for positioning is not good.
is positioning with margins better than using relative/absolute
positioning?
What is best practise when positioning elements, especially for responsive design?
What methods should I avoid using or are outdated?
Margins and paddings are better than positioning use % unit for responsive designs.
You can use position:relative; for the responsive design as BOOTSTRAP also use this positioning,but using absolute positioning will move your content when you view on a small device.
Avoid using pt or px unit for font-size, use 'EM'
Relative and absolute positioning isn’t bad per se, sometimes useful, but just incredibly easy to do wrong.
You want multiple columns. Traditionally, we use the float property for that, as legacy browsers support it well. There are a couple of new properties that will allow you to create columns as well, but legacy browsers do not support them, so for now I would personally discourage use unless you’re absolutely sure your visitors run modern browsers and you don’t care if the site fails on legacy browsers.
The Easy Way
Either way, floating in CSS is tough. I would highly recommend a responsive grid system. There are many CSS downloads available. All you have to do is use the appropriate classes for your columns.
Bootstrap: http://getbootstrap.com/ (comes with a lot of extras, so use with caution)
Skeleton: http://getskeleton.com/
Pure.css: http://purecss.io/
Responsive Grid System: http://www.responsivegridsystem.com/
There are tons more.
The Hard Way
By far, floating is the most popular choice. Floating elements causes block elements (like divs) to sit aside. You apply a width to each column, and voila, you have multiple columns. Doing sizing with gutters and paddings is slightly annoying, hence I recommend using an existing stylesheet that does it all for you. Basically, after several columns, you will have to append an element with the clear property to fix the layout flow.
Alternatively, depending on your target audience, you can use CSS columns, flexbox or grid.
Why Not Use Absolute/Relative?
Browsers sort out the flow for you. Growing elements will push down anything that comes after. Relative positioning doesn’t change this behaviour, but absolute positioning does. It just smacks the element on top of your stuff, and you will have to make room for you content yourself.
I do use relative/absolute positioning sometimes, but only to make things overlap. For example, I have an image container (relative), that holds an image (absolute) and a title/label (absolute). By having the latter two positioned absolutely, I can move within the container as I like. By setting a size on the container, I can put it anywhere I want without breaking the flow.
It depends, relative position is the positioning of elements
relative to the actual flow of HTML.
Whereas absolute positioning is in reference the the top-left coordinate of your document. (not always)
Best practices for responsive layouts?
There is nothing best, you must know when to use media queries and use % instead of px for columns widths and also float property.
Here you can find the list of depreciated properties and tags
Very nice work :)
You can investigate Bootstrap http://getbootstrap.com. I used it recently and with this framerowk you can do amazing responsive websites :) Simply add specified classes and styles to <div>, <span>, <p> and other HTML elements.
CSS resets help establish a baseline from which all the styles are set. A reset effectively overrides the browsers’ default styles for certain elements (which can vary greatly). Despite the popularity of CSS resets over the past several years, many sites still don’t employ them, and these sites’ CSS scalability is suffering greatly for it.
Instead of using the extremely popular CSS Reset by Eric Meyer (because it is too far-reaching) or making up a DIY reset, many people recommend using normalize.css. Normalize.css “normalizes” the code to a common baseline rather than resetting the base styling for elements across all browsers. Referring to the normalize.css project on Github, these are its advantages over a CSS reset:
Preserves useful defaults, unlike many CSS resets
Normalizes styles for a wide range of HTML elements
Corrects bugs and common browser inconsistencies
Improves usability with subtle improvements
Explains what code does using detailed comments
Using normalize.css in lieu of a standard reset will get you on the right coding foot and save a lot of time in not having to reestablish baseline styles.
enter link description here
To answer each of your questions in turn:
This really depends on the context of the element in the HTML and what you are trying to achieve in the site layout. Quite simply, there are often multiple solutions to a problem. Sometimes it is more appropriate to use margins, some solutions are best left to relative positioning, and other times absolute positioning is your only answer.
See 1 although I would avoid hard coding widths and heights in pixels: % and em are commonly used in responsive design. My best advice would be to follow a few tutorials and see how the CSS works together. The CSS media-design is often used in responsive web design.
Best to follow W3C recommendations for outdated HTML and CSS. From the top of my head, you should avoid using <table> tags to define site layout.
Interesting read: http://www.w3.org/TR/mobile-bp/
My Question(s)
Are any of these methods preferred by a professional web designer?
Are any of these methods prefereed by a web browser when drawing the website?
Is this all just personal preference?
Are there other techniques I'm missing?
Note: Above questions are in regards to designing a multi-column layout
float:left;
http://jsfiddle.net/CDe6a/
This is the method I always use when creating column layouts, and it seems to work just fine. The parent does collapse on itself though, so you just need to remember to clear:both; afterwards. Another con that I just found was the inability to align text vertically.
display:inline;
This seems to correct the problem of the collapsing parent, but adds whitespace.
http://jsfiddle.net/CDe6a/1/
Removing whitespace from html seems to be the easiest fix this problem, but is not desired if you are really picky about your html.
http://jsfiddle.net/CDe6a/2/
display:inline-block;
Seems to behave exactly like display:inline;.
http://jsfiddle.net/CDe6a/3/
display:table-cell;
http://jsfiddle.net/CDe6a/4/
Works perfect.
My thoughts:
I'm sure I'm missing a ton of stuff, like certain exceptions that will break the layout but, display:table-cell; seems to work the best, and I think I will start replacing float:left; as I always seem to mess up on clear:both;. I've read many articles and blogs about this on the web, but none of them give me a definite answer on what I should use when laying out my website.
Of the options you asked about:
float:left;
I dislike floats because of the need to have additional markup to clear the float. As far as I'm concerned, the whole float concept was poorly designed in the CSS specs. Nothing we can do about that now though. But the important thing is it does work, and it works in all browsers (even IE6/7), so use it if you like it.
The additional markup for clearing may not be necessary if you use the :after selector to clear the floats, but this isn't an option if you want to support IE6 or IE7.
display:inline;
This shouldn't be used for layout, with the exception of IE6/7, where display:inline; zoom:1 is a fall-back hack for the broken support for inline-block.
display:inline-block;
This is my favourite option. It works well and consistently across all browsers, with a caveat for IE6/7, which support it for some elements. But see above for the hacky solution to work around this.
The other big caveat with inline-block is that because of the inline aspect, the white spaces between elements are treated the same as white spaces between words of text, so you can get gaps appearing between elements. There are work-arounds to this, but none of them are ideal. (the best is simply to not have any spaces between the elements)
display:table-cell;
Another one where you'll have problems with browser compatibility. Older IEs won't work with this at all. But even for other browsers, it's worth noting that table-cell is designed to be used in a context of being inside elements that are styled as table and table-row; using table-cell in isolation is not the intended way to do it, so you may experience different browsers treating it differently.
Other techniques you may have missed? Yes.
Since you say this is for a multi-column layout, there is a CSS Columns feature that you might want to know about. However it isn't the most well supported feature (not supported by IE even in IE9, and a vendor prefix required by all other browsers), so you may not want to use it. But it is another option, and you did ask.
There's also CSS FlexBox feature, which is intended to allow you to have text flowing from box to box. It's an exciting feature that will allow some complex layouts, but this is still very much in development -- see http://html5please.com/#flexbox
I usually use float: left; and add overflow: auto; to solve the collapsing parent problem (as to why this works, overflow: auto will expand the parent instead of adding scrollbars if you do not give it explicit height, overflow: hidden works as well). Most of the vertical alignment needs I had are for one-line of text in menu bars, which can be solved using line-height property. If I really need to vertical align a block element, I'd set an explicit height on the parent and the vertically aligned item, position absolute, top 50%, and negative margin.
The reason I don't use display: table-cell is the way it overflows when you have more items than the site's width can handle. table-cell will force the user to scroll horizontally, while floats will wrap the overflow menu, making it still usable without the need for horizontal scrolling.
The best thing about float: left and overflow: auto is that it works all the way back to IE6 without hacks, probably even further.
I'd say it depends on what you need it for:
If you need it just to get 3 columns layout, I'd suggest to do it with float.
If you need it for menu, you can use inline-block. For the whitespace problem, you can use few tricks as described by Chris Coyier here http://css-tricks.com/fighting-the-space-between-inline-block-elements/.
If you need to make a multiple choice option, which the width needs to spread evenly inside a specified box, then I'd prefer display: table. This will not work correctly in some browsers, so it depends on your browser support.
Lastly, what might be the best method is using flexbox. The spec for this has changed few times, so it's not stable just yet. But once it has been finalized, this will be the best method I reckon.
I prefer inline-block, although float is also useful. Table-cell isn't rendered correctly by old IEs (neither does inline-block, but there's the zoom: 1; *display: inline hack that I use frequently). If you have children that have a smaller height than their parent, floats will bring them to the top, whereas inline-block will screw up sometimes.
Most of the time, the browser will interpret everything correctly, unless, of course, it's IE. You always have to check to make sure that IE doesn't suck-- for example, the table-cell concept.
In all reality, yes, it boils down to personal preference.
One technique you could use to get rid of white space would be to set a font-size of 0 to the parent, then give the font-size back to the children, although that's a hassle, and gross.
For the record only, to add to Spudley's answer, there is also the possibility to use position: absolute and margins if you know the column widths.
For me, the main issue when chossing a method is whether you need the columns to fill the whole height (equal heights), where table-cell is the easiest method (if you don't care much for older browsers).
I prefer inline-block, but float are still useful way to put together HTML elemenets, specially when we have elements which one should stick to the left and one to the right, float working better with writing less lines, while inline-block working well in many other cases.
I'm experimenting with CSS and the float property. I have this "website", with a lot of divs aligned to 80px grid and float: left:
Is there a way in CSS to make it looking like this - so the elements can use empty space above them?
Without JavaScript, if it's possible.
Thanks, Martin.
No, this can't be done in CSS. Best way is to use a javascript item called masonry I'm afraid.
http://masonry.desandro.com/
For tiling dynamic content both horizontally and vertically, the CSS options are:
float:left, as you've already seen, only offers limited horizontal tiling.
display:inline-block gives a different result than float:left, but with no tiling.
CSS multi-column layout isn't fully defined yet. It supports vertical flow into implicit columns, but probably not in a way that qualifies as tiling.
flexible box layout isn't well supported yet. It supports a type of horizontal or vertical flow that might not qualify as tiling, though it feels like a step in the right direction.
In short, even the CSS standards that aren't fully defined yet don't seem to support this; so it may be a long ways off. The simplest fallback option is to use a jQuery plug-in.
Besides Masonry (as #Billy Moat suggested), another couple jQuery plug-ins are Isotope and Tiles Gallery. Masonry seems to be mentioned the most often.
lets say that the number of px to go up to fill the space of 1 block is 50px. margin-top: -50px;
It's not magic, it's only a bit manual to do that for each ones. If your content is dynamic, this could not work, or need js to calculate if we need to go up or not, on multiple rows and everything.
this can be done, but as CHE says, if your content is dynamic, this will go wrong in the worst possible ways.
But if it is a static site, this can be done, for sure.
To solve this, think in blocks & group and align them, inside each block re-align all blocks.
I'm going to create a horizontal grid layout with CSS. (And I'll make it to scroll horizontally by JQuery and this solution. Please note that scrolling is not my problem. my problem is about creating the grid)
This is an example:
I have searched the internet about CSS Grids, but it seems that they can't help me...
My Question is, how to create something like the image above? Which plugins, or css properties should I use for this purpose?
EDIT: I want to have fixed number of rows (I mean, the number of rows should not change when I resize the page. there should be an scrollbar instead.) (I will use it inside a div with overflow: auto)
display:table, display:table-row, display:table-cell, display:inline-block
These css properties can help, just look them up on your local css information site.
The table-values let every element behave like a table, without actually using one. This may be a good solution for your problem.
The inline-block-value solves the overhang problem some floating layouts have as the blocks are displayed inline, just like imgs. There is little support for this in old browsers, of course.