singapore : Design 7 « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Design 7

singapore

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<head>
<title>Singapore</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1"/>
<style type='text/css'>
/* singapore design by uli sobers::                        www.free-templates-sobers.de */
/* //////////////////////////////////////////////////////////////////////////////////// */


/* allgemeine formatierungen                                                            */
/*//////////////////////////////////////////////////////////////////////////////////////*/
html {
  scrollbar-face-color:           #808080;
  scrollbar-highlight-color:      #808080;
  scrollbar-3dlight-color:        #707070;
  scrollbar-darkshadow-color:     #808080;
  scrollbar-shadow-color:         #7e7e7e;
  scrollbar-arrow-color:          #ffffff;
  scrollbar-track-color:          #505050;
  }


html, body, #topnav ul, #topnav li, #sidelinks ul, #contactcube ul, #archives ul, #overall-footer, #content ul {
  margin:                         0 0 0 0;
  padding:                        0 0 0 0;
  }


body {
  background:                     url(./grafics/bgrl.gif) repeat-x;
  font-family:                    verdana, arial, helvetica, sans-serif;
  font-size:                      1.0em;
  }


#sidelinks ul, #contactcube ul, #archives ul, #content ul {
  list-style-type:                none;
}

/* container formattings                                                                */
/*//////////////////////////////////////////////////////////////////////////////////////*/
#overall {
  width:                          860px;
  height:                         auto;
  background-color:               #ffffff;
  margin-left:                    100px;
  border-left:                    solid 6px gray;
  }


#head {
  width:                          auto;
  height:                         250px;
  background:                     url(./grafics/singapore.gif) no-repeat;
  background-position:            top right;
  }


/* top navigation ///////////////////////////////////////////////////////////////////// */
#topnav {
  margin:                         0 0 0 8px;
}

#topnav a {
  display:                        block;
  float:                          left;
  color:                          #708491;
  font-size:                      0.6em;
  line-height:                    14px;
  font-weight:                    bold;
  padding:                        8px 7px 6px 7px;
  text-decoration:                none;
  border-bottom:                  1px solid #9fb1bc;
  }

#topnav a:hover {
  color:                          #000000;
  background:                     url(./grafics/circle.gif) no-repeat bottom center;
  }


/* anylinks navigation //////////////////////////////////////////////////////////////// */
#anyline {
  width:                          auto;
  height:                         20px;
  background:                     url(./grafics/singaporem.gif) no-repeat top right;
  z-index:                        0;
  border-top:                     solid 1px gray;
  border-bottom:                  solid 8px gray;
  }


#anybgr {
  width:                          auto;
  height:                         20px;
  background:                     url(./grafics/anybgr.png) repeat-x;
  z-index:                        1;
  opacity:                        0.74;
  -moz-opacity:                   0.74;
  -khtml-opacity:                 0.74;
  filter:                         progid:dximagetransform.microsoft.alpha(opacity=80);
  }


#anylink {
  position:                       relative;
  top:                           -20px;
  width:                          auto;
  height:                         20px;
  z-index:                        2;
  }

#anylink a {
  display:                        block;
  float:                          right;
  color:                          #ffffff;
  font-size:                      0.6em;
  line-height:                    20px;
  font-weight:                    bold;
  padding:                        0 7px 0 7px;
  text-decoration:                none;
  }

#anylink a:hover {
  color:                          #080808;
  z-index:                        3;
  background:                     url(./grafics/anybgrdrk.png) repeat-x;
  }


/* title grafic bottom //////////////////////////////////////////////////////////////// */
#tgbtm {
  width:                          auto;
  height:                         127px;
  background:                     url(./grafics/singaporeb.gif) no-repeat top right;
  z-index:                        5;
  }


/* homepage title ///////////////////////////////////////////////////////////////////// */
#title-shadow {
  position:                       absolute;
  top:                            267px;
  left:                           104px;
  width:                          auto;
  height:                         auto;
  color:                          #cacaca;
  font-family:                   'trebuchet ms', verdana, arial, helvetica, sans-serif;
  font-size:                      51px;
  font-weight:                    bold;
  z-index:                        6;
  }


#title {
  position:                       absolute;
  top:                            265px;
  left:                           102px;
  width:                          auto;
  height:                         auto;
  color:                          gray;
  font-family:                   'trebuchet ms', verdana, arial, helvetica, sans-serif;
  font-size:                      51px;
  font-weight:                    bold;
  z-index:                        7;
  }


/* sidebar & text container /////////////////////////////////////////////////////////// */
#sidebar {
  float:                          left;
  width:                          210px;
  height:                         auto;
}

/* left navigation //////////////////////////////////////////////////////////////////// */
#sidelinks {
  position:                       relative;
  left:                          -6px;
  width:                          200px;
  background:                     url(./grafics/h1.gif)  no-repeat 179px 22px;
  padding:                        16px 0 0 10px;
  border-right:                   1px dotted #dcdcdc;
  border-left:                    solid 6px gray;
}

#sidelinks h1 {
  display:                        inline;
  height:                         40px;
  color:                          gray;
  font-family:                   'trebuchet ms', verdana, arial, helvetica, sans-serif;
  font-size:                      1.8em;
  font-weight:                    bold;
  text-transform:                 lowercase;
}

#sidelinks li {
  padding:                        2px 0 2px 19px;
  background:                     url(grafics/rarrow.gif) no-repeat 8px 8px;
  border-top:                     1px dotted #dcdcdc;
}

#sidelinks a {
  color:                          gray;
  font-family:                    verdana, arial, helvetica, sans-serif;
  font-size:                      0.9em;
  text-decoration:                none;
}

#sidelinks a:hover {
  border-bottom:                  1px dotted #666666;
}

/* contact cube /////////////////////////////////////////////////////////////////////// */
#contactcube {
  clear:                          both;
  position:                       relative;
  left:                          -6px;
  width:                          200px;
  background:                     url(./grafics/h2.gif)  no-repeat  179px 36px;
  padding:                        30px 0 0 10px;
  border-right:                   1px dotted #dcdcdc;
  border-left:                    solid 6px gray;
}

#contactcube h1 {
  display:                        inline;
  height:                         40px;
  color:                          gray;
  font-family:                   'trebuchet ms', verdana, arial, helvetica, sans-serif;
  font-size:                      1.8em;
  font-weight:                    bold;
  text-transform:                 lowercase;
}

#contactcube li {
  height:                         80px;
  border-top:                     1px dotted #dcdcdc;
}

/* calendar cube ////////////////////////////////////////////////////////////////////// */
/* for calendar formattings see ./singapore-calendar/calendar.css /////////////////////////////// */
#calendarcube {
  clear:                          both;
  position:                       relative;
  left:                          -6px;
  width:                          200px;
  background:                     url(./grafics/h3.gif) no-repeat  179px 40px;
  padding:                        34px 0 0 10px;
  border-right:                   1px dotted #dcdcdc;
  border-left:                    solid 6px gray;
}

#calendarcube h1 {
  display:                        inline;
  height:                         40px;
  color:                          gray;
  font-family:                   'trebuchet ms', verdana, arial, helvetica, sans-serif;
  font-size:                      1.8em;
  font-weight:                    bold;
  text-transform:                 lowercase;
}

/* archives links ///////////////////////////////////////////////////////////////////// */
#archives {
  clear:                          both;
  position:                       relative;
  left:                          -6px;
  width:                          200px;
  background:                     url(./grafics/h4.gif) no-repeat  179px 46px;
  padding:                        40px 0 0 10px;
  border-right:                   1px dotted #dcdcdc;
  border-left:                    solid 6px gray;
  }

#archives h1 {
  display:                        inline;
  height:                         40px;
  color:                          gray;
  font-family:                   'trebuchet ms', verdana, arial, helvetica, sans-serif;
  font-size:                      1.8em;
  font-weight:                    bold;
  text-transform:                 lowercase;
}

#archives li {
  padding:                        2px 0 2px 19px;
  background:                     url(grafics/garrow.gif) no-repeat 8px 8px;
  border-top:                     1px dotted #dcdcdc;
}

#archives a {
  color:                          gray;
  font-family:                    verdana, arial, helvetica, sans-serif;
  font-size:                      0.9em;
  text-decoration:                none;
}

#archives a:hover {
  border-bottom:                  1px dotted #666666;
}

/*  this hack solves display problems in other than IE browsers to show the left 6px border */
#archives-hack {
  clear:                          both;
  position:                       relative;
  left:                          -6px;
  height:                         34px;
  border-left:                    solid 6px gray;
  }


/* content container ////////////////////////////////////////////////////////////////// */
#content {
  width:                          auto;
  height:                         auto;
  color:                          gray;
  font-family:                    verdana, arial, helvetica, sans-serif;
  font-size:                      0.9em;
  text-align:                     justify;
  padding:                        30px 0 48px 0;
  margin-left:                    280px;
}

