Auto/Relative/Absolute and aligning stuff

I know i’ll sound really stupid for asking this but i have to.
Is it just me having trouble with this part of the interface? I did the tutorials, and i am having a real hard time getting used to this, why can’t we just drag stuff with the mouse…? or maybe have an ALIGN panel like in the adobe software? or presets of basic grids/alignments that will transfer well to mobile?

It’s really confusing for me, what’s the difference between all of the align tools?

what’s the difference between using this:

and this:

I understand fixed, but besides that, whenever i want to place or align something i find my self playing with all of the options until i get it right, and than it gets messed up when i move to the mobile view. I really think if you could find a way to simplify it or make it more user-friendly it will boost the number of people that can use webflow as a tool. or maybe make a real into depth tutorial. I don’t know maybe it’s stuff that is basic for web-developers, but for me as a designer it’s not so obvious.

I would love to hear your opinions and/or workflows on this, guys, so speak up!

tl;dr : it’s normal that you’re confused because HTML/CSS is not evident and Webflow respect their structure and workflow. This is the reason Webflow WORKS (and the other don’t) and the reason you’re not going to place your elements with a mouse, ever. Instead, learn a bit of HTML/CSS.

I’m going to give you a quick answer, because at this point, you should read about HTML and CSS, the BOX MODEL, and absolute and relative placement. In Webflow, you can get to where you want to go by clicking round, but it’s better if you understand what you do, because with HTML CSS there are always many ways to achieve one goal.

Dragging with the mouse will most likely not happen in Webflow. It would be too hard to transcript into working code. look at the tools who are doing this : Macaw and Adobe Reflow. They are both riddled with bugs because they fail to transcript your things into working code. Macaw doesn’t improve on v2 and I heard Adobe stopped developing Reflow.

Back to Webflow:

Your first screenshot doesn’t depict an align tool but the BOX MODEL tool. It gives margins and paddings to elements. And yes it affects the layout.

As long as you don’t use absolute placement or relative placement with top left right bottom values, all your elements are boxes that display the one below each other. You can make them behave differently by making them inline block or inline, or by applying them float right or left. Remembers, at some point, FLOATS have to be cleared, or it will continue affecting elements below. FLOATS aren’t easy to handle, you need to learn a bit about floating.

Now for the POSITION. Auto means there’s no position declared. Relative means there is a position declared. Relative with no other values doesn’t change the position of an element (from Auto). Add values, and the element moves from where it was before.
Absolute means you’re going to place your element REGARDING THE POSITION OF ITS CLOSEST PLACED PARENT. Placed means has a position, so sometimes you need to declare something Relative just because you need it to be this “placed parent”. So on your absolute element, the values you’re going to give will make it move depending of its placed parent. By default from the top/left corner, but you can change this starting position using the corners and sides icons, they affect the values.
Fixed means it’s placed regarding the whole page.

A grand rule is don’t place element using margins and padding. Another rule is don’t give margins and padding to the same element, prefer nesting to keep control.

http://www.w3schools.com/ is a neat site, your friend for life
Code school Building Websites with HTML, CSS and JavaScript | Pluralsight is so good it makes me cry sometimes. They HAVE A SONG ABOUT CSS !

Mordi don’t be afraid to dive in. You’ll get better at Webflow and you’ll help me helping others (: HTML and CSS are extremely simple to understand. It’s not code, nor script. It’s just description text.

4 Likes

In fact, Readymag handle very well drag&drop approach to making web pages and its user don’t care about coding at all. Yes, this service has its own drawbacks and inabilities, but still.

I agree actually with both of you: learning HTML/CSS is essential these days when coding became a new literacy, but at the same time if you say something like “code-free design” it has to be code-free for real