I have done several websites in my time, but every time I started the layout I really
did not know how to do it properly, until now.
An HTML and CSS Layout is essentially containers inside containers. These containers are different HTML tags with different CSS styling. The main container being the <body> tag.
These containers are then used to contain the HTML content like text, images, video etc.
Main container tags are <div>, <span> and <table>, more on that later.
Position:
First thing, how do I position my container? Well there are several ways of doing so.We use position, a CSS property, position can have several values.
Position:static
static is the default position value, if you have never modified the position property then you have been working in static. Items defined as a static container are positioned based on the flow or display property(more later) and the parents container depending on the parents padding, border and margin.
Position:relative
Is similar to static but top, left properties are observed. Right and bottom are also observed but top = -bottom, left =-right.
top,left,right and bottom properties are number value away from the 0,0 point.
for relative the 0,0 point is where it would be if it were static.
top,left,right and bottom are defaulted to auto, that is where the container would be if it was static.
Position:absolute top,left,right and bottom properties are number value away from the 0,0 point.
for relative the 0,0 point is where it would be if it were static.
top,left,right and bottom are defaulted to auto, that is where the container would be if it was static.
Is absolute based on the <body> tag, where the top, left is the top left of the browser window and the right, bottom is the right bottom of the broswer window.
top,left,right,bottom are then used to position the container.
Position:relative/absolute:top,left,right,bottom are then used to position the container.
Is where a child elements position is set to absolute but one of its parents is set to relative, it takes its absolute point from the parent not the body. top,left,right,bottom are then used to position the container based on the partent (whos position is relative) top,left if the corner of the inside of the border.
Position:fixed:
postiion is like absolute, but once posited it stays in the same place, and does not move if you scroll.
Float,Clear:
Float is the next CSS property, it decides where the child sits inside the parent container relative to the previous child. The default is none.Float: is only observed if position is not absolute or fixed, default none.
left: container float to left of the previous child container if there is enough space.
if not it drops down to the next row.
right: objects float like left but to the right.
Clear:works with float, the default is none which does nothing
left,right,both: clears the specified float, which mean it ignores the previous childs
float. Usually drops to the next row.
Display:
Display : is the next CSS property, it only applies if if position is static or relative and flow is none. If position is absolute or fixed it is set to block in most situationsDisplay:static
static is the default position value, if you have never modified the position property then you have been working in static. Items defined as a static container are positioned based on the flow or display property(more later) and the parents container depending on the parents padding, border and margin.
Display:inline
inline containers flow from left to right, they only take up the space they need. Width and height cannot be set.
Display:inline-block
inline-block is similar to inline as it flows from left to right, but width and height can be set.
Display:none
none essentially removes the container, it is not used in the layout. This is different to visbillity:hidden where the layout is still taken in consideration.
Display:table
table,table-row,table-cell.. are different display values, they let you be able to mimic the behaviors of the <table> tag.
Margin,Border,Padding:
Margin, Border and Padding : are CSS properties that affect how the current container will be positioned inside the parent. All these properties can be spilt int, margin,border or padding-left,-top,-bottom and -right, this lets you set them individually they are usually set with pixel or percent values.Margin:
is where the current container will be positioned inside its parent. Magin can we set to auto where it centers itself inside the center and top of the parent.
Border:
is a visual thing but it also effects the layout depending on the border-width. The border is a visual styling around current container.
Padding:
is where the child elements sit inside the current container after the border.
Width,Height,Box-sizing,Overflow:
Height and Width are clearly the CSS properties that decide the size of the containers. Auto is the default to width and height and it behaves differently depending on other properties. Box-sizing helps determine the total size.Width:
is the width portion of the size of the container usually defined in px or % values. If the positon is absolute or fixed or the float is left or right then auto sizies the container to width of its contents. If not then auto width stretches the child to the contents of the parent.
Height:
is the height portion of the size of the container usually defined in px or % values. For height, auto is always the size of the containers contents. If the current conatiners height is auto the children height will perceived as zero if the containers children have defined CSS positon as absolute or fixed. If all the children have float as left or right, auto will set the height as zero, but if one does not then it takes the height from the top of the parent to the bottom last child with float none.
Box-sizing:
helps determine the total width and height of the container, the default is content-box where the actual width of the container is border-width+padding + width.
The other option is border-box where the actual width of the container is width, it includes the padding and border-width.
Overflow:The other option is border-box where the actual width of the container is width, it includes the padding and border-width.
decides what to do if the child passes the bounds of the parent container. The default is visible where the child can overlap the parent, hidden is where the child is cut off by the parents bounds and scroll introduces a scrollbar lets you view the full child by scrolling.
<div><span><table>:
are the main HTML tags used in layouts.What are the differences between them?
Essentially each of the different tags have different default CSS properties which can all
be altered.
Do we need them all?
No we really don't, for 90% of situations you can just use <div> and manipulate the CSS properties but in some situations it makes sense to just use the actual.
<div>:has a default CSS display value of block.
<span>:has a default CSS display value or inline.
<table>:
and all of its children <tr>,<td> ... have their own display value or table,table-row,table-cell ... You can manipulate different divs to create this functionality, but if you really just want a table why not just use a table.
Some of these tags have their own attributes such as cellpadding, colspan and rowspan. While testing this out I found out that colspan and rowspan cannot be achieved in CSS so if you want to use these attributes you must use a <table> tag.
Some of these tags have their own attributes such as cellpadding, colspan and rowspan. While testing this out I found out that colspan and rowspan cannot be achieved in CSS so if you want to use these attributes you must use a <table> tag.
Checkout my Next post the Ultimate HTML CSS Layout Demo,
it lets you modify all of these settings to visually see how they work with one an other.
References from the World Wide Web Consortium:
http://www.w3.org/TR/CSS2/box.html
http://www.w3.org/TR/CSS2/visuren.html
http://www.w3.org/TR/CSS2/visudet.html
No comments:
Post a Comment