#content h2 {
  display:                        inline;
  color:                          gray;
  font-family:                   'trebuchet ms', verdana, arial, helvetica, sans-serif;
  font-size:                      28px;
  font-weight:                    bold;
  background:                     url(grafics/headline.gif) no-repeat 0px 9px;
  padding-left:                   22px;
  text-transform:                 uppercase;
}

#content li {
  list-style-type:                none;
  background:                     url(grafics/list.gif) no-repeat 15px 5px;
  text-indent:                    26px;
}

#content a {
  color:                          #00a55d;
  font-family:                    verdana, arial, helvetica, sans-serif;
  text-decoration:                none;
}

#content a:hover {
  color:                          #dcdcdc;
  background-color:               gray;
}

/* footer lines ///////////////////////////////////////////////////////////////////// */
#overall-footer {
  clear:                          both;
  width:                          auto;
  height:                         84px;
  background:                     url(./grafics/fbgr.gif) repeat-x top left;
}

#footer {
  width:                          860px;
  height:                         84px;
  color:                          gray;
  font-family:                    verdana, arial, helvetica, sans-serif;
  font-size:                      0.6em;
  text-align:                     center;
  padding:                        12px 0 0 0;
  margin-left:                    100px;
  border-left:                    solid 6px gray;
}

#footer a {
  color:                          gray;
  font-family:                    verdana, arial, helvetica, sans-serif;
  text-decoration:                none;
}

#footer a:hover {
  color:                          #00a55d;
}



</style>


<link rel="stylesheet" href="styles.css" type="text/css"/>
<link rel="stylesheet" href="singapore-calendar/calendar.css" type="text/css"/>
<script type="text/javascript" src="singapore-calendar/calendar_js.js"></script>
</head>
<body>
<div id="overall">
  <div id="head">
    <div id="topnav"> <a href="http://www.free-css.com/">home</a> <a href="http://www.free-css.com/">content</a> <a href="http://www.free-css.com/">contact</a> </div>
  </div>
  <div id="anyline">
    <div id="anybgr"></div>
    <div id="anylink"> <a href="http://www.free-css.com/">anylink</a> <a href="http://www.free-css.com/">anylink</a> <a href="http://www.free-css.com/">anylink</a> <a href="http://www.free-css.com/">anylink</a> <a href="http://www.free-css.com/">anylink</a> <a href="http://www.free-css.com/">anylink</a> </div>
  </div>
  <div id="tgbtm"></div>
  <div id="title-shadow">homepage title</div>
  <div id="title">homepage title</div>
  <div id="sidebar">
    <div id="sidelinks">
      <h1>menu</h1>
      <ul>
        <li><a href="http://www.free-css.com/">home</a></li>
        <li><a href="http://www.free-css.com/">about</a></li>
        <li><a href="http://www.free-css.com/">sitemap</a></li>
        <li><a href="http://www.free-css.com/">photos</a></li>
        <li><a href="http://www.free-css.com/">links</a></li>
        <li><a href="http://www.free-css.com/">more...</a></li>
      </ul>
    </div>
    <div id="contactcube">
      <h1>contact</h1>
      <ul>
        <li><a href="http://www.free-css.com/"><img src="grafics/at-static.gif" width="190" height="80" alt="" border="0"/></a></li>
      </ul>
    </div>
    <div id="calendarcube">
      <h1>calendar</h1>
      <div id="calendar"></div>
    </div>
    <div id="archives">
      <h1>archives</h1>
      <ul>
        <li><a href="http://www.free-css.com/">Jan. 2008</a></li>
        <li><a href="http://www.free-css.com/">Dec. 2007</a></li>
        <li><a href="http://www.free-css.com/">Nov. 2007</a></li>
        <li><a href="http://www.free-css.com/">Okt. 2007</a></li>
        <li><a href="http://www.free-css.com/">Sep. 2007</a></li>
        <li><a href="http://www.free-css.com/">Aug. 2007</a></li>
      </ul>
    </div>
    <div id="archives-hack"></div>
  </div>
  <div id="content">
    <h2>Headline De</h2>
    <br />
    <br />
    <img src="grafics/key.jpg" alt="" border="0" style="padding: 0 6px 6px 0;" align="left"/> <span style="color: #cf067f">fuer die deutsch sprechenden user</span> :: singapore&copy; ist eine validierte xhtml 1.0 konstruktion aus div-containern, formatiert via css, ohne frames. alle variablen inhalte wie menu, homepage-title, oder footer sind text konstruktionen. einfach und ohne grafik aenderungen anpassbar. wer fuer den homepage titel die grafik dennoch aendern muss, findet die dazugehoerige photoshop datei im download. fuer die gestaltung des e-mail links sind mehrere beispielgrafiken und das entsprechende xara-3d file beigefuegt. <br />
    <br />
    die vorlage wurde mit allen aktuellen browsern unter windows getestet und laeuft am besten ab 1024 pixel aufloesung im internet explorer, weil man da den schoenen scrollbar sieht. nach oben hin skaliert die vorlage frei. <br />
    <br />
    <br />
    <br />
    <h2>Headline En</h2>
    <br />
    <br />
    <img src="grafics/key.jpg" alt="" border="0" style="padding: 0 6px 6px 0;" align="left"/> <span style="color: #cf067f">for english users</span> :: singapore&copy; is a validated xhtml 1.0 construction of div-containers, all formatted via css without frames. all variable changes like menu's, homepage-title or footer can be easily adapted without any graphic works to do. who needs to change the title grafic anyway will find the photoshop file in the download. some examples to design the e-mail link and the corresponding xara-3d file are also included in the download. <br />
    <br />
    the template was tested and runs ok with all current browsers under windows os. it best looks in internet explorer from 1024 pixel screen resolution upwards, because you can see the fine colored scrollbar then. <br />
    <br />
    <br />
    hier ein beispiel fuer eine liste:: <br />
    here an example for listed text:: <br />
    <br />
    <ul>
      <li>i'm a listed item</li>
      <li>i'm a listed item</li>
      <li>i'm a listed item</li>
      <li>i'm a listed item</li>
    </ul>
    <br />
    <br />
    und hier zwei beispiele fuer links im text:: <br />
    and finally two examples for links within text:: <br />
    <br />
    <a href="http://www.free-css.com/">go to free templates</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.free-css.com/">download template</a> </div>
