Right column content CSS and HTML

Update: Paceville.com is now online.

Here we have a login form, search form and a list of advertisements.

The text fields in the forms will need to have tiling background image, custom border and custom formatted text (purple).

The buttons will need to have a background image, custom border and custom formatted text (big, white).

Demo here.

Let’s start with the login form:

<div class="login_form">
		<p><input class="text_input" type="text" value=" Username"/></p>
		<p><input class="text_input" type="text" value=" Password"/></p>
		<input class="btn_purple" type="submit" value="Login"/>
		<input class="btn_purple" type="submit" value="Register"/>
	<p><a href="">Forgot your password?</a></p>
<div class="headline_box"><h5>Search</h5></div>
		<p><input class="text_input" type="text" value=" People, clubs, articles"/></p>
		<input class="btn_purple" type="submit" value="Search"/>

Standard, basic form, and the CSS:

input, textarea{
	border: 1px #2d3138 solid; 
	background: url("images/input_bkg.jpg") repeat;

	padding-top: 3px;

	background: #2d3138 url("images/purble_gradient_btn.jpg") no-repeat; 
	font-weight: bolder; 
	padding-bottom: 5px;

Note the background color in btn_purple even though we set an image, that’s because I had inexplicable problems in IE7 with the border, somehow it didn’t work out until I set the background color too. I still have a 2 pixel wide border though which is annoying but I don’t know how to get rid of it, at least it’s in the same color (#2d3138).

Note the padding-top attribute, it’s there to push the text down towards the middle vertically. Same goes for the padding-bottom value in btn_purple but now we’re pushing upwards.

The ads are kids play now:

<div class="ad_front_right"><a href=""><img src="uploads/ad.jpg" /></a></div>
	border: 0;

.ad_front_right{ margin-bottom: 10px; }

Related Posts

Tags: ,