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">
<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"/>
</form>
<br/>
<p><a href="">Forgot your password?</a></p>
</div>
<div class="headline_box"><h5>Search</h5></div>
<div>
<form>
<p><input class="text_input" type="text" value=" People, clubs, articles"/></p>
<input class="btn_purple" type="submit" value="Search"/>
</form>
<br/>
</div>Standard, basic form, and the CSS:
input, textarea{
color:#aa0054;
border: 1px #2d3138 solid;
font-size:12px;
background: url("images/input_bkg.jpg") repeat;
}
.text_input{
height:20px;
width:200px;
padding-top: 3px;
}
.btn_purple{
background: #2d3138 url("images/purble_gradient_btn.jpg") no-repeat;
height:26px;
width:87px;
color:#fff;
font-size:16px;
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>img{
border: 0;
}
.ad_front_right{ margin-bottom: 10px; }