How to make a google like css?

Here is the CSS I want to apply in my page. I like this css

STEP1:

STEP2:
Here is the place where I want to add those css in my page

STEP3:
Here is my code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.borderTable {
	padding: 2px 4px 2px 4px;
	border: 1px solid #660000;
	background-color: #e8eefa;
}


.box3 {
	width: 370px;
	height:300px;
	border:2px solid #660000;
	float:right;
	margin-top:10px;
	margin-right:10px;
 }
.box2 {
    position:relative;
    width: 370px;
    float:left;
    margin:10px 0 1px 10px;
    background-color: #F9F9F9;
    border: 3px solid #000;
    color: #333;
}
.box2 h3 {
    position:absolute;
    width:350px;
    padding:10px;
    height:30px;/*semi-optional*/
    margin:0;
   background:#c2c2c2;
}
.box2 ul {
    padding:50px 20px 10px 1.5em;
    margin:0;
    overflow:auto;
    height:240px;
}

 




.container{
/*border:2px solid #0000ff;*/

}

.footer{


padding: 2px 4px 2px 4px;
	border: 1px solid #660000;
	background-color: #e8eefa;
	height:100px;
}

.boxwrap{
    float:left;
    width:370px;
}
ul.hoz {
    clear:both;
    list-style:none;
    margin:0 0 10px 15px;
    padding:0;
    clear:both;
}
.hoz li {
    display:inline
}
.footer {
    clear:both
}

h4 { font-family: sans-serif; }






.borderTable tr td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
}




</style>
</head>

<body>
<form>
  <table width="100%" height="130"  class="borderTable" >
    <tr>
      <td width="103">&nbsp;</td>
      <td width="147">&nbsp;</td>
      <td width="94">&nbsp;</td>
      <td width="113">&nbsp;</td>
      <td width="128">&nbsp;</td>
      <td width="142">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>About us </td>
      <td>Feedback</td>
      <td>Blog</td>
      <td>Subscriptions</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  
  
 
 <table width="100%">
  <tr>
    <td>Search
        <input type="text" name="textfield"> 
        Go</td>
    <td>User Name 
        <input type="text" name="textfield2">
        Password 
        <input type="text" name="textfield3">
		Login
		</td>
        
    <td>Sign Up</td>
  </tr>
</table>

 

  <div class="container">
  <div class="boxwrap">
  <div class="box2">
  
   <h3>Morbi in sem</h3>
   <ul>
   
	<li>Lorem ipsum dolor sit amet</li>
	<li>Aliquam tincidunt mauris eu risus</li>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Lorem ipsum dolor sit amet</li>

	<li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Lorem ipsum dolor sit amet</li>
    
	</ul>
	
   </div>
   <ul class="hoz">
                <li><a href="#">Lorem|</a></li>
                <li><a href="#">Lorem|</a></li>
                <li><a href="#">Lorem|</a></li>
                <li><a href="#">Lorem|</a></li>
				<li><a href="#">Lorem|</a></li>
            </ul>
        
   </div>



   <div class="box3">
    <object width="370" height="300">
<param name="movie" value="http://www.youtube.com/v/GwQMnpUsj8I&hl=en&fs=1">
</param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always">
</param><embed src=http://www.youtube.com/v/GwQMnpUsj8I&hl=en&fs=1 
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="370" height="300">
</embed></object>    
   </div>
 
  
  
  
  </div>

 
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  
   <div class="footer">
   This is my footer
  </div>
</form>
</body>
</html>

Question: I’m not sure how to go about it. Need help at this part.

The initial position of the list is controlled by the margin on the ul here.


ul.hoz {
    clear:both;
    list-style:none;
    margin:0 0 10px [B]10px;[/B]
    padding:0;
    clear:both;
}


Just adjust that to suit.

Hi!
If you want to add CSS to your site, but you can not because Google sites can not do that, or if you want add some unique text execute, but the “Your HTML either contains unsafe tags or extra attributes. They will be deleted when the page is browsed.” message, you may want to try this:
<div style=“insert css code here”>insert text that you wan’t the css code to apply to here</div>
It works, and Google sites let’s you add it.

Are you referring to the buttons?

you misunderstood my post . I want only the css working on the google search button. Please see the red arrow in the image.

Yes. exactly.

Css in the google search button is catchy . I like that.
I want to make such kind of small buttons in my page.So, “Lorem” in my page will be replaced by small button/tab which glares similar to google search button.

If you are simply talking about turning those links to look like buttons (rather than anything to do with the google search function and submit buttons) then you just need to float the anchors and apply the appropriate styling.
e.g.


.hoz li a{
    color:#000;
    text-decoration:none;
    background:#dedede;
    border:1px solid #cecece;
    border-bottom:2px solid #bbb;
    border-right:2px solid #bbb;
    float:left;
    padding:3px 10px;
    margin:3px 5px 3px 0;
}

If you wanted the gradient effect of the buttons then replace the background colour with a repeating gradient image instead.

On another matter I notice that you need display:inline in the following rule to clear the double margin bug in IE6.


.box2 {
    position:relative;
    width: 370px;
    float:left;
    margin:10px 0 1px 10px;
    background-color: #F9F9F9;
    border: 3px solid #000;
    color: #333;
   [B] display:inline;[/B]
}


This works.

If you wanted the gradient effect of the buttons then replace the background colour with a repeating gradient image instead.

whats the RGB of the image they are using ? I made a gradient image in photoshop

but this does not look like the gradient they are using …whats the RGB they are using ?

Not really a css question but just copy their image into your paint product and pick the colours from it.

It looks to me as the start color is #f1f1f1 and the stop color at the bottom is #dfdfdf and the border on the bottom of the image is #d7d7d7.

Use image attached and change the code to this.


.hoz li a{
    color:#000;
    text-decoration:none;
  [B]  background:#f1f1f1 url(images/fade.gif) repeat-x 0 100%;[/B]
    border:1px solid #cecece;
    border-bottom:2px solid #bbb;
    border-right:2px solid #bbb;
    float:left;
   [B] height:30px;
    line-height:30px;
    padding:0 10px;[/B]
    margin:3px 5px 3px 0;
}


brilliant … This worked as expected.

However, Can we shift the “Lorem” anchors a little bit left ? see the red dotted line I put . I want the anchors to start from there.

I see you already have left margin = 0 in the above , so I can not decrease that ( dont like negative margin).

any alternative to shift the anchors a little left ?

awesome . its working perfectly …you are a style guru definitely