the art of lying just beyond the edge of respectability

Styling redundant blog elements with CSS (part 2)

Posted February 21, 2010 in Web Design | Comments 1

Part One of this tutorial covered styling a category blog list with CSS, and then applying some simple jquery to create stripes for definition. This portion of the tutorial will cover how we create a simple search field. Source files available at the bottom of the post.

Styling The Search Field

Onward to the search field. The initial set up for search field is fairly simple:

The HTML Markup

We've applied the id "searchbox" to our parent form element. The rest of the markup is wrapped inside of a <fieldset> tag. We will use the fieldset to help standardize the display of our form contents.

The Form Styles

h2.search{
 padding-left:40px;
 background:url("images/search_bg.gif") 0 0 no-repeat;
}

#searchbox{
 margin-bottom:25px; 
 padding:0;
}

The <h2> styles are covered in step one of this tutorial. For brevity, we will not be recovering them here. Lets focus on the #searchbox div. We've added a bit of a bottom margin to the form itself to separate it from any elements that will reside beneath it. The padding has also been zeroed out to provide consistency across browsers where possible.

#searchbox fieldset{
 width:300px; 
 padding:0; 
 margin:0;
}

Our fieldset element has been defined at 300 pixels wide (an arbitrary width we arrived at above for our category <ul> display). The default padding and margins of the fieldset have also been set to zero.

input{
 margin:0;
 padding:6px 0 0 0; 
 height:24px;
 font-size:10px;
 border:1px solid #dddddd; 
 float:left; 
}
input:focus{
 outline:none;
 background:#ebcac8; 
}

Since our inputs define both our search button and our search field, we need to clear out their default margins, so we set them to 0. Next we add some padding to the top of the inputs. This is what will center our text vertically within the input field. We have arrived at 6 pixels for our padding value because our height is set at 24 pixels and our goal height is 30 pixels. The logic here is that 6 pixels in padding on top + 24 pixels total in height will get us 30 pixels. Lastly we define a 1 pixel border around our input, and then we float our inputs left. This will allow them to line up when displayed on the page.

Our next style declaration is the :focus selector. This we set with an outline of none, to eliminate browsers from placing their default border around the active input field. We also change the background of the input field to a new color to denote it is active when I user clicks on it.

#searchbox input#seek{
 margin-right:5px;
 color:#999;
 width:223px;
 background:#FFF;
}

We set our right margin to 5 pixels (this will push our search button away from sitting flush against our search field as we will see later). We give the input text a color, and then define the width of the field at 223 pixels. Finally we define the background of the field as #FFF. NOTE adding a border around the field will increase both the width and height of our field by 2 pixels (1 pixel on the left, right, top and bottom). While our width was set at 223 pixels we need to assume the 1 pixel border on the left and right actually make our field 225 pixels wide. Now let's define the styles for our search button:

#searchbox input#searchbtn{
 width:68px;
 height:30px;
 padding:0;
 text-decoration:none;
 color:#FFF;
 font-weight:bold;
 text-align:center;
 background:#a50600;
 cursor:pointer;
}

The input in our sample markup has been given an id of "searchbtn". We use this id to style our form's search button. Our button is set at 68 pixels wide. Because of our border defined on the inputs, the button is actually 70 pixels wide (1 pixel on the left and right). We have selected 70 pixels as the total combined with because our <fieldset> can accommodate 300 pixels. We defined that width earlier in our fieldset style. Our search input field is 225 pixels wide with its border, and features a 5 pixel right margin. 225 + 5 + 70 = 300. Next we define a height for our button. Now the html behaves oddly here. Since our button is an input, it should inherit the height and padding from our input style. However, it is ignored. To work around this quirk we need to define the height at 30 pixels exactly. We also want to strip the padding from out input style from before, so we set the padding to 0. Our font color of the button is set to #FFF with a weight of bold. We want our text inside the button to sit in the center so we have set the text-align value to "center". Lastly want to give our button a background color to define it from the rest of the page, and make certain that the cursor is a pointer when a user rolls over the button.

Source Files

View Source Code

Share This Post

             

Comments

Comment on this entry

Name:

Email (will not be displayed):

Website:

Comments:

Enter the text from the image above: