Wednesday 5 September 2012

html navagation basic

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

 <!--note: ul for spacing, li for alingment horizontal or vertical, a for design link font color or size, etc...-->




ul
{
list-style-type:none;
margin:0;
padding:0;
}


li
{
display:inline;
}


a
{ text-decoration:none;
    }

</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Posted by at 2 comments:
Labels:

html float

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div style="float: left; width: 50%; height: 100px; background:#F60"> </div>
<div style="float: right; width: 50%; height: 100px; background-color:#0F0 "></div>

<!--part 2-->

<div style="float: left; width: 600px; background: #F00">
<div style="float: left; width: 300px; background:#F60" > asdasdasd</div>
</div>


<!--part 3-->

<div style="float: left; clear: left; width: 33%; height: 100px; background:#F60"> </div>
<div style="float: left; width: 33%; height: 100px; background-color:#0F0 "></div>
<div style="float: left; width: 33%; height: 100px; background-color: #FF0"></div>




</body>
</html>
Posted by at No comments:
Labels:

html basic

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!--http://www.w3.org/Style/Examples/011/firstcss-->
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid red }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>


<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="#">Home page</a>
  <li><a href="#">Home page</a>
  <li><a href="#">Home page</a>

</ul>


<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>


</body>
</html>
Posted by at No comments:
Labels:

html basic 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>my design 1</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
        html, body {width:100%; height:100%; background-color: #030;background-position:center top;background-attachment:fixed;background-repeat:no-repeat;}
        body { margin:0; padding:0; }
        #flashContent { margin:0 auto;width:900px;outline:0 none; }
        #flashContent object{ outline:0 none; }
       
        a {text-decoration:none; color:#FFF}
       
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
float:left;
}
body {
    font-family:Arial, Helvetica, sans-serif;
}
body p,ul,li,a{font-size:15px;}
.menu{float:left;width:20%;}
        </style>
    </head>
    <body>
   
    <div align="right"  style="height:333px;" >
      <div  style="height:333px; width:81%; float:left"> &nbsp;</div>
     <div align="center" > demo line</div>
    </div>
   
        <div style=" background-color: #00af34; height:35px; width:100%">

<span class="menu">
 home
</span>


<span class="menu">
 about
</span>

<span class="menu">
contact
</span>


</div>

     <div align="right"  style="height:333px;" >
      <div  style="height:333px; width:81%; float:left"> &nbsp;</div>
     <div align="center" > demo line</div>
    </div>
   
   
    </body>
</html>
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)