- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4536
Example of tables in CSS.
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> <div class="tile-grid-row"> <div class="tile-container"> <div class="tile-small"> Tile one </div> </div> <div class="tile-container"> <div class="tile-small"> Tile two </div> </div> </div> <div class="tile-grid-row"> <div class="tile-container"> <div class="tile-small"> Tile three </div> </div> <div class="tile-container"> <div class="tile-small"> Tile four </div> </div> </div> </body> </html>
CSS:
.tile-grid-row { display: table; width: 444px; } .tile-container { display: table-cell; } .tile-small { width: 221px; }
In HTML notice line: <div class="tile-grid-row">, then notice how I defined CSS class:
.tile-grid-row {
display: table;
After that in CSS notice line: display: table-cell;
display: table tells the element to display as a table. Nested elements should be displayed as table-row and table-cell, mimicking the good old TRs and TDs.
Example download from here.
---
Better and simple example of table with borders.
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> <div class="tile-table"> <div class="tile-row"> <div class="tile-cell"> <div class="description-text"> Tile one </div> </div> <div class="tile-cell"> <div class="description-text"> Tile two </div> </div> </div> <div class="tile-row"> <div class="tile-cell"> <div class="description-text"> Tile three </div> </div> <div class="tile-cell"> <div class="description-text"> Tile four </div> </div> </div> </div> </body> </html>
CSS:
.tile-table { display: table; width: 100%; border-collapse: collapse; } .tile-row { display: table-row; border: 1px solid #000; } .tile-cell { display: table-cell; width: 50%; border: 1px solid #000; } .description-text { position: relative; top: 1%; }
Here notice first border-collapse: collapse, and then border in cell and row. Example download from here.
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4510
Basically we need three display values: block, inline and none.
A block element starts on a new line and stretches out to the left and right as far as it can.
An inline element will keep the text (text is taken as an example), in one line. Example:
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> <p> Test block 1 </p> <p> Test block 2 </p> </body> </html>
CSS:
p { display: inline; }
Example you can check here.
Difference between display: none and visibility: hidden, is that display: none will not reserve the place, for element, while visibility: hidden will still take the place even if element is not displayed. Examples you can see here (I am too lazy to write my own )
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4183
HTML:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link type="text/css" rel="stylesheet" href="/index.css"> </head> <body> <a href="#foo" id="link">Click Here</a> </body> </html>
CSS:
#link { display : block; width: 400px; height: 400px; background: #BADA55; border-radius: 200px; text-align: center; line-height: 400px; }
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4450
This article I was writing with help of this article.
As copy pasted from above mentioned article:
"When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go."
Lets check first example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"></link> </head> <body> <div id="main"> <div id="relativePos"> <legend>Relative position</legend> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. <div id="absolutePos"> <legend>Absolute position</legend> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem. </div> </div> </div> </body> </html>
CSS:
pre { background: blue; width: 500px; } #relativePos { position: relative; top: 200px; background: red; } #absolutePos { position: absolute; top: 0px; background: green; } #anotherPos { position: relative; top: 20px; }
In this CSS notice that relativePos top is 200px, and absolutePos is 0px, try to play a little with relativePos and you will see that also red part is moving togehter with relative.
How it looks like you can see here - here I added one width just to display red and green areas.
As you can see red and green color are overlapped because div with absolute position (red) is inside the div with relative position (green).
Now lets check example where red (absolute div) is outside of green div. CSS will remain the same, HTML now looks like:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"></link> </head> <body> <div id="main"> <div id="relativePos"> <legend>Relative position</legend> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. </div> <div id="absolutePos"> <legend>Absolute position</legend> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem. </div> </div> </body> </html>
Example you can see here.
Notice in HTML code that absolute position (green) in HTML is under relative (red), but if you check how it looks like in web page you will see that green is above red, that is because in css is defined as an absolute position, and it is positioned in exactly where you tell it to go, it is "removed from document"
On the end lets switch red and green div, just to see what will happen.
HTML now looks like:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"></link> </head> <body> <div id="main"> <div id="absolutePos"> <legend>Absolute position</legend> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem. </div> <div id="relativePos"> <legend>Relative position</legend> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. </div> </div> </body> </html>
Example you can see here. As you can see position didn't change, compared with previous example.