[SOLUCIONADO] dudas sobre css

Vizored · #1 (**permalink**) 10/06/2015, 12:04

hola

tengo unas dudas sobre css y son:

como puedo centrar los elementos con divs? (no puedo utilizar tablas )

como podria al posicionar en un input que salga un color rojo punteado? ( en usuario)

y como centro el fieldset?

os pongo lo que tengo hecho:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Informacion sobre el producto</title>
<link rel="stylesheet" type="text/css" href="formulario2.css" media="screen" />
<style type="text/css">
form{
width:45%;
}
form fieldset#datos{
background-color:burlywood;
}
form fieldset#idiomas{
background-color:coral;
}

</style>
</head>
<body>
<h1> REGISTRO USUARIOS </h1>
<form action="mailto:[email protected]" enctype="text/plain">
<fieldset id="datos">
<legend>Datos Usuario</legend>
<table>
<tr>
<td><label for="usuario">Usuario</label></td>
<td><input type="text" name="usuario" id="usuario" size="10"/></td>
</tr>
<tr>
<td><label for="contrasena">Contrase&ntildea</label></td>
<td><input type="password" name="contrasena" id="contrasena" size="10"/></td>
</tr>
<tr>
<td><label for="repetir">Repetir contrase&ntildea</label></td>
<td><input type="password" name="repetir" id="repetir" size="10"/></td>
</tr>
<tr>
<td><label for="nombre">Nombre</label></td>
<td><input type="text" name="nombre" id="nombre" size="30" /></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" name="email" id="email" size="30" /></td>
</tr>
<tr>
<td><label for="telefono">Tel&eacutefono</label></td>
<td><input type="text" name="telefono" id="telefono" size="30" /></td>
</tr>
<tr>
<td><label for="provincia">Provincia</label></td>
<td>
<select name="provincia" id="provincia">
<option value="alicante"> Alicante</option>
<option value="valencia" selected="selected">Valencia</option>
<option value="castellon"> Castellon</option>
</select>
</tr>
<tr>
<td><label for="observaciones">Observaciones</label></td>
<td><textarea name="observaciones" id="observaciones"></textarea></td>
</tr>
<tr>
<td><label for="documento">Documento</label></td>
<td><input type="file" id="documento"/></td>
</tr>
</table>
<p>
Estudios <br />
<label><input type="radio" name="estudios" value="eso"/> ESO</label> <br />
<label><input type="radio" name="estudios" value="bachillerato"/> Bachillerato</label> <br />
<label><input type="radio" name="estudios" value="grado"/> Grado</label>
</p>
<p>
Estudios Postgrado <br />
<label><input type="checkbox" name="postestudios" value="master"/> Master de Secundaria</label> <br />
<label><input type="checkbox" name="postestudios" value="doctorado"/> Doctorado</label>
</p>
</fieldset>
<fieldset id="idiomas">
<legend>Idiomas</legend>
<label>
Ingles
<select name="nivelingles">
<option value="a2">A2</option>
<option value="b1" selected="selected">B1</option>
<option value="b2">B2</option>
<option value="c1">C1</option>
<option value="c2">C2</option>
</select>

</label> <br />
<label>
Valencia
<select name="nivelingles">
<option value="elemental">Nivell Elemental</option>
<option value="intermedio" selected="selected">Nivell Intermedi</option>
<option value="avanzado">Nivell Avançat</option>
</select>
</label>
<p><label for="conocimientos">Conocimientos escala</label></p>
<input type="range"min="1" max="10" id="conocimientos" name="conocimientos">
</label>
</fieldset>
<button type="submit">Enviar</button> <button type="reset">Borrar</button>
<form>

<br>
<table>
<tr>

</tr>
</body>
</html>

muchas gracias =)

pzin · #2 (**permalink**) 10/06/2015, 12:10

Para centrar elementos en bloque usa márgenes laterales automáticos: margin: auto
Para centrar elementos en linea o en bloque de linea centra el contenido de su contenedor: text-align: center

Cuando publiques código usa la opción highlight para que se vea bonito. Por conservarnos los ojos, más que nada.

Vizored · #3 (**permalink**) 10/06/2015, 12:18

Cita:

Iniciado por pzin

Para centrar elementos en bloque usa márgenes laterales automáticos: margin: auto
Para centrar elementos en linea o en bloque de linea centra el contenido de su contenedor: text-align: center

Cuando publiques código usa la opción highlight para que se vea bonito. Por conservarnos los ojos, más que nada.

ok , lo pondre a la prox vez XD

aunque el highlight no se donde ponerlo...

va en style?

pd: sobre las preguntas que he hecho... , sabes algo?

AngelKrak · #4 (**permalink**) 10/06/2015, 13:33

como puedo centrar los elementos con divs? (no puedo utilizar tablas )
Como te dijo pzin con Margin ;)

como podria al posicionar en un input que salga un color rojo punteado? ( en usuario)
Con un border dashed

y como centro el fieldset?
igual con Margin ;)

Código:

Código CSS:

Ver originalform {
  margin: 0 auto;
}
 
input#usuario{
  border: dashed 3px red;
}

http://codepen.io/AngelKrak/pen/KpqNqB

Vizored · #5 (**permalink**) 10/06/2015, 15:46

Cita:

Iniciado por AngelKrak

como puedo centrar los elementos con divs? (no puedo utilizar tablas )
Como te dijo pzin con Margin ;)

como podria al posicionar en un input que salga un color rojo punteado? ( en usuario)
Con un border dashed

y como centro el fieldset?
igual con Margin ;)

Código:

Código CSS:

Ver originalform {
  margin: 0 auto;
}
 
input#usuario{
  border: dashed 3px red;
}

[url]http://codepen.io/AngelKrak/pen/KpqNqB[/url]

vaya , pues no era tan dificil ...

muchas gracias ^^

fede5426 · #6 (**permalink**) 10/06/2015, 19:13

Para que el borde cambie al posicionar el cursor en el input, se usa :focus, y hay dos opciones, una es usar un borde punteado como indicó AngelKrak, la otra es modificar el outline:

Código HTML:

Ver original<input type="text" class="mod-outline" />
 
<input type="text" class="mod-borde" />

Código CSS:

Ver original.mod-outline:focus{
    outline-color: #ff0000;
    outline-style: dotted;
    outline-width: 2px;
}
 
.mod-borde:focus{
    border: 2px dotted #ff0000;
}

http://codepen.io/fede5426/pen/vOZxmw

Las dos formas funcionan, pero hay algunos navegadores que tienen un outline de color celeste por defecto, y si usas la opción de modificar el borde cuando hace focus, no solo se va a ver el borde rojo en linea de puntos sino también el borde celeste. Yo te recomiendo modificar el outline.

Y por cierto, dashed genera un borde de lineas entrecortadas, dotted es para la linea punteada.

Otra cosa, el Highlight es esto:

Sirve para resaltar el código y que sea más legible. Clickeas en la opción que necesites y se van a generar unas etiquetas, entre esas etiquetas pegas el código y se ve como mi ejemplo más arriba.

Saludos