This web site www.sundgren.se was was first released 2001 under another URL. As from 2008 the URL www.sundgren.se is used.
2012-04-06URL: www.sundgren.se
Hosting: one.com
Size: 2.5 GB
No. of files: 8012
Changes: Use of semantic tags. Started to use some HTML5 tags only visible in Chrome and Firefox.
2010-08-18URL: www.sundgren.se
Hosting: one.com
Size: 1.5 GB
No. of files: 4796
Changes: Use div-tags for formatting as a complement to tables. Films published as swf-files (Adobe Flash).
2009-08-23 URL: www.sundgren.se
Hosting: one.com
Size: 1.0 GB
No. of files: 2809
Changes: Now started to use div-tags for formatting as a complement to tables.
2008-03-02 URL: www.sundgren.se
Hosting: one.com
Size: 0.21 GB
No. of files: 985
Changes: New navigation principle with tabs.
Changed access principle to restricted pages. Before it was used on javascript and hidden folder.
URL: http://w1.211.telia.com/~u21120112/
Hosting: Telia
Size: xxx GB
No. of files: xxx
Changes: Xxxxxx.
Old versions of the web is available in the restricted area
.
The web site is designed according to some quidelines. At the moment not all pages are designed according to the guidelines. For example, initially tables where used to design the pages.
The following semantix styles are used.
| Description | Style | Design | Code | Remarks |
|---|---|---|---|---|
| Body | ||||
| Body | body | margin-left: 20px; margin-top: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11pt; color: #000000; background-image: url(../images/bg_stripe.gif); |
||
| Headings | ||||
| All headings | h1, h2, h3 | font-weight: bold; color: #646FA2; |
||
| Heading 1 | h1 | Heading |
font-size: 18px; line-height: 18px; margin-bottom: 8px |
|
| Heading 2 | h2 | Heading |
font-size: 14px; line-height: 14px; margin-bottom: 4px |
|
| Heading 3 | h3 | Heading |
font-size: 12px; line-height: 12px; margin-bottom: 2px |
|
| Text | ||||
| Paragraph | p | Firsta paragraph Second paragraph |
margin-top: 4px; margin-bottom: 9px; font-size: 11px; |
|
| Paragraph, small | p.small | Small text |
font-size: xx-small; | |
| Strong | strong | emphazise |
color: #646FA2; font-weight: bold; |
|
| Link | a | A link |
color: #000000; text-decoration: underline |
|
| Link, hover | a:active | A link |
color: #666666; text-decoration: underline |
|
| Link, active | a:hover | A link |
color: #000000; text-decoration: underline |
|
| Lists | ||||
| Unordered list | ul | list-style-type: square; | ||
| List item | li |
|
font-size: 11px; font-style: normal; line-height: 16px; margin-bottom: 10px; |
|
| Unordered list, compact | ul.compact |
top: -20px; line-height: 10px; |
||
| List item, compact | li.compact |
|
line-height: 13px; margin-bottom: 0px; margin-left: -20px; |
|
| Page header items | ||||
| Section heading block | .heading_section_block |
|
border-bottom-width: thin; border-bottom-style: solid; position: relative; height: 40px; border-bottom-color: #6A84B3; margin-bottom: 20px; |
|
| Section heading | .heading_section | P header |
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 22px; font-style: normal; line-height: 26px; font-weight: bold; color: #646FA2; float: left; |
|
| Date | .date | 2008-11-07 |
float: right; position: relative; font-size: 9px; height: 25px; line-height: 26px; |
|
| Home icon | .home_icon | float: right; padding-left: 10px; |
||
| Horisontal lines | ||||
| Horisontal rule | hr |
|
border-top: solid; color:#646FA2; height:1pt; width:100%; margin-bottom: 0px |
|
The web page titles usually show up in search results and are therefore important. The following principles are to be used:
The photo albums are made up of 300 pixel wide images with integrated text in a 800 pixel wide table.
The following photo album principles are used:
| Photo type | Original file | Low resolution file | High resolution file |
|---|---|---|---|
24 x 36 mm positive slide
|
4000x 6000 pixels, original scanned at 4800 ppi
|
300 pixels wide Unsharp mask:
|
2000 pixels wide Unsharp mask:
|