SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to style a search bar like Apple.com

    I am trying to figure out how to style a search bar like Apple.com. Is there any tutorials or such out there that maybe I could follow? I don't need the fancy search as you go drop down, I just want the actual style as you see before you activate it?

  2. #2
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been working on this a little...so far a I kinda have it but I can't figure out how to get my searchfield-capright.jpg to close the box. IE6 blows up the page, and Safari keeps its default styling on the input field. Any suggestions?

    Example

    Code CSS:
    /* GLOBAL SEARCH */
    #globalsearch { 
    	margin: 0;
    	padding: 0;
    	width: 248px; 
    	height: 25px; 
    	position: relative; 
    	float: right; 
    	background: url(../layout/searchfield-capleft.jpg) top left no-repeat; 
    }
     
    #fancysearch {
    	padding: 7px 0 0 0;
    	font-size: .6em;
    	position: relative;
    	width: 196px;
    	height: 25px;
    	left: 29px;
    	border: 0;
    	background: url(../layout/searchfield-label-bg.gif) repeat-x;
    }
     
    #fancycap {
    	position: relative;
    	margin: 0;
    	padding: 0;
    	background: url(../layout/searchfield-capright.jpg) top right no-repeat; 
    	height: 25px;
    }

    Code HTML4Strict:
    <div id="globalheader">
    			<ul id="globalnav">
    				<li id="nav_about"><a href="#" title="Who is Fabral?">About</a></li>
    				<li id="nav_residential"><a href="#" title="Residential Products">Residential</a></li>
    				<li id="nav_postframe"><a href="#" title="Post Frame Products">Post Frame</a></li>
    				<li id="nav_archcomm"><a href="#" title="Architectural &amp; Commercial Products">Architectural &amp; Commercial</a></li>
    				<li id="nav_colorvis"><a href="#" title="Stylize Your Building of Choice">Color Visualizer</a></li>
    				<li id="nav_tech"><a href="#" title="Need Technical Specifications?">Technical</a></li>
    				<li id="nav_news"><a href="#" title="Latest Headlines From Fabral">News</a></li>
    				<li id="nav_corpinfo"><a href="#" title="Information On The Company">Corporate Information</a></li>
    			</ul>
    			<div id="globalsearch">
    				<form action="#" method="POST">
    					<label><span id="fancycap"><input type="text" id="fancysearch" name="q" accesskey="s"></span></label>
    				</form>
    			</div>
    			<div class="clear">&nbsp;</div>
    		</div>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •