User Tools

Site Tools


coding:css

CSS

External sources

Glossary & references

games & learning material

Summary

Pictures

size of pictures

img {
  height: 200px;
  width: 200px;
}


position of pictures

img {
  background: #e8eae9;
  border: 1px solid #c6c9cc;
  float: right;
  margin: 8px 0 0 20px;
  padding: 4px;
}


No text around picture:

img {
  display: block;
}


Lists

standard styling options

ul {
  list-style-type: circle;
}

Possible values:

value output
none No list item
disc A filled circle
circle A hollow circle
square A filled square
decimal Decimal numbers
decimal-leading-zero Decimal numbers padded by initial zeros
lower-roman Lowercase roman numerals
upper-roman Uppercase roman numerals
lower-greek Lowercase classical Greek
lower-alpha / lower-latin Lowercase ASCII letters
upper-alpha / upper-latin Uppercase ASCII letters
armenian Traditional Armenian numbering
georgian Traditional Georgian numbering

custom styling options

  li {
    background: url('tick.png') 0 0 no-repeat;
    list-style: none;
    padding-left: 20px;
  }


Tables

Borders

table {
  border: 2px solid blue;
  border-collapse: separate*;
}
th, td {
  border: 2px solid red;
}

*possible values: collapse, separate, and inherit

adding distance between borders:

table {
  border: 2px solid blue;
  border-collapse: separate;
  border-spacing: 2px;
}
th, td {
  border: 2px solid red;
}


one sided border (bottom in this case)

table {
  border-collapse: collapse;
  border-spacing: 0;
}
th, td {
  border-bottom: 1px solid #c6c9cc;
}
tr:last-child td {
  border: 0;
}


put a border around each cell:

table {
  border-collapse: collapse;
  border-spacing: 0;
}
th, td {
  border: 1px solid #c6c9cc;
}


Aligning text

th, td {
  border: 1px solid #c6c9cc;
  vertical-align: top;
}
th {
  font-size: 11px;
  text-transform: uppercase;
}
th.qty, th.price {
  text-align: center;
}
tbody td.item {
  color: #404853;
  font-weight: bold;
}
tbody td.stock, tbody td.qty, tbody td.price {
  vertical-align: middle;
}
tbody td.stock, tbody td.qty {
  text-align: center;
}
tbody td.price {
  text-align: right;
}
tfoot td {
  text-align: right;
}

vertical align can be: top, middle, and bottom.

coloring table rows

th {
  background: #404853;
  background: linear-gradient(#687587, #404853);
  color: #fff;
}
tbody tr:nth-child(even) td {
  background: #e8eae9;
  background: linear-gradient(#f7faf9, #e8eae9);
}
tfoot tr.total td {
  background: #e8eae9;
  background: linear-gradient(#f7faf9, #e8eae9);
}

Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 177 bytes) in /home_p2/d/o/domidesign.ch/htdocs/domicode.com/wiki/lib/plugins/authplain/auth.php on line 327