Search box layout : Seach box « CSS Controls « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » CSS Controls » Seach box 




Search box layout
  
<!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" xml:lang="pl" lang="pl">
<head>
  <meta name="author" content="Luka Cvrk (www.solucija.com)" />
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
<style type='text/css'>
/* project: internet center template
   author: luka cvrk (www.solucija.com) */

   
/* default styles
   -------------- */
   
body 
  padding: 0
  margin: 0
  font: 0.7em Arial, sans-serif; 
  line-height: 1.5em;
  background: #fff; 
  color: #454545
}

{
  color: #185DA0;
  background: inherit;
}

a:hover {
  color: #9EC068;
  background: inherit;  
}

a.title {
  color: #FE6700;
  background: #FFF;
}

h1 {
  font: bold 2em Arial, Sans-Serif;
  letter-spacing: -1px; 
  padding: 7px 0 0 8px;
  margin: 0;
}

h1 a, h2 a {
  text-decoration: none;
}

h1 a:hover, h2 a:hover {
  color: #FF6600;
  background: #FFF;
}


h2 
  margin: 0
  padding: 0
  font: bold 1.7em Arial, Sans-Serif; 
  letter-spacing: -1px;
}

h2 
  font-size: 16px;
  margin-bottom: 5px; 
  color: #000
  background: inherit;
}

{  
  margin: 0 0 5px 0;
  
}

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

form 
  margin: 0
}

input.search 
  width: 199px; 
  border: none;
  background: url(Internet-Center-images/input.gif)
  padding: 4px; 
}

input.login 
  width: 150px;
  border: none; 
  background: url(Internet-Center-images/logininput.gif)
  padding: 4px; 
}

/* layout
   ------ */

.content 
  margin: 10px auto;
  width: 760px; 
}

.header 
  height: 45px; 
}

.top_info {
  float: right;
  width: 570px;
  padding: 0 0 4px 0;
  border-bottom: 1px solid #eee;
}

  .top_info_left {
    width: 240px;
    float: left;
  }

  .top_info_right {
    float: right;
    width: 290px;
    padding: 0 0 0 35px;
    border-left: 1px solid #eee;
  }

.slogan {
  font-size: 0.9em;
  width: 160px;
}


.bar 
  clear: both;
  font-size: 1.1em;
  height: 30px; 
  margin: 0 0 0 0px; 
}

  .bar li 
    margin: 0
    padding: 4px 10px 8px 10px;
    color: #808080;
    background: #FFF;
    float: left; 
  }
  
  .bar li.active 
    background: #FFF url(Internet-Center-images/bar.gifno-repeat center bottom; 
    color: #9EC068;
    font-weight: bold; 
    padding-bottom: 8px; 
  }

  .bar a 
    font-weight: bold;
    color: #4A8EBC; 
    background: inherit;  
  

.search_field 
  background: #DCF2B8 url(Internet-Center-images/barbg.gifno-repeat; 
  color: #000;
  border-top: 1px solid #9EC068;
  border-bottom: 1px solid #9EC068;
  clear: both;
  text-align: center; 
  padding: 10px 0 5px 0;
}

.subheader {
  margin: 3px 0 10px 0;
  padding: 8px;
  background: #f4f4f4 url(Internet-Center-images/subheaderbg.gifno-repeat;
  color: #808080;
  border-bottom: 1px solid #ccc;
}

/* left side
   --------- */

.left {
  float: left;
  width: 435px;
  margin: 0 0 10px 0;
}
  .left_articles {
    margin: 0px 0 10px 0;
  }

  .left_links {
    border: 1px solid #eee;
    padding: 10px 10px 10px 15px;  
    margin: 0 0 10px 0;
  }
  
  .left_links:hover {
    border: 1px solid #ccc;
  }
  
  .left_message {
    border: 1px solid #eee;
    padding: 10px 10px 10px 75px;  
    margin: 0 0 10px 0;
    background: #fff url(Internet-Center-images/questionmark.gifno-repeat center left;
    color: #454545
  }
  
  .left_message:hover {
    border: 1px solid #ccc;
  }
  
    .left_side {
      float: left;
      width: 180px;
    }
    
    .right_side {
      float: right;
      width: 200px;
      border-left: 1px solid #eee;
      padding: 0 0 0 20px;
    }
    
  .left_box {
    background: #f4f4f4;
    color: #000;
    border: 1px solid #ccc;
    padding: 10px;
  }
  
/* right side
   ---------- */
    
.right {
  float: right;
  width: 310px;
  margin: 0 0 10px 0;
}

  .right_login {
    padding: 10px;
    margin: 0 0 10px 0;
    background: #A9D4F2;
    color: #246088;
    border-top: 1px solid #4A8EBC;
    border-bottom: 1px solid #4A8EBC;
  }

  .right_articles {
    border: 1px solid #eee;
    padding: 8px;  
    margin: 0 0 10px 0;
  }
  
  .right_articles:hover {
    border: 1px solid #ccc;
  }
    
.image {
  float: left;
  margin: 0 9px 3px 0;
}

/* footer
   ------ */

.footer 
  clear: both; 
  text-align: center;
  line-height: 1.8em;
  color: #808080;
  background: #FFF;
  padding: 10px 0 10px 0;
  border-top: 1px solid #eee;
}

.footer a {
  color: #9EC068;
  background: #fff;
}
</style>


  <title>Internet Center</title>