</div>
<div id="overall-footer">
  <div id="footer">&copy; 2007 by... your name | cellular +49.163.8802.979 | xhtml 1.0 | css | design by <a href="http://www.free-templates-sobers.de/" target="_blank">uli sobers</a></div>
</div>
</body>
</html>








Related examples in the same category

1.SimpleSimple
2.simplestyle_1
3.simplestyle_2
4.simplestyle_3
5.simplestyle_4
6.simplestyle_5
7.simplestyle_6
8.pomodoro
9.portcentral
10.portfolio-extended
11.portfolio
12.postscriptum
13.powderpuff
14.power
15.precision
16.predilection
17.premiumseries
18.prepaid
19.presented
20.pressurized
21.prideandprejudice
22.primitiveelement
23.printing
24.pristine
25.private-lawyer-co
26.product-landing-page
27.production
28.ProductPackage
29.programme
30.progress
31.projection
32.proofing
33.Prosperity
34.province
35.purensimple
36.purgatory_shuffle
37.puzzled
38.quadrangle
39.quartz-istorage
40.quatrain
41.racetrackplaya
42.radiance
43.rainonleaves
44.ramblingsoul-2
45.ramblingsoul-9
46.ramblingsoul3
47.ramblingsoul4
48.ramblingsoul5
49.ramblingsoul7
50.ramblingsoul_2
51.ramblingsoul_3
52.random
53.rational
54.realize
55.realone
56.rebel-magazine
57.reckoning
58.recreations
59.reference
60.regeneracy
61.rehabilitation
62.reinvent
63.replenish
64.republic
65.resizeme
66.resplendissant
67.revolt-01
68.ridinghood
69.rockband
70.rogue
71.Rothko
72.route66
73.rust
74.safe-as-houses
75.sahara
76.sampling
77.Sapphire
78.schemermag
79.scotchmark
80.scribbled
81.secretlab
82.seduction
83.selcouth
84.sensa
85.settings
86.shallowgrunge
87.shalom-typo
88.shape
89.she
90.showcase
91.sifiso
92.silenceandharmony
93.SILK
94.Simpatico
95.sindromk
96.sinorcaish
97.six-oh-six
98.sixpence
99.sixties_style
100.skipopia
101.skitemplate
102.sky
103.sliced
104.slight_amnesia
105.socialnet
106.softenedcells
107.solemnity
108.solitude
109.soloss
110.solutions
111.somewhere-peaceful
112.soniatemplate
113.space
114.spaced
115.spasaloon
116.spatter
117.speedracing
118.spheroids
119.spidercity
120.splash
121.splatt
122.spontaneous