offline
- Pridružio: 18 Dec 2007
- Poruke: 95
|
<html>
<head>
<meta name="Description" content="About your Company ..." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Robots" content="index,follow" />
<link rel="stylesheet" href="images/style.css" type="text/css" />
<title>Your Company Name</title>
</head>
<body>
<!-- header starts here -->
<div id="header"><div id="header-content">
<h1 id="logo-text"><a href="index.html" title=""><span>Guru Guru</span></a></h1>
<h2 id="slogan">Put your site slogan here</h2>
<div id="header-links">
<p>
<a href="index.html">Naslovna</a> |
<a href="index.html">Cnc kontrola</a> |
<a href="index.html">video nadzor</a> </p>
</div>
</div>
</div>
<!-- navigation starts here -->
<div id="nav-wrap"><div id="nav">
<ul>
<li id="current"><a href="index.html">Naslovna</a></li>
<li><a href="about.html">Proizvodi</a></li>
<li><a href="services.html">Usluge</a></li>
<li><a href="support.html">Novosti</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</div></div>
<!-- content-wrap starts here -->
<div id="content-wrap"><div id="content">
<div id="sidebar" >
<div class="sep"></div>
<div class="sidebox">
<h1>Search Box</h1>
<form action="#" class="searchform">
<p>
<input name="search_query" class="textbox" type="text" />
<input name="search" class="button" value="Search" type="submit" />
</p>
</form>
</div>
<div class="sidebox">
<h1>Menu</h1>
<ul class="sidemenu">
<li><a href="index.html">Naslovna</a></li>
<li><a href="about.html">Proizvodi</a></li>
<li><a href="services.html">Usluge</a></li>
<li><a href="support.html">Novosti</a> </li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</div>
<div class="sidebox">
<h1>Latest News</h1>
<p>Porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
<p>Porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
<p class="align-right"><a href="index.html">Read More</a></p>
</div>
</div>
<div id="main">
<div class="box">
<a name="TemplateInfo"></a>
<h1><a href="index.html">Welcome to <span class="white">Our Site</span></a></h1>
<p>Porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. ,a.</p>
<p>Porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. </p>
<p class="post-footer align-right">
<a href="index.html" class="readmore">Read more</a></p>
</div>
<div class="box">
<a name="SampleTags"></a>
<h1><a href="index.html">About <span class="white">Us</span></a></h1>
<h3>Image and text</h3>
<p>
<a href="#"><img src="images/img.jpg" width="113" height="161" alt="firefox-gray" class="float-left" /></a>
<strong>Porta vel</strong>, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. <a href="#">Vestibulum ante</a> ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit magna, <a href="#">hendrerit sit amet</a>, tincidunt ac, viverra sed, nulla. ,a. Quisque diam lorem,interdum vitae, dapibus ac, scelerisque vitae, pede. Donec eget tellus non erat lacinia fermentum.</p>
</div>
<br />
</div>
<!-- content-wrap ends here -->
</div></div>
<!-- footer starts here-->
<div id="footer-wrap">
<div id="footer-bottom">
<p>
© 2007 <strong>Your Company Name </strong> |
Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
<a href="index.html">Home</a> |
<a href="index.html">Sitemap</a> |
<a href="index.html">RSS Feed</a> </p>
</div>
<!-- footer ends-->
</div>
</body>
</html>
Dopuna: 15 Jan 2008 20:50
na ovo se poziva style.css
/* top elements */
* { padding: 0; margin: 0; border: 0; }
body {
margin: 0; padding: 0;
font: normal 12px/1.7em verdana, tahoma, sans-serif;
text-align: center;
background: #39396D url(headerbg.jpg) repeat-x 0 0;
color: #ffffff;
width: 778px;
}
/* links */
a {
color: #FFFF00;
background-color: inherit;
text-decoration: none;
}
a:hover {
color: #FFFF00;
background-color: inherit;
text-decoration: underline;
border: none;
}
/* headers */
h1, h2, h3 {
font: bold 1em 'Trebuchet MS', Tahoma, Arial, Sans-serif;
color: #fff;
}
h1 { font-size: 2.5em; }
h2 { font-size: 2em; text-transform:uppercase;}
h3 { font-size: 1.8em; }
p, h1, h2, h3 {
margin: 0;
padding: 10px 15px;
}
ul, ol {
margin: 10px 30px;
padding: 0 15px;
}
/* images */
img {
border: 0px;
padding: 6px;
}
img.float-right {
margin: .5em 0 1em 1em;
}
img.float-left {
margin: .5em 1em 1em 0;
}
code {
margin: .5em 0;
display: block;
padding: 20px;
text-align: left;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'Courier New', monospace ;
/* white-space: pre; */
background: #39396D;
border: 1px solid #39396D;
}
acronym {
cursor: help;
border-bottom: 1px solid #0065C6;
}
blockquote {
margin: 10px 15px;
padding: 10px 0 10px 28px;
border: 1px solid #39396D;
background: #39396D;
font: bold 1.3em/1.5em "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
}
/* start - table */
table {
margin: 10px 15px;
border-collapse: collapse;
}
th strong {
color: #fff;
}
th {
background: #39396D;
height: 3em;
padding-left: 12px;
padding-right: 12px;
color: #FFF;
text-align: left;
border-left: 1px solid #ffffff;
border-bottom: solid 2px #ffffff;
border-top: solid 2px #ffffff;
border-right: 1px solid #ffffff;
}
tr {
color: #ffffff;
height: 2.5em;
}
td {
padding-left: 12px;
padding-right: 12px;
border-left: 1px solid #FFF;
border-bottom: solid 1px #ffffff;
border-right: 1px solid #ffffff;
}
td.first,th.first {
border-left: 0px;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
tr.row-a {
background: #4E4E7C;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
tr.row-b {
background: #4E4E7C;
}
/* end - table */
/* form elements */
form {
margin: 10px 15px;
padding: 10px;
border: 1px solid #39396D;
background-color: #39396D;
}
fieldset {
margin: 0;
padding: 0;
border: none;
}
label {
display:block;
font-weight:bold;
margin: .4em 0;
}
input {
padding: .3em;
border: 1px solid #eee;
font: normal 1em Verdana, sans-serif;
color:#777;
}
textarea {
width: 55%;
padding: .3em;
font: normal 1em/1.5em Verdana, sans-serif;
border: 1px solid #eee;
height: 10em;
display:block;
color:#777;
}
input.button {
font: bold 1em Arial, Sans-serif;
margin: 0;
padding: .25em .3em;
color: #000;
background: #FFFD00;
border: 2px solid #FFFD00;
}
/* search form */
.searchform {
background-color: transparent;
border: none;
margin: 0 0 0 10px; padding: 0 0 1.5em 0;
width: 18em;
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox {
width: 11em;
color: #777;
padding: .4em;
border: 1px solid #FFFD00;
vertical-align: top;
}
.searchform input.button {
width: 60px;
vertical-align: top;
}
/***********************
LAYOUT
************************/
#header-content, #content, #nav {
/*
The width value below sets the total width of the design. It's default value is set to 93%
which means that it will take up 93% of the browser window's width. You can also set it to a
different percentage value (90%, 85%, etc.). This design is fluid layout by default, but you
can turn it into a fixed width layout by setting a pixel value to the width (e.g. 900px, 950px).
*/
width: 93%;
}
/* box */
.box {
margin: 10px 0;
padding: 10px 10px 20px 10px;
border: 5px solid #4E4E7C;
background: #4E4E7C;
}
/* header */
#header {
height: 178px;
text-align: left;
background: #39396D url(header.jpg) repeat-x 0 0;
}
#header-content {
position: relative;
margin: 0 auto; padding: 0;
}
#header-content h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: bold 40px 'Trebuchet MS', Tahoma, Arial, Sans-serif;
letter-spacing: -1px;
color: #000;
text-decoration: none;
/* change the values of top and left to adjust the position of the logo*/
top: 30px; left: 10px;
}
#header-content h1#logo-text span {
color: #39396D;
}
#header-content #slogan {
position: absolute;
font: bold 16px 'Trebuchet Ms', Sans-serif;
text-transform: none;
color: #000;
margin: 0; padding: 0;
/* change the values of left and top to adjust the position of the slogan */
top: 75px; left: 175px;
}
/* header links */
#header-content #header-links {
position: absolute;
top:35px; right: 0px;
color: #39396D;
font: bold 15px "Trebuchet MS", Tahoma, Sans-serif;
}
#header-content #header-links a {
color: #39396D;
text-decoration: none;
}
#header-content #header-links a:hover {
color: #fff;
}
/* Navigation */
#nav-wrap {
float: left;
width: 100%;
background: url(menubg.jpg) repeat-x left bottom;
clear: both;
}
#nav {
clear: both;
margin: 0 auto;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
text-transform: uppercase;
margin: 0;
padding: 0;
height: 64px;
}
#nav ul li {
float: left;
margin: 0; padding: 0;
height: 64px;
}
#nav ul li a {
display: block;
float: left;
width: auto;
margin: 0;
padding: 0 15px;
color: #FFF;
font: bold 14px 'Trebuchet MS', Tahoma, Arial, Sans-serif;
text-decoration: none;
letter-spacing: 1px;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #FFFF00;
}
#nav ul li#current {
background: url(nav-current.jpg) no-repeat center bottom;
}
#nav ul li#current a {
color: #FFFF00;
}
/* content */
#content-wrap {
clear: both;
float: left;
background: #39396D;
width: 100%;
}
#content {
text-align: left;
padding: 0;
margin: 0 auto;
}
/* sidebar */
#sidebar {
float: right;
width: 21em;
margin: 10px 0 10px -21em; padding: 0;
}
#sidebar h1 {
font: bold 1.75em 'Trebuchet MS', Tahoma, Arial, Sans-serif;
padding: .3em 0 .5em 10px;
color: #FFFF00;
}
#sidebar ul.sidemenu {
list-style:none;
margin: 0;
padding: .3em 0 1em 5px;
font-family: 'Trebuchet MS', Tahoma, Sans-serif;
}
#sidebar ul.sidemenu li {
padding: 0;
background: url(sidebullet.gif) no-repeat .3em .5em;
}
* html body #sidebar ul.sidemenu li { height: 1%; }
#sidebar ul.sidemenu li a {
display: block;
font-weight: bold;
color: #E8F4FF;
text-decoration: none;
padding: .2em 0 .2em 30px;
line-height: 1.5em;
font-size: 1.35em;
}
#sidebar ul.sidemenu li a:hover {
background: #4E4E7C url(sidebullet.gif) no-repeat .25em .45em;
color: #FFF;
}
#sidebar ul.sidemenu ul{
margin-left: 15px;
}
#sidebar .sidebox {
margin: 5px 15px 5px 0;
padding: 0;
background: url(sidebarsep.jpg) repeat-x left bottom;
}
#sidebar .sep{
background: url(sidebarsep.jpg) repeat-x left bottom;
height: 2px;
margin: 0px 15px 10px 0;
clear: both;
}
/* main */
#main {
margin: 10px 23em 10px 0;
padding: 0;
}
#main h1 {
font: bold 2.8em 'Trebuchet MS', Arial, Sans-serif;
color: #FFFF00;
letter-spacing: -2px;
padding-bottom: 0;
}
#main h1 a {
color: #FFFF00;
text-decoration: none;
}
/* footer */
#footer-wrap {
clear: both;
border-top: 5px solid #F7B200;
text-align: left;
padding: 1.6em 0;
}
#footer-wrap a {
text-decoration: none;
color: #F9BE00;
font-weight: bold;
}
#footer-wrap a:hover {
color: #F9BE00;
}
#footer-wrap p {
padding: 10px 0;
}
#footer-wrap h2 {
color: #E8F4FF;
margin: 0;
padding: 0 10px;
text-transform: none;
}
/* bottom */
#footer-bottom {
clear: both;
color: #E8F4FF;
margin: 0 auto;
padding: 1em 0;
text-align: center;
}
/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
/* additional classes */
.clear { clear: both; }
.white { color: #E8F4FF; }
img.rssfeed {
border: none;
padding: 0 0 5px 0;
background: transparent;
}
.post-by {
font-size: .95em;
padding-top: 0;
}
.post-footer {
text-align: right;
background: #39396D;
border: 1px solid #FFFF00;
padding: 8px 10px;
margin: 20px 15px 10px 15px;
}
.post-footer .date {
background: url(clock.gif) no-repeat left center;
padding-left: 20px; margin: 0 3px 0 3px;
}
.post-footer .comments {
background: url(comment.gif) no-repeat left center;
padding-left: 20px; margin: 0 3px 0 3px;
}
.post-footer .readmore {
background: url(page.gif) no-repeat left center;
padding-left: 20px; margin: 0 3px 0 3px;
}
|