</head>
<body>
  <div class="content">
    <div class="header">
      <div class="top_info">
        <div class="top_info_right">
          <p><b>You are not Logged in!</b> <a href="#">Log in</a> to check your messages.<br />
          Do you want to <a href="#">Log in</a> or <a href="#">register</a>?</p>
        </div>    
        <div class="top_info_left">
          <p>Today is: <b>27th January, 2006</b><br />
          Check todays <a href="#">hot topics</a> or <a href="#">new products</a></p>
        </div>
      </div>
      <div class="logo">
        <h1><a href="#" title="Centralized Internet Content">Internet Center</a></h1>
      </div>
    </div>
    
    <div class="bar">
      <ul>
        <li class="slogan">Centralized Internet Content</li>
        <li><a href="#" accesskey="i">Internet</a></li>
        <li class="active">People</li>
        <li><a href="#" accesskey="m">Music</a></li>
        <li><a href="#" accesskey="p">Pictures</a></li>
        <li><a href="#" accesskey="s">Services</a></li>
        <li><a href="#" accesskey="r">Products</a></li>
      </ul>
    </div>
    <div class="search_field">
      <form method="post" action="?">
        <p><input type="text" name="search" class="search" /> <input type="submit" value="Search" class="searchSubmit" /></p>
      </form>
    </div>
    <div class="subheader">
      <p><a href="#">Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
    </div>
    <div class="left">
      <div class="left_articles">
        <h2><a href="#">What's new?</a></h2>
          <p><a href="#">Lorem ipsum dolor sit amet</a>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">Ut wisi enim ad minim veniam</a>, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
          <p><a href="#">Lorem ipsum dolor sit amet</a>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">Ut wisi enim ad minim veniam</a>, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
      </div>
      <div class="left_links">
        <div class="left_side">
          <p><b><img src="images/arrow.gif" alt=">" /><a class="title" href="#">Arts</a></b><br />
          <a href="#">Music</a>, <a href="#">Television</a>, <a href="#">Movies</a>...</p>
          <p><b><img src="images/arrow.gif" alt=">" /><a class="title" href="#">Computers</a></b><br />
          <a href="#">Internet</a>, <a href="#">Software</a>, <a href="#">Hardware</a>...</p>
          <p><b><img src="images/arrow.gif" alt=">" /><a class="title" href="#">Shopping</a></b><br />
          <a href="#">Autos</a>, <a href="#">Clothing</a>, <a href="#">Gifts</a>...</p>
        </div>
        <div class="right_side">
          <p><b><img src="images/arrow.gif" alt=">" /><a class="title" href="#">Business</a></b><br />
          <a href="#">Jobs</a>, <a href="#">Real Estate</a>, <a href="#">Investing</a>...</p>
          <p><b><img src="images/arrow.gif" alt=">" /><a class="title" href="#">Health</a></b><br />
          <a href="#">Fitness</a>, <a href="#">Medicine</a>, <a href="#">Alternative</a>...</p>
          <p><b><img src="images/arrow.gif" alt=">" /><a class="title" href="#">Sports</a></b><br />
          <a href="#">Baseball</a>, <a href="#">Basketball</a>, <a href="#">Soccer</a>...</p>
        </div>
        <p><b>Want to <a href="#">suggest a category</a>?</b></p>
      </div>
      <div class="left_message">
        <p><b>Lorem ipsum dolor</b> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <b>erat volutpat</b>. Ut wisi enim ad minim veniam, quis nostrud exerci.</p>
      </div>
      <div class="left_box">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
        
      </div>
    </div>  
    <div class="right">
      <div class="right_login">
        <form method="post" action="?">
          <p>Username: <input type="text" name="search" class="login" /> @email.com </p>
          <p>Password: <input type="password" name="search" class="login" /> <input type="submit" value="Login" class="searchSubmit" /></p>
        </form>
      </div>
      <div class="right_articles">
        <p><img src="images/image.gif" alt="Image" title="Image" class="image" /><b>Lorem ipsum dolor sit amet</b><br />consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
      </div>
      <div class="right_articles">
        <p><img src="images/image.gif" alt="Image" title="Image" class="image" /><b>Lorem ipsum dolor sit amet</b><br />consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
      </div>
      <div class="right_articles">
        <p><img src="images/image.gif" alt="Image" title="Image" class="image" /><b>Lorem ipsum dolor sit amet</b><br />consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
      </div>
    </div>  
    <div class="footer">
      <p><a href="#">RSS Feed</a> | <a href="#">Contact</a> | <a href="#">Accessibility</a> | <a href="#">Products</a> | <a href="#">Disclaimer</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a><br />
      &copy; Copyright 2006 Internet Center, Design: Luka Cvrk - <a href="http://www.solucija.com/" title="What's your solution?">Solucija</a><span lang="en-au"
      - <a href="http://www.ehostinfo.com/">Web Hosting</a></span></p>
    </div>
  </div>
</body>
</html>

   
    
  














Related examples in the same category
1.Seach box floating right
2.Adding search to the header
3.Search box 2
4.Search box at the top
5.Search box inside sidebar
6.Search box bar with image background
7.Search box inside sidebar 3
8.Search box
9.Search box 3
10.Search box style
11.Search box with border
12.Search box 4
13.Search box and button
14.Large and wide search box
15.Grey style search box inside left section bar
16.Search box at the top 2
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.