Coffeecup site designer tables full#

However, they also come with a few peculiarities related. It can used be to move down (clear) the element following a floating element. Below you find a little example of the described behavior.įloats work really well for many other layout constructs as well, including building an entire responsive grid system. The Clear is used in conjunction with floats. Adding a float will place these blocks next to each other, if space permits. When the image is increased in size or replaced by a larger one, the text automatically adjusts and reflows around it.īy default elements are not floating and behave as blocks. Simply set Float to right for the image and the paragraph will wrap around it. The Float was originally intended for text wrapping around other elements such as pictures. This approach has been used in the Wave Weapons theme.

Coffeecup site designer tables full#

It can, for example, be used to create a cool effect with a background that takes up the full screen. The first unit stands for Viewport Height and assigns space relative to the height of the browser window. The vh and vw are two interesting units that are relatively new to the table in terms of good browser support. This can be seen in the example below, the percent bar will under all circumstances take up half of the grey column. When a dimension is specified in a percent, the allotted space is calculated relative to the value of the parent element. For the default Width specification the auto and percent values are most common. In a responsive design pixel values are mainly used for minimum and maximum width settings (if any) and for defining margins and paddings. Although an interesting topic, this is beyond the scope of this document. A pixel defined in CSS is now not necessarily the same as the pixels used by a device. Pixels used to be a value that is normalized (the same) across devices and displays, but with the different new high resolutions screens that increasingly isn't true anymore. This value is available by clicking on the unit switch dropdown. Giving both the left and right margins the auto value will do the trick. One additional thing to know about Margin is that is can also be used to center elements within the parent container. If an element is placed inside another element, the margin will push the (child) element away from the border of the parent element. The arrows denote where the padding will be applied, on the top, right, border or left side of the content area respectively. The space the padding takes up is part of the element and, for example, gets the same background color. The Padding controls the space between the content area of the element and the border. The height controls do the same for the height of an element. The Min-width does the contrary (and will override the Max-width setting) - it specifies a minimum for the width of an element. The Max-width tells the browser that an element can never become wider than the specified value. The content area is the part inside of the padding, border, and margin of the element. The width and height controls, including the minimum and maximum, work on the content area of an element. Together with the ability to use a specific unit of measurement for each control, amazing layouts and effects can be created. Containers, for example, have a larger selection of dimension controls. On the right the controls for the image element are shown. The exact number of controls on the dimensions pane depends on the Element Type. The text element can also be set to be displayed in italic and small caps. The color of the font can be changed by clicking on the little color tile - white in the image - next to the drop. Clicking on the active unit will bring up a dropdown with other available options. These two properties can be specified in different units of measurement such as pixels (currently selected in the image) ems and rems. The next controls can be used to change the font-size and line-height for the active selector. Some font families do not provide all options - in those cases the closest available option will be applied.

The third dropdown can be used to select the font-weight. A web safe (system) font can be selected just in case the primary selected font fails to load with the Fallback Font control. The Font drop down gives access to all the 808 font families in the Google font collection. Site Designer features a big selection of font choices as well as a large set of typographic controls. The right choice of font, colors, and spacing greatly help to communicate the message of a website and contribute to the brand recognition.