Cambiar posición h3

[rodrypaladin]

Hola foro vecino. Vengo a vosotros expertos del css ( pelota ) con esta duda.

como véis en esta imagen http://i.imgur.com/JlJgLYD.jpg el h3 no me lo coloca en debajo como pretendo.

El primero h3 "Sobre tu físico" está bien colocado, luego muestro una tabla, la cierro y meto otro h3 y seguidamente otra tabla. pero el 2º h3 me lo coloca a la derecha.

La estructura que necesito es:

<h3>
<tabla>
<h3>
<tabla>

Y que lo vaya colocando así en vertical.

os dejo todo mi código css por si algo entra en conflicto.

Código CSS:

body {
    background: url("fondo.jpg");
    font-family: Arial, Helvetica, Verdana;
}
 
.contenedor {
    width: 900px; /* Aquí controlas el ancho total del contenido (puedes usar porcentajes o cualquier otra medida */
    margin: auto; /* centra el contenedor */
}
 
h1 {
    text-align: center;
    font-size: 45px;
    text-shadow: 0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #028efa,
                   0 0 70px #028efa,
                   0 0 80px #028efa,
                   0 0 100px #028efa,
                   0 0 150px #028efa;
}
 
h2 {
    text-align: center;
    font-size: 20px;
    margin-top: 10px;
    text-shadow: 0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #028efa,
                   0 0 70px #028efa,
                   0 0 80px #028efa,
                   0 0 100px #028efa,
                   0 0 150px #028efa;
}
 
h3 {
    text-align: left;
    font-size: 20px;
    margin-bottom: -10px;
    margin-top: -10px;
 
}
.formulario {
    padding: 20px;
    background-color: black;
    color: white;
    box-shadow: 0 0 20px 5px #028efa; /* igual que antes, jugar con los valores */
    overflow: hidden; 
}
 

[MaNuX0218]

Prueba con:

Código CSS:

h3 {
    clear:both;
    text-align: left;
    font-size: 20px;
    margin-bottom: -10px;
    margin-top: -10px;
 
}
 

[rodrypaladin]

Ha funcionado, gracias.

Por otro lado, ¿ Hay alguna forma de dar propiedades css a elementos de un formulario ??

Por ejemplo que a los input radio tengan un espacio de 5px a la izquierda o lo mismo a los select..

[pzin]

Simplemente especifica en el selector que quieres alterar tal o cual elemento y usas el selector de atributo:

Código CSS:

/* todos los input */
input {
  margin-left: 5px;
}
 
/* Sólo los que sean de tipo radio */
input[type=radio] {
  margin-left: 5px;
}
 
/* todos los select */
select {
  margin-left: 5px;
}
 

[rodrypaladin]

Gracias @pzin.

Voy aprovechando el post para preguntar pqueñas cosas.

Se puede realizar en css para que muestre texto al pasar el raton por encima de otro texto ??

[pzin]

Iniciado por rodrypaladin

Gracias @pzin.

Voy aprovechando el post para preguntar pqueñas cosas.

Se puede realizar en css para que muestre texto al pasar el raton por encima de otro texto ??

Si. Siempre y cuando sean elementos hermanos posteriores, o descendientes de hermanos posteriores.

Algo así:

Código HTML:

<span class="hola">¿Cómo te llamas?</span>
<span class="yo">Rodry!</span>
 

Código CSS:

.yo {
  display: none;
}
 
.hola:hover + .yo {
  display: block;
}
 

O si es un hermano más lejano:

Código HTML:

<span class="hola">¿Cómo te llamas?</span>
<p>Yo aparezco porque si</p>
<p>Ninoni</p>
<span class="yo">Rodry!</span>
 

Código CSS:

.yo {
  display: none;
}
 
.hola:hover ~ .yo {
  display: block;
}
 

O metiéndole dentro de un contenedor y ya lo puedes poner donde quieras dentro del contenedor:

Código HTML:

<div>
  <p class="yo">Rodry!</p>
  <p>¿Cómo te llamas?</p>
</div>
 

Código CSS:

.yo {
  display: none;
}
 
div:hover .yo {
  display: block;
}
 

[MaNuX0218]

Si es posible, te pongo un ejemplo:

Código CSS:

.texto:before {
content:"Texto Normal";
padding:0 auto;
font-famiy:Helvetica;
text-align:Center;
font-size:60px;
color:#261D1D; 
}
 
texto:hover:before {
content:"Texto Cambiado";
padding:0 auto;
font-famiy:Helvetica;
text-align:Center;
font-size:60px;
}
 

Código HTML:

<p class="texto"></p>
 

Lo importante de esto es que tiene que tener "before" y sustituir el texto en content.

Espero te sirva.

Saludos.