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






  1. HTML / CSS
  2. CSS Controls
  3. 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; 
}

a {
  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;
}

p {  
  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.gif) no-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.gif) no-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.gif) no-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.gif) no-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