strambotica creativitat web


Valid XHTML 1.0! Vostè està aquí >>CSS:
Presentació CSS centrada de tres columnes
...(utilitza una DTD XHTML stricte) Composició centrada optima per internet explorer y Mozilla ...
Formularis i CSS
...( Elements de Formularis usats: <fieldset> i <legend> ) Aquest article mostra com aplicar fons personalitzats als formularis del HTML, mentre conserva el marcatge net i accesible. ...
Crear un menú horitzontal
...(Elements HTML <ul> - <li>) ...

Formularis

elements d'aportació|entrada <input> personalitzats

Personal information




Content form


Codi HTML

<form method="post" action="#">
<fieldset>
<legend>Personal information</legend>

<label for="name">Name:</label><br />
<input type="text"  id="name" name="name"  />
<br />
<label for="email">Email:</label><br />
<input type="text" id="email" name="email" /><br/>
<label for="website">Website:</label><br />
<input type="text" id="website" name="website" value="http://" />

</fieldset>


<fieldset>
<legend>Content form </legend>
<label for="comment">Comment:</label><br />
<textarea cols="30" rows="15" name="comment" id="comment">
</textarea>
<br /><label for="submit">&nbsp;</label><br />
<input id="submit" name="submit" type="submit" value="submit" />
</fieldset>
</form>

Codi CSS

 form { background-color:#fff; 
 border: 1px dashed #666699; 
 padding: 5px; 
font-family:courier, monospace; 
}

input {border:1px solid #666; background-color:#f9f9f9;}
textarea {border:1px solid #666; background-color:#f9f9f9; width:100%;}

Llistes

Crear un menú horitzontal

En aquest exemple, deixem l'element ul(llista) i l'element a (enllaç) flotar a l'esquerra. Els elements de li es mostraran com elements inline (seguits, sense un salt de línia). Això força la llista a ser en una línia recta. L'element ul té una amplada d'un 100% i cada hyperlink en la llista té una amplada de 6em (6 vegades la mida de la font actual). Afegim alguns colors i vores per fer-ho més elegant. 


<html>
<head>
<style type="text/css">
ul
{
font-family:verdana;
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:#ffdd00;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ffcc00}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>



</body>
</html>