http://www.csssnippets.be Snippets for you, snippets for me Wed, 23 Jun 2010 09:35:12 +0000 http://wordpress.org/?v=2.9 en hourly 1 http://www.csssnippets.be/2010/01/text-indent-op-submit-voor-ie6-7/ http://www.csssnippets.be/2010/01/text-indent-op-submit-voor-ie6-7/#comments Sun, 17 Jan 2010 07:08:22 +0000 Mark http://www.csssnippets.be/?p=719 Tekst values op een submit button zou je willen verbergen als je de submit knop wilt vervangen door een afbeelding, met text-indent kan je voor alle browsers de tekst-valu verbergen, bij Internet Explorer 6 & 7 lukt dit niet, hiervoor is nu een oplossing:

HTML

<input type="submit" class="knop" value="Submit" />

CSS

form input.knop {
text-indent:-9999px; /* Voor alle browsers */
font-size:0; /* Voor alle IE 6&7 */
line-height:0; /* Voor alle IE 6&7 */
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2010/01/text-indent-op-submit-voor-ie6-7/feed/ 0 http://www.csssnippets.be/2009/05/puur-en-zuiver-formulier-template/ http://www.csssnippets.be/2009/05/puur-en-zuiver-formulier-template/#comments Mon, 18 May 2009 11:00:11 +0000 Mark http://www.csssnippets.be/?p=222 Nog een eenvoudig formulier template, zo zuiver dat er alleen het nodige aan elementen inzit, want meer heb je niet nodig om een formulier er goed te laten uitzien.

HTML

<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Formulier</h1>
<p>Eenvoudig en zuiver formulier</p>
<label>Naam
<span class="small">Geef uw naam</span>
</label>
<input type="text" name="name" id="name" />
<label>Email
<span class="small">Geef een valide adres</span>
</label>
<input type="text" name="email" id="email" />
<label>Paswoord
<span class="small">Min. 6 chars</span>
</label>
<input type="text" name="password" id="password" />
<button type="submit">Verstuur</button>
<div class="spacer"></div>
</form>
</div>

CSS

body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- Mijn Formulier ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
border: none;
color:#FFF;
font-size:11px;
font-weight:bold;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2009/05/puur-en-zuiver-formulier-template/feed/ 1 http://www.csssnippets.be/2009/05/eenvoudig-formulier-template/ http://www.csssnippets.be/2009/05/eenvoudig-formulier-template/#comments Wed, 06 May 2009 08:05:41 +0000 Mark http://www.csssnippets.be/?p=199 Een contact formulier is tegenwoordig zeer belangrijk in elke website, ze maken is normaal gezien geen probleem. Maar het formulier goed doen uitzien verlangt enig talent.
Door enkele eenvoudige CSS regels toe te passen kan je jouw formulier er “kick-ass” doen uitzien.

HTML

<div id="wrapper">
<form action="index.html" method="post">
<fieldset>
<legend>Contact Form</legend>
<p>Please fill in your details</p>
<ul>
<li><label for="name">Name <span>* Required</span></label></li>
<li><input type="text" id="name" name="name"/></li>
<li><label for="email">Email <span>* Required</span></label></li>
<li><input type="text" id="email" name="email"/></li>
<li><label for="url">Url</label></li>
<li><input type="text" id="url" name="url"/></li>
</ul>
<ul>
<li><label for="message">Message <span>* Required</span></label></li>
<li><textarea name="message" id="message" cols="20" rows="5"></textarea></li>
</ul>
<input type="submit" class="button" name="submit" value="Send"/>
<input type="reset" class="reset" value="Clear"/>
</fieldset>
</form>
</div>

CSS

body {
	font-family: Georgia, serif;
}
#wrapper {
	width:400px;
	margin: 0 auto;
	position: relative;
}
fieldset {
	border:1px solid #E8E8E8;
	padding: 10px;
	margin: 10px;
	width:300px;
}
legend {
  border: 1px solid #E8E8E8;
  padding:5px 15px;
}
p {
  font-size: 1.2em;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
	margin:10px 0;
	display:block;
}
li input, textarea {
	height:15px;
	padding:5px;
	border:1px solid #E8E8E8;
	width:288px;
}
textarea {
	font-family: Arial, sans-serif;
	font-size: 12px;
	height:150px;
}
span {
	color: #AC0000;
	font-size: 10px;
}
.button {
	border:1px solid #E8E8E8;
	padding:5px 10px;
	margin:0 5px 0 0;
	cursor: pointer;
	background: #AC0000;
	color: #FFF;
}
.reset {
	border:none;
	padding:5px 10px;
	margin:0 5px 0 0;
	cursor: pointer;
	background: #FFF;
	color: #AC0000;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2009/05/eenvoudig-formulier-template/feed/ 4 http://www.csssnippets.be/2009/04/formulier-zonder-tabellen/ http://www.csssnippets.be/2009/04/formulier-zonder-tabellen/#comments Sat, 04 Apr 2009 16:03:26 +0000 Mark http://www.csssnippets.be/?p=152 Tabellen dienen niet voor bijvoorbeeld een formulier structuur te geven, maar voor data die tabulair dient weer te geven te worden. Dus hier een manier om je formulier te stylen, zonder tabellen.

HTML

<form action="post">
 <p>
  <label for="name">Name</label>
  <input id="name" name="name" />
 </p>
 <p>
  <label for="address">Address</label>
  <input id="address" name="address" />
 </p>
 <p>
  <label for="city">City</label>
  <input id="city" name="city" />
 </p>
 </form>

CSS

label,input  {
display:  block;
width:  150px;
float:  left;
margin-bottom:  10px;
}
label  {
text-align:  right;
width:  75px;
padding-right:  20px;
}
p  {
clear:  left;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2009/04/formulier-zonder-tabellen/feed/ 0 http://www.csssnippets.be/2008/11/button-als-een-link/ http://www.csssnippets.be/2008/11/button-als-een-link/#comments Sat, 15 Nov 2008 12:59:14 +0000 Mark http://www.csssnippets.be/?p=28 Als je om een of andere reden een submit button van een formulier moet/wenst weer te geven als een normale link, moet je volgende code gebruiken:

HTML

<input type="submit" class="submit" value="Submit Form" />

CSS

.submit {
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #00F;
  border-left: 0;
  color: #00F;
  display: inline;
  margin: 0;
  padding: 0;
  cursor: pointer; /* IE does not display a pointer */
}

*:first-child+html .submit { /* hack needed for IE 7 */
	border-bottom: 0;
	text-decoration: underline;
}

* html .submit {	/* hack needed for IE 5/6 */
	border-bottom: 0;
	text-decoration: underline;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2008/11/button-als-een-link/feed/ 